一、Three.js 整体定义与行业定位

1.1 基础概念释义

Three.js 是一款基于 WebGL/WebGPU 标准构建的开源、轻量级、跨平台 3D 图形 JavaScript 库，是全球最主流、生态最完善的 Web 3D 开发框架。它屏蔽了底层 WebGL/WebGPU 复杂的渲染管线、着色器编写、矩阵运算、状态管理细节，提供简洁、直观、语义化的高层 API，让前端开发者无需精通底层图形原理，即可快速在浏览器中创建高性能 3D 交互场景。

Three.js 定位为Web 端 3D 引擎开发工具库，而非底层图形 API，核心价值是降低 Web 3D 开发门槛，同时保留高度可定制性。它完美支持桌面 / 移动端浏览器、Electron 桌面应用、微信小程序、WebXR 虚拟现实，是 Web 3D、元宇宙、数字孪生、数据可视化、网页游戏、3D 产品展示的事实标准框架。

目前 Three.js 已全面内置WebGPU 后端渲染器，可自动切换 WebGL/WebGPU，兼顾兼容性与高性能，是下一代 Web 图形开发的核心上层框架。

1.2 Three.js 诞生与迭代发展背景

早期 WebGL 原生开发极度繁琐，需手动编写着色器、处理缓冲区、矩阵变换、光照计算，开发成本极高，普通前端开发者难以入门。为解决这一痛点，2010 年由 Ricardo Cabello（Mr.doob）主导推出 Three.js 开源项目，通过封装 WebGL 底层细节，提供场景、相机、网格、材质、灯光等高层抽象对象。

历经十余年迭代，Three.js 从基础 3D 渲染库进化为全功能 Web 3D 引擎：

  • 支持 PBR 物理渲染、实时光照、阴影、粒子系统、骨骼动画、几何体实例化；
  • 兼容 glTF/GLB/FBX/OBJ 等主流 3D 模型格式；
  • 内置物理引擎、后期处理、路径追踪渲染、LOD 优化、射线交互；
  • 新增 WebGPU 渲染后端，支持多线程、低开销、并行计算。

如今 Three.js 已成为 GitHub 星标超 10 万的顶级前端图形开源项目，被谷歌、微软、苹果、英伟达、亚马逊等企业广泛采用，生态成熟度无出其右。

1.3 Three.js 核心定位与技术特性

核心定位
  • Web 3D 开发首选高层框架
  • WebGL/WebGPU 双后端统一调用层
  • 零插件、纯 JavaScript、全平台运行
  • 前端工程师入门 3D 开发的第一选择
核心技术特性
  1. 极简 API 设计：一行代码创建场景、相机、模型、灯光；
  2. 双渲染后端：自动适配 WebGL（高兼容）与 WebGPU（高性能）；
  3. 完整渲染体系：内置标准材质、PBR 材质、卡通渲染、线条渲染；
  4. 模型生态完善：原生支持 glTF/GLB（官方推荐）、FBX、OBJ、DRACO 压缩；
  5. 交互系统强大：内置轨道控制器、鼠标射线拾取、触控支持；
  6. 高性能优化：实例化渲染、LOD、视锥体裁剪、纹理压缩、网格合并；
  7. 特效生态丰富：后期处理、 bloom 光晕、景深、运动模糊、屏幕后处理；
  8. 可高度扩展：自定义着色器、自定义几何体、自定义插件。

1.4 Three.js 支持平台与运行环境

支持环境
  • 所有现代 PC / 移动端浏览器（Chrome/Firefox/Safari/Edge）
  • Electron 桌面客户端
  • 微信小程序、抖音小程序（适配版）
  • WebXR AR/VR 虚拟现实设备
  • Node.js 服务端渲染（离线截图、模型处理）
最低要求
  • 支持 WebGL 1.0+（全浏览器兼容）
  • WebGPU 需浏览器支持（自动降级）

1.5 Three.js 与原生 WebGL/WebGPU、其他引擎对比

技术方案 开发难度 性能 上手速度 生态 适用场景
Three.js 极低 高 / 极高 极快 全球第一 90% Web 3D 项目
原生 WebGL 极高 中 极慢 小 底层图形研究
原生 WebGPU 高 极高 极慢 中 高性能定制渲染
Babylon.js 中 高 快 大 重型 Web 3D 游戏
PlayCanvas 中 高 快 中 云编辑器游戏
Unity WebGL 高 中 慢 大 重度 3D 游戏

二、Three.js 整体架构与核心技术模块详解

