【基础】Three.js 零基础入门篇

Three.js 是一个非常强大的 3D 渲染库，它能帮助我们使用 WebGL 创建三维场景、动画和交互效果，适合用于 Web 开发中的 3D 视觉展示。本文将带领你从零基础入门 Three.js，并提供大量代码案例，帮助你快速上手。

一、Three.js 简介

Three.js 是基于 WebGL 的 JavaScript 库，简化了复杂的 3D 渲染工作。它提供了许多功能和工具，使开发者可以轻松地创建 3D 模型、动画和互动效果，支持各类光照、材质、几何体等。

二、初始化 Three.js 项目

1. 安装与引入

在开发 Three.js 项目时，我们可以通过 CDN 或 npm 安装来引入 Three.js 库。

方法一：CDN 引入

在 HTML 文件中加入如下代码：

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

方法二：npm 安装

npm install three

然后在项目中引用：

import * as THREE from 'three';

2. 创建基本的 Three.js 场景

Three.js 的基本组件包括：场景（scene）、相机（camera）、渲染器（renderer）。以下是一个最简单的 Three.js 场景的例子：

// 初始化场景
const scene = new THREE.Scene();

// 初始化相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 渲染函数
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

上面的代码会创建一个空白的 Three.js 场景，我们可以在此基础上加入各种几何体、材质、光源等。

三、在场景中添加几何体

Three.js 提供了许多基础几何体（如立方体、球体、平面等）。下面我们以立方体为例，介绍如何将几何体添加到场景中。

1. 创建立方体

// 创建立方体的几何体和材质
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色材质

// 使用几何体和材质创建一个 Mesh
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

2. 让立方体旋转

我们可以通过在 animate 函数中改变 cube 的旋转属性来实现立方体的旋转效果：

function animate() {
    requestAnimationFrame(animate);

    // 让立方体旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}
animate();

运行上面的代码，你将看到一个旋转的立方体。

四、添加光照效果

光照可以让我们的场景更具真实感。Three.js 中常见的光源有：环境光（AmbientLight）、点光源（PointLight）和平行光（DirectionalLight）。

1. 添加环境光

环境光能均匀照亮整个场景，适合用于模拟自然光效果：

const ambientLight = new THREE.AmbientLight(0x404040); // 白色环境光
scene.add(ambientLight);

2. 添加点光源

点光源从一点向四周发射光线，适合用于局部照明：

const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

结合上述光源，场景效果将更加逼真。

五、加载纹理与材质

Three.js 支持加载图片作为纹理贴图，让物体的表面更加真实。以下是一个加载纹理贴图的例子：

1. 加载纹理

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg'); // 替换成你自己的纹理路径

const texturedMaterial = new THREE.MeshBasicMaterial({ map: texture });
const texturedCube = new THREE.Mesh(new THREE.BoxGeometry(), texturedMaterial);
scene.add(texturedCube);

2. 给立方体加上纹理

const texturedMaterial = new THREE.MeshBasicMaterial({ map: texture });
const texturedCube = new THREE.Mesh(geometry, texturedMaterial);
scene.add(texturedCube);

现在，场景中的立方体将显示出加载的图片纹理。

六、相机与交互控制

Three.js 提供了 OrbitControls 让用户能够用鼠标控制相机。

1. 安装 OrbitControls

OrbitControls 是 Three.js 的一个附加模块，可以直接通过 CDN 或 npm 安装：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.js"></script>

或者通过 npm 安装：

npm install three/examples/jsm/controls/OrbitControls

2. 使用 OrbitControls

在代码中引入并初始化：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const controls = new OrbitControls(camera, renderer.domElement);

七、案例：创建太阳系模型

下面我们将利用所学内容，创建一个简单的太阳系模型。

1. 创建太阳和行星

// 创建太阳
const sunGeometry = new THREE.SphereGeometry(1, 32, 32);
const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const sun = new THREE.Mesh(sunGeometry, sunMaterial);
scene.add(sun);

// 创建地球
const earthGeometry = new THREE.SphereGeometry(0.5, 32, 32);
const earthMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const earth = new THREE.Mesh(earthGeometry, earthMaterial);
earth.position.x = 3; // 设置地球距离太阳的距离
scene.add(earth);

// 创建月亮
const moonGeometry = new THREE.SphereGeometry(0.1, 32, 32);
const moonMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 });
const moon = new THREE.Mesh(moonGeometry, moonMaterial);
moon.position.x = 0.7;
earth.add(moon); // 月亮作为地球的子对象

2. 设置旋转动画

function animate() {
    requestAnimationFrame(animate);

    // 让地球和月亮围绕太阳旋转
    earth.position.applyAxisAngle(new THREE.Vector3(0, 1, 0), 0.01);
    moon.position.applyAxisAngle(new THREE.Vector3(0, 1, 0), 0.05);

    renderer.render(scene, camera);
}
animate();

此时，地球会围绕太阳旋转，而月亮则围绕地球旋转。

八、总结

通过本文的学习，我们已经了解了 Three.js 的基本概念，学会了如何创建场景、添加几何体、应用纹理、配置相机控制，以及制作简单的动画。Three.js 是一个功能强大且易于上手的 3D 库，可以帮助开发者创建各种精彩的 3D 场景。希望你能够灵活运用这些技巧，创造出更多丰富的 3D 效果！