Mathematician focused on teaching advanced mathematics in a "reconstuctive" way.
renderer.domElement
// Continuously updates
{
while (true) {
cube.rotation.z += 0.01;
renderer.render(scene, camera);
yield null;
}
}
THREE = {
const THREE = await import('three@0/build/three.module.js?module');
const oc = await import('https://unpkg.com/three@0/examples/jsm/controls/OrbitControls.js?module');
const MeshLineMaterial = require('three.meshline').MeshLineMaterial;
const extendedTHREE = { ...THREE, OrbitControls: oc.OrbitControls, MLM: MeshLineMaterial };
return extendedTHREE;
}
camera = {
const fov = 45;
const aspect = 500/500;
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;
}
cube = {
const material = new THREE.MeshNormalMaterial();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(geometry, material);
return cube;
}
scene = {
const scene = new THREE.Scene();
const light = new THREE.AmbientLight(0xFFFFFF, 1);
scene.add(light);
scene.background = new THREE.Color(0x001b42);
scene.add(cube);
const gridHelper = new THREE.GridHelper( 10, 5 );
scene.add( gridHelper );
const arrowHelper = new THREE.ArrowHelper( new THREE.Vector3(1,0,0), new THREE.Vector3(0,0,0), 2, 0xF00000 );
scene.add( arrowHelper );
const geometry = new THREE.SphereGeometry( .7, 32, 16 );
const material = new THREE.MLM();
const sphere = new THREE.Mesh( geometry, material ); scene.add( sphere );
return scene;
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500,500);
renderer.setPixelRatio(devicePixelRatio);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
return renderer;
}
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.
