🎮 3D交互·事件系统 30章 实战

⚡ 风格 · 全栈目录
01
3D交互初探
Three.js简介 WebGL渲染 项目预览
02
环境搭建
Node.js Vite 第一个项目 结构解析
03
场景核心
Scene/Camera/Renderer 坐标系
04
几何体基础
BoxGeometry SphereGeometry CylinderGeometry PlaneGeometry
05
材质与颜色
MeshBasicMaterial MeshStandardMaterial Color/Texture
06
光源系统
环境光 平行光 点光源 聚光灯
07
动画循环
requestAnimationFrame 旋转/移动 Clock 帧率控制
08
鼠标交互基础
Raycaster 点击拾取 click事件 获取对象
09
鼠标悬停效果
mousemove 移入移出 颜色/缩放 光标样式
10
拖拽交互
DragControls 物体拖拽 事件监听 拖拽约束
11
键盘交互
keydown/keyup WASD控制 组合键 防抖
12
触摸交互
touchstart/touchmove 单指旋转 双指缩放 兼容鼠标
13
轨道控制器
OrbitControls 旋转/缩放/平移 启用/禁用 阻尼
14
变换控制器
TransformControls 位置/旋转/缩放 物体编辑 协同Orbit
15
UI交互叠加
CSS2DRenderer 标签系统 信息面板 HTML叠加
16
事件冒泡与穿透
冒泡机制 阻止穿透 UI/3D分离 z-index
17
交互反馈设计
点击高亮 抖动动画 粒子爆炸 声音反馈
18
多物体管理
场景图(Group) 批量操作 层级事件
19
交互状态机
状态模式 多状态管理 切换动画
20
碰撞检测
AABB包围盒 射线精确碰撞 碰撞响应 性能优化
21
交互式表单
3D输入框/按钮 滑块/开关 2D联动
22
手势识别
滑动/捏合/旋转 手势库 3D操作映射
23
交互式图表
3D柱状图 饼图悬停 数据联动 动画过渡
24
VR交互入门
WebXR VR控制器拾取 瞬移/抓取 设计原则
25
AR交互入门
WebXR AR 平面检测 点击放置 真实融合
26
性能优化
节流/防抖 GeometryMerge LOD 帧率监控
27
交互调试工具
dat.GUI Stats.js Spector.js 自定义调试
28
多用户交互
WebSocket 同步状态 多人光标 房间管理
29
交互式3D编辑器
物体选择/变换 属性面板 撤销/重做
30
综合项目实战
3D产品配置器 交互式展厅 事件架构 部署优化
📘 ✉️ 专注资料整理