three.js - 使用 OrbitControls 限制相机方位角

标签 three.js azimuth



因此,我使用 Three.js 构建了一个架构可视化,用户应该能够做的事情之一就是单击事物并围绕它们运行。问题是相机能够穿过墙壁。我通过为每个可点击对象分配其自己的限制方位角和极角来解决这个问题。

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

enter image description here

这里是实时版本的链接: (你可以通过点击地面来控制)

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

正如您所看到的,在房间右侧的物体上,限制效果完美,但在橱柜和花瓶上,相机会穿过墙壁。

如果有人能帮助我,那就太棒了。也欢迎任何其他提示。

你好,麦克斯

最佳答案

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

由于我不太了解 Three.js,我将为您提供一个通用的解决方案,但它应该很容易适应 Three.js。

第一件事是不要使用内置的 Three.js 轨道控制,而是实现您自己的轨道控制,您可以在其中控制所有转换。而且,这实际上非常简单。

要创建可轨道相机,您只需装箱:

  • “空”可变形对象,这意味着不嵌入任何形状的简单可变形实体(不渲染,不可见,但存在)。我希望Three.js能够提供这样基本的东西。

  • 一个相机,它本身应该是另一个可变形的。

一旦你有了这个,你只需将相机作为“空”对象的父级即可。现在是“null”对象的父级,如果旋转“null”对象,则相机也会随之旋转。然后到轨道,您现在必须将相机从父对象移回:

     Null                Camera

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

这样,“null”对象就变成了相机“注视点”,如果你围绕 Y 旋转“null”对象(我相信 Three.js 使用 Y 向上),你就可以控制相机方位角。如果在 X 或 Z(取决于坐标系)上旋转“空”对象,您将控制相机高度。然后,您甚至可以通过在局部 Z 轴上移动相机来控制相机前后移动以接近“观察点”。

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

简单:您创建第二个“空”变换对象,将其命名为“the socle”,并将第一个变换对象作为最后一个变换对象的父级:像这样,相机“查看点”的旋转始终是本地的,并且您现在可以旋转“底座”,为您的“轨道相机”组提供世界空间中的初始方向。

事实上,这很像创建虚拟万向节。我希望我说得很清楚,如果有图片的话会更容易可视化......

关于three.js - 使用 OrbitControls 限制相机方位角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46934891/

相关文章:

javascript - 使用 three.js 单击网格获取像素的颜色值

javascript - 三.js Pointerlock控制沿y轴射击

javascript - 如何在 Three.js 中为camera.zoom设置动画

html - 重用具有不同输入的 Angular 组件

android - 将陀螺仪与加速度计相结合以获得航向

math - 根据太阳位置(方位角和仰角)以及纬度和经度计算日期和时间

javascript - Three.js FogExp2 的最大距离?

lua - 太阳在 Lua 中的位置(方位角)

太阳位置的 R 函数给出了意想不到的结果