ThreeJS入门到进阶教程

目录

卷一：初识三维 · 在浏览器里造个小世界

主题：环境搭建与核心概念

第一章：打开潘多拉的工具箱

• Three.js的前世今生——为什么它成了Web3D的事实标准
• 五分钟搭建开发环境——Vite+ES Module的现代前端仪式感
• Scene、Camera、Renderer的三位一体——理解3D渲染的哲学基础
• 你的第一个场景——让红色方块转起来，以及背后的渲染管线

第二章：几何与图元的积木游戏

• BufferGeometry的内存美学——顶点数据如何躺在GPU里
• 玩转内建几何体——从柏拉图立方体到甜甜圈（Torus）
• 动手捏一个自定义几何体——写个莫比乌斯环送给心仪的人

卷二：光影魔术 · 模拟上帝说要有光

主题：材质系统与光照模型

第三章：材质的分子料理

• MeshBasicMaterial与MeshLambertMaterial——基础材质的诚实与欺骗
• PBR工作流程入门——Roughness和Metalness的双人舞
• ShaderMaterial初探——给勇敢者的GLSL预告函

第四章：点亮虚拟世界的光源

• Three.js的光源家族——从环境光到聚光灯的特性图谱
• 阴影的艺术——Shadow Mapping的偏见与矫正技巧
• 环境光照与IBL——用一张HDR图照亮整个世界

卷三：视角与叙事 · 摄像机不只是眼睛

主题：相机系统与交互控制

第五章：投影的几何学

• 透视相机vs正交相机——FPS游戏与建筑图纸的视觉差异
• 相机控制器详解——OrbitControls背后的球坐标数学
• 多相机与分屏渲染——双人游戏的画面分割秘籍

第六章：交互的人类学

• Raycaster射线检测——从屏幕像素到3D空间的逆向穿越
• 鼠标与触摸事件——实现拖拽、悬停、点击的完整方案
• 空间UI设计——在3D世界里做2D界面，以及反过来

卷四：时间的诗学 · 让静态世界呼吸

主题：动画系统与时间控制

第七章：动画的基础语法

• requestAnimationFrame的节拍器原理——与浏览器刷新率共舞
• 关键帧动画与AnimationMixer——从TRS到复杂骨骼动画
• 缓动函数与物理质感——为什么线性插值看起来很假

第八章：程序动画与响应式

• 顶点着色器动画——用数学公式让几何体跳舞
• 音频可视化——把音乐的频谱变成几何的韵律
• 滚动触发的3D叙事——WebGL与网页滚动的联姻

卷五：粒子与群集 · 星辰大海的数学

主题：粒子系统与GPU Instancing

第九章：Point与Sprite的粒子魔法

• Points与BufferGeometry——十万粒子的性能密码
• 粒子纹理与Billboard——让2D图片永远正对相机
• 粒子系统的生命周期——模拟雨雪、烟花、尘土

第十章：InstancedMesh的克隆军团

• 实例化渲染的原理——一次绘制调用复制一万个对象
• 动态实例化矩阵——让每片草叶都有独特的姿态
• LOD与视锥剔除——大场景的渲染优化心法

卷六：纹理与表面 · 细节决定真实

主题：贴图系统与UV展开

第十一章：UV坐标与纹理映射

• 纹理坐标的拓扑学——从平面到球面的投影艺术
• TextureLoader与异步管理——加载进度条的心理学
• 纹理压缩与Mipmap——显存与画质的博弈论

第十二章：高级贴图技术

• 法线贴图与高度贴图——用像素模拟表面凹凸
• 环境贴图与反射——CubeTexture与PMREM的预计算
• 动态纹理与Canvas纹理——程序化生成与视频贴图

卷七：着色器的黑客帝国 · 真正的高手在这里

主题：Shader编程与GLSL

第十三章：Vertex Shader的几何变形

• 着色器材料的完整结构——Uniform、Attribute、Varying的三角关系
• 顶点动画的波形干预——旗帜飘扬、水面涟漪、植物摇曳
• 几何实例化的着色器定制——每个实例独特的颜色与变换

第十四章：Fragment Shader的像素炼金

• 片元着色的光照计算——手写Lambert与Phong模型
• 噪声函数与程序化纹理——Perlin与Simplex噪声的应用
• 后期处理基础——Bloom、晕影、色调映射的简易实现

卷八：工程化与进阶 · 从Demo到产品

主题：性能优化、加载策略与XR应用

第十五章：模型加载与格式战争

• GLTF/GLB格式详解——为什么它是Three.js的VIP
• Draco与KTX2压缩——让模型文件瘦身的黑魔法
• 加载策略与流式传输——大场景的分块加载方案

第十六章：性能优化与调试

• Stats.js与Spector.js——找到性能瓶颈的显微镜
• Draw Call优化与合批——Geometry merging vs Instancing
• 内存管理与垃圾回收——避免WebGL上下文的内存泄漏

第十七章：WebXR与空间计算

• WebXR设备与Session管理——进入VR/AR的门户
• VR渲染与立体视觉——双眼视差与6DOF控制器
• AR的平面检测与锚点——把虚拟物体放在现实世界里