Simulación de física de Ragdoll 3D con Three.js y Cannon.js

Abrir en el editor Publica tu código

Recomendado

1 April 2025

juego de lanzamiento de moneda

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

Simulación de física de Ragdoll 3D con Three.js y Cannon.js

Recomendado

Lista de tareas inteligentes

La leyenda de Zelda

juego de lanzamiento de moneda

HTML

CSS

JS

Recomendado

Lista de tareas inteligentes

La leyenda de Zelda

juego de lanzamiento de moneda

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS