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

91 iroger7

Ouvrir dans l'éditeur Publiez votre code

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

Recommandé

12 December 2025

Code source du jeu HTML5 Eggy Car

12 December 2025

Démo de jeu de combat Ragdoll (HTML, CSS, JS)

2 March 2025

Carte à retourner

HTML

<!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);
}

Recommandé

Code source du jeu HTML5 Eggy Car

Démo de jeu de combat Ragdoll (HTML, CSS, JS)

Carte à retourner

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS