Simulation physique 3D de type ragdoll avec Three.js et Cannon.js

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

3 October 2025

Effet de morphing de forme du système de particules Three.js

25 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D Ragdoll Simulation</title>
  <link rel="stylesheet" href="style.css">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
  
  <script src="https://cdn.jsdelivr.net/npm/cannon@0.6.2/build/cannon.min.js"></script>
</head>
<body>
  <div id="controls">
    <button id="spawnBtn">Spawn Ragdoll</button>
    <button id="resetBtn">Reset Scene</button>
    <span>Ragdolls: <span id="ragdollCount">0</span></span>
    <div style="font-size:0.9em; margin-top:8px;">
      <div>Right-click + drag: Orbit camera</div>
      <div>Scroll: Zoom</div>
      <div><span style="font-weight:bold;">L key (no mouse):</span> Grab/drag part at center of view</div>
    </div>
  </div>
  <canvas id="gameCanvas"></canvas>
  <script src="script.js"></script>
</body>
</html>

CSS

JS

let scene, camera, renderer, world, controls;
let ragdolls = [];
let pickedBody = null, pickedConstraint = null;
let isGrabbing = false;

const ragdollCountSpan = document.getElementById('ragdollCount');

init();
animate();

// --- "L" is the only grab key ---
window.addEventListener('keydown', (e) => {
  if ((e.key === 'l' || e.key === 'L') && !isGrabbing) {
    tryGrabCenter();
  }
});
window.addEventListener('keyup', (e) => {
  if (e.key === 'l' || e.key === 'L') {
    releaseGrab();
  }
});

function releaseGrab() {
  if (pickedConstraint) world.removeConstraint(pickedConstraint);
  pickedConstraint = null;
  pickedBody = null;
  isGrabbing = false;
}

function init() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x87ceeb);

camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 7, 20);

renderer = new THREE.WebGLRenderer({canvas: document.getElementById('gameCanvas'), antialias:true});
  renderer.setSize(window.innerWidth, window.innerHeight);

controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.12;
  controls.target.set(0, 3, 0);

world = new CANNON.World();
  world.gravity.set(0, -20, 0);
  world.broadphase = new CANNON.NaiveBroadphase();

addRoom();

scene.add(new THREE.AmbientLight(0xffffff, 0.7));
  let dir = new THREE.DirectionalLight(0xffffff, 0.8);
  dir.position.set(5, 15, 8);
  scene.add(dir);

window.addEventListener('resize', onWindowResize);
  document.getElementById('spawnBtn').onclick = spawnRagdoll;
  document.getElementById('resetBtn').onclick = resetScene;

renderer.domElement.addEventListener('contextmenu', e => e.preventDefault());

spawnRagdoll();
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function addRoom() {
  let floorGeo = new THREE.BoxGeometry(20,1,20);
  let floorMat = new THREE.MeshStandardMaterial({color:0x888888});
  let floorMesh = new THREE.Mesh(floorGeo, floorMat);
  floorMesh.position.y = -0.5;
  scene.add(floorMesh);

let floorPhys = new CANNON.Body({mass:0});
  floorPhys.addShape(new CANNON.Box(new CANNON.Vec3(10,0.5,10)));
  floorPhys.position.y = -0.5;
  world.addBody(floorPhys);

const wallColor = 0xcccccc;
  const wallMat = new THREE.MeshStandardMaterial({color:wallColor, transparent:true, opacity:0.33});
  addWall(0,4,-10, 20,8,1, wallMat);
  addWall(-10,4,0, 1,8,20, wallMat);
  addWall(10,4,0, 1,8,20, wallMat);
}

function addWall(x,y,z, sx,sy,sz, mat) {
  let mesh = new THREE.Mesh(new THREE.BoxGeometry(sx,sy,sz), mat);
  mesh.position.set(x,y,z);
  scene.add(mesh);

let body = new CANNON.Body({mass:0});
  body.addShape(new CANNON.Box(new CANNON.Vec3(sx/2,sy/2,sz/2)));
  body.position.set(x,y,z);
  world.addBody(body);
}

