使用three.js创建3D动画效果

# 1. three.js简介

## 1.1 什么是three.js

three.js是一个开源的JavaScript 3D库，它封装了底层的WebGL功能，使得创建和展示3D图形变得更加简单和高效。通过使用three.js，开发者可以在网页上轻松实现各种复杂的3D动画效果。

## 1.2 three.js的优势

- **易于使用**：three.js提供了一套简单而强大的API，使得创建3D场景、加载和控制3D模型以及实现交互等功能变得非常容易。
- **跨平台兼容**：three.js不仅可以在桌面浏览器上运行，还支持移动设备和虚拟现实设备，可以轻松实现跨平台的3D展示。
- **丰富的功能库**：three.js提供了许多内置的功能库，如材质库、光照库、动画库等，可以方便地添加各种效果和特性。
- **活跃的社区支持**：three.js拥有庞大的开源社区，开发者可以分享和获取其他人的经验和教程。

## 1.3 使用three.js的前提条件

- **基本的JavaScript知识**：三.js是使用JavaScript编写的，因此在使用之前，开发者需要掌握基本的JavaScript语法和编程知识。
- **WebGL基础**：three.js是基于WebGL的，对WebGL的基本了解和使用经验将有助于更好地理解和使用three.js。
- **HTML和CSS基础**：three.js通常需要嵌入到HTML页面中，并使用CSS进行样式设计，因此对HTML和CSS的基本知识也是必需的。

在下一章节中，我们将介绍准备工作，包括如何引入three.js、设置场景和摄像机，以及加载3D模型。

# 2. 准备工作

在开始使用three.js创建3D动画效果之前，我们需要进行一些准备工作。这包括引入three.js库、设置场景和摄像机，以及加载3D模型。让我们一步步来进行准备工作。

#### 2.1 引入three.js

首先，我们需要在项目中引入three.js库。可以通过以下方式引入：

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

#### 2.2 设置场景和摄像机

接下来，我们需要创建一个场景和摄像机来渲染我们的3D场景。场景是所有3D对象的容器，摄像机决定了我们观察场景的视角。可以按照以下步骤设置场景和摄像机：

// 创建一个场景
var scene = new THREE.Scene();

// 创建一个透视摄像机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

#### 2.3 加载3D模型

最后，我们需要加载3D模型，这可以是一个几何体，也可以是一个外部模型文件。以下是加载外部模型文件的示例代码：

// 加载外部模型文件
var loader = new THREE.GLTFLoader();
loader.load('model.gltf', function (gltf) {
    var model = gltf.scene;
    scene.add(model);
});

现在我们已经完成了准备工作，接下来可以开始创建3D动画效果了。

# 3. 创建3D动画效果

在前面的章节中，我们已经完成了准备工作，现在让我们开始创建3D动画效果吧！本章将介绍如何使用three.js来控制3D模型的运动、添加光影效果以及实现交互动画效果。

#### 3.1 控制3D模型的运动

为了让3D模型能够动起来，我们需要通过改变模型的属性来控制其运动。例如，我们可以使用模型的位置、旋转和缩放来实现不同的效果。

首先，我们需要定义一个函数来更新模型的位置。下面是一个简单的示例：

function animate() {
    requestAnimationFrame(animate);

    // 更新模型的位置
    model.position.x += 0.01;
    model.position.y += 0.01;
    model.position.z += 0.01;

    // 渲染场景
    renderer.render(scene, camera);
}

// 调用animate函数开始动画效果
animate();

在上面的代码中，我们使用了`requestAnimationFrame`来实现动画的流畅性。然后，通过改变模型的位置来实现模型的运动效果。最后，调用`renderer.render(scene, camera)`方法来渲染场景，将更新后的模型显示出来。

#### 3.2 添加光影效果

光影效果是增强3D场景真实感的重要元素。在three.js中，我们可以通过添加光源来实现光影效果