1

我尝试为three.js 构建一个类似GoogleEarth 的控件，但没有成功（因为我对3D 几何的理解很差，而且很遗憾没有时间深入研究）。也许有人可以帮助我，或者可能已经有了。无论如何，我认为这将是对 three.js 库的一个很好的补充。

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

  1. 用鼠标滚轮放大鼠标光标
  2. 按住 Shift 围绕场景旋转
  3. 按鼠标左键平移。
  4. 作为奖励：在上面的 1 和 2 操作期间显示一个小目标图标。

我在 1 上遇到了最大的麻烦，并且没有尝试过 2。平移很容易（有很多例子）。

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

我提前感谢亚历克斯

4

2 回答 2

2

我在过去的生活中实现了类似的东西。我在这里假设您正在与平面进行交互；将这些技术转换为与球体相切的平面留给读者作为练习。;)

用鼠标滚轮放大鼠标光标

为此，您需要将光线投射到场景中，并注意它击中的位置。然后，您需要将相机的视点平移到该交叉点。为了感觉“正确”，您需要某种比例放大而不是固定步长——例如，每个缩放步长都会将当前眼点到目标的距离减少 20%，而不是仅仅移动 20 个单位。这将在相机接近时自动减慢相机速度。

按住 Shift 围绕场景旋转

按住 shift 键时，您会希望鼠标左右移动围绕您的视点旋转。为此，您需要绕垂直于您的交点的轴偏航。您将向场景中投射光线（一旦按住 shift 键），注意交点，然后围绕该轴旋转相机的视点。请注意，您还需要重新定向相机以在旋转时不断指向该交叉点，或者可能让眼睛方向旋转以与从眼睛点到交叉轴的向量保持恒定角度。

按鼠标左键平移。

您只需要获取右眼向量和上眼向量，并沿适当的方向移动（将鼠标 dx/dy 与归一化的右眼/上眼相乘，并乘以时间步长以实现与帧速率无关的移动）。

作为奖励：在上面的 1 和 2 操作期间显示一个小目标图标。

在场景的交叉点处，添加一个小对象。退出模式后，移除对象。

于 2012-07-30T09:10:23.993 回答
0

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

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));
}
}

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

于 2016-09-01T13:15:24.707 回答