Three.js 学习第一天：基础搭建与核心概念

在当今的 Web 开发领域，为用户呈现丰富、沉浸式的体验至关重要。Three.js 作为一个强大的 JavaScript 库，能够助力开发者在网页中轻松创建出令人惊叹的 3D 场景。接下来，让我们开启为期 100 天的 Three.js 学习之旅，今天是第一天，我们将聚焦于环境搭建以及几个核心概念。

一、开发环境搭建

在开始编写 Three.js 代码之前，需要准备好相应的开发环境。

（一）文本编辑器

推荐使用 Visual Studio Code（简称 VS Code），它功能强大，拥有丰富的插件生态系统，能极大提升开发效率。你可以从官网下载并安装。

（二）本地服务器

由于浏览器的安全策略，直接打开本地的 HTML 文件可能无法正常加载 Three.js 资源。因此，需要搭建一个本地服务器。在 VS Code 中，安装 "Live Server" 插件，安装完成后，在 HTML 文件中右键选择 "Open with Live Server"，即可启动本地服务器。

（三）引入 Three.js 库

有两种常见方式引入 Three.js 库：

CDN 链接：在 HTML 文件的标签内添加如下代码：

html 复制代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>

这会从 CDN（内容分发网络）加载 Three.js 的压缩版本，方便快捷。

下载库文件 ：从Thre e.js 官网下载库文件，解压后将three.min.js文件放在项目目录中，然后在 HTML 文件中通过相对路径引入：

html 复制代码

<script src="path/to/three.min.js"></script>

这里的path/to需要替换为实际存放three.min.js文件的路径。

二、Three.js 核心概念

（一）场景（Scene）

场景是 Three.js 中所有 3D 对象的容器，它就像是一个舞台，所有的 "表演"（物体、灯光等）都在这里进行。通过以下代码创建一个场景：

js 复制代码

const scene = new THREE.Scene();

场景对象scene创建完成后，后续创建的所有物体、灯光等都要添加到这个场景中，才能最终被渲染出来。

（二）相机（Camera）

相机决定了从哪个角度观察场景，它类似于我们现实生活中的眼睛。Three.js 提供了多种相机类型，最常用的是透视相机（PerspectiveCamera），它模拟人眼的视觉效果，符合近大远小的透视规律。创建一个透视相机的代码如下：

js 复制代码

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

这里的参数解释如下：

75：相机的视野角度（FOV），即垂直方向上能看到的角度范围，值越大，看到的场景范围越广。

window.innerWidth / window.innerHeight：相机的宽高比，通常设置为浏览器窗口的宽高比，以保证场景在不同尺寸屏幕上正确显示。

0.1：相机的近裁剪平面，距离相机小于这个值的物体将不会被渲染。

1000：相机的远裁剪平面，距离相机大于这个值的物体将不会被渲染。

创建相机后，还需要设置其位置，使其能看到场景中的物体，例如：

js 复制代码

camera.position.set(0, 0, 5);

上述代码将相机设置在(0, 0, 5)的位置，其中三个值分别对应三维坐标系中的x、y、z轴坐标。最后，要将相机添加到场景中：

js 复制代码

scene.add(camera);

（三）几何体（Geometry）

几何体定义了 3D 物体的形状。Three.js 内置了许多常用的几何体，如立方体（BoxGeometry）、球体（SphereGeometry）、圆柱体（CylinderGeometry）等。以创建一个立方体几何体为例：

js 复制代码

const geometry = new THREE.BoxGeometry(1, 1, 1);

这里的三个参数分别表示立方体的宽度、高度和深度，单位是任意的，这里设置为 1。

（四）材质（Material）

材质决定了物体的外观，比如颜色、纹理、透明度等。不同的材质类型会有不同的表现效果。例如，使用基础材质（MeshBasicMaterial）创建一个红色的材质：

js 复制代码

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

0xff0000是十六进制的颜色值，表示红色。

（五）网格（Mesh）

网格是由几何体和材质组合而成的 3D 物体，它将几何体的形状和材质的外观结合起来，最终呈现在场景中。创建一个网格对象的代码如下：

js 复制代码

const mesh = new THREE.Mesh(geometry, material);

这里使用之前创建的geometry和material来创建网格。创建完成后，将网格添加到场景中：

js 复制代码

scene.add(mesh);

（六）渲染器（Renderer）

渲染器负责将场景和相机的信息渲染到屏幕上。最常用的是 WebGL 渲染器（WebGLRenderer），它利用浏览器的 GPU 加速来高效渲染 3D 场景。创建一个 WebGL 渲染器的代码如下：

js 复制代码

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight)设置渲染器的大小为浏览器窗口的大小，这样渲染出来的场景能铺满整个窗口。document.body.appendChild(renderer.domElement)将渲染器生成的 DOM 元素添加到 HTML 页面的标签内，从而在页面中显示出渲染结果。最后，通过以下代码执行渲染操作：

js 复制代码

renderer.render(scene, camera);

这行代码告诉渲染器使用指定的相机来渲染场景。

通过今天的学习，我们完成了 Three.js 开发环境的搭建，并了解了场景、相机、几何体、材质、网格和渲染器这些核心概念，还通过代码创建了一个简单的 3D 场景。在接下来的学习中，我们将逐步深入，探索 Three.js 更多强大的功能。