renderer.domElement
testPoint = {
var pointA = new THREE.Vector3(0, 0.6, 0);
return point(pointA, "blue");
}
function correctPointInBox(pt, cube, boxDim) {
cube.updateMatrixWorld(); //Make sure the object matrix is current with the position/rotation/scaling of the object...
var localPt = cube.worldToLocal(pt.clone()); //Transform the point from world space into the objects space
return cube.geometry.boundingBox.containsPoint(localPt);
}
function point(point, color) {
const p = new THREE.Mesh(
new THREE.SphereGeometry(0.1, 4, 2),
new THREE.MeshBasicMaterial({
color: color
})
);
p.position.copy(point);
scene.add(p);
return p;
}
// Continuously updates
{
while (true) {
if (correctPointInBox(testPoint.position, cube)) {
testPoint.material.color.set("red");
} else {
testPoint.material.color.set("blue");
}
cube.rotation.z += 0.01;
renderer.render(scene, camera);
yield null;
}
}
height = 600
cube = {
const material = new THREE.MeshNormalMaterial({ wireframe: true });
const geometry = new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(geometry, material);
cube.geometry.computeBoundingBox();
return cube;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
scene.add(cube);
return scene;
}
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;
}
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.
