Public
Edited
Jun 6, 2020
1 star
Insert cell
Insert cell
{
const renderer = new THREE.WebGLRenderer({antialias: true});
invalidation.then(() => renderer.dispose());
const height = 400;
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
while (true) {
for (const [ndx, cube] of cubes.entries()) {
const speed = 1 + ndx * 0.1;
const rot = 0.01 * speed;
cube.rotation.x += rot;
cube.rotation.y += rot;
}
renderer.render(scene, camera);
yield renderer.domElement;
}
}
Insert cell
camera = {
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 5;

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2.5;
return camera;
}
Insert cell
scene = {
const scene = new THREE.Scene();
const color = 0xffffff;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
scene.add(light);
for (const cube of cubes) {
scene.add(cube);
}

return scene;
}
Insert cell
cubes = {
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

function makeInstance(geometry, color, x) {
const material = new THREE.MeshPhongMaterial({ color });

const cube = new THREE.Mesh(geometry, material);

cube.position.x = x;

return cube;
}
return [
makeInstance(geometry, 0x44aa88, 0),
makeInstance(geometry, 0x8844aa, -2),
makeInstance(geometry, 0xaa8844, 2),
];
}
Insert cell
THREE = require("three@0.117.1/build/three.min.js")
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