用 Three.js 创建视觉盛宴：从入门到精通（上）

Three.js 是一个用于创建和显示 3D 图形和动画的 JavaScript 库，它基于 WebGL，一种允许在 Web 浏览器中渲染 3D 图形的 API。Three.js 可以让开发者在网页上轻松创建和展示 3D 场景，使其成为构建互动游戏、可视化项目和沉浸式体验的强大工具。

认识 Three.js 的框架

Three.js 的框架由几个主要组件组成：

• 场景 (Scene) ：场景是 3D 世界的容器，它包含了所有要在其中显示的对象。
• 相机 (Camera) ：相机是观察 3D 世界的视角，它定义了用户看到场景的方式。
• 渲染器 (Renderer) ：渲染器将场景中的对象投影到屏幕上。
• 材质 (Material) ：材质定义了对象的外观，包括颜色、纹理和光照属性。
• 几何体 (Geometry) ：几何体定义了对象的三维形状。
• 灯光 (Light) ：灯光照亮场景中的对象，使其可见。

创建第一个 Three.js 场景

为了创建一个简单的 Three.js 场景，我们需要按照以下步骤进行：

1. 创建场景 ：首先，创建一个场景对象，它将包含要显示的所有对象。
2. 创建相机 ：接下来，创建一个相机对象，它将定义用户观察场景的方式。
3. 创建渲染器 ：然后，创建一个渲染器对象，它将负责将场景中的对象投影到屏幕上。
4. 创建几何体 ：接下来，创建一个几何体对象，它将定义要显示的对象的三维形状。
5. 创建材质 ：接下来，创建一个材质对象，它将定义对象的外观，包括颜色、纹理和光照属性。
6. 将对象添加到场景中 ：现在，可以将创建的几何体和材质对象添加到场景中。
7. 渲染场景 ：最后，使用渲染器将场景渲染到屏幕上。

实现一个简单的立方体

现在，让我们用 Three.js 来创建一个简单的立方体。

首先，创建一个场景对象：

const scene = new THREE.Scene();

然后，创建一个相机对象：

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

接下来，创建一个渲染器对象：

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

然后，创建一个几何体对象，这里创建一个立方体几何体：

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

接下来，创建一个材质对象，这里创建一个简单的颜色材质：

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

现在，可以将创建的几何体和材质对象添加到场景中：

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

最后，使用渲染器将场景渲染到屏幕上：

renderer.render(scene, camera);

这样，我们就创建了一个简单的立方体并将其显示在屏幕上。

结语

以上就是 Three.js 入门的第一部分，我们介绍了 Three.js 的主要框架和基础内容，并实现了一个最简易立方体的显示和转动。在下一篇文章中，我们将介绍简单的优化和一些辅助工具，包括自带的和使用广泛的工具。