Double sided color shader with instanceMesh in Three.jsExample of loading a Three JS object with OBJLoader as well as MTLLoader to attach the MTL file.Loading .OBJ from file Three.jsFind intersection point on imported geometryCheck if point in box - Three.jsBounding Box from point array - Three.jsDrawing meshes manually - Three.jsLifecycle management - Three.js - WIPMesh from bounding box from point array - Three.jsCubemap skybox - Three.jsEquirectangular map skybox - Three.jsSpline gradient as equirectangular as cubemap - Three.jsGradient background follows camera, flat - Three.jsGradient background follows camera, spherical - Three.jsUsing Troika text in Three.jsCustom shader on plane Three.js
Check if point inside frustum - Three.js
function getPositions(objArray) {
const points = [];
objArray.forEach((obj) => {
points.push(obj.position);
});
return points;
}
function pointsInView(particles) {
camera.updateMatrix(); // make sure camera's local matrix is updated
camera.updateMatrixWorld(); // make sure camera's world matrix is updated
var frustum = new THREE.Frustum().setFromProjectionMatrix(
new THREE.Matrix4().multiplyMatrices(
camera.projectionMatrix,
camera.matrixWorldInverse
)
);
const points = getPositions(particles);
//console.log(points);
const out = [];
points.forEach((point) => {
if (frustum.containsPoint(point)) {
out.push(point);
}
});
return out;
}
{
//init
var particleNum = 10;
const particles = [];
for (let i = 0; i < particleNum; i++) {
const pos = new THREE.Vector3(random(-5, 5), random(-5, 5), random(-5, 5));
particles.push(createCube(pos));
}
// loop
while (run) {
const p = intersects();
if (p) {
target.position.set(p.x, p.y, p.z);
}
console.log(pointsInView(particles).length);
renderer.render(scene, camera);
yield null;
}
}
function createCube(pos) {
const material = new THREE.MeshNormalMaterial();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(geometry, material);
cube.position.set(pos.x, pos.y, pos.z);
cube.updateMatrixWorld();
scene.add(cube);
return cube;
}
plane = {
const geometry = new THREE.PlaneGeometry(50, 50);
const material = new THREE.MeshBasicMaterial({
color: 0xffff00,
side: THREE.DoubleSide
});
const plane = new THREE.Mesh(geometry, material);
plane.visible = false;
scene.add(plane);
return plane;
}
function map(n, start1, stop1, start2, stop2) {
return ((n - start1) / (stop1 - start1)) * (stop2 - start2) + start2;
}
mouse = new THREE.Vector2()
height = 600
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
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));
renderer.domElement.addEventListener( 'mousemove', onMouseMove, false )
invalidation.then(() => (controls.dispose(), renderer.dispose()));
return renderer;
}
random = (max = 0, min = 0) => Math.random() * (max - min) + min
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.
