本文详解如何在Three.js项目中引入轻量级3D物理引擎Cannon.js。通过创建物理世界、同步物体坐标，实现渲染与物理计算的联动。文章提供完整代码示例，展示球体与平面的碰撞检测及运动模拟，帮助开发者掌握Web端3D物理交互开发技巧。
引言
在正式进入代码实现之前，有必要先厘清Cannon.js的定义及其核心功能。
Cannon.js是一款轻量级的3D物理引擎，完全基于JavaScript开发。它通过赋予物体真实的物理属性（如质量、摩擦力等），来计算物体的运动轨迹、旋转状态以及碰撞检测。相比其他重型物理引擎，Cannon.js在Web环境中具有更好的兼容性和执行效率。
Cannon.js的官方文档位于schteppe.github.io/cannon.js/，其中提供了丰富的示例代码供参考。
本文将通过一个具体的案例，演示如何结合Three.js与Cannon.js实现简单的物理交互效果。
首先，我们需要使用Three.js构建基础的3D场景，包括一个球体和一个平面。关于Three.js的基础用法，此处不再赘述，重点在于物理引擎的集成。
以下是实现该效果的核心代码片段及最终呈现的视觉效果。
const sphere = new THREE.Mesh(
new THREE.SphereGeometry(1, 20, 20),
new THREE.MeshStandardMaterial()
);
scene.add(sphere);
const floor = new THREE.Mesh(
new THREE.PlaneGeometry(20, 20),
new THREE.MeshStandardMaterial()
);
floor.position.y = -5;
floor.rotation.x = -Math.PI / 2;
scene.add(floor);
在集成物理引擎前，必须明确两者的分工：Three.js作为渲染引擎，负责UI界面的绘制与显示；Cannon.js作为物理引擎，负责计算物体的运动逻辑。
开发流程是：先在物理引擎中构建与UI界面一致的虚拟世界，驱动物理引擎进行计算，然后将计算得到的物体坐标实时同步回渲染引擎，从而实现两者的协同工作。
利用Cannon.js构建与UI对应的物理世界。
第一步，使用Cannon.js创建与当前UI界面几何结构相同的物理世界模型。
import * as CANNON from "cannon-es";
// 创建物理世界
const world = new CANNON.World();
world.gravity.set(0, -9.8, 0);
// 创建物理小球形状
const sphereShape = new CANNON.Sphere(1);
// 设置物体材质
const sphereWorldMaterial = new CANNON.Material();
// 创建物理世界的物体
const sphereBody = new CANNON.Body({
shape: sphereShape,
// 位置
position: new CANNON.Vec3(0, 0, 0),
// 小球质量
mass: 1,
// 物体材质
material: sphereWorldMaterial,
});
// 将物体添加至物理世界
world.addBody(sphereBody);
// 创建地面
const floorShape = new CANNON.Plane();
const floorBody = new CANNON.Body();
// 当质量为0时，使得物体保持不动
floorBody.mass = 0;
floorBody.addShape(floorShape);
// 位置
floorBody.position.set(0, -5, 0);
// 旋转
floorBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
world.addBody(floorBody);
通过上述代码，我们成功构建了一个与UI视觉一致的物理世界。代码逻辑清晰，主要包含世界创建、物体形状定义及属性设置。
接下来，需要让物理引擎开始运行，并将计算出的物体坐标实时同步给渲染引擎中的对应对象。
根据官方文档，step方法是更新物理引擎状态的关键。通过调用step来推进物理世界的时间步长，随后获取sphereBody对象的position属性，并将其赋值给Three.js场景中的sphere对象，从而完成数据同步。
const clock = new THREE.Clock();
function render() {
// 更新物理引擎世界的物体
world.step(1 / 60, clock.getDelta());
sphere.position.copy(sphereBody.position);
controls.update();
renderer.render(scene, camera);
// 渲染下一帧的时候就会调用 render 函数
requestAnimationFrame(render);
}
render();
至此，Three.js与Cannon.js的联动机制已实现，最终运行效果如下图所示。
以上就是Three.js引入Cannon.js及使用示例详解的详细内容，更多关于Three.js 引入Cannon.js的资料请关注本站其它相关文章！