简介
whs-ammo 是一个用于物理仿真的 npm 包，其基于 Ammo.js 提供了更加高效的 API 与更加直观的参数设定方式。能够轻松地进行刚体物理的模拟。此包主要为 Three.js 提供了物理引擎支持。
安装
使用 npm
我们可以通过在终端中输入以下命令来安装 whs-ammo：
npm install whs-ammo
这样就可以将 whs-ammo 包安装到工程的目录下。但请确保在工程中加入了引擎库 Ammo.js。
开始使用
安装成功后，我们先详细介绍一下 whs-ammo 的 API。对于 whs-ammo，我们主要是通过三个类：
- WHS.PhysicMaterial：物理材质。
- WHS.Shape：物体的形状。
- WHS.Body：物体的刚体属性。
WHS.PhysicMaterial
import { PhysicMaterial } from 'whs-ammo';物理材质分为两类，分别为静态和动态材料。静态材料用于描述参与冲突检测但不会下落的对象（例如地面），而动态材料用于描述可以移动和下落的对象。WHSPHysicalMaterial 共有两个输入参数，对于静态材料，density = 0，对于动态材料，需要指定一个质量值 mass。
const staticMaterial = new PhysicMaterial('staticMaterial', { density: 0 });
const dynamicMaterial = new PhysicMaterial('dynamicMaterial', { mass: 3 });WHS.Shape
import { Sphere } from 'whs-ammo';我们可以通过 Sphere 类创建一个球体样式的物体。
const shape = new Sphere({
geometry: [radius],
material: null,
mass: 1,
material: dynamicMaterial, // 物理材质
position: [0, 100, 0], // 物体放置位置
})WHS.Body
import { Body } from 'whs-ammo';我们可以通过 Body 类创建一个刚体，提供三种模式，分别为 Dynamic（动态模式）、Kinematic（动量模式）、Static（静态模式）。我们在这里演示动态模式。
const body = new Body({
shape,
mass: 4,
material: dynamicMaterial,
position: [0, 100, 0], // 物体放置位置
linearDamping: 0.1, // 线性阻力
angularDamping: 0.1, // 角阻力
});示例代码
-- -------------------- ---- -------
------ - -- --- ---- -----------
------ - ---------- - ---- -----------
------ - -- ----- ---- --------
----- ----- - --- ---------
--- --------------------
--- ------------------
--- ------------------
--------- -
-- ---
-- ---
-- ---
--
---
--- -------------------------- --- --------------------------- -- ---- -------
--- --------------------- -------- -------- ---
--- -------------------
--- --------------------------
---
----- -------------- - --- ------------------------------------ - -------- - ---
----- --------------- - --- ------------------------------------- - ----- - ---
----- ------ ------- ---------- -
------------------ - --- -
--------------
----- ----- - --- ------------
--------- ----------------
--------- -----
----- --
--------- ----------------
--------- --- --- ---
---
------------------------ - ------------- - ------- - --
----------------------
--- ----------
------
----- --
--------- ----------------
--------- --- ---- ---
-------------- ----
--------------- ----
--
--
-
-
----- ------ ------- --------- -
------------------ - --- -
-------
--------- -
------ ----
------- ----
--
--------- --- ------------------------- ------ -------- ---
--------- --------- - -- -- ---
---
----------------------
--- ----------
--------- ---------------
------ --- -----------
--------- -
------ ----
------- ----
--
---
--
--
-
-
----- ------ - --- -------- ------- - ---
----- ------ - --- ---------
----------------- --------
--------------结语
whs-ammo 相对于 Ammo.js ，在物理仿真方面提供了更加便捷的 API 与更加贴合前端开发的参数设定方式。但是，使用 whs-ammo 时，需要引入相关的库文件，同时需要进行一些配置。只要按照文中的步骤进行操作，即可在前端项目中灵活地使用物理引擎。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671098dd3466f61ffdfd8