renderer.domElement
// Continuously updates
{
while (true) {
cube.rotation.z += 0.01;
renderer.render(scene, camera);
stats.update();
yield null;
}
}
height = 600
cube = {
const material = new THREE.MeshNormalMaterial();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(geometry, material);
return cube;
}
{
const particles = amount;
const geometry = new THREE.BufferGeometry();
const positions = [];
const colors = [];
const color = new THREE.Color();
const n = 1000,
n2 = n / 2; // particles spread in the cube
for (let i = 0; i < particles; i++) {
// positions
const x = Math.random() * n - n2;
const y = Math.random() * n - n2;
const z = Math.random() * n - n2;
positions.push(x, y, z);
// colors
const vx = x / n + 0.5;
const vy = y / n + 0.5;
const vz = z / n + 0.5;
color.setRGB(vx, vy, vz);
colors.push(color.r, color.g, color.b);
}
geometry.setAttribute(
"position",
new THREE.Float32BufferAttribute(positions, 3)
);
geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
geometry.computeBoundingSphere();
//
const material = new THREE.PointsMaterial({ size: 5, vertexColors: true });
const points = new THREE.Points(geometry, material);
scene.add(points);
}
scene = {
button;
amount;
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
scene.add(cube);
return scene;
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 10000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(2000, 2000, -2000);
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
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;
}
stats = new Stats()
{
// Make sure THREE.js is correct
THREE.BufferGeometry;
THREE.Color;
THREE.Float32BufferAttribute;
THREE.WebGLRenderer;
THREE.PointsMaterial;
THREE.OrbitControls;
Stats;
return md`## THREE.js is checked`;
}
Stats = (await import("three/examples/jsm/libs/stats.module.js")).default
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.
