Published
Edited
Dec 11, 2019
6 stars
// 3D model (.stl) is attatched to this cell
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
const controls = new THREE.OrbitControls(camera, renderer.domElement);
invalidation.then(() => (controls.dispose(), renderer.dispose()));
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
controls.addEventListener("change", () => renderer.render(scene, camera));
// Load STL file
const loader = new THREE.STLLoader();
loader.load(await FileAttachment("itokawa.stl").url(), geom => {
scene.add(new THREE.Mesh(geom, materials.Normal));
scene.add(new THREE.Mesh(geom, materials.Wireframe));
renderer.render(scene, camera);
});
return renderer;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x202020);
return scene;
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 0.01;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0.3, 0.2, -0.5);
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
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.
