使用 OrbitControls 限制相机方位角

Question

因此，我正在使用 Three.js 构建建筑可视化，用户应该能够做的其中一件事就是点击事物并围绕它们旋转。问题是相机能够穿过墙壁。我通过为每个可点击对象分配它自己的限制方位角和极角来解决这个问题。

现在的问题是方位角从 -PI 到 +PI，并且不可能限制在例如 1.5 和 -2.4 之间，因为它限制了 "wrong" 方式。我希望这张图能更好地解释这一点：

下面是现场版的link：（点击地面即可控制）

https://jim-fx.com/modern/

如您所见，在房间右侧的物体上，限制工作完美无瑕，但在橱柜和花瓶上，摄像机会穿过墙壁。

如果有人能帮助我，那就太好了。也欢迎任何其他小费。

你好，马克斯

Answer 1

您的问题有多种解决方案。一种是为您的相机实施一种与真实或虚拟墙壁的碰撞检测，从而停止旋转。但是，我猜你正在寻找更简单的实现方式。

因为我不太了解 Three.js，我会为您提供一个通用的解决方案，但应该很容易适应 Three.js。

第一件事是不要使用内置的 Three.js 轨道控制，而是实现自己的控制所有转换。而且，这其实很简单。

要创建一个轨道相机，您只需装箱：

一个"null"可变形对象，意思是一个简单的可变形实体，不嵌入任何形状（不渲染，不可见，但存在）。我希望Three.js提供这样的基本东西。
一个相机，它本身应该是另一个可变形的。

有了这个之后，您只需将相机作为 "null" 对象的父级即可。现在是 "null" 对象的父级，如果您旋转 "null" 对象，您将旋转相机。然后到轨道，你现在必须将相机从父对象移回：

     Null                Camera

       + - - - - - - - - - |>

像这样，"null"物体就变成了相机"look at point"，如果你把"null"物体绕着Y旋转（我相信Three.js用Y了），您控制相机方位角。如果您在 X 或 Z（取决于坐标系）中旋转 "null" 对象，您将控制相机高度。然后，您甚至可以通过在局部 Z 轴上移动相机来控制相机前后移动以接近 "look at point"..

好吧，你现在有了一个易于控制的轨道相机。但是你的问题还没有解决：如何在每个相机初始方向上使这个控制 Pi / -Pi 成为可能？

简单：创建第二个 "null" 变换对象，将其命名为 "the socle"，并将第一个对象作为最后一个对象的父对象：像这样，相机的旋转 "look at point"总是本地的，你现在可以旋转 "the socle" 给你的 "Orbital camera" 组一个在世界 space.

中的初始方向

事实上，这很像创建虚拟云台。我希望我说清楚了，有了图片这会更容易形象化...

使用 OrbitControls 限制相机方位角

Limiting camera azimuth angle using OrbitControls

azimuth

three.js