使用three.js创建复杂的3D场景

# 1. 介绍three.js

## 1.1 什么是three.js？
three.js是一个基于JavaScript的3D图形库，它可以在网页上渲染复杂的3D场景和模型。它是基于WebGL技术的封装，提供了许多方便的API，使得开发者可以更轻松地创建交互式的3D应用程序。

## 1.2 three.js的特点和优势
- 强大的功能：three.js提供了丰富的功能和工具，包括创建各种类型的几何体、应用纹理和材质、添加光影效果等。
- 跨平台性：由于基于WebGL技术，因此可以在支持WebGL的任何设备上展示3D场景，包括桌面电脑、移动设备等。
- 社区支持：three.js拥有一个庞大的开发者社区，提供了丰富的文档、示例和第三方扩展，可以帮助开发者快速解决问题和学习新技术。

## 1.3 为什么选择使用three.js来创建3D场景？
- 便捷的开发：使用three.js提供的API和工具，可以更快速地创建复杂的3D场景，无需从头开始编写底层渲染代码。
- 跨平台性：由于基于WebGL技术，因此可以在支持WebGL的任何设备上展示，不受平台限制。
- 丰富的生态系统：拥有庞大的开发者社区和丰富的文档、示例，可以帮助开发者更容易地学习和使用。

# 2. 准备工作

### 2.1 安装和配置three.js

在使用three.js之前，我们需要先安装并配置好它。以下是安装和配置three.js的步骤：

首先，在你的项目文件夹中创建一个HTML文件，并在文件头部引入three.js的库文件。你可以通过以下的CDN链接来引入three.js：

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

接下来，我们需要创建一个用于显示3D场景的容器，通常是一个`<div>`元素。在HTML文件中，添加一个具有唯一ID的`<div>`元素，用于容纳我们的场景：

<div id="scene-container"></div>

在CSS中，定义该容器的宽度和高度，以适应你希望展示的大小：

#scene-container {
  width: 800px;
  height: 600px;
}

然后，在JavaScript文件中，获取容器元素的引用，并创建一个场景对象：

const sceneContainer = document.getElementById('scene-container');
const scene = new THREE.Scene();

此时，我们已经成功地安装和配置了three.js，并创建了一个空的场景对象。

### 2.2 准备3D场景所需的资源

在开始创建3D场景之前，我们需要准备一些资源，如模型和纹理。对于模型的创建，可以使用three.js提供的基本几何体，如球体、立方体等，也可以导入外部模型文件。

// 使用基本几何体创建简单的模型
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

对于纹理的应用，可以使用预先准备好的图片或者动态生成的纹理。以下是一个将纹理应用于模型的示例：

// 创建纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('textures/texture.jpg');

// 创建材质
const material = new THREE.MeshBasicMaterial({ map: texture });

// 创建模型
const geometry = new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(geometry, material);

请确保在项目文件夹中准备了所需的资源，并按照上述代码的路径进行引用。

### 2.3 创建基本的场景和相机

在继续创建复杂的3D模型之前，我们需要先创建一个基本的场景和相机。

首先，创建一个透视相机，用来观察3D场景中的物体。透视相机模拟了人眼看世界的方式，可以产生透视效果。

const fov = 45; // 视野角度（度数）
const aspect = sceneContainer.clientWidth / sceneContainer.clientHeight; // 宽高比
const near = 0.1; // 相机视锥体近端面
const far = 100; // 相机视锥体远端面

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

接下来，设置相机的位置和朝向。

camera.position.set(0, 0, 5); // 相机位置
camera.lookAt(0, 0, 0); // 相机朝向

最后，创建一个渲染器，并将其添加到页面上。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(sceneContainer.clientWidth, sceneContainer.clientHeight);
sceneContainer.appendChild(renderer.domElement);

现在，我们已经完成了准备工作，可以开始创建复杂的3D模型了。

以上是第二章节：准备工作的内容。在本章节中，我们介绍了如何安装和配置three.js，以及准备3D场景所需的资源，最后创建了一个基本的场景和相机。接下来的章节中，我们将进一步深入探讨如何创建复杂的3D模型。

# 3. 创建复杂的3D模型

在这一章节中，我们将探讨如何使用three.js创建复杂的3D模型。我们将讨论使用基本几何体创建简单的模型，导入外部模型并进行优化，以及应用纹理和材质使模型更逼真的技巧。

## 3.1 使用three.js的基本几何体创建简单的模型

首先，我们来看一下如何使用three.js的基本几何体创建简单的模型。three.js提供了多种基本几何体，包括立方体、球体、圆柱体等等。我们可以通过设置几何体的参数，例如大小、位置和颜色来进行定制。

下面是一个基于three.js创建立方体模型的示例代码：

// 创建场景和渲染器
var scene = new THRE