Zellige tiles in 3D — grab them, throw them, watch them bounce and stack. Physics meets heritage in a tactile digital space.
// 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; } });
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