Published
Edited
Oct 8, 2020
Insert cell
Insert cell
Insert cell
Insert cell
viewof n = html`<input type=range min=0 max=100 step=1>`
Insert cell
scene = {
const scene = new THREE.Scene();
const material = new THREE.MeshNormalMaterial();

scene.background = new THREE.Color(0xffffff);
let offset = 0
let depth = 0.1
for(let i = 1; i < n; i++) {
let geometry = new THREE.BoxGeometry(1, 0.1, 1);
let c = new THREE.Mesh(geometry, material)
c.position.y = -i * depth
offset += 1/i
c.position.x = offset
scene.add(c);
}
return scene;
}
Insert cell
Insert cell
cube = {
const material = new THREE.MeshNormalMaterial();
const geometry = new THREE.BoxGeometry(1, 1, 2);
return new THREE.Mesh(geometry, material);
}
Insert cell
Insert cell
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(2, 2, -2)
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
Insert cell
Insert cell
height = 600
Insert cell
Insert cell
THREE = {
const THREE = window.THREE = await require("three@0.99.0/build/three.min.js");
await require("three@0.99.0/examples/js/controls/OrbitControls.js").catch(() => {});
return THREE;
}
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