Webleb - UI Elements - 3D Ragdoll Physics Simulation with Three.js & Cannon.js

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

3D Ragdoll Physics Simulation with Three.js & Cannon.js

Recommended