Three.js 入门使用指南
什么是 Three.js
Three.js 是一个基于 WebGL 的轻量级 JavaScript 3D 渲染库。它将底层的 WebGL API 封装成更易用的接口，让开发者可以用简洁的代码在浏览器中创建和展示 3D 图形，无需安装任何插件。
官网：threejs.org
GitHub：mrdoob/three.js
核心概念
在开始写代码之前，先理解 Three.js 的三大基础概念：
场景（Scene）
场景是所有 3D 对象的容器，相当于一个空的”舞台”。
相机（Camera）
相机决定了你能看到场景中的哪些内容，相当于人的眼睛或摄像机。常用两种：
- PerspectiveCamera（透视相机）：模拟人眼视角，近大远小，最常用。
- OrthographicCamera（正交相机）：没有透视效果，适合工程制图。
渲染器（Renderer）
渲染器负责将场景和相机的内容绘制到屏幕上，Three.js 使用 WebGLRenderer。
三者关系简单概括：相机在场景中”拍照”，渲染器把照片显示出来。
快速开始
安装
ash npm install three
最小可运行示例
`js import * as THREE from ‘three’;
// 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({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
// 4. 创建一个立方体 const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube);
// 5. 动画循环 function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); `
运行后你会看到一个不断旋转的绿色立方体。
核心模块详解
几何体（Geometry）
几何体定义了物体的形状，Three.js 内置了多种常见几何体：
| 几何体 | 说明 |
|---|---|
| BoxGeometry | 立方体 |
| SphereGeometry | 球体 |
| PlaneGeometry | 平面 |
| CylinderGeometry | 圆柱体 |
| ConeGeometry | 圆锥体 |
| TorusGeometry | 圆环体 |
| BufferGeometry | 自定义几何体（通过顶点数据构建） |
js // 创建一个半径为 1 的球体 const sphere = new THREE.SphereGeometry(1, 32, 32);
材质（Material）
材质决定了物体表面的外观（颜色、光泽、透明度等）：
| 材质 | 说明 |
|---|---|
| MeshBasicMaterial | 基础材质，不受光照影响 |
| MeshStandardMaterial | PBR 材质，支持金属度和粗糙度，最常用 |
| MeshPhongMaterial | 高光材质，性能较好 |
| MeshToonMaterial | 卡通风格材质 |
| MeshNormalMaterial | 法线可视化材质，调试用 |
js // 带金属质感的材质 const material = new THREE.MeshStandardMaterial({ color: 0xff8844, metalness: 0.5, roughness: 0.3, });
光源（Light）
没有光，MeshStandardMaterial 等材质会显示为黑色。常用光源：
| 光源 | 说明 |
|---|---|
| AmbientLight | 环境光，均匀照亮所有物体 |
| DirectionalLight | 平行光，模拟太阳光 |
| PointLight | 点光源，从一个点向四周发光 |
| SpotLight | 聚光灯，锥形光束 |
`js // 添加环境光和平行光 const ambientLight = new THREE.AmbientLight(0xffffff, 0.4); scene.add(ambientLight);
const dirLight = new THREE.DirectionalLight(0xffffff, 1); dirLight.position.set(5, 5, 5); scene.add(dirLight); `
添加交互：OrbitControls
OrbitControls 是 Three.js 官方提供的轨道控制器，支持鼠标拖拽旋转、缩放和平移。
`js import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls.js’;
const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // 启用惯性 controls.dampingFactor = 0.05;
function animate() { requestAnimationFrame(animate); controls.update(); // 必须在每帧调用 renderer.render(scene, camera); } animate(); `
加载 3D 模型
Three.js 支持多种 3D 模型格式，推荐使用 glTF/GLB（Web 上最通用的格式）。
`js import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’;
const loader = new GLTFLoader(); loader.load(‘/models/scene.glb’, (gltf) => { scene.add(gltf.scene); }, undefined, (error) => { console.error(‘模型加载失败:’, error); }); `
响应式与窗口适配
js window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });
性能优化建议
- 几何体复用：相同形状的物体共享同一个 Geometry 实例。
- 材质复用：相同外观的物体共享同一个 Material 实例。
- 使用 InstancedMesh：大量相同物体（如草地、树木）使用实例化渲染。
- 合理设置像素比： enderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))，避免在高分屏上过度渲染。
- 按需渲染：场景不变时停止渲染循环，用 controls.addEventListener(‘change’, render) 按需触发。
- 模型压缩：glTF 模型使用 Draco 压缩减小体积。
实用资源
- Three.js 官方文档
- Three.js Examples — 大量官方示例
- Three.js Journey — 系统性付费教程（Bruno Simon）
- Discover Three.js — 免费在线书籍
- glTF Viewer — 在线预览 glTF 模型
总结
Three.js 的核心工作流可以归纳为：
- 创建场景、相机、渲染器
- 添加物体（几何体 + 材质 = Mesh）
- 添加光源（使用 PBR 材质时必需）
- 动画循环中更新状态并渲染
- 按需加入 控制器、模型加载、后处理 等功能
从一个旋转的立方体开始，逐步尝试不同材质、光源和模型加载，你就能构建出丰富的 Web 3D 应用。
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时