Public
Edited
Dec 6, 2022
1 star
// Continuously updates
{
while (true) {
renderer.render(scene, camera);
yield null;
}
}
height = 600
material = new THREE.MeshNormalMaterial()
geometry = new THREE.BoxGeometry(1, 1, 1)
addCube = (x, y, z, spacing = 1) => {
const cube = new THREE.Mesh(geometry, material);
cube.position.x = x * spacing;
cube.position.y = y * spacing;
cube.position.z = z * spacing;
return cube;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
const points = pyramidPoints(1000000);
points.forEach((p) => {
scene.add(addCube(...p, 5));
});
return scene;
}
//pyramidPoints(10000000)
pyramidPoints = (pointsTotal) => {
let points = []; // a point is [x,y,z]
let n = Math.cbrt(pointsTotal); // Cube root of the total amount of points
//let pyramidTop = [0, 0, 0];
let cubed = n ** 3;
let leftover = (pointsTotal - cubed) / 4;
//return [n, cubed, leftover, pointsTotal];
for (let x = 0; x < n; x++) {
for (let y = 0; y < n - x; y++) {
for (let z = 0; z < n - x - y; z++) {
points.push([x, y, z]);
//if (i == cubed) break;
}
}
}
/*if (leftover > 0) {
for (let xl = leftover; xl < leftover; xl++) {
for (let yl = leftover; yl < leftover - xl; yl++) {
for (let zl = leftover; zl < xl - yl; zl++) {
points.push([xl, yl, zl]);
}
}
}
}*/
return points;
}
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(100, 0, 0);
//camera.rotation.set(0, 0, 100, "XYZ");
camera.lookAt(scene.position);
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;
}
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.
