renderer.domElement
renderer.render(scene, camera);
height = 600
rects = {
const material = new THREE.MeshLambertMaterial();
const rects = [];
for (var i = 2; i <= 8; i += .1) {
const geometry = new THREE.BoxGeometry(i, .3, .25);
const barre = new THREE.Mesh(geometry, material);
rects.push(barre);
}
return rects;
}
scene = {
const scene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper(5);
scene.background = new THREE.Color(0xffffff);
scene.add( axesHelper );
for (var i = 0; i < rects.length; i++) {
rects[i].position.set(0, .25 * rects.length - i * .25, 0);
rects[i].rotation.y += i * 1; //Math.random() * 4;
scene.add(rects[i]);
// r.position.set(0, 0, 5);
};
// scene.add(cube);
scene.add(rects[0]);
return scene;
}
camera = {
const fov = 30;
const aspect = width / height;
const near = 10;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(50, 50, 50)
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;
}
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.
