网站导航
> 技术文档 > Three.js 从零入门：构建你的第一个 Web 3D 世界

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

网友: 技术文档 2025-07-26 19:53:09

链接：最佳课程 - 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-democd threejs-demonpm init -ynpm install three
步骤 2：创建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.jsimport * 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); });}

📚 总结

Three.js 为 Web 开发者打开了 3D 世界的大门。本教程从环境搭建、核心概念、光照模型、模型加载、交互控制到性能优化，为你搭建了完整的知识体系。

🧩 如果你想继续深入，推荐：

  1. 学习物理材质与光照原理（PBR）
  2. 研究动画系统（骨骼动画、关键帧）
  3. 实现粒子系统与后期特效
  4. 尝试与 React、Vue 等框架集成（如 React Three Fiber）

🔗 参考资料与学习链接

  • 📘 Three.js 官方文档
  • 🎮 Three.js 官方示例
  • 🌐 WebGL 基础教程
  • 🎥 Three.js Journey（收费）
网络标签：

相关问题