three.js 是一个基于 WebGL 的 JavaScript 库，可以让我们在网页上创建交互式的 3D 图形，它提供了很多内置的 3D 几何体和贴图、灯光等元素，同时也支持导入外部模型和纹理。在本教程中我们将学习如何使用 npm 包 three.js，来让我们的网页上拥有炫酷的 3D 图形。
安装 three.js
首先我们需要在本地项目中安装 three.js。我们可以使用 npm 包管理器来完成这个任务，只需要在项目根目录下执行以下命令：
npm install three
安装完成后，我们就可以在项目中引入 three.js 库了。只需要在你的 JavaScript 文件中添加以下代码：
import * as THREE from 'three';
这行代码会将 three.js 库导入到我们的代码中，现在我们就可以开始创建 3D 图形了。
创建场景
要创建 3D 图形，我们需要先创建一个场景。场景是包含所有对象的容器，我们可以在场景中添加模型、光源等元素。我们可以使用如下代码创建一个简单的场景：
const scene = new THREE.Scene();
创建相机
为了让我们能够观察场景，我们还需要创建一个相机。相机定义了我们所看到的场景。three.js 提供了多种相机类型，我们这里使用最常用的透视相机：
const camera = new THREE.PerspectiveCamera( 75, // 视锥体纵横比 window.innerWidth / window.innerHeight, // 渲染输出的宽高比 0.1, // 近截面 1000 // 远截面 );
创建渲染器
我们还需要创建一个渲染器，将场景和相机组合成图像。使用如下代码创建一个 WebGL 渲染器：
const renderer = new THREE.WebGLRenderer();
可以设置渲染器的大小和分辨率，将它添加到 HTML 文档中：
renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
创建几何体和材质
在 three.js 中，我们可以使用内置的几何体和材质来创建基本的 3D 模型。例如，我们可以创建一个立方体：
const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个长宽高均为 1 的立方体几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建一个绿色的材质
const cube = new THREE.Mesh(geometry, material); // 将几何体和材质组合成一个网格模型
scene.add(cube); // 将网格模型添加到场景中现在我们就可以在场景中看到一个绿色的立方体了。
创建光源
要让我们的 3D 模型有立体感，我们需要添加光源。在 three.js 中有多种不同类型的光源，我们这里使用最常用的点光源：
const light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(0, 0, 10); // 光源的位置 scene.add(light);
渲染场景
最后一步是渲染场景。我们需要在每一帧中更新相机的位置，并将场景渲染到画布中：
-- -------------------- ---- ------- -------- --------- - ------------------------------- --------------- -- ----- -- ----- --------------- -- ----- ----------------- - -- -- ------ ---------------------- -------- -- ---- - ----------
以上是一个完整的使用 three.js 创建 3D 图形的教程，你可以使用这个教程来编写自己的 3D 图形项目。如果你想深入了解 three.js，可以查阅其官方文档以获取更多信息和示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/40417