7.5物理引擎 (Physics Engines)

7.5物理引擎 (Physics Engines)

Three.js 高级技术与特效：物理引擎 (Physics Engines)

7.5.1 物理引擎概述

物理引擎是一种软件，用于模拟现实世界中的物理规律。 在 Three.js 中，物理引擎可以控制 3D 对象的运动、碰撞和相互作用，从而创建出更逼真的动画和交互体验。

常见的 JavaScript 物理引擎包括：

• Ammo.js: Bullet Physics Library 的 JavaScript 移植版本，性能优秀，功能强大。

• Cannon.js: 纯 JavaScript 编写的轻量级物理引擎，易于使用和定制。

• Oimo.js: 另一种纯 JavaScript 物理引擎，专注于刚体动力学。

选择哪种物理引擎取决于项目的具体需求。 Ammo.js 通常被认为是性能最佳的选择，但 Cannon.js 和 Oimo.js 由于其纯 JavaScript 实现，更易于调试和修改。

7.5.2 集成物理引擎到 Three.js

以下以 Cannon.js 为例，演示如何将物理引擎集成到 Three.js 项目中。

1. 引入 Cannon.js 库:

可以通过 npm 安装：

npm install cannon-es
​

然后在 Three.js 项目中引入：

import * as THREE from 'three';
import * as CANNON from 'cannon-es';
​

或者，也可以直接在 HTML 文件中引入 CDN 链接：

<script src="https://cdn.jsdelivr.net/npm/cannon-es@latest/dist/cannon-es.js"></script>
​

2. 创建 Cannon.js 世界:

// 创建 Cannon.js 世界
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0); // 设置重力
world.broadphase = new CANNON.NaiveBroadphase(); // 设置碰撞检测算法
world.solver.iterations = 10; // 设置求解器迭代次数
​

3. 创建 Three.js 物体和 Cannon.js 形体:

每个 Three.js 物体都需要一个对应的 Cannon.js 形体来模拟物理行为。

// 创建 Three.js 球体
const geometry = new THREE.SphereGeometry(1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
// 创建 Cannon.js 球体形体
const sphereShape = new CANNON.Sphere(1);
const sphereBody = new CANNON.Body({
  mass: 1, // 设置质量
  position: new CANNON.Vec3(0, 5, 0), // 设置初始位置
  shape: sphereShape, // 设置形体
});
world.addBody(sphereBody); // 将形体添加到世界
​

4. 同步 Three.js 物体和 Cannon.js 形体:

在每一帧更新时，需要将 Cannon.js 形体的位置和旋转同步到对应的 Three.js 物体。

function animate() {
  requestAnimationFrame(animate);
  // 更新 Cannon.js 世界
  world.step(1 / 60); // 步进模拟
  // 同步 Three.js 物体和 Cannon.js 形体
  sphere.position.copy(sphereBody.position);
  sphere.quaternion.copy(sphereBody.quaternion);
  renderer.render(scene, camera);
}
animate();
​

7.5.3 碰撞检测与响应

物理引擎的核心功能之一是碰撞检测和响应。 当两个物理形体发生碰撞时，引擎会计算出碰撞力并更新形体的速度和位置。

1. 静态形体:

静态形体不会受到力的影响，通常用于表示地面、墙壁等静止的物体。

// 创建地面
const groundShape = new CANNON.Plane();
const groundBody = new CANNON.Body({ mass: 0, shape: groundShape });
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2); // 旋转地面
world.addBody(groundBody);
// 创建 Three.js 地面
const groundGeometry = new THREE.PlaneGeometry(10, 10);
const groundMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);
// 同步地面位置
ground.position.copy(groundBody.position);
ground.quaternion.copy(groundBody.quaternion);
​

2. 碰撞事件:

可以监听 Cannon.js 形体的 collide 事件来处理碰撞。

sphereBody.addEventListener("collide", function(e){
  console.log("The sphere just collided with something!");
  console.log("The data of the collision:",e);
});
​

7.5.4 高级技术与特效

1. 材质和接触材质:

可以为 Cannon.js 形体指定材质，并使用接触材质来定义不同材质之间的碰撞行为。

// 创建材质
const sphereMaterial = new CANNON.Material("sphereMaterial");
const groundMaterial = new CANNON.Material("groundMaterial");
// 创建接触材质
const sphereGroundContactMaterial = new CANNON.ContactMaterial(sphereMaterial, groundMaterial, {
  friction: 0.5, // 摩擦力
  restitution: 0.3, // 弹性
});
// 将接触材质添加到世界
world.addContactMaterial(sphereGroundContactMaterial);
// 将材质分配给形体
sphereBody.material = sphereMaterial;
groundBody.material = groundMaterial;
​

2. 约束 (Constraints):

约束可以限制形体的运动，例如，可以使用 LockConstraint 将两个形体固定在一起，或者使用 HingeConstraint 创建一个铰链。

// 创建两个球体
const sphereShape1 = new CANNON.Sphere(1);
const sphereBody1 = new CANNON.Body({ mass: 1, shape: sphereShape1 });
world.addBody(sphereBody1);
const sphereShape2 = new CANNON.Sphere(1);
const sphereBody2 = new CANNON.Body({ mass: 1, shape: sphereShape2 });
world.addBody(sphereBody2);
// 创建约束
const constraint = new CANNON.LockConstraint(sphereBody1, sphereBody2, {
  collideConnected: false, // 禁止连接的形体碰撞
});
world.addConstraint(constraint);
​

3. 触发器 (Triggers):

虽然 Cannon.js 本身没有内置触发器，但可以通过监听碰撞事件并检查碰撞的形体来实现触发器功能。

sphereBody.addEventListener("collide", function(e){
  if(e.body === triggerBody) {
    console.log("Sphere entered trigger!");
  }
});
​

4. 布娃娃系统 (Ragdoll):

布娃娃系统是一种复杂的物理模拟，用于创建逼真的人体或动物的运动。 它通常由多个刚体和约束组成，模拟骨骼和关节的运动。

上面的 Mermaid 图展示了一个简化的布娃娃系统，其中不同的身体部位（头、手臂、腿等）通过约束连接在一起。

5. 破坏效果 (Destruction):

可以使用物理引擎来模拟物体的破坏效果，例如，可以使用 ConvexPolyhedron 形体来表示物体，并在受到足够大的冲击力时将其分解成更小的碎片。

7.5.5 性能优化

物理模拟可能会消耗大量的计算资源，尤其是在复杂的场景中。 以下是一些性能优化技巧：

• 简化形体: 使用简单的形体（例如，球体、立方体）代替复杂的形体。

• 减少物理形体的数量: 尽量减少场景中物理形体的数量。

• 优化碰撞检测算法: 选择合适的碰撞检测算法，例如，NaiveBroadphase 适用于小型场景，而 SAPBroadphase 适用于大型场景。

• 调整求解器迭代次数: 减少求解器迭代次数可以提高性能，但可能会降低模拟的精度。

• 使用 Web Workers: 将物理模拟放在 Web Workers 中运行，以避免阻塞主线程。

7.5.6 总结

物理引擎是 Three.js 中一个强大的工具，可以用于创建逼真的交互体验。 通过理解物理引擎的基本原理和高级技术，我们可以创建出更具沉浸感和互动性的 Three.js 应用。 虽然物理模拟可能会消耗大量的计算资源，但通过合理的优化，我们可以确保应用在各种设备上都能流畅运行。 希望本文能够帮助你更好地理解和使用 Three.js 中的物理引擎。