Published
Edited
Jan 2, 2019
10 stars
Insert cell
Insert cell
{
mesh.material.uniforms.thickness.value = thickness;
mesh.material.uniforms.control.value.fromArray(control);
return reusable3dCanvas(this);
}
Insert cell
thickness = (Math.sin(now / 1000) * 0.5 + 0.5) * 0.1 + 0.01
Insert cell
control = {
// Offset the control point a bit to demonstrate the curve
const angle = now / 1000 * 0.5 + Math.PI * 2;
const radius = (Math.sin(now / 1000) * 0.5 + 0.5) * 2.0;
return [Math.cos(angle) * radius, Math.sin(angle) * radius];
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function reusable3dCanvas( existingCanvas ) {
if ( existingCanvas ) {
existingCanvas.redraw3d()
return existingCanvas
} else {
const camera = new THREE.OrthographicCamera();
camera.left = -1
camera.right = 1
camera.top = -1
camera.bottom = 1
camera.near = -100
camera.far = 100
camera.updateProjectionMatrix()

const scene = new THREE.Scene()
scene.add(mesh)

const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(256, 256)

renderer.domElement.redraw3d = function() {
renderer.render( scene, camera )
}
return renderer.domElement
}
}
Insert cell
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