在前端工作中，使用 npm 作为包管理器已经成为了一种非常普遍的做法。而 @skeate/yard3 这个包则提供了一种非常方便且易用的方式，使得我们可以轻松地在浏览器中实现 3D 场景的渲染。本文将介绍如何使用这个包进行 3D 编程，并给出一些示例代码方便读者理解。
安装与基本用法
首先，我们需要在本地进行安装。在终端中输入以下指令即可完成：
npm install @skeate/yard3
安装完成后，我们就可以在自己的项目中使用这个库了。下面的示例代码演示了如何使用 yard3 进行基本的 3D 场景绘制。
-- -------------------- ---- -------
-- --------
----- ------ - ----------------------------------
----- -------- - --- -----------------------
----- ----- - --- --------------
-- -----
----- -------- - --- -------------------- -- ---
----- -------- - --- -------------------------
------ --------
---
----- ---- - --- -------------------- ----------
----------------
-- ---
-------- -------- -
------------------------------
--------------- -- -----
--------------- -- -----
-----------------------
-
---------上述代码中，我们首先初始化了画布和场景，然后绘制了一个黄色的立方体，并在每一帧中旋转了一定角度。最后，我们将帧渲染出来。在执行这段代码时，我们就可以在浏览器中看到一个旋转的立方体了。
深入学习：场景与相机
上面的示例中，我们绘制了立方体并对其进行了旋转，但这些都发生在一个场景中。下面，我们将深入学习 @skeate/yard3 中的场景与相机，以便能够更好地实现复杂的 3D 绘制。
场景
在 yard3 中，场景的作用是将所有的物体（mesh）组合在一起，形成一个整体。我们可以通过 add 和 remove 方法来往场景中添加或删除物体。下面的示例中，我们往场景中添加了两个旋转的立方体。
-- -------------------- ---- -------
-- --------
----- ------ - ----------------------------------
----- -------- - --- -----------------------
----- ----- - --- --------------
-- -----
----- -------- - --- -------------------- -- ---
----- -------- - --- -------------------------
------ --------
---
----- ----- - --- -------------------- ----------
----- ----- - --- -------------------- ----------
-----------------
-----------------
-- ---
-------- -------- -
------------------------------
---------------- -- -----
---------------- -- -----
---------------- -- -----
---------------- -- -----
-----------------------
-
---------上面的代码中，我们向场景中添加了两个立方体，并分别对它们进行旋转。在渲染帧时，场景中的两个立方体都会被渲染出来，因此我们可以看到两个立方体不断地旋转。
相机
在 3D 场景中，相机的作用是决定了我们所观察到的场景部分。一个场景中可以有多个相机，但只有一个相机是“激活”的。我们可以通过改变相机的位置和方向来实现场景的移动和旋转。下面是一个简单的示例，我们旋转了相机并在场景中添加了平面。
-- -------------------- ---- -------
-- --------
----- ------ - ----------------------------------
----- -------- - --- -----------------------
----- ----- - --- --------------
-- ----
----- -------- - --- ----------------------- ----
----- -------- - --- -------------------------
------ --------
---
----- ----- - --- -------------------- ----------
---------------- - -------- - --
-----------------
-- -----
----- ------ - --- --------------------------- ------------ - -------------- ---- ------
----------------- - --
-- ---
-------- -------- -
------------------------------
----------------- -- -----
---------------------- --------
-
---------上述代码中，我们向场景中添加了一个绿色平面，并初始化了一个透视相机。在渲染帧时，我们旋转了相机，然后调用了 renderer.render(scene, camera) 方法，这样渲染出来的场景就和我们观察的视角相关联了。
总结
到此，我们已经了解了如何使用 @skeate/yard3，实现基本的 3D 场景绘制，并深入学习了场景和相机的概念。在实际开发中，我们可以结合更多的知识和技巧，实现更加复杂的 3D 应用。希望本文能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc781e8991b448dd3f8