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

1,632 0 Jeux iroger7 Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

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

Recommandé

25 November 2025

Modèle HTML pour site web de films | Responsive et filtrable

13 December 2025

Modèle HTML de site web de portfolio holographique

25 June 2026

Pièce de monnaie Strike TikTok

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

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

Comments 0

…