FRENAR
N°14 · three.js · Data Visualization

Data Rug 3D

Weave rendered in relief. Vertex displacement maps data onto a woven surface — sculpted by oblique lighting that reveals every thread.

WebGL indisponible
move mouse to change light angle
// Data Rug 3D — vertex displacement + lumière sculpturale
const geo = new THREE.PlaneGeometry(8, 5, 128, 80);
const positions = geo.attributes.position;

function displace(time) {
  for (let i = 0; i < positions.count; i++) {
    const x = positions.getX(i);
    const y = positions.getY(i);
    // Value noise 2D seedé + animation temporelle
    const n = noise(x * freq + time, y * freq, seed);
    positions.setZ(i, n * amplitude);
  }
  positions.needsUpdate = true;
  geo.computeVertexNormals();
}

// Lumière rasante (Es Devlin)
const keyLight = new THREE.DirectionalLight(0xffffff, 1.5);
keyLight.position.set(4, 1.5, 2); // angle bas → relief dramatique
Your turn

How does the oblique light angle change what data patterns are visible? Try mapping different data sets — which one creates the most visually striking relief?

Data as material — sculpt meaning with code

Book a session