简介
three.js 是一个用于创建 3D 图形的 JavaScript 库，它可以在浏览器中显示复杂的 3D 场景。它是一款流行的开源库，有着丰富的功能和易于使用的 API，因此备受前端开发者的喜爱。
在本文中，我们将学习如何使用 npm 包管理器来安装和使用 three.js，建立基础的场景，添加几何体和材质，并将其渲染到屏幕上。
安装和设置
我们首先需要使用 npm 包管理器安装 three.js。打开终端，并在项目的根目录下运行以下命令：
--- ------- ------ -----
这个命令会将 three.js 库下载并保存到项目的 node_modules 目录中。接下来，在 HTML 文件中引入 three.js：
------- -------------- ------ - -- ----- ---- -------- ---------
由于我们使用了 ES6 模块语法，需要将 script 标签的类型设置为 module。
建立场景
现在，我们已经成功地安装了 three.js 库，并将其引入到我们的项目中。接下来，我们将建立基础的场景。
-- ---- ----- ----- - --- -------------- -- ---- ----- ------ - --- ------------------------ --- -- ---- ----------------- - ------------------- -- ------- ---- -- ----- ---- -- ----- -- -- ----- ----- -------- - --- ---------------------- -- ---------- -----------------------------------------------
在上面的代码中，我们创建了一个场景、相机和渲染器，并将渲染器的 dom 元素添加到页面中。
添加几何体和材质
现在，我们已经建立了场景，并且可以看到一片黑色的屏幕。让我们添加一些几何体和材质，使其变得更加有趣。
-- ------- ----- -------- - --- -------------------- -- --- -- ----------- ----- -------- - --- ------------------------- ------ ----- --- -- ---------------- ----- ---- - --- -------------------- ---------- -- ----------- ---------------- -- ------------------- ----------------- - --
上面的代码中，我们创建了一个立方体的几何体和一个红色的基础材质，然后使用这两个元素创建了一个网格对象。最后，我们将网格对象添加到场景中，并将相机后退一些。
渲染场景
现在，我们已经创建了一个场景，并向其中添加了一个立方体。让我们通过渲染器将其呈现到屏幕上。
-------- --------- - ------------------------------- -- ------ - --- --------------- -- ----- ---------------------- -------- - ----------
在上面的代码中，我们使用 requestAnimationFrame 函数来循环调用 animate 函数，这可以使立方体绕着 Y 轴旋转。最后，我们使用渲染器将场景和相机渲染到屏幕上。
结论
现在，我们已经学习了如何使用 npm 包管理器来安装和使用 three.js 库，建立基础的场景，添加几何体和
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32196