让精灵使用three.js和不同的相机类型

时间:2013-06-18 15:55:43

标签: three.js

我有一个关于使用透视和正交相机让精灵与three.js一起工作的问题。

我在一个场景中渲染了一个建筑物。在场景中的一个位置处,所有级别堆叠在彼此之上以给出建筑物的3D视图,并且正在使用正交相机来查看它。在场景的另一部分中,我只显示了所选建筑物的水平,并且正在使用透视摄像机。屏幕在两个视图之间划分。用户的想法是从建筑物视图中选择一个级别,并在屏幕的另一部分显示该选定级别的更详细的地图。

根据我的理解,我一直玩精灵一点点;如果使用透视摄像机查看精灵,则精灵的缩放属性是实际的大小属性,如果正在使用正交摄像机查看精灵,则缩放属性会根据视口缩放精灵。

我把精灵放在两个相机都可以看到的位置,这似乎就是这种情况。如果我将精灵缩放0.5,那么精灵占据了正交相机的视口的一半,我无法用透视相机看到它(大概是因为它,精灵是0.5px x 0.5px并且被舍入到0px (没有渲染,或者1px,实际上是不可见的。)如果我将精灵缩放50,透视相机可以看到它(大概是因为它是50px x 50px的正方形)并且正交相机被精灵过度(大概是因为它被缩放了50倍的视口。)

我的理解是否正确?

我问,因为在我渲染的场景中,建筑物和细节区域在x轴上相距约1000个单位。如果我在精细贴图上的某处放置一个精灵,我需要它~35x35像素,当我这样做时,它对细节视图工作正常,但建筑视图被超越。我玩了数字,似乎如果我将精灵缩放4,它会开始显示在我的建筑视图上,即使视图之间有1000个单位距离,并且透视相机也看不到精灵。 / p>

因此。如果我的理解是正确的,那么我需要使用单独的场景;意见之间的差距要大得多;两个视图使用相同的摄像头类型;或不使用精灵。

1 个答案:

答案 0 :(得分:1)

基本上有两种不同的方法可以使用精灵,无论是2D屏幕坐标还是3D场景坐标。也许场景坐标是你需要的?有关两者的示例,请查看以下示例:

http://stemkoski.github.io/Three.js/Sprites.html

,特别是当您放大并缩小该演示时,请注意场景中的精灵会改变大小,而其他精灵则不会。

希望这有帮助!