什么是 whs
whs 是一个基于 Three.js 的全新 3D 游戏引擎，它提供了许多更高级、更容易使用的 API，可以方便地构建 Web3D 网页游戏，支持物理引擎、骨骼动画和粒子系统等功能。whs 的底层构建于 Three.js 之上，让使用者可以更容易地基于 Three.js 的渲染管线和内部实现，同时又简化了一些复杂的操作与实现，让开发更流畅、简洁，且更容易上手。
安装与使用
安装
whs 可以通过 npm 包管理工具快速安装，只需在命令行中输入以下命令即可：
npm install whs
使用
在代码中，先引入 whs 模块：
import * as WHS from 'whs';
然后就可以创建 whs 应用程序：
-- -------------------- ---- -------
----- --- - --- ---------
--- --------------------
--- ------------------
--- ------------------
--------- -
-- --
-- ---
-- --
-
---
--- ---------------------
-------- ---------
--------- -
---------- ----
-
---
--- -------------------------
---这里，我们创建了一个 whs 应用程序，该应用程序包含多个模块，包括元素模块、场景模块、相机模块、渲染模块和轨道控制模块。这些模块可以使我们更方便地创建场景、添加元素、渲染场景和控制相机等操作。
然后，我们可以添加一些三维物体到场景中，例如立方体：
-- -------------------- ---- -------
----- --- - --- ---------
--------- -
------ ---
------- ---
------ --
--
--------- --- -------------------------
------ --------
---
--------- -
-- --
-- --
-- -
-
---
-------------这里，我们通过 WHS.Box 类创建一个红色的立方体，并将其添加到 whs 应用程序的场景中。可以看到，用 whs 创建 3D 物体是非常简单的。除了立方体外，还有 WHS.Sphere、WHS.Plane 等类来创建其他类型的 3D 物体。
最后，我们需要启动 whs 应用程序：
app.start();
这样，就可以在浏览器中看到渲染出的 3D 场景了。
深入了解
在熟悉了 whs 的基本使用方法之后，我们还可以深入了解 whs 更高级的特性和使用方法。
物理引擎
whs 内置了 cannon.js 物理引擎，可以用来模拟物体的运动和碰撞。
-- -------------------- ---- -------
----- ------ - --- ------------
--------- -
------- --
-------------- ---
--------------- --
--
--------- --- -------------------------
------ --------
---
----- ---
--------- -
-- --
-- ---
-- -
-
---
----- ------ - --- -----------
--------- -
------ ----
------- ---
--
--------- --- -------------------------
------ --------
---
--------- -
-- -------- - -
--
-------- -
------------ -
-
---
----- ----- - -----------------
--------------------
--------------------
---------------------- ------------- -- -- -------------- -- -
-- ---
---这里，我们创建了一个球体和一个平面，球体有质量，并添加了重力和碰撞检测，平面设置了弹性系数。
在场景中模拟物理运动和碰撞是很有趣的事情，而 whs 提供了非常简单的方式实现这些效果。
骨骼动画
whs 还支持骨骼动画，可以让三维模型更加灵活和生动。
-- -------------------- ---- -------
----- --- - --- --------------
------- --- -------------------
---------------- ---------- -
------ --- ------------------
---------
--- ---------------------------------
--
--
---- -----------------
---
------------------- -----------------------
-------------------------------- -- -
------------------------------
----------------
-----------
---
-------------这里，我们使用了 WHS.Importer 类来导入一个 JSON 格式的三维模型，并使用 WHS.AnimationModule 类启用对应的动画。可以通过 getAnimation() 方法获取对应的动画，然后设置循环方式、速度等参数。
粒子系统
whs 还支持粒子系统，可以创建出非常炫酷的特效。
-- -------------------- ---- -------
----- ----- - --- -----------
--------- -
------ ---
------- --
--
--------- --- -------------------------
------ ---------
----- ----------------
---
--------- -
-- --
-- --
-- -
--
--------- -
-- -------- - -
-
---
----- -- - --- --------------------
--------- -
---------- -----
--
--------- --- ----------------------
----- ----
------ --------
---
--------- -
-- --
-- --
-- -
--
-------- -
-------- ----
--------- ---
--
-------- -
--- ------------------------
---------- ----
---------- --- ---------------- -- ---
------- --- ---------------- -- --
--
-
---
---------------
------------这里，我们添加了一个平面和一个粒子系统，使用 WHS.PointEmitterModule 类模拟了点发射器，让粒子系统发射出粒子。 WHS.ParticleSystem 类允许我们非常灵活地设置粒子系统的物理属性、发射器属性、粒子属性等。
总结
本文详细介绍了 npm 包 whs 的使用方法，并通过示例代码说明了 whs 的基本用法、高级特性等，希望对前端开发者有所帮助。whs 是一款非常强大、易于上手的 3D 游戏引擎，它可以使开发者更容易地构建 Web3D 游戏和特效，同时还支持物理引擎、骨骼动画和粒子系统等功能，非常值得学习和探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671098dd3466f61ffdfd9