Student of math, d3, svg, etc. Prototyper of visualizations for electronics design and test.
// Continuous updates
{
while (true) {
renderer.render(scene, camera);
yield null;
}
}
clipPlanes = [
new THREE.Plane(new THREE.Vector3(1, 0, 0), 0),
new THREE.Plane(new THREE.Vector3(0, -1, 0), 0),
new THREE.Plane(new THREE.Vector3(0, 0, -1), 0)
]
nestedSpheres = {
const group = new THREE.Group();
for (let i = 1; i <= 30; i += 2) {
const geometry = new THREE.SphereGeometry(i / 30, 48, 24);
const material = new THREE.MeshLambertMaterial({
color: new THREE.Color().setHSL(
Math.random(),
0.5,
0.5,
THREE.SRGBColorSpace
),
side: THREE.DoubleSide,
clippingPlanes: clipPlanes,
clipIntersection: clipIntersection
});
group.add(new THREE.Mesh(geometry, material));
}
return group;
}
helpers = {
const helpers = new THREE.Group();
helpers.add(new THREE.PlaneHelper(clipPlanes[0], 2, 0xff0000));
helpers.add(new THREE.PlaneHelper(clipPlanes[1], 2, 0x00ff00));
helpers.add(new THREE.PlaneHelper(clipPlanes[2], 2, 0x0000ff));
helpers.visible = false;
return helpers;
}
renderer = {
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
renderer.localClippingEnabled = true;
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
return renderer;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
const light = new THREE.HemisphereLight(0xffffff, 0x080808, 2.8);
light.position.set(-1.25, 2, 1.25);
scene.add(light);
scene.add(nestedSpheres);
scene.add(helpers);
return scene;
}
camera = {
const fov = 40; //45;
const aspect = width / height;
const near = 1;
const far = 200; //1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
//camera.position.set(2, 2, -2)
camera.position.set(-1.5, 2.5, 3.0);
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
THREE = {
const THREE = window.THREE = await require("three@0.130.0/build/three.min.js");
await require("three@0.130.0/examples/js/controls/OrbitControls.js").catch(() => {});
return THREE;
}
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.
