简介
Burnside 是一个基于 Three.js 的 Web 3D 引擎，使用 TypeScript 编写。它提供了许多可定制的组件和工具，以创建和管理 3D 场景和对象。
在本教程中，我们将演示如何通过 Burnside 创建一个简单的 3D 场景，并向您介绍 Burnside 提供的一些基本工具和组件。
安装和初始化
要使用 Burnside，您需要有 Node.js (> = 10.0 要求) 和 npm 安装。
安装 Burnside：
npm install burnside
创建一个新的 TypeScript 文件，例如 "index.ts"：
-- -------------------- ---- ------- ------ - ------ - ---- ----------- -- --- -- -- ----- ------ - --- -------- ------- --------------------------------- -- ----------------- --- -- ------- ----------------- -- -- -- -- -- -- ------ -- ------- -- ------ -- ------ -------- --- -- ---- ---------------
在 HTML 文件中添加一个 canvas 元素：
<canvas id="canvas"></canvas>
最后，在终端中执行以下命令：
npx tsc index.ts
这将编译 TypeScript 文件，并在当前目录下创建一个 "index.js" 文件。
在浏览器中打开 HTML 文件，您应该能够看到一个红色的立方体，它将旋转并移动。
Burnside 的基本组件和工具
Engine
Engine 是 Burnside 的核心组件，用于管理 3D 场景。它接受一个 canvas 元素作为参数，并在此元素上创建一个 WebGL 上下文。
const engine = new Engine({
canvas: document.getElementById("canvas") as HTMLCanvasElement
});接下来，您可以使用 engine.add 对象创建不同类型的 3D 对象：
-- -------------------- ---- ------- ----------------- -- -- -- -- -- -- ------ -- ------- -- ------ -- ------ -------- ---
这将创建一个红色立方体，位置为 (0, 0, 0)，长宽高为 1。
Camera
Camera 用于定义视图和观察场景。您可以使用 engine.add.camera 方法创建相机：
engine.add.camera({
x: 0,
y: 0,
z: 5
});这将创建一个相机，位置为 (0, 0, 5)。您还可以指定一个目标点，相机将对着该点。
Light
Light 是 Burnside 中用于照亮场景的工具。您可以使用 engine.add.light 来创建不同类型的灯光：
engine.add.light({
type: "ambient",
color: 0xffffff,
intensity: 0.5
});这将创建一个环境光，颜色为白色，强度为 0.5。
Material
Material 是一个定义了对象表面样式的工具。您可以创建不同类型的 Material，并将其附加到对象上：
-- -------------------- ---- ------- ----- -------- - --------------------- ----- -------- ------ -------- --- ----- ---- - ----------------- -- -- -- -- -- -- ------ -- ------- -- ------ -- -------- ---
这将创建一个红色立方体，并将 "basic" Material 附加到它的表面。
Texture
Texture 可以将图像应用到对象的表面上。您可以使用 engine.add.texture 来创建一个 Texture，并将其附加到 Material 上：
-- -------------------- ---- ------- ----- ------- - -------------------- ---- --------------------- --- ----- -------- - --------------------- ----- -------- ------ --------- ------- --- ----- ---- - ----------------- -- -- -- -- -- -- ------ -- ------- -- ------ -- -------- ---
这将创建一个立方体，并将 "basic" Material 附加到它的表面，其中包含 "texture.jpg"。
Animation
Animation 是用于定义和管理动画的组件。您可以使用 engine.add.animation 方法创建动画：
-- -------------------- ---- ------- ----- --------- - ---------------------- ----- ------- --------- ----- ------- --------- ------ -- ----- - -- -- -- -- -- - -- --- - -- ------- - -- -- -- -- - - --- ----- ---- - ----------------- -- -- -- -- -- -- ------ -- ------- -- ------ -- ---------- - ----- ------ - ---
这将创建一个立方体，并将 "spin" 动画附加到它上面。该动画将使该立方体以每秒一次的速率绕 X 轴旋转。
Event
Event 组件可用于处理对象和场景中的事件。您可以使用 engine.add.event 方法绑定对象上的事件：
-- -------------------- ---- -------
----- ---- - -----------------
-- --
-- --
-- --
------ --
------- --
------ --
------ -
----- --------
-------- --- ----------- ------- --------- -- -
-------------------- -- -------
-
-
---这将创建一个立方体，并为其绑定了一个 "click" 事件。当用户单击该立方体时，将运行指定的处理程序。
结论
通过本教程，您了解了 Burnside 提供的一些基本组件和工具。您已经创建了一个简单的 3D 场景，其中包括一个红色立方体。
您可以在 Burnside 的官方文档中了解更多有关 Burnside 的信息：https://burnside.vercel.app/。
祝您在 3D 编程中好运！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b381e8991b448e2fc8