Three.js 采用经典场景图架构，模块高度解耦，逻辑清晰，是最符合人类直觉的 3D 框架结构。

2.1 三大核心基础组件（必掌握）

2.1.1 Scene 场景

Three.js 的根容器，所有模型、灯光、相机都必须添加到场景中才能渲染。

  • 作用：管理 3D 世界所有物体的层级、位置、状态；
  • 特性：支持嵌套层级、雾化效果、背景色 / 背景图、全局环境设置。
2.1.2 Camera 相机

决定3D 场景以什么视角显示在屏幕上，相当于人眼。

  • PerspectiveCamera 透视相机：模拟人眼，近大远小，最常用；
  • OrthographicCamera 正交相机：无透视，用于 UI、2D 视图、数据可视化；
  • 必须与场景配对，缺一不可。
2.1.3 Renderer 渲染器

Three.js 的核心渲染引擎，负责将场景 + 相机绘制到 Canvas 画布。

  • WebGLRenderer：全兼容，稳定；
  • WebGPURenderer：高性能，下一代标准；
  • 自动处理画布尺寸、清屏、渲染循环、设备像素比适配。

渲染公式：Renderer.render(Scene, Camera)

2.2 几何体与网格模块

2.2.1 Geometry 几何体

定义 3D 模型的形状与顶点数据。

  • 内置几何体：立方体、球体、圆柱、圆环、平面、圆锥、胶囊体、二十面体；
  • 自定义几何体：可手动创建顶点、法向量、UV 坐标。
2.2.2 Mesh 网格

几何体 + 材质 = 可渲染的 3D 物体。

  • Mesh 是 Three.js 中最基础的可显示对象；
  • 支持位置、旋转、缩放、父子层级、矩阵变换。

2.3 材质系统（核心渲染特性）

2.3.1 基础材质
  • MeshBasicMaterial：不受光，纯色渲染，适合 UI；
  • MeshLambertMaterial：漫反射，适合非光滑物体；
  • MeshPhongMaterial：高光反射，适合塑料、金属。
2.3.2 PBR 物理材质（真实感渲染）

MeshStandardMaterial / MeshPhysicalMaterial

  • 基于物理渲染，符合现实光照规律；
  • 支持金属度、粗糙度、清漆、透射、次表面散射（皮肤渲染）；
  • 制作影视级、产品级 3D 效果必备。
2.3.3 特殊材质
  • PointsMaterial：粒子渲染；
  • LineBasicMaterial：线条渲染；
  • ShaderMaterial：自定义着色器材质（高级扩展）。

2.4 光照与阴影系统

2.4.1 光源类型
  • AmbientLight：环境光（全局基础照明）；
  • DirectionalLight：平行光（模拟太阳光，支持阴影）；
  • PointLight：点光源（灯泡，辐射照明）；
  • SpotLight：聚光灯；
  • RectAreaLight：矩形面光源（模拟灯带、窗户）。
2.4.2 阴影系统

Three.js 支持实时软阴影 / 硬阴影：

  • 需开启渲染器.shadowMap.enabled；
  • 灯光.castShadow = true；
  • 模型.castShadow/receiveShadow = true；
  • 支持 PCF 软阴影、PCSS 高质量阴影。

2.5 高级核心技术模块

2.5.1 控制器（交互）
  • OrbitControls 轨道控制器：鼠标旋转、缩放、平移相机，最常用；
  • TrackballControls：轨迹球控制；
  • FirstPersonControls：第一人称控制。
2.5.2 射线投射（拾取）

Raycaster：实现鼠标 / 触摸点击 3D 物体、拾取模型、交互判断。

  • 无需物理引擎即可实现 3D 交互；
  • 是 Web 3D 交互的核心技术。
2.5.3 动画系统
  • AnimationMixer：骨骼动画、关键帧动画；
  • morphTarget：变形动画；
  • requestAnimationFrame：流畅渲染循环。
2.5.4 模型加载器
  • GLTFLoader：官方推荐，轻量化、高性能、支持动画 / PBR；
  • GLBLoader：单文件 glTF；
  • FBXLoader：游戏模型；
  • OBJLoader：静态模型；
  • DRACOLoader：模型压缩，减少 90% 模型体积。
2.5.5 后期处理（EffectComposer）

内置高级屏幕特效：

  • Bloom 光晕发光
  • DepthOfField 景深
  • FXAA 抗锯齿
  • Outline 描边
  • Vignette 暗角
  • FilmGrain 胶片颗粒
