Three.js和OrbitControls.js - 平行于地平面的平移相机(如谷歌地球)

Question

我正在研究一个使用OrbitControls.js的简单Three.js演示.

我想改变OrbitControls中的平移行为.目前,当您平移相机时,它会将相机移动到垂直于查看方向的平面中.我想改变它,使相机与地平面保持恒定距离并平行移动.Google地球使用类似的控件设置.

编辑:我应该首先提到这个细节,但是我也想要点击并开始拖动以在整个拖动过程中直接保持在光标下方.鼠标移动与用户期望在屏幕上发生的事情之间需要牢固的连接.否则,当我试图在场景中移动时,感觉好像我正在"滑倒".

有人可以给我一个关于如何做到这一点的高级解释(有没有OrbitControls.js)？

Answer 1

编辑:OrbitControls现在支持平行于"地平面"的平移,这是默认设置.

要平行屏幕空间(传统行为),请设置:

controls.screenSpacePanning = true;

也可用MapControls,它具有类似于Google Earth的API.

three.js r.94

Answer 2

前段时间我正在研究这个问题，即将 OrbitControls.js 适配到地图导航。

• 这是 MapControls.js 的代码。
• 这是控件的演示。

Answer 3

我想到了。概述如下：

1. 将 mousedown 事件存储在某处。
2. 当鼠标移动时，获取新的mousedown事件。
3. 对于每个点，找到这些点击所在平面上的点（您需要将这些点放入相机空间，将它们转换到世界空间，然后从相机通过每个点发射光线以找到它们的交点与平面。本页解释了光线与平面相交测试）。
4. 从世界空间结束交点减去世界空间开始交点即可得到偏移量。
5. 减去相机目标点的偏移量，就完成了！

对于 OrbitControl.js，相机始终看着目标点，并且其位置是相对于该点的。因此，当您更改目标时，相机也会随之移动。由于目标始终位于平面上，因此相机会平行于该平面移动（只要您平移）。