当前位置：首页 > news >正文

Three.js 初级教程大全

news 2025/8/21 13:36:46

本文档旨在为初学者提供一个全面的 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 链接。

<!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，并在项目中使用模块化的方式引入。

npm install three

import * as THREE from 'three'

3. 基本概念

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

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

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

下面是一个简单的 Three.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.01cube.rotation.y += 0.01renderer.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) 使用相机渲染场景。