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.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.js
Custom shader on plane Three.js
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
renderer.domElement
// Continuously updates
{
while (true) {
//uniforms.u_time.value += clock.getDelta();
material.uniforms.u_time.value += clock.getDelta();
renderer.render(scene, camera);
yield null;
}
}
material = new THREE.ShaderMaterial({
side:THREE.DoubleSide,
// We need to pass some information down from the vertex to the fragment shader
vertexShader: `
varying vec2 vUv;
void main () {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xyz, 1.0);
}
`,
// The vertex shader is defined as a GLSL source string
fragmentShader: `
// An incoming value from JavaScript
uniform float u_time;
// An incoming value from the vertex shader
varying vec2 vUv;
// Let's define PI constant
#define PI 3.14
void main () {
vec3 color = vec3(0.0);
color.r = abs(sin(vUv.x + u_time));
color.g = abs(cos(vUv.y + u_time));
color.b = abs(sin(vUv.y + u_time));
gl_FragColor = vec4(color, 1.0);
}
`,
// The uniforms allow us to send values down into the shader
uniforms: {
// Here is how we define a float value
u_time: { value: 0 },
u_resolution: { value: new THREE.Vector2() }
}
});
height = 600
geometry = new THREE.PlaneBufferGeometry( 2, 2 );
mesh = new THREE.Mesh( geometry, material );
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
scene.add(mesh);
return scene;
}
clock = new THREE.Clock();
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(0, 0, 3)
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.
