Three.js 物理引擎：给你的 3D 世界装上 “牛顿之魂”

想象一下，你精心搭建的 3D 虚拟世界里，物体却像被施了 "定身咒"，无论怎么碰撞、推搡都纹丝不动，是不是感觉像在看一场没有烟火的庆典，少了点灵魂？别担心，Three.js 物理引擎就是来拯救这场 "尴尬" 的超级英雄，它能让你的虚拟世界瞬间变得鲜活，遵循现实世界的物理规律，上演一场场精彩绝伦的动态大戏。

一、揭开物理引擎的神秘面纱

物理引擎就像是虚拟世界的 "隐形导演"，它在幕后默默操控着一切物体的运动、碰撞和交互。从本质上来说，它是基于一系列复杂的算法和原理，来模拟现实世界中的物理现象。就好比牛顿老爷子穿越到了你的代码世界，在背后给每个物体施加 "神秘力量"。

在 Three.js 中，物理引擎的核心工作就是计算物体的位置、速度、加速度，以及处理物体之间的碰撞检测。这就像一场精密的芭蕾舞，每个物体都是舞者，物理引擎则是编舞师，让它们的动作既优雅又符合逻辑。比如，当一个小球从斜坡上滚下来，物理引擎会根据斜坡的角度、小球的质量、摩擦力等因素，精确计算出小球滚动的轨迹和速度变化，就像现实世界中你看到的那样自然流畅。

二、Three.js 物理引擎的 "入场券"：基础准备

在开始这场物理世界的奇妙冒险之前，我们得先准备好 "装备"。首先，确保你已经引入了 Three.js 库，这就像搭建房子的地基，是一切的基础。然后，我们需要选择一个合适的物理引擎库，常见的有 ammo.js 等，就像给你的工具箱里添加一把趁手的工具。

在 HTML 文件中，通过

xml 复制代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ammo.js/0.1.12/ammo.js"></script>

接着，在 JavaScript 代码中初始化场景、相机和渲染器，这些都是搭建虚拟世界的 "基本框架"。就像画家准备好画布、画笔和颜料一样：

javascript 复制代码

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

三、打造物理世界的 "演员"：创建物理物体

现在，我们要为这个物理世界创造 "演员"------ 物理物体。在 Three.js 中，创建物理物体可不像创建普通的 Three.js 物体那么简单，我们需要给它们赋予 "物理属性"，让它们能感知周围的世界，做出相应的反应。

首先，创建一个刚体（Rigid Body），它就像是物体的 "物理灵魂"。刚体有不同的类型，比如动态刚体（会受到力的影响而运动）、静态刚体（固定不动，用来模拟地面、墙壁等）和运动学刚体（可以主动控制其运动）。以创建一个动态的立方体为例：

ini 复制代码

// 创建一个立方体几何形状
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建一个材质
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
// 创建一个Three.js网格对象
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 创建物理世界
const physicsWorld = new Ammo.btDiscreteDynamicsWorld();
// 创建物理形状
const shape = new Ammo.btBoxShape(new Ammo.btVector3(0.5, 0.5, 0.5));
// 创建物理刚体
const mass = 1;
const inertia = new Ammo.btVector3();
shape.calculateLocalInertia(mass, inertia);
const motionState = new Ammo.btDefaultMotionState(new Ammo.btTransform(new Ammo.btQuaternion(0, 0, 0, 1), new Ammo.btVector3(0, 5, 0)));
const rigidBody = new Ammo.btRigidBody(new Ammo.btRigidBodyConstructionInfo(mass, motionState, shape, inertia));
physicsWorld.addRigidBody(rigidBody);

这里的过程就像是给一个普通的立方体 "注入灵魂"，让它从一个毫无生气的静态模型，变成一个能在物理世界中活动的 "活物"。每个步骤都至关重要，就像组装一台精密的机器，少了任何一个零件都不行。

四、让世界动起来：施加力与更新物理世界

有了 "演员"，接下来就是让它们 "表演" 了。在物理世界中，我们通过施加力来让物体运动。比如，给刚才的立方体一个推力，让它在场景中 "跑起来"：

ini 复制代码

// 给刚体施加一个力
const force = new Ammo.btVector3(1, 0, 0);
rigidBody.applyCentralForce(force);

这里的力就像是给物体的 "动力源"，让它朝着指定的方向运动。不过，仅仅施加力还不够，我们还需要不断更新物理世界，就像让时间不断流逝，让物理规律持续发挥作用。在 Three.js 中，我们通常在渲染循环中更新物理世界：

scss 复制代码

function animate() {
    requestAnimationFrame(animate);
    // 更新物理世界
    physicsWorld.stepSimulation(1 / 60, 10, 1 / 60);
    // 更新Three.js物体的位置和旋转，使其与物理刚体同步
    const trans = new Ammo.btTransform();
    rigidBody.getMotionState().getWorldTransform(trans);
    const origin = new Ammo.btVector3();
    const rotation = new Ammo.btQuaternion();
    trans.getOrigin(origin);
    trans.getRotation(rotation);
    mesh.position.set(origin.x(), origin.y(), origin.z());
    mesh.quaternion.set(rotation.x(), rotation.y(), rotation.z(), rotation.w());
    renderer.render(scene, camera);
}
animate();

这段代码就像是整个物理世界的 "心跳"，不断地跳动，让虚拟世界中的一切都按照物理规律有序地运行。每一次更新，都像是给这个世界注入新的活力，让物体们的动作更加逼真、自然。

五、处理碰撞：让 "演员" 们互动起来

物理世界中最精彩的部分莫过于物体之间的碰撞了，这也是物理引擎的 "拿手好戏"。在 Three.js 物理引擎中，碰撞检测是自动进行的，但我们可以通过一些方法来处理碰撞事件，让物体之间的互动更加有趣。

比如，我们可以监听两个物体的碰撞事件，当它们碰撞时，让其中一个物体改变颜色：

scss 复制代码

// 存储所有刚体的数组
const rigidBodies = [];
// 将刚体添加到数组中
rigidBodies.push(rigidBody);
// 检查碰撞
function checkCollisions() {
    for (let i = 0; i < rigidBodies.length; i++) {
        const bodyA = rigidBodies[i];
        for (let j = i + 1; j < rigidBodies.length; j++) {
            const bodyB = rigidBodies[j];
            if (bodyA.checkCollide(bodyB)) {
                // 处理碰撞事件，比如改变颜色
                const meshA = bodyA.getUserPointer();
                const meshB = bodyB.getUserPointer();
                meshA.material.color.set(0xff0000);
                meshB.material.color.set(0xff0000);
            }
        }
    }
}
function animate() {
    requestAnimationFrame(animate);
    physicsWorld.stepSimulation(1 / 60, 10, 1 / 60);
    // 检查碰撞
    checkCollisions();
    // 更新Three.js物体的位置和旋转
    //...
    renderer.render(scene, camera);
}
animate();

这样，当两个物体碰撞时，就像它们在 "打招呼"，通过颜色的变化展现出互动的效果。碰撞检测和处理就像是虚拟世界中的 "社交规则"，让物体们之间有了联系和交流。

六、进阶之路：探索更多物理奥秘

掌握了上述基础内容，你已经踏入了 Three.js 物理引擎的大门。但这只是冰山一角，还有更多有趣的内容等待你去探索。比如，你可以调整物体的摩擦力、弹性等物理属性，让物体的运动更加多样化；还可以创建复杂的关节系统，模拟机械结构的运动；甚至可以结合其他 Three.js 的特性，如光影效果、粒子系统等，打造出更加震撼的 3D 物理场景。

想象一下，你能创造出一个充满奇幻色彩的物理世界，小球在充满弹性的平台上弹跳，机械装置有条不紊地运转，光影随着物体的运动变幻莫测，这是多么令人兴奋的事情！

Three.js 物理引擎就像是一个魔法盒，里面藏着无数的惊喜和可能。只要你敢于探索、勇于实践，就能用它创造出独一无二的 3D 动态世界，让你的创意在虚拟空间中尽情绽放！快来开启这场充满挑战与乐趣的物理引擎之旅吧！

以上文章带你初步了解了 Three.js 物理引擎的使用。若你想深入学习某部分内容，或有其他创作需求，欢迎随时和我说。