cannon.js 是一个开源的 JavaScript 物理引擎库，用于在前端网页上创建 3D 游戏和模拟场景。它提供了各种物理仿真功能，如刚体、碰撞检测、约束等。
安装
你可以通过 npm 安装 cannon.js 库：
npm install cannon
使用
使用 cannon.js 库非常简单。首先，你需要创建一个三维场景，并将其绑定到渲染器上。然后，你需要将 cannon.js 应用到场景中的物体上。
创建场景
下面是一个使用 Three.js 库创建场景的示例代码：
-- -------------------- ---- ------- ------ - -- ----- ---- ------- ----- ----- - --- ------------- ----- -------- - --- --------------------- -- -------- ----------------------------------- ------------------- -- ---------- ---------------------------------------------- -- ------- ----- ------------ - --- ---------------------------- ----------------------- -- ---- ----- ------ - --- ------------------------ --- ----------------- - ------------------- ---- ---- - ----------------- - -
添加物理模拟
接下来，我们需要将 cannon.js 应用到场景中的物体上。首先，我们需要创建一个物理世界并将其添加到场景中：
-- -------------------- ---- ------- ------ - -- ------ ---- -------- ----- ----- - --- -------------- -------------------- ------ -- -- ---- ----- ----------- - --- -------------- ----- ---------- - --- ------------- ----- -- ------ ----------- -- ------------------------------------------ -------------- -- --- -------- - -- -------------------------
在上面的代码中，我们创建了一个物理世界，并将重力设置为 (0, -9.82, 0)。然后，我们创建了一个平面形状和刚体，并将其添加到物理世界中。
接下来，我们需要将场景中的每个物体都转换为 cannon.js 中的刚体。例如，下面是一个立方体的示例代码：
-- -------------------- ---- ------- ------ - -- ----- ---- ------- ------ - -- ------ ---- -------- -- ------- ----- -------- - --- -------------------- -- -- ----- -------- - --- ------------------------- ------ -------- -- ----- ---- - --- -------------------- --------- --------------- -- ------- ----- --------- - --- -------------- ---------------- ---- ----- ----- -------- - --- ------------- ----- -- ------ --------- -- ------------------------ --- -- -----------------------
在上面的代码中，我们创建了一个立方体模型和刚体，并将其添加到场景和物理世界中。注意，我们将立方体的质量设置为 1，然后将其放置在高度为 10 的位置上。
渲染场景
最后，我们需要使用循环来更新物理世界和渲染场景：
-- -------------------- ---- ------- -------- --------- - ------------------------------ -- ------ ------------ - --- -- ---------- ------------------------------------- ----------------------------------------- -- ---- ---------------------- ------- - ---------
在上面的代码中，我们定义了一个名为 animate 的函数，并在该函数中使用 requestAnimationFrame 函数来循环调用自身。在每次循环中，我们使用 world.step() 函数来更新物理世
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34355