Three.js 从零搭建3D网页 · 课程目录

什么是Three.js、WebGL与Three.js的关系、Three.js能做什么、第一个3D场景（Hello Cube）

场景(Scene)与相机(Camera)

场景的概念、透视相机与正交相机、相机位置与朝向、OrbitControls

渲染器(Renderer)

WebGL渲染器、渲染循环(requestAnimationFrame)、设置背景色、自适应窗口大小

几何体(Geometry)

内置几何体（Box、Sphere、Cylinder等）、几何体参数、BufferGeometry原理

材质(Material)

基础材质(MeshBasicMaterial)、标准材质(MeshStandardMaterial)、材质属性（颜色、透明度、线框）

环境光、平行光、点光源、聚光灯、光源辅助对象

纹理(Texture)

纹理加载(TextureLoader)、纹理映射、纹理重复与偏移、环境贴图

网格(Mesh)与变换

position、rotation、scale、矩阵变换、局部坐标与世界坐标

requestAnimationFrame动画循环、时间增量(delta)、补间动画、旋转与移动动画

组(Group)与层级结构

组的创建与使用、父子层级关系、局部变换与全局变换

交互与事件

Raycaster射线检测、鼠标点击拾取对象、鼠标悬停效果、触摸事件支持

粒子系统(Particles)

Points与PointsMaterial、粒子纹理、粒子动画、大量粒子性能优化

阴影原理、开启阴影、阴影贴图参数、阴影性能优化

GLTF/GLB格式、GLTFLoader使用、模型动画、模型优化建议

骨骼动画与变形

SkinnedMesh、骨骼动画播放、变形目标(MorphTargets)

后期处理(PostProcessing)

EffectComposer、辉光(UnrealBloomPass)、景深、色彩校正

着色器(Shader)入门

ShaderMaterial、顶点着色器、片元着色器、uniforms与attributes

自定义几何体

BufferGeometry自定义顶点、索引、法线、UV坐标

物理引擎集成

Cannon-es或Ammo.js、刚体与碰撞体、物理与视觉同步

音视频与3D场景

AudioListener与PositionalAudio、视频纹理(VideoTexture)

CSS2DRenderer与CSS3DRenderer

CSS2D标签、CSS3D变换、混合渲染

几何体合并、LOD、实例化渲染(InstancedMesh)、帧率监控

WebXR API、VRButton、ARButton、沉浸式体验基础

多场景与场景切换

场景管理、场景过渡动画、加载场景与游戏场景分离

GUI调试工具

dat.GUI/lil-gui、调试面板、实时调整参数

向量(Vector3)、矩阵(Matrix4)、四元数(Quaternion)、欧拉角

曲线与路径

CatmullRomCurve3、贝塞尔曲线、沿路径运动、TubeGeometry

天空盒与背景

CubeTextureLoader、HDR环境贴图、场景背景设置

水、云、火焰特效

自定义着色器实现、粒子系统模拟、ShaderToy移植

完整项目实战

3D产品展示页、交互式3D画廊、3D数据可视化仪表盘