Question

我尝试过不成功（因为我对3D几何理解不佳以及不幸缺乏时间深入挖掘）为three.js构建类似GoogleEarth的控件。也许有人可以帮助我，或者可能已经拥有它。无论如何，我认为这将是对three.js库的一个很好的补充。

这是我正在尝试构建的特定功能：

使用鼠标滚轮放大到MOUSE CURSOR
按住Shift
按鼠标左键平移。
作为奖励：在上述1和2次操作中显示一个小目标图标。

我最麻烦的是1，并没有尝试2.平移很容易（有很多例子）。

现在我无法放大场景以使其在光标下保持固定（因此我可以指向屏幕的右上角，放大并仍然可以看到光标下的内容）。 / p>

我提前感谢，亚历

Answer 1

我在过去的生活中实现过类似的东西。我在这里假设你正在与一架平面相互作用;将这些技术转换为与球体相切的平面留给读者练习。 ;）

放大鼠标滚轮到MOUSE CURSOR

要执行此操作，您需要将光线投射到场景中，并记下它所在的位置。然后，您需要将摄像机的视点转换为该交叉点。要感觉“正确”，您需要某种比例放大而不是固定步长 - 例如，每个缩放步骤将当前眼点到目标的距离减少20％，而不是仅移动20个单位。这会在摄像机接近时自动降低速度。

按住Shift

在场景中旋转

你持有一个移位，你需要左右鼠标移动绕你的观点进行轨道运动。要做到这一点，您需要围绕垂直于交叉点的轴进行偏航。您将光线投射到场景中（一旦按住移位），记下交叉点，然后围绕该轴旋转相机的眼点。请注意，您还需要重新调整摄像机的方向，以便在旋转时不断指向该交叉点，或者可能使眼睛方向旋转以与从眼点到交叉轴的矢量保持恒定角度。

按住鼠标左键。

你只需要获得正确的眼睛向量和眼睛向量，然后向适当的方向移动（将鼠标dx / dy与标准化的眼睛右眼/眼睛相乘，然后乘以时间步长以进行帧速率独立运动）。

作为奖励：在上述1和2次操作中显示一个小目标图标。

在场景的交叉点，添加一个小物体。退出模式后，删除该对象。

Answer 2

对于您的第一个问题，您可以在鼠标滚轮下使用此程序

mousewheel = function (event) {
event.preventDefault();
var factor = 15;
var mX = (event.clientX / jQuery(THREE_STUFF.container).width()) * 2 - 1;
var mY = -(event.clientY / jQuery(THREE_STUFF.container).height()) * 2 + 1;
var vector = new THREE.Vector3(mX, mY, 0.1);
vector.unproject(camera);
vector.sub(camera.position);
if (event.deltaY < 0) {
camera.position.addVectors(camera.position, vector.setLength(factor));                       trackBallControls.target.addVectors(trackBallControls.target, vector.setLength(factor));
} else {
camera.position.subVectors(camera.position, vector.setLength(factor));                        trackBallControls.target.subVectors(trackBallControls.target, vector.setLength(factor));
}
}

我希望这会对你有所帮助。

适用于Three.js的GoogleEarth控件

2 个答案: