前言
@cybernaut/engine 是一款基于 Three.js 的 3D 引擎，它旨在提供一种方便、快速、可靠的方式来构建 3D 应用程序。作为一个前端工程师，要想学好 Three.js，首先你需要学习基础的 3D 数学知识，这是很困难的，需要大量的时间和专注力。如果你想省略这些步骤，那么 @cybernaut/engine 可以是一个很好的选择。
安装
在开始使用 @cybernaut/engine 之前，需要先安装三个依赖：Three.js、Tween.js 和 GSAP。
npm install three tween.js gsap
然后安装 @cybernaut/engine：
npm install @cybernaut/engine
快速开始
我们来看一个快速入门的例子，实现一个旋转的立方体。
-- -------------------- ---- -------
--------- -----
------
------
------------------------ --------------
-------
------
---- -------- ------------- ------------- --------------
------- -----------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------
------- ---------------------------------------------------
--------
----- --------- - ------------------------------
----- ------ - --- --------------------------- -
------- -
--------- --- -- ---
-
--
----- ---- - --- ------------------
--------- --- -------------------- -- ---
--------- --- -------------------------
------ --------
--
--
----------------------
---------------------- -
--------- --
-- ------- - --
------- ---
----- --------
--
--------------
---------
-------
-------Cybernaut.Engine
Cybernaut.Engine 是 @cybernaut/engine 的核心类，它负责管理 Three.js 场景和相机的创建、渲染、更新等任务。下面是 Cybernaut.Engine 的构造函数：
new Cybernaut.Engine(container: HTMLElement, options: EngineOptions)
其中 container 是一个 HTML 元素，用来包含 Three.js 渲染器的 DOM 元素；options 是一个对象，它包含以下可选属性：
camera：相机的配置，包含position、lookAt、fov、near和far字段。renderer：渲染器的配置，包含antialias、alpha、canvas、preserveDrawingBuffer和powerPreference字段。background：场景的背景颜色，默认为黑色，可以设置为颜色值或者 Three.js 的材质。
在 Cybernaut.Engine 的实例上，我们可以使用以下方法和属性：
add(object: Cybernaut.Object)
向场景中添加一个 Cybernaut.Object 对象。
const cube = new Cybernaut.Object({
geometry: new THREE.BoxGeometry(2, 2, 2),
material: new THREE.MeshPhongMaterial({
color: 0xffffff
})
})
engine.add(cube)remove(object: Cybernaut.Object)
从场景中移除一个 Cybernaut.Object 对象。
engine.remove(cube)
start()
启动引擎，开始渲染场景。
engine.start()
stop()
停止引擎，停止渲染场景。
engine.stop()
resize()
重新调整渲染器的大小，用于响应窗口大小的变化。
engine.resize()
scene
场景对象，类型为 Three.js 的 Scene 类。
console.log(engine.scene) // THREE.Scene {}camera
相机对象，类型为 Three.js 的 PerspectiveCamera 类。
console.log(engine.camera) // THREE.PerspectiveCamera {}renderer
渲染器对象，类型为 Three.js 的 WebGLRenderer 类。
console.log(engine.renderer) // THREE.WebGLRenderer {}Cybernaut.Object
Cybernaut.Object 是 @cybernaut/engine 的另一个核心类，它是对 Three.js 的 Object3D 类的封装，可以更加方便地创建 3D 对象。下面是 Cybernaut.Object 的构造函数：
new Cybernaut.Object(options: ObjectOptions)
其中 options 是一个对象，它包含以下可选属性：
geometry：几何体对象，例如 BoxGeometry、SphereGeometry、CylinderGeometry 等。material：材质对象，例如 MeshBasicMaterial、MeshPhongMaterial、MeshStandardMaterial 等。position：初始位置，类型为数组，例如[1, 2, 3]。rotation：初始旋转，类型为数组，例如[Math.PI / 2, 0, 0]。scale：初始缩放，类型为数组，例如[2, 2, 2]。
在 Cybernaut.Object 的实例上，我们可以使用以下方法和属性：
add(module: Cybernaut.Module)
向对象中添加一个 Cybernaut.Module 模块。
const light = new Cybernaut.Module({
type: 'AmbientLight',
args: [0xffffff]
})
cube.add(light)remove(module: Cybernaut.Module)
从对象中移除一个 Cybernaut.Module 模块。
cube.remove(light)
getObject()
获取封装的 Three.js Object3D 对象。
const threeObject = cube.getObject()
console.log(threeObject) // THREE.Mesh {}visible
是否可见，默认为 true。
cube.visible = false
Cybernaut.Module
Cybernaut.Module 是 @cybernaut/engine 的第三个核心类，它是对 Three.js 的 Light、Camera、Object3D 等类的封装，可以直接使用常用的属性和方法。例如，我们可以使用 Cybernaut.Module 创建一个环境光：
const light = new Cybernaut.Module({
type: 'AmbientLight',
args: [0xffffff]
})
cube.add(light)在 Cybernaut.Module 的实例上，我们可以使用以下属性和方法：
visible
是否可见，默认为 true。
light.visible = false
name
名称，默认为 ''。
light.name = 'MyLight'
position
位置，类型为数组，例如 [1, 2, 3]。
light.position = [0, 5, 0]
rotation
旋转，类型为数组，例如 [Math.PI / 2, 0, 0]。
light.rotation = [0, Math.PI / 2, 0]
scale
缩放，类型为数组，例如 [2, 2, 2]。
light.scale = [1, 2, 1]
总结
@cybernaut/engine 是一个十分实用和方便的 Three.js 引擎，通过它可以帮助前端工程师快速搭建 3D 应用程序。本文简单介绍了 @cybernaut/engine 的使用方法和核心类的功能，其中 Cybernaut.Engine、Cybernaut.Object 和 Cybernaut.Module 是最基础、最重要的动力节点。希望读者可以通过本文的介绍快速掌握 @cybernaut/engine 的使用方法，初步学习 Three.js 3D 引擎的基础知识，进而深入研究、应用和创新！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607b81e8991b448deae6