2.5.6 性能优化技术
  • InstancedMesh 实例化渲染（批量绘制大量相同物体）
  • LOD 多细节层次（远低近高）
  • 视锥体裁剪（自动隐藏不可见物体）
  • 纹理压缩（BasisUniversal）
  • 网格合并（BufferGeometryUtils.mergeBufferGeometries）
  • 雾化遮挡（减少远处渲染压力）
2.5.7 WebGPU 高级特性
  • 多线程渲染
  • 低 CPU 开销
  • 批量渲染
  • 实时光追预览支持
  • 计算着色器

三、Three.js 权威学习网站、中文教程、官方资源（超全整理）

3.1 全球顶级官方 / 权威网站

1. Three.js 官方文档（必读）

https://threejs.org/docs/

  • 最权威 API 手册、示例、教程；
  • 英文原版，可机器翻译。
2. Three.js 官方示例库（最强学习库）

https://threejs.org/examples/

  • 数百个官方可运行 Demo；
  • 包含特效、材质、模型、动画、交互；
  • 可直接查看源码。
3. Three.js 官方手册（初学者必读）

https://threejs.org/manual/

  • 从零开始系统教学；
  • 英文，逻辑清晰，循序渐进。
4. MDN Three.js 指南

https://developer.mozilla.org/zh-CN/docs/Three.js

  • 前端官方标准入门文档；
  • 中文，简洁可靠。
5. Discover Three.js (WebGL 基础)

https://discoverthreejs.com/

  • 全球公认最好的英文实战书籍；
  • 从基础到进阶完整项目。

3.2 国内顶级中文学习网站

1. Three.js 中文网（国内最专业）

https://threejs.org.cn/

  • 中文文档、教程、案例、问答；
  • 新手入门首选。
2. 掘金 Three.js 专栏（高质量技术文）

https://juejin.cn/tag/10588960975774836799

  • 大量实战、进阶、优化、特效教程；
  • 中文优质内容最多。
3. 阿崔 cxr Three.js 系统教程

https://www.bilibili.com/read/cv47728

  • 国内最火 Three.js 系统化教程；
  • 从入门到实战。
4. Three.js 中文教程网

http://www.yanhuangxueyuan.com/

  • 经典入门教程，简单易懂；
  • 适合零基础。
5. Web3D 技术社区

https://web3d.org.cn/

  • 数字孪生、元宇宙、WebGPU 技术交流。

3.3 最强视频学习平台（B 站）

  1. Three.js 零基础入门到实战全集（阿崔 cxr）
  2. Three.js 可视化 / 数字孪生系统教学
  3. Three.js WebGPU 后端高级实战
  4. Web3D 元宇宙开发全套

3.4 专业书籍

  • 《Three.js 开发指南》
  • 《Discover Three.js》
  • 《WebGL 编程指南》（原理必备）
  • 《3D Math Primer》（3D 数学基础）

四、Three.js 优质开源项目、插件、工具

4.1 官方 / 顶级开源库

  1. lil-gui 调试面板https://github.com/georgealways/lil-gui
  2. tween.js 平滑动画https://github.com/tweenjs/tween.js
  3. cannon.js 物理引擎https://github.com/schteppei/cannon.js
  4. ammo.js 子弹物理引擎https://github.com/kripken/ammo.js
  5. meshline 高质量线条https://github.com/oframe/oframe

4.2 顶级实战开源项目

  1. Three.js 3D 产品展示
  2. Three.js 数字孪生智慧城市
  3. Three.js 元宇宙房间
  4. Three.js 3D 相册 / 全景漫游
  5. Three.js WebGPU 渲染 Demo

4.3 模型资源网站

  1. Sketchfab（glTF 模型最多）
  2. Blender Market
  3. Free3D
  4. Mixamo（免费角色动画）

五、Three.js 开发环境搭建

5.1 环境要求

  • 浏览器：Chrome 最新版
  • 编辑器：VS Code
  • 本地服务：Live Server 插件（必须）

5.2 引入方式

CDN 方式（最简单）
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script>
NPM 方式（工程化）
npm install three

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

六、Three.js 完整实战示例（3D 旋转立方体 + 轨道控制 + 光照 + 阴影）

