Question

我正在使用OrbitControls.js进行简单的Three.js演示。

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

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

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

Answer 1

编辑：OrbitControls现在支持平行于“地平面”的平移，这是默认设置。

要与屏幕空间平行（传统行为），请设置：

controls.screenSpacePanning = true;

同样可用MapControls，其API类似于Google地球的API。

three.js r.94

Answer 2

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

这是the code of MapControls.js。
这是控件的the demo。

Answer 3

我明白了。这是概述：

将mousedown事件存储在某处。
当鼠标移动时，获取新的mousedown事件。
对于每个点，找到点击所在平面上的点（您需要将点放入相机空间，将它们转换为世界空间，然后从相机通过每个点发射光线到找到他们与飞机的交叉点。This page解释了射线平面相交测试。
从世界空间末端交叉点减去世界空间起点交叉点以获得偏移量。
从相机的目标点减去偏移量，然后就完成了！

对于OrbitControl.js，摄像机始终查看目标点，其位置相对于该点。因此，当您更改目标时，相机会随之移动。由于目标始终位于平面上，因此摄像机平行于该平面移动（只要您正在平移）。

Answer 4

你应该将你的相机“向上”设置为z ax：

camera.up.set(0,0,1)

然后，OrbitControl的主要问题是它的panUp（）函数。它应该是固定的。

我的拉取请求：https://github.com/mrdoob/three.js/pull/12727

y ax是相对于相机轴的，应该相对于世界上的固定计划。要定义预期的y轴，请根据世界z轴进行相机x ax的90°旋转。

v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
v.applyAxisAngle( new THREE.Vector3( 0, 0, 1 ), Math.PI / 2 );
v.multiplyScalar( distance );
panOffset.add( v )

享受！

Three.js＆amp; OrbitControls.js - 与地平面平行的平移相机（如谷歌地球）

4 个答案: