Three.js 初级教程大全

本文档旨在为初学者提供一个全面的 Three.js 入门指南。我们将从 Three.js 的基本概念开始，逐步介绍如何创建场景、添加物体、设置材质、使用光照和相机，以及如何实现简单的动画和交互。通过本教程，你将能够掌握 Three.js 的核心知识，并为进一步学习和开发复杂的 3D 应用打下坚实的基础。

1. Three.js 简介

Three.js 是一个基于 JavaScript 的 3D 图形库，它简化了 WebGL 的使用，允许开发者使用更高级别的 API 创建和渲染 3D 场景。WebGL 本身是一个底层的图形 API，直接操作起来比较复杂，而 Three.js 封装了 WebGL 的许多细节，使得开发者可以更专注于场景的构建和交互逻辑。

Three.js 的主要特点：

易于使用：提供了简洁的 API，降低了 3D 图形开发的门槛。
跨平台：基于 WebGL，可以在支持 WebGL 的浏览器上运行。
丰富的特性：支持各种 3D 模型格式、材质、光照、阴影、动画等。
活跃的社区：拥有庞大的用户群体和丰富的资源。

2. 环境搭建

在使用 Three.js 之前，需要先搭建开发环境。最简单的方式是直接在 HTML 文件中引入 Three.js 的 CDN 链接。

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <title>Three.js 教程</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.155.0/build/three.min.js"></script>
    <script>
      // Three.js 代码将在这里编写
    </script>
  </body>
</html>

也可以使用 npm 安装 Three.js，并在项目中使用模块化的方式引入。

shell 复制代码

npm install three

js 复制代码

import * as THREE from 'three'

3. 基本概念

Three.js 中有几个核心概念需要理解：

Scene (场景)： 3D 世界的容器，所有物体、光照和相机都添加到场景中。
Camera (相机)：定义了观察场景的视角。
Renderer (渲染器)：将场景渲染到屏幕上。
Geometry (几何体)：定义了物体的形状，例如立方体、球体等。
Material (材质)：定义了物体的外观，例如颜色、纹理等。
Mesh (网格)：几何体和材质的组合，是场景中实际可见的物体。
Light (光照)：照亮场景，影响物体的颜色和阴影。

4. 创建第一个 Three.js 场景

下面是一个简单的 Three.js 场景，包含一个立方体：

js 复制代码

// 1. 创建场景
const scene = new THREE.Scene()

// 2. 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)
camera.position.z = 5

// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// 4. 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1)

// 5. 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })

// 6. 创建网格
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

// 7. 渲染循环
function animate() {
  requestAnimationFrame(animate)

  cube.rotation.x += 0.01
  cube.rotation.y += 0.01

  renderer.render(scene, camera)
}

animate()

代码解释：

创建场景： new THREE.Scene() 创建了一个新的场景。
创建相机： new THREE.PerspectiveCamera() 创建了一个透视相机，参数分别是：
- 75：视野角度（FOV）。
- window.innerWidth / window.innerHeight：宽高比。
- 0.1：近平面。
- 1000：远平面。
- camera.position.z = 5 将相机沿 Z 轴移动 5 个单位，以便观察立方体。
创建渲染器： new THREE.WebGLRenderer() 创建了一个 WebGL 渲染器。
renderer.setSize() 设置渲染器的大小，使其与窗口大小一致。
document.body.appendChild(renderer.domElement) 将渲染器的 DOM 元素添加到页面中。
创建几何体： new THREE.BoxGeometry() 创建了一个立方体几何体，参数分别是立方体的宽度、高度和深度。
创建材质： new THREE.MeshBasicMaterial() 创建了一个基础材质，参数是材质的颜色。
创建网格： new THREE.Mesh() 创建了一个网格，将几何体和材质组合在一起。
scene.add(cube) 将立方体添加到场景中。
渲染循环： animate() 函数是一个循环，不断更新场景并渲染。
requestAnimationFrame(animate) 请求浏览器在下一次重绘之前调用 animate() 函数。
cube.rotation.x += 0.01 和 cube.rotation.y += 0.01 使立方体沿 X 轴和 Y 轴旋转。
renderer.render(scene, camera) 使用相机渲染场景。

5. 几何体

Three.js 提供了多种几何体，例如：

THREE.BoxGeometry：立方体。
THREE.SphereGeometry：球体。
THREE.PlaneGeometry：平面。
THREE.CylinderGeometry：圆柱体。
THREE.TorusGeometry：圆环。

可以根据需要选择合适的几何体，并设置其参数。

6. 材质

Three.js 提供了多种材质，例如：

THREE.MeshBasicMaterial：基础材质，不受光照影响。
THREE.MeshLambertMaterial：Lambert 材质，受光照影响，但没有镜面反射。
THREE.MeshPhongMaterial：Phong 材质，受光照影响，有镜面反射。
THREE.MeshStandardMaterial：标准材质，基于物理的渲染 (PBR)，更真实。

可以根据需要选择合适的材质，并设置其颜色、纹理、光泽度等属性。

7. 光照

Three.js 提供了多种光照，例如：

THREE.AmbientLight：环境光，照亮整个场景。
THREE.DirectionalLight：平行光，模拟太阳光。
THREE.PointLight：点光源，从一个点向四周发光。
THREE.SpotLight：聚光灯，从一个点向一个方向发光。

需要将光照添加到场景中，才能使物体显示出颜色和阴影。

8. 动画

可以使用 requestAnimationFrame() 函数创建动画。在每一帧中，更新物体的位置、旋转或缩放，然后重新渲染场景。

9. 交互

可以使用 JavaScript 事件监听器来处理用户的交互，例如鼠标点击、键盘按键等。可以根据用户的交互来改变场景中的物体或相机。

10. 总结

本教程介绍了 Three.js 的基本概念和使用方法。通过学习本教程，你应该能够创建简单的 3D 场景，并实现简单的动画和交互。要深入学习 Three.js，可以参考官方文档、示例代码和社区资源。祝你学习愉快！