Public
Edited
May 9, 2023
Curves = BasicVis(IR)
renderer.domElement
// Continuously updates
{
while (true) {
//cube.rotation.z += 0.01;
renderer.render(scene, camera);
yield null;
}
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color("white");
addCurves(Curves[0], scene);
addCurves(Curves[1], scene);
addCurves(Curves[2], scene);
return scene;
}
height = 600
camera = {
const fov = 45;
const aspect = width / height;
const near = 1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(2, 2, -2);
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;
}
IR = lowerSBP(["M3, 20, 20, 0", "M3, 50, 50, 50", "M2, 5, 6"])
Curve = BasicVis(IR)
function addCurves(curves, scene) {
let geometry = new THREE.BufferGeometry().setFromPoints(curves.getPoints(50));
let material = new THREE.LineBasicMaterial({ color: 0xff0000 });
let line = new THREE.Line(geometry, material);
scene.add(line);
}
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;
}
import { lowerSBP, lowerGCode, BasicVis } from "b893d648c1de86a5"
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.
