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 - WIPCheck if point inside frustum - 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
Mesh from bounding box from point array - Three.js
renderer.domElement
// Continuously updates
{
while (true) {
//cube.rotation.z += 0.01;
renderer.render(scene, camera);
yield null;
}
}
boxDummyGeo = {
const box3 = new THREE.Box3();
box3.setFromPoints(positionsArray);
// update
// make a BoxBufferGeometry of the same size as Box3
const dimensions = new THREE.Vector3().subVectors(box3.max, box3.min);
const boxDummyGeo = new THREE.BoxBufferGeometry(
dimensions.x,
dimensions.y,
dimensions.z
);
// move new mesh center so it's aligned with the original object
const matrix = new THREE.Matrix4().setPosition(
new THREE.Vector3().addVectors(box3.min, box3.max).multiplyScalar(0.5)
);
boxDummyGeo.applyMatrix(matrix);
boxDummyGeo.matrixWorldNeedsUpdate = true;
const mesh = new THREE.Mesh(
boxDummyGeo,
new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true })
);
scene.add(mesh);
return mesh;
}
height = 600
positionsArray = {
const num = 10;
const cubePositions = [];
for (let i = 0; i < num; i++) {
const cube = createCube();
cube.position.set(random(-5, 5), random(-5, 5), random(-5, 5));
cubePositions.push(cube.position);
scene.add(cube);
}
return cubePositions;
}
random = (max = 0, min = 0) => Math.random() * (max + 1 - min) + min
function createCube(){
const material = new THREE.MeshNormalMaterial();
const geometry = new THREE.BoxGeometry(.5, .5, .5);
const cube = new THREE.Mesh(geometry, material);
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(6, 6, -6);
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.
