3



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

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

在此处输入图像描述

下面是现场版的链接:(您可以通过单击地面来控制)

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

如您所见,在房间右侧的物体上,限制工作完美无瑕,但在橱柜和花瓶上,相机夹在墙上。

如果有人可以帮助我,那就太棒了。也欢迎任何其他小费。

问候,马克斯

4

1 回答 1

0

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

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

第一件事是不要使用内置的 Three.js 轨道控制,而是实现你自己的,在那里你控制你所有的变换。而且,这实际上非常容易。

要创建一个可轨道摄像机,你只需要 crate:

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

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

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

     Null                Camera

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

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

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

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

实际上,这很像创建虚拟云台。我希望我很清楚,有了图片,这将更容易可视化......

于 2017-10-25T19:05:05.397 回答