6.1 HTML 结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Three.js 3D立方体</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        body{overflow:hidden;background:#111;}
        canvas{display:block;width:100vw;height:100vh;}
    </style>
</head>
<body>
    <script type="module">
        import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js'
        import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/controls/OrbitControls.js'

        // ========== 1. 创建基础三要素 ==========
        const scene = new THREE.Scene()
        scene.background = new THREE.Color(0x111215)

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

        const renderer = new THREE.WebGLRenderer({ antialias:true })
        renderer.setSize(window.innerWidth, window.innerHeight)
        renderer.shadowMap.enabled = true // 开启阴影
        document.body.appendChild(renderer.domElement)

        // ========== 2. 添加控制器 ==========
        const controls = new OrbitControls(camera, renderer.domElement)
        controls.enableDamping = true // 平滑阻尼

        // ========== 3. 创建几何体 + 材质 + 网格 ==========
        const geometry = new THREE.BoxGeometry(1,1,1)
        const material = new THREE.MeshStandardMaterial({
            color: 0x0099ff,
            metalness:0.2,
            roughness:0.5
        })

        const cube = new THREE.Mesh(geometry, material)
        cube.castShadow = true
        scene.add(cube)

        // ========== 4. 创建地面 ==========
        const planeGeometry = new THREE.PlaneGeometry(10,10)
        const planeMaterial = new THREE.MeshStandardMaterial({ color:0x333333 })
        const plane = new THREE.Mesh(planeGeometry, planeMaterial)
        plane.rotation.x = -Math.PI/2
        plane.position.y = -1.5
        plane.receiveShadow = true
        scene.add(plane)

        // ========== 5. 添加灯光 ==========
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
        scene.add(ambientLight)

        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8)
        directionalLight.position.set(5,5,5)
        directionalLight.castShadow = true
        scene.add(directionalLight)

        // ========== 6. 渲染循环 ==========
        function animate() {
            requestAnimationFrame(animate)
            cube.rotation.x += 0.005
            cube.rotation.y += 0.005
            controls.update()
            renderer.render(scene, camera)
        }
        animate()

        // ========== 窗口适配 ==========
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth/window.innerHeight
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
        })
    </script>
</body>
</html>

6.5 示例功能说明

  • 完整三要素：场景、相机、渲染器
  • PBR 物理材质
  • 环境光 + 平行光
  • 实时阴影
  • 轨道控制器（鼠标可旋转缩放）
  • 自动旋转动画
  • 窗口自适应
  • 抗锯齿、平滑阻尼

七、全文总结与 Three.js 学习路线

7.1 核心总结

Three.js 是Web 3D 开发的事实标准框架，以极简 API、强大生态、双渲染后端（WebGL/WebGPU）成为前端图形开发首选。它覆盖从简单 3D 展示到数字孪生、元宇宙、WebXR、在线游戏全场景，是前端工程师必须掌握的高阶技能。

掌握 Three.js = 掌握 Web 图形开发的半壁江山。

7.2 系统化学习路线

阶段 1：基础（1-3 天）
  • 三要素：场景、相机、渲染器
  • 几何体、材质、Mesh
  • 控制器、渲染循环、窗口适配
阶段 2：进阶（1 周）
  • 光照、阴影、PBR 材质
  • 模型加载（glTF/GLB）
  • 射线拾取、3D 交互
  • 纹理、UV、动画
阶段 3：高级（1-2 周）
  • 后期处理（Bloom、景深、描边）
  • 实例化渲染、LOD、性能优化
  • 自定义着色器、ShaderMaterial
  • 物理引擎、碰撞、角色控制
阶段 4：高阶（长期）
  • WebGPU 后端渲染
  • 数字孪生 / 智慧城市架构
  • WebXR AR/VR 开发
  • 大规模场景优化

7.3 主流应用方向

  • 3D 产品在线展示
  • 数字孪生、智慧城市、工业仿真
  • 元宇宙、虚拟展厅、3D 商城
  • 数据可视化、大屏 3D 图表
  • 网页小游戏、AR/VR 体验
# 学习
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

OpenClaw vs Hermes Agent：企业级执行 vs 自我进化，一文读懂怎么选！

AI Agent 开源双子星深度对比：OpenClaw（GitHub 26.4w⭐）主打工程化落地，四层记忆+20+渠道+13,700+技能，适合企业自动化；Hermes Agent（53天10w⭐）主打闭环学习，四级记忆+自动技能进化+3,200+社区技能，越用越聪明。两者可互补组合：OpenClaw 做稳定执行引擎，Hermes 做持续学习大脑。短期落地选 OpenClaw，长期陪伴选 Her

avatar AtomGit开源社区
cover

1997年高教社杯全国大学生数学建模竞赛 A 题:《零件的参数设计》真题解析与 MATLAB 解决方案

avatar AtomGit开源社区
cover

1996年高教社杯全国大学生数学建模竞赛 B 题:《节水洗衣机》真题解析与 MATLAB 解决方案

avatar AtomGit开源社区