3D网页交互设计 · 全流程
30章 · 从零到实战
01
3D网页交互概述
概念
什么是3D网页交互 · 技术栈 (WebGL/Three.js/Babylon.js) · 应用趋势
02
开发环境搭建
工具
Node.js & npm · VS Code · 本地服务器 · 浏览器DevTools
03
Three.js基础入门
核心
Scene/Camera/Renderer · 第一个3D立方体
04
几何体与材质
造型
Box/Sphere/Cylinder · MeshBasicMaterial/Standard · 颜色纹理
05
光源系统
光照
Ambient/Point/Directional/SpotLight · 效果对比
06
相机控制
视角
透视vs正交 · OrbitControls · 相机动画
07
动画循环
运动
requestAnimationFrame · 帧率控制 · Tween.js补间
08
用户交互基础
交互
点击/悬停 · Raycaster射线 · 拾取物体
09
3D变换
空间
position/rotation/scale · 矩阵 · 父子层级
10
纹理映射
贴图
加载纹理 · 重复偏移 · 凹凸/法线/环境贴图
11
粒子系统
特效
粒子生成/动画/材质 · 性能优化
12
模型加载
资产
GLTF/GLB · GLTFLoader · 模型优化
13
骨骼动画与变形
动画
加载带动画模型 · 播放/暂停/混合
14
物理引擎入门
物理
Cannon.js/Ammo.js · 刚体 · 碰撞 · 重力
15
音视频集成
多媒体
嵌入音频 · 视频纹理 · 空间音效
16
着色器基础
GLSL
GLSL入门 · 自定义着色器材质 · 顶点/片元
17
后期处理
特效
EffectComposer · Bloom/SSAO · 色彩校正
18
性能优化
调优
几何体合并 · LOD · 纹理压缩 · 帧率监控
19
响应式设计
适配
屏幕适配 · 触摸事件 · 移动端优化
20
VR/AR入门
沉浸
WebXR · 简单VR场景 · 手柄交互
21
数据可视化
图表
3D柱状/散点图 · 数据驱动动画 · 热力图
22
建筑可视化
空间
室内漫游 · 楼层切换 · 标注 · 光照烘焙
23
游戏开发基础
游戏
第三人称控制器 · 碰撞响应 · 简单AI寻路
24
多用户协作
网络
WebSocket · 同步物体 · 用户标识/聊天
25
UI与3D融合
界面
CSS2DRenderer · HTML标签跟随 · 交互面板
26
自动化构建
工程
Webpack/Vite · 代码分割 · 生产优化
27
测试与调试
质量
Jest单元测试 · Chrome DevTools · 常见Bug
28
部署与发布
上线
Vercel/Netlify · CDN · 版本管理
29
项目实战（上）
实战
需求分析 · 技术选型 · 架构 · 核心功能
30
项目实战（下）
完结
完整开发 · 测试 · 部署 · 总结展望