Three.js 场景管理与优化实战

📘 30章 · 从入门到高阶

Three.js初探 WebGL

WebGL与Three.js关系 · 场景/相机/渲染器 · 第一个3D场景

场景对象Scene 雾效

Scene属性方法 · Fog · 背景色纹理 · 层级管理

相机系统Camera 透视/正交

透视&正交相机 · 参数详解 · OrbitControls · 多相机切换

渲染器Renderer WebGL

WebGLRenderer配置 · 抗锯齿/阴影 · requestAnimationFrame · Stats.js

几何体Geometry 内置&自定义

Box/Sphere/Cylinder · BufferGeometry · 自定义几何体 · 合并优化

材质Material 标准/物理

MeshBasicMaterial · Standard · Physical · 属性与纹理映射

纹理Texture 加载/贴图

TextureLoader · 重复偏移 · CubeTexture · 压缩优化

光源Light 阴影优化

环境/方向/点光/聚光 · 阴影实现与性能优化

物体变换位置/旋转/缩放

position/rotation/scale · 矩阵变换 · 本地与世界坐标

组与层级 Group

Group对象 · 父子层级 · 遍历场景树 · 动态添加/移除

动画系统 TWEEN/关键帧

动画循环 · TWEEN.js · KeyframeTrack · AnimationMixer

交互与事件 Raycaster

射线检测 · 点击/悬停 · DragControls · 高亮效果

粒子系统 Points

PointsMaterial · 粒子纹理 · 动画 · 大量粒子优化

精灵与标签 CSS2DRenderer

Sprite · CSS2DRenderer · CSS3DRenderer · 面向相机UI

加载器Loader GLTF/FBX

GLTFLoader · FBXLoader · OBJLoader · 进度管理 · 缓存策略

模型优化 LOD/InstancedMesh

减面 · LOD · InstancedMesh · 合并几何体

后期处理 EffectComposer

渲染管线 · Bloom · SSAO · FXAA/SMAA抗锯齿

着色器Shader GLSL

ShaderMaterial · 顶点/片元着色器 · uniforms · 常见效果

性能优化总论 Draw Call

Draw Call优化 · 内存管理 · 对象池 · 帧率控制

场景管理架构序列化

场景图设计 · 生命周期 · 序列化/反序列化 · 编辑器思路

大场景渲染视锥/遮挡剔除

Frustum Culling · Occlusion Culling · 分块/流式加载

纹理优化图集/压缩

Texture Atlas · Mipmap · KTX2/Basis · 纹理LOD

阴影优化 CSM/软阴影

阴影贴图分辨率 · 级联阴影(CSM) · 软阴影 · 性能分析

内存与调试 DevTools

内存泄漏检测 · 对象销毁 · Chrome性能分析 · Three.js Inspector

多线程与Worker OffscreenCanvas

Web Worker · OffscreenCanvas · 计算分离 · 主线程优化

VR/AR扩展 WebXR

WebXR API · VR控制器 · AR平面检测 · 性能考量

移动端优化 GPU/触摸

移动GPU特性 · 像素比控制 · 低配适配 · 触摸交互优化

网络加载优化 Draco/CDN

模型压缩(Draco/glTF Transform) · CDN · 预加载/懒加载 · 版本管理

实战案例一 3D产品展示

模型加载 · 交互旋转 · 材质切换 · 性能监控

实战案例二室内漫游

大场景分块加载 · 光照烘焙 · 碰撞检测 · 移动端适配