function spawnRagdoll() {
  let y = 6;
  let x = (Math.random()-0.5)*4;
  let color = Math.random()*0xffffff;
  let parts = [];
  let bodies = [];
  let constraints = [];

let headMesh = new THREE.Mesh(new THREE.SphereGeometry(0.4, 16, 16), new THREE.MeshStandardMaterial({color}));
  scene.add(headMesh);
  let headBody = new CANNON.Body({mass:0.6});
  headBody.addShape(new CANNON.Sphere(0.4));
  headBody.position.set(x, y, 0);
  world.addBody(headBody);
  parts.push(headMesh);
  bodies.push(headBody);

let torsoMesh = new THREE.Mesh(new THREE.BoxGeometry(0.7,1.2,0.4), new THREE.MeshStandardMaterial({color}));
  scene.add(torsoMesh);
  let torsoBody = new CANNON.Body({mass:1.2});
  torsoBody.addShape(new CANNON.Box(new CANNON.Vec3(0.35,0.6,0.2)));
  torsoBody.position.set(x, y-1, 0);
  world.addBody(torsoBody);
  parts.push(torsoMesh);
  bodies.push(torsoBody);

function constrain(a,b,ptA,ptB) {
    let c = new CANNON.PointToPointConstraint(bodies[a],ptA,bodies[b],ptB);
    world.addConstraint(c);
    constraints.push(c);
  }
  constrain(0,1,new CANNON.Vec3(0,-0.4,0),new CANNON.Vec3(0,0.6,0));
  constrain(1,2,new CANNON.Vec3(-0.35,0.4,0),new CANNON.Vec3(0,0.35,0));
  constrain(1,3,new CANNON.Vec3(0.35,0.4,0),new CANNON.Vec3(0,0.35,0));
  constrain(2,4,new CANNON.Vec3(0,-0.35,0),new CANNON.Vec3(0,0.35,0));
  constrain(3,5,new CANNON.Vec3(0,-0.35,0),new CANNON.Vec3(0,0.35,0));
  constrain(1,6,new CANNON.Vec3(-0.2,-0.6,0),new CANNON.Vec3(0,0.4,0));
  constrain(1,7,new CANNON.Vec3(0.2,-0.6,0),new CANNON.Vec3(0,0.4,0));
  constrain(6,8,new CANNON.Vec3(0,-0.4,0),new CANNON.Vec3(0,0.4,0));
  constrain(7,9,new CANNON.Vec3(0,-0.4,0),new CANNON.Vec3(0,0.4,0));

ragdolls.push({parts, bodies, constraints});
  ragdollCountSpan.textContent = ragdolls.length;
}

function resetScene() {
  ragdolls.forEach(rd => {
    rd.parts.forEach(mesh => scene.remove(mesh));
    rd.bodies.forEach(body => world.removeBody(body));
    rd.constraints.forEach(c => world.removeConstraint(c));
  });
  ragdolls = [];
  ragdollCountSpan.textContent = '0';
}

function animate() {
  requestAnimationFrame(animate);
  world.step(1/60);

// Move the grabbed object (if any) to the center ray
  if (pickedConstraint && pickedBody) {
    let raycaster = new THREE.Raycaster();
    raycaster.setFromCamera({x:0, y:0}, camera);
    let dist = camera.position.distanceTo(controls.target);
    let target = raycaster.ray.at(dist, new THREE.Vector3());
    pickedConstraint.updatePivotB(new CANNON.Vec3(target.x, target.y, target.z));
  }

ragdolls.forEach(rd => {
    rd.parts.forEach((mesh, i) => {
      let b = rd.bodies[i];
      mesh.position.copy(b.position);
      mesh.quaternion.copy(b.quaternion);
    });
  });

controls.update();
  renderer.render(scene, camera);
}

Simulation physique 3D de type ragdoll avec Three.js et Cannon.js

Recommandé

Effet de morphing de forme du système de particules Three.js

Un code de Mete

PAGE DE CHARGEMENT DE NETFLIX

HTML

CSS

JS

Recommandé

Effet de morphing de forme du système de particules Three.js

Un code de Mete

PAGE DE CHARGEMENT DE NETFLIX

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS