Three.js 初学者指南：创建第一个 3D 场景

Three.js 入门：创建第一个 3D 场景

Three.js 是一个流行的 JavaScript 3D 库，可以让你轻松地在网页上创建和渲染 3D 场景。Three.js 基于 WebGL，WebGL 是一种允许你直接使用显卡来渲染 3D 图形的 API。这使得 Three.js 能够在网页上创建逼真的 3D 场景。

Three.js 的基本概念

在开始使用 Three.js 之前，我们先来了解一下 Three.js 的一些基本概念。

• 场景（Scene） ：场景是 Three.js 中用来管理所有对象的容器。对象包括网格模型、相机、光源等。
• 相机（Camera） ：相机是 Three.js 中用来观察场景的虚拟相机。相机有不同的类型，最常用的相机类型是透视相机（PerspectiveCamera）。
• 光源（Light） ：光源是 Three.js 中用来照亮场景的虚拟光源。光源有不同的类型，最常用的光源类型是环境光（AmbientLight）和点光源（PointLight）。
• 网格模型（Mesh） ：网格模型是 Three.js 中用来表示物体的虚拟模型。网格模型由顶点、边和面组成。顶点是网格模型中点的坐标，边是连接两个顶点的线段，面是连接三个或更多顶点的多边形。

创建一个静态的立方体

现在我们已经了解了 Three.js 的基本概念，我们可以开始创建一个静态的立方体了。

1. 创建场景

首先，我们需要创建一个场景。场景是 Three.js 中用来管理所有对象的容器。我们可以使用 new THREE.Scene() 来创建一个场景。

const scene = new THREE.Scene();

2. 创建相机

接下来，我们需要创建一个相机。相机是 Three.js 中用来观察场景的虚拟相机。我们可以使用 new THREE.PerspectiveCamera() 来创建一个透视相机。

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

在上面的代码中，我们创建了一个透视相机。透视相机的第一个参数是视场角，它决定了相机可以看到的范围。第二个参数是纵横比，它决定了相机的宽高比。第三个参数是近平面，它决定了相机可以看到的最近的物体。第四个参数是远平面，它决定了相机可以看到的最远的物体。

3. 创建光源

接下来，我们需要创建一个光源。光源是 Three.js 中用来照亮场景的虚拟光源。我们可以使用 new THREE.AmbientLight() 来创建一个环境光。

const light = new THREE.AmbientLight(0x404040); // white light

在上面的代码中，我们创建了一个环境光。环境光是均匀地照亮整个场景的光源。

4. 创建网格模型

接下来，我们需要创建一个网格模型。网格模型是 Three.js 中用来表示物体的虚拟模型。我们可以使用 new THREE.BoxGeometry() 来创建一个立方体的网格模型。

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

在上面的代码中，我们创建了一个立方体的网格模型。立方体的边长都是 1。

5. 创建材质

接下来，我们需要为网格模型创建一个材质。材质决定了网格模型的外观。我们可以使用 new THREE.MeshBasicMaterial({ color: 0x00ff00 }) 来创建一个绿色