npm 包 Whitestorm 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 Whitestorm 使用教程

Whitestorm 是一个用于创建 3D 呈现场景的开源 JavaScript 引擎。它旨在快速，灵活并易于使用。本文将介绍如何使用 npm 包 Whitestorm。

安装

在终端或命令行中，输入以下命令安装 Whitestorm：

--- ------- ----------

示例

以下是一个简单的 Whitestorm 示例，用于在浏览器中创建一个简单的立方体：

------ - -- --- ---- ------
------ - -- ----- ---- --------

----- --- - --- ---------
  --- -------------------- -- ----
  --- ------------------ -- ----
  --- ------------------ -- ----
    --------- -
      -- ---
      -- --
    -
  ---
  --- --------------------- -- ----
    -------- ---------

    --------- -
      ---------- -----
      ---------- -
        ----- ----------------------
      -
    -
  -- - ------- ---- ---
  --- ------------------ -- ------
---

----- --- - --- --------- -- ---
  --------- -
    ------ --
    ------- --
    ------ -
  --

  --------- --- -------------------------
    ------ --------
  ---

  --------- -
    -- -
  -
---

---------------

------------

此示例将创建一个场景，包含相机和渲染模块，以及一个白色的立方体。

使用指南

元素模块

元素模块为 Whitestorm 提供了操作场景元素的方法。要使用元素模块，请按以下方式导入它：

------ - -- --- ---- ------

--- --------------------

可用方法:

.add(object: Object3D): 将对象添加到场景中。
.remove(object: Object3D): 从场景中移除对象。
.set(position: {x: number, y: number, z: number}):设置场景起始点。

场景模块

场景模块为 Whitestorm 提供了操作场景的方法。要使用场景模块，请按以下方式导入它：

------ - -- --- ---- ------

--- ------------------

可用方法：

.getScene():返回当前场景，此时提供 google 接口挂载。
.applyModule(module: Module): 将模块添加到场景中。

相机模块

相机模块为 Whitestorm 提供了相机的创建和操作方法。要使用相机模块，请按以下方式导入它：

------ - -- --- ---- ------

--- ------------------ --------- --- -- -- --- -- --- ---

可配置参数:

fov: 用于渲染场景的垂直视角（单位为度）。
aspect: 渲染结果显示的宽高比。
near: 渲染结果显示的最近位置。
far: 渲染结果显示的最远位置。
position: 相机位置。

渲染模块

渲染模块负责 Whitestorm 渲染场景。要使用渲染模块，请按以下方式导入它：

------ - -- --- ---- ------

--- ---------------------
  -------- ---------
  --------- -
    ---------- -----
  -
-- - ------- ---- ---

可配置参数:

bgColor: 渲染背景色。
renderer: THREE.WebGLRenderer 对象上设置的渲染器参数。
shadowmapSize: 用于创建阴影贴图的宽度和高度（以像素为单位）。
shadowBias: 决定阴影被离对象多远时被认为是“投掷问题”而不是“接收问题”。
shadowNormalBias: 指定阴影映射中深度值变化的舒适度。舒适度越小，则已启用阴影的对象之间的接触更精确而更准确，但表面各处的阴影接口更明显。

调整大小模块

调整大小模块处理浏览器大小的改变。要使用此模块，请按以下方式导入它：

------ - -- --- ---- ------

--- -------------------

可使用方法：

.ratio: 获得当前画布的宽高比。
.fixedSize(width, height, updateStyle = true): 固定画布大小。

结论

通过这篇文章，您已经了解了如何使用 Whitestorm 创建基本的 3D 场景。欲了解更多信息，可查阅 Whitestorm 官方文档。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/600671088dd3466f61ffdf34