用Cannon.js给Three.js物体添加真实物理属性：从摩擦系数到弹性系数的完整设置指南

用Cannon.js给Three.js物体注入真实物理灵魂：从参数调优到性能实战的深度指南

如果你已经用Three.js搭建了令人惊叹的3D场景，却总觉得少了点什么——那些物体落下时轻飘飘的，碰撞时软绵绵的，滑动时像在冰面上一样不真实。没错，缺的就是物理引擎带来的那份“重量感”和“实在感”。Cannon.js正是为此而生，它能让你的虚拟世界遵循牛顿定律，让每一个交互都充满真实的物理反馈。但仅仅引入引擎还不够，关键在于如何精细地操控那些决定物理行为的核心参数：摩擦系数、弹性系数、质量、碰撞组……这就像一位雕塑家，有了上好的黏土（Three.js的视觉呈现），还需要懂得如何控制黏土的硬度、弹性和粘性（Cannon.js的物理参数），才能塑造出栩栩如生的作品。本文将带你超越基础集成，深入Cannon.js的物理参数世界，通过一系列可复用的实战案例，教你如何像调试真实材料一样，微调虚拟物体的物理属性，打造出既逼真又高性能的交互体验。

1. 物理引擎的基石：理解Cannon.js的核心参数体系

在开始写代码之前，我们得先搞清楚，Cannon.js是如何定义和模拟一个物体的物理行为的。它不像Three.js只关心物体“看起来”怎么样，它更关心物体“应该怎么动”。这种模拟建立在几个核心概念之上。

首先，刚体（Rigid Body） 是物理世界的基本单元。你可以把它想象成一个不可变形的理想化物体，无论受到多大力的作用，它的形状都不会改变。在Cannon.js中，几乎所有的物理计算都围绕刚体展开。创建一个刚体时，有几个属性是决定其行为的关键：

• 质量（mass）：单位为千克（kg）。这是最直观的属性。质量为0的物体是静态的，不受重力和其他力的影响，通常用作地面或墙壁。质量大于0的物体是动态的，会参与完整的物理模拟。
• 形状（shape）：定义了刚体的碰撞体积。Cannon.js提供了Box、Sphere、Cylinder、Plane等多种基本形状。这里有个常见的误区：Three.js中的几何体（Geometry）是视觉模型，而Cannon.js中的形状是用于物理计算的碰撞体，两者需要分别创建并同步。
• 位置（position）与旋转（quaternion）：定义了刚体在物理世界中的状态。我们需要在每一帧动画中，将这些数据同步到Three.js的网格对象上，才能实现“所见即所模拟”。

然而，仅仅有这些基础属性，还不足以模拟丰富的材料特性。当两个刚体接触时，它们之间会发生什么？是粘滞滑动还是顺畅滑行？碰撞后是能量耗尽直接停下，还是高高弹起？这就引出了材质（Material） 和接触材质（ContactMaterial） 的概念。

材质是附着在单个刚体上的属性，主要包含两个系数：

• 摩擦系数（friction）：取值范围通常在0到1之间（理论上可以大于1）。0表示绝对光滑（如理想冰面），1表示摩擦极大（如粗糙橡胶）。它决定了物体在接触面上滑动的难易程度。
• 弹性系数（恢复系数，restitution）：取值范围也是0到1。0表示完全非弹性碰撞（如橡皮泥砸地，毫无反弹），1表示完全弹性碰撞（理想情况，能量无损失，如超级弹力球）。

注意：单独设置每个物体的材质系数只是第一步。当两个拥有不同材质的物体碰撞时，最终的摩擦和弹性效果如何计算？这就需要接触材质来定义这一对特定材质组合的交互规则。它为精细化控制物体间的交互提供了可能。

为了让这些概念更清晰，我们用一个表格来对比不同参数组合的典型效果：

理解了这个参数体系，你就掌握了指挥物理世界的“乐谱”。接下来，我们进入实操环节，看看如何将这些参数写入代码，并观察它们如何彻底改变场景的交互感觉。

2. 从零构建：创建你的第一个可调物理世界

理论需要实践来验证。让我们搭建一个基础的实验环境，这里我会用现代前端项目常见的ES模块语法来演示，核心逻辑与框架无关。

首先，确保你的项目已经安装了必要的依赖：

npm install three cannon-es

cannon-es是Cannon.js官方维护的ES模块版本，更适合现代构建工具。

接下来，我们初始化物理世界和渲染世界。关键点在于建立两者之间的同步桥梁。