The avatar for @jwolondon
Jo Wood
Professor of Visual Analytics interested in design, geovisualization, visual storytelling and computational thinking.
Public
three.js
Edited
Jul 27
Paused
Fork of Three.js: 2. Animating the scene
•
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
OrbitControls = import(
"three@0.178/examples/jsm/controls/OrbitControls.js"
).then((d) => d.OrbitControls)
Insert cell
Insert cell
Insert cell
Insert cell
renderer = {
const r = new THREE.WebGLRenderer({ antialias: true });
r.setSize(size.w, size.h);
r.setPixelRatio(devicePixelRatio);
r.setClearColor(0xfffef2);

// The code to add the orbital controls
const controls = new OrbitControls(camera, r.domElement);
controls.addEventListener("change", () => r.render(scene, camera));
invalidation.then(() => (controls.dispose(), r.dispose()));
// -------

// Because this example doesn't have any autonomous animation,
// render an initial scene so something is displayed before interaction
r.render(scene, camera);

return r;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`<div style="position: relative; width: 100%; height: ${size.h}px; padding-bottom:40px;">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">${renderer.domElement}</div>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;"><i>Drag pointer to rotate view</i></div>
</div>`
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more