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

Three.js 从零入门：构建你的第一个 Web 3D 世界

news 2025/7/22 7:58:39

链接：最佳课程 - Three.js Journey - The ultimate Three.js course

✨ 前言

随着 Web 技术的发展，浏览器已不再局限于展示文字和图片，而是逐步成为一个可以呈现复杂 3D 场景的平台。Three.js 作为最流行的 WebGL 封装库，极大地降低了 Web 3D 开发的门槛。

本文将带你从零搭建一个 Three.js 项目，逐步掌握场景、相机、光照、模型加载等核心功能，最终实现可交互的 3D 效果展示。

📦 什么是Three.js？

Three.js 是一个基于 WebGL 封装的 JavaScript 3D 库。它通过更易于理解的 API 隐藏了底层复杂的 OpenGL 操作，让开发者可以快速创建 3D 图形应用，广泛用于可视化、游戏、产品展示、3D 编辑器等场景。

优势：

提供丰富的几何体和材质封装
支持物理光照、阴影、后处理特效
支持模型加载、粒子系统、动画骨骼
拥有完善的生态与官方示例

🧰 环境搭建与项目初始化

在开始编码前，我们先搭建基本开发环境。

步骤 1：初始化项目

mkdir threejs-demo
cd threejs-demo
npm init -y
npm install three

步骤 2：创建HTML模板

<!-- index.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Three.js Demo</title><style>body { margin: 0; overflow: hidden; }canvas { display: block; }</style></head><body><script type="module" src="./main.js"></script></body>
</html>

🧱 第一个3D 场景：旋转的立方体

我们从一个最基础的 3D 对象 —— 旋转立方体开始，建立场景、相机、渲染器，并通过动画循环进行动态渲染。

main.js示例代码：

// main.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. 创建 WebGL 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 4. 创建几何体和材质
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
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();

🧠 Three.js 核心概念解析

概念	说明
Scene（场景）	所有可见对象的容器，相当于舞台
Camera（相机）	视角设置，决定用户看到的画面。常用：PerspectiveCamera
Renderer（渲染器）	将场景画面渲染到 Canvas 上
Geometry（几何体）	定义物体的形状，如 Box、Sphere
Material（材质）	物体外观，例如颜色、纹理、透明度
Mesh（网格）	几何体与材质的组合，才是最终渲染的对象

🌈 进阶功能展示

💡 添加光照效果

// 添加环境光（整体亮度）
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);// 添加点光源（模拟灯泡）
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

⚠️ 注意：部分材质（如 MeshBasicMaterial）不受光照影响，需替换为如 MeshStandardMaterial 才能看到光照变化。

📦 加载3D模型（GLTF 格式）

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';const loader = new GLTFLoader();
loader.load('/model.gltf',(gltf) => scene.add(gltf.scene),undefined,(error) => console.error('模型加载失败：', error)
);

🖱️ 添加用户交互控制器

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

🧠 性能优化建议（大型项目必看）

技术	说明
`BufferGeometry`	更高效的几何体结构，替代旧的 `Geometry`
合并网格	使用 `mergeBufferGeometries()` 减少 draw call
使用 LOD	根据距离切换模型精度（Level of Detail）
启用视锥体裁剪	Three.js 默认开启，可提升性能
管理资源释放	`.dispose()` 可手动释放内存资源，避免内存泄漏

💼 实战案例分享

✅ 案例 1：3D 产品展示

const loader = new GLTFLoader();
loader.load('product.gltf', (gltf) => {const product = gltf.scene;scene.add(product);const ambient = new THREE.AmbientLight(0xffffff, 0.5);const point = new THREE.PointLight(0xffffff, 1);point.position.set(10, 10, 10);scene.add(ambient, point);
});

✅ 案例 2：3D 数据可视化（柱状图）

function createBarChart(data) {data.forEach((val, i) => {const h = val * 0.1;const geometry = new THREE.BoxGeometry(0.5, h, 0.5);const material = new THREE.MeshStandardMaterial({ color: 0x3498db });const bar = new THREE.Mesh(geometry, material);bar.position.x = i - data.length / 2;bar.position.y = h / 2;scene.add(bar);});
}