📐 3D网页·响应式与适配

✨ 30章 从入门到实战
01 3D网页基础
  • 什么是3D网页
  • WebGL与Three.js简介
  • 3D坐标系与相机概念
02Three.js入门
  • 安装与引入
  • 创建第一个3D场景
  • 理解动画循环
03几何体与材质
  • 内置几何体
  • 基础材质
  • 颜色与纹理
04光照与阴影
  • 环境光/点光源/平行光
  • 聚光灯
  • 阴影投射与接收
05响应式布局基础
  • CSS3媒体查询
  • 视口单位(vw/vh)
  • Flexbox与3D画布适配
063D场景响应式适配
  • 监听窗口resize
  • 动态更新相机宽高比
  • 渲染器尺寸自适应
07移动端适配
  • 触摸与鼠标事件统一
  • 性能优化(像素比/面数)
  • 移动端最佳实践
08多设备测试
  • 常见屏幕分辨率
  • Chrome DevTools模拟
  • 真机调试技巧
093D交互基础
  • Raycaster射线检测
  • 鼠标点击拾取
  • 高亮与选中反馈
10控制器与交互
  • OrbitControls
  • DragControls
  • TransformControls
11动画与过渡
  • TWEEN.js动画库
  • GSAP与3D结合
  • 缓动函数与曲线
12粒子系统
  • Points与PointsMaterial
  • 粒子纹理
  • 粒子动画
13模型加载
  • GLTF/GLB格式
  • GLTFLoader
  • 模型优化与压缩
14纹理与贴图
  • UV映射原理
  • TextureLoader
  • 纹理重复/偏移/环境贴图
15着色器入门
  • GLSL基础
  • 自定义ShaderMaterial
  • 顶点/片元着色器
16后期处理
  • EffectComposer
  • Bloom辉光
  • Film效果/抗锯齿
17性能优化
  • 几何体合并
  • LOD细节层次
  • InstancedMesh
18VR与AR基础
  • WebXR API
  • Three.js VR模式
  • 简单AR体验
19物理引擎
  • Cannon.js与Three.js
  • 刚体与碰撞检测
  • 物理材质/摩擦力
203D UI与HUD
  • CSS2DRenderer
  • HTML标签叠加
  • 响应式UI布局
21多场景管理
  • 场景切换
  • 状态保存与恢复
  • 加载进度条
22数据可视化3D
  • 3D柱状图
  • 3D散点图
  • 3D力导向图
233D地图与地理信息
  • Three.js绘制地球
  • 经纬度转3D坐标
  • 地图标记与弹窗
24游戏开发基础
  • 3D游戏场景搭建
  • 角色控制(WASD+鼠标)
  • 碰撞检测与简单AI
25音视频与3D结合
  • AudioListener
  • 视频纹理VideoTexture
  • 3D空间音效
26WebGPU与未来趋势
  • WebGPU简介
  • 与WebGL对比
  • Three.js对WebGPU支持
27项目实战(一)
  • 3D产品展示页面
  • 旋转/缩放/自动旋转
  • 交互细节
28项目实战(二)
  • 3D室内漫游场景
  • 第一人称控制
  • 碰撞检测
29项目实战(三)
  • 3D数据仪表盘
  • 实时数据更新
  • 交互式图表
30课程总结与进阶
  • 常见问题汇总
  • 学习资源推荐
  • 社区与开源项目