Published
Edited
Nov 11, 2020
md`# Vectors`
{
renderer.render(scene, camera);
return renderer.domElement;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color("#FFFFFF");
line(scene, 1.1, 0, 0, 10, 0, 0, "#FF0000");
line(scene, 0, 1.1, 0, 0, 10, 0, "#00FF00");
line(scene, 0, 0, 1.1, 0, 0, 10, "#0000FF");
line(scene, 0, 0, 0, 0, 0.94531, -0.32029, "#F00000"); //Normal
line(scene, 0, 0, 0, 0, -0.3209, -0.94708, "#00F000"); //Tangent
line(scene, 0, 0, 0, 0, -0.3209, -0.94708, "#0000F0"); //Binormal
line(scene, 1, 0, 0, 0.34373, 0.875, -0.32029, "#F00000"); //A Normal
line(scene, 1, 0, 0, -0.93646, 0.29655, -0.18729, "#00F000"); //A Tangent
line(scene, 1, 0, 0, -0.07025, -0.32011, -0.94476, "#0000F0"); //A Binormal
line(scene, -1, 0, 0, -0.34373, 0.875, -0.32029, "#F00000"); //Z Normal
line(scene, -1, 0, 0, 0.93548, 0.29872, -0.18867, "#00F000"); //Z Tangent
line(scene, -1, 0, 0, 0.07025, -0.32011, -0.94476, "#0000F0"); //Z Binormal
return scene;
}
function line(scene, ox, oy, oz, x, y, z, color) {
const mat = new THREE.LineBasicMaterial({color: color})
const geo = new THREE.Geometry();
geo.vertices.push(new THREE.Vector3(ox, oy, oz));
geo.vertices.push(new THREE.Vector3(ox + x, oy + y, oz + z));
const line = new THREE.Line(geo, mat);
scene.add(line);
}
camera = {
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 200);
camera.position.set(10, 10, 10);
camera.up.set(0, 1, 0);
camera.lookAt(0, 0, 0);
return camera;
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setSize(400, 400);
renderer.setPixelRatio(devicePixelRatio);
return renderer;
}
controls = {
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minDistance = 1;
controls.maxDistance = 100;
const redraw = () => renderer.render(scene, camera);
controls.addEventListener("change", redraw);
invalidation.then(() => {
controls.removeEventListener("change", redraw);
controls.dispose();
});
return controls;
}
THREE = {
const THREE = window.THREE = await require('three');
await require('three/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.
