Embedding a notebook with reactive generators

Community Help
1

Hi, I ported a three.js example over to observablehq and tried to use generators for the mouse movement and the animation.

It does work on obersablehq but when embedding it, it looks like the generators are not running:

As a sidequestion: Is this style of using events / requestAnimations via an generator a good idea ? Somehow I always end up trying to use generators for everything on observablehq. But maybe the good old fashioned callbacks and eventhandler are the better way ?
I like to inspect what is going on, without using console.log or using a mutable.

1 Like
2

You are only embedding the canvas; you need to also embed the cells that affect the canvas indirectly. There’s quite a few here, so try this:

	<div id="observablehq-3bbbace9">
	  <div class="observablehq-canvas"></div>
	  <div class="hide observablehq-intersectionBehaviour"></div>
	  <div class="hide observablehq-animation"></div>
	  <div class="hide observablehq-geometry"></div>
	  <div class="hide observablehq-light"></div>
	</div>
	<script type="module">
	  import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
	  import define from "https://api.observablehq.com/@openscience/three-js-interactive-cubes.js?v=3";
	  (new Runtime).module(define, name => {
	    if (name === "canvas") return Inspector.into("#observablehq-3bbbace9 .observablehq-canvas")();
	    if (name === "intersectionBehaviour") return Inspector.into("#observablehq-3bbbace9 .observablehq-intersectionBehaviour")();
	    if (name === "animation") return Inspector.into("#observablehq-3bbbace9 .observablehq-animation")();
	    if (name === "geometry") return Inspector.into("#observablehq-3bbbace9 .observablehq-geometry")();
	    if (name === "light") return Inspector.into("#observablehq-3bbbace9 .observablehq-light")();
	  });
	</script>

Of course, you might want to use CSS to hide some of those DIVs. I just added the class hide to some of the DIVs and hid them from a style block.

Here it is in action:

1 Like
3

Moving the animation loop back inside the canvas cell does not yield the desired outcome.


So using https://observablehq.com/@jashkenas/handy-embed-code-generator I can see that I need canvas, geometry and light for it to work. Weirdly scene and camera is not needed.
1 Like
4

You don’t need scene or camera because they are already referred to explicitly in your code for canvas. That suggests that you might also get around this problem by referring to light and geometry in your code for canvas. Something like:

canvas = {
  geometry;
  light;
  const renderer = new THREE.WebGLRenderer({antialias: true});
  .....
}
5

that’s it. thanks!

1 Like
6

Mike’s Notebook Visualizer might also help you get a bird’s-eye view on your dependencies:

7

I was in the mode “Embed this cell” and done :slight_smile:
So it was kinda not doing what I was expect it to do.