Whitestorm 是一个用于创建 3D 呈现场景的开源 JavaScript 引擎。它旨在快速，灵活并易于使用。本文将介绍如何使用 npm 包 Whitestorm。
安装
在终端或命令行中，输入以下命令安装 Whitestorm：
npm install whitestorm
示例
以下是一个简单的 Whitestorm 示例，用于在浏览器中创建一个简单的立方体：
-- -------------------- ---- -------
------ - -- --- ---- ------
------ - -- ----- ---- --------
----- --- - --- ---------
--- -------------------- -- ----
--- ------------------ -- ----
--- ------------------ -- ----
--------- -
-- ---
-- --
-
---
--- --------------------- -- ----
-------- ---------
--------- -
---------- -----
---------- -
----- ----------------------
-
-
-- - ------- ---- ---
--- ------------------ -- ------
---
----- --- - --- --------- -- ---
--------- -
------ --
------- --
------ -
--
--------- --- -------------------------
------ --------
---
--------- -
-- -
-
---
---------------
------------此示例将创建一个场景，包含相机和渲染模块，以及一个白色的立方体。
使用指南
元素模块
元素模块为 Whitestorm 提供了操作场景元素的方法。要使用元素模块，请按以下方式导入它：
import * as WHS from 'whs'; new WHS.ElementModule();
可用方法:
.add(object: Object3D): 将对象添加到场景中。.remove(object: Object3D): 从场景中移除对象。.set(position: {x: number, y: number, z: number}):设置场景起始点。
场景模块
场景模块为 Whitestorm 提供了操作场景的方法。要使用场景模块，请按以下方式导入它：
import * as WHS from 'whs'; new WHS.SceneModule();
可用方法：
.getScene():返回当前场景，此时提供google接口挂载。.applyModule(module: Module): 将模块添加到场景中。
相机模块
相机模块为 Whitestorm 提供了相机的创建和操作方法。要使用相机模块，请按以下方式导入它：
import * as WHS from 'whs';
new WHS.CameraModule({ position: {x: 0, y: 10, z: 10} });可配置参数:
fov: 用于渲染场景的垂直视角（单位为度）。aspect: 渲染结果显示的宽高比。near: 渲染结果显示的最近位置。far: 渲染结果显示的最远位置。position: 相机位置。
渲染模块
渲染模块负责 Whitestorm 渲染场景。要使用渲染模块，请按以下方式导入它：
import * as WHS from 'whs';
new WHS.RenderingModule({
bgColor: 0xffffff,
renderer: {
antialias: true,
}
}, { shadow: true });可配置参数:
bgColor: 渲染背景色。renderer: THREE.WebGLRenderer 对象上设置的渲染器参数。shadowmapSize: 用于创建阴影贴图的宽度和高度（以像素为单位）。shadowBias: 决定阴影被离对象多远时被认为是“投掷问题”而不是“接收问题”。shadowNormalBias: 指定阴影映射中深度值变化的舒适度。舒适度越小，则已启用阴影的对象之间的接触更精确而更准确，但表面各处的阴影接口更明显。
调整大小模块
调整大小模块处理浏览器 大小的改变。要使用此模块，请按以下方式导入它：
import * as WHS from 'whs'; new WHS.ResizeModule();
可使用方法：
.ratio: 获得当前画布的宽高比。.fixedSize(width, height, updateStyle = true): 固定画布大小。
结论
通过这篇文章，您已经了解了如何使用 Whitestorm 创建基本的 3D 场景。欲了解更多信息，可查阅 Whitestorm 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdf34