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.jsLifecycle management - Three.js - WIPCheck if point inside frustum - Three.jsMesh 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
Drawing meshes manually - Three.js
renderer.domElement
drawQuad({ x: 1, z: 1 })
function drawQuad(quad) {
const toDelete = scene.getObjectByName("currentQuad");
if (toDelete) {
scene.remove(toDelete);
}
const geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
const res = params.clusterGridResolution;
const from = { x: quad.x * res - res, z: quad.z * res - res };
const to = { x: quad.x * res, z: quad.z * res };
const vertices = new Float32Array([
from.x,
0,
from.z,
to.x,
0,
from.z,
to.x,
0,
to.z,
to.x,
0,
to.z,
from.x,
0,
to.z,
from.x,
0,
from.z
]);
// itemSize = 3 because there are 3 values (components) per vertex
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const material = new THREE.MeshBasicMaterial({
color: 0xff0000,
side: THREE.DoubleSide,
opacity: 0.6,
transparent: true
});
const mesh = new THREE.Mesh(geometry, material);
mesh.name = "currentQuad";
scene.add(mesh);
return vertices;
}
// Continuously updates
{
while (true) {
// cube.rotation.z += 0.01;
renderer.render(scene, camera);
yield null;
}
}
height = 600
gridHelper = {
const size = params.containerRadius * 2;
const divisions = size / params.clusterGridResolution;
const gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
const axesHelper = new THREE.AxesHelper(1);
scene.add(axesHelper);
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.
