文章目录
- Three.js OrbitControls 与多视口工程实战：相机同步、阻尼与像素比
- 一、单视口主循环
- 二、多视口要点
- 三、销毁与切换场景
- 四、结语
Three.js OrbitControls 与多视口工程实战：相机同步、阻尼与像素比
OrbitControls把「观察相机」从业务代码里抽离，多视口时要处理controls 与 renderer 的绑定、resize与阻尼更新。
一、单视口主循环
controls.update();renderer.render(scene,camera);开启enableDamping时必须在每帧调用update()，否则惯性会失效。
二、多视口要点
| 项 | 建议 |
|---|---|
| 相机 | 每视口独立 camera + controls，或共享相机但切换 viewport 时同步 aspect |
| setViewport / setScissor | 与renderer.setSize、CSS 尺寸一致，避免 controls 与射线不同步 |
| 像素比 | renderer.setPixelRatio变化后重算投影矩阵 |
三、销毁与切换场景
切换路由或销毁画布时调用controls.dispose()，并在 resize 监听里 debounce，避免高频矩阵写入。
四、结语
轨道控制是相机状态机：主循环里顺序固定（update → render），多视口则把视口矩形当作一等公民。
