FRENAR
N°13 · three.js · 3D Creative Coding

3D Playground

Zellige tiles in 3D — grab them, throw them, watch them bounce and stack. Physics meets heritage in a tactile digital space.

WebGL indisponible — image statique de la scène
click to grab · release to throw
// Playground 3D — three.js + physique maison
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, w/h, 0.1, 100);
camera.position.set(0, 3, 8);

// Tuile de zellige = CylinderGeometry aplati + texture procédurale
function createTile() {
  const geo = new THREE.CylinderGeometry(0.5, 0.5, 0.1, 6);
  const mat = new THREE.MeshStandardMaterial({
    color: 0xc8f135,
    metalness: 0.3, roughness: 0.4
  });
  const mesh = new THREE.Mesh(geo, mat);
  mesh.userData = { vx:0, vy:0, vz:0 }; // vélocité
  return mesh;
}

// Physique : gravité + rebond sol + friction
tiles.forEach(tile => {
  tile.userData.vy -= gravity * dt;
  tile.position.y += tile.userData.vy * dt;
  if (tile.position.y < 0.05) {
    tile.position.y = 0.05;
    tile.userData.vy *= -bounce;
  }
});
Your turn

Can you stack all the tiles into a tower? What angle of throw creates the most chaotic pile? Notice how the collision sounds and visual feedback reinforce physical presence.

Build tactile 3D experiences with three.js

Book a session