FRENAR
N°13 · WebGL / three.js · Tactile & Physique 3D

Playground 3D tactile

Des tuiles de zellige 3D que vous attrapez, lancez, faites rebondir. Physique maison (pas de lib), caméra orbitable — le plaisir immédiat de Bruno Simon dans l'univers visuel de Kamel Ghabte.

WebGL indisponible — image statique de la scène
attrape · lance · orbite (clic droit/deux doigts)
// 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;
  }
});
À toi de jouer

Mettez la gravité à 0 et lancez une tuile — elle dérive infiniment. Augmentez le rebond à 95% : les tuiles deviennent presque des balles rebondissantes perpétuelles. Quel réglage donne le « feel » le plus satisfaisant ?

Créez des expériences 3D mémorables

Réserver un créneau