三.js &OrbitControls.js - 平行于地平面的平移相机(如谷歌地球) [英] Three.js & OrbitControls.js - pan camera parallel to ground plane (like Google Earth)

问题描述

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

I'm working on a simple Three.js demo that uses OrbitControls.js.

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

I'd like to change the behavior of panning in OrbitControls. Currently, when you pan the camera, it moves the camera in a plane that is perpendicular to the viewing direction. I'd like to change it so that the camera stays a constant distance from the ground plane and moves parallel to it. Google Earth uses a similar control setup.

我应该首先提到这个细节，但我也希望您单击并开始拖动的点在整个拖动过程中直接保持在光标下方.鼠标移动和用户期望在屏幕上发生的事情之间需要有牢固的联系.否则，当我试图在场景中移动时，感觉好像在滑倒".

I should have mentioned this detail in the first place, but I'd also like the point where you click and start dragging to remain directly under the cursor throughout the entire drag. There needs to be that solid connection between the mouse movement and what the user expects to happen on the screen. Otherwise, it feels as though I'm 'slipping' when I try to move around the scene.

有人能给我一个关于如何做到这一点的高级解释吗(有或没有 OrbitControls.js)?

Can someone give me a high-level explanation of how this might be done (with or without OrbitControls.js)?

推荐答案

我想通了.概览如下:

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

1. Store the mousedown event somewhere.
2. When the mouse moves, get the new mousedown event.
3. For each of those points, find the points on the plane where those clicks are located (You'll need to put the points into camera space, transform them into world space, then fire a ray from the camera through each point to find their intersections with the plane. This page explains the ray-plane intersection test).
4. Subtract the world-space start intersection point from the world-space end intersection point to get the offset.
5. Subtract that offset from the camera's target point and you're done!

在 OrbitControl.js 的情况下，相机总是看着目标点，它的位置是相对于该点的.因此，当您更改目标时，相机会随之移动.由于目标始终位于平面上，因此相机会平行于该平面移动(只要您在平移).

In the case of OrbitControl.js, the camera always looks at the target point, and its position is relative to that point. So when you change the target, the camera moves with it. Since the target always lies on the plane, the camera moves parallel to that plane (as long as you're panning).

这篇关于三.js &OrbitControls.js - 平行于地平面的平移相机(如谷歌地球)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！