Three.js创建非缩放热点精灵

时间:2018-08-14 10:54:31

标签: three.js 3d perspectivecamera orthographic hotspot

上下文

我正在研究Three.js项目,该项目将PerspectiveCamera放入包含6个平面的场景中,这些平面共同构成了立方体。多维数据集具有适用于它的预渲染纹理。可以拖动相机环顾四周。在预渲染的房间内,摄像机可以旋转但不能移动。

  • 房间大小为6 x 6,墙壁位于边缘。
  • 相机位于中央。

在房间内某些热点可用。这些被实现为精灵。精灵始终放置在平面上,并且始终到相机的距离相同,无论相机的角度如何。 raycaster可以检测点击并执行一些非thee.js的操作。效果很好。

最初的问题

问题在于,当精灵几乎位于相机侧面时,它们会在屏幕边缘附近变形。可能是由于透视相机。

  • 与照相机的距离始终相同。
  • Sprite可以位于相机的前面,旁边,上方,下方或后面,具体取决于相机的旋转方式。

图注修复

正如其他SO问题所建议的那样,我尝试通过创建另一个OrthographicCamera来渲染一个带有热点(sprit)的场景并将其渲染在PerspectiveCamera之上以渲染房间(平面预渲染的纹理)。正交相机的旋转与透视相机的旋转相同。

当前问题 现在出现的问题是精神不对齐。透视相机场景中的物体。

问题

  • 处理“热点”的建议方法是什么?这些热点不应在屏幕边缘附近变形/缩放,我是否走在正确的轨道上?
  • 是否可以(甚至)将OrthographicCamera渲染的场景的内容与PerspectiveCamera渲染的场景的内容进行同步?
  • 为了更好地了解自己的问题,我现在需要什么有关3d的东西?

0 个答案:

没有答案