在Three.js中设置2D视图

20

我刚开始接触three.js,并尝试使用这些3D工具搭建一个相当于2D可视化的场景(用于多个层叠精灵),我需要一些关于PerspectiveCamera()参数和camera.position.set()参数的指导。我已经从这个答案相关问题中得到了正确方向的指引,它说在 camera.position.set(x,y,z) 中将z坐标设置为0

以下是我正在修改的来自stemkoski's three.js examples之一的代码片段。目前让我困惑的部分是VIEW_ANGLExy的值。假设我想在屏幕大小的平面上拥有一个平面相机视图,我应该如何分配这些变量?我尝试了一系列值,但很难从可视化中看出发生了什么。提前致谢!
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;   
var VIEW_ANGLE = ?, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
var x = ?, y = ?, z = 0;
camera.position.set(x,y,z);
camera.lookAt(scene.position);

更新 - 透视相机 vs 正交相机:

感谢 @GuyGood,我意识到我需要在透视相机和正交相机之间做出设计选择。我现在看到即使在这个2D场景中,PerspectiveCamera() 也可以实现类似视差的效果,而 OrthographicCamera() 则可以实现字面上的大小渲染(不随距离而变小),无论我的2D元素在哪一层。我倾向于认为我仍然会使用 PerspectiveCamera() 来实现精灵层之间的小视差效果(所以我想我的项目不是纯粹的2D!)。

那么似乎主要的事情是使所有精灵层与视平面平行,并且 camera.position.set() 是到视野中心的正交观察线。这对于这里的许多人来说可能是基本的;对我来说却是一个全新的世界!

我认为我仍然很难理解 VIEW_ANGLExy 的作用以及相机与远近视平面之间的距离在 2D 可视化中的关系。对于正交相机来说,这并不重要——您只需要足够的深度来包含所有所需的层,并具有适合精灵比例的视平面。然而,对于透视相机,深度和视场的作用影响了视差效果,但还有其他考虑因素吗?
更新2 - 视角和其他变量:
在进一步探索如何思考相机的视角和相机位置的x,y,z参数时,我偶然发现了这个有用的游戏设计中视野角度(视场或FOV)作用的视频摘要(足以回答我的2D可视化问题)。除此之外,我还发现了这个摄影师的视野角度教程也很有帮助(如果可能有点俗气;)),这两个资源帮助我了解如何为我的项目选择视野角度以及非常宽或非常窄的视野角度会发生什么情况(这些角度是以360度为单位测量的)。最佳结果是根据人类的自然视野感觉来选择适当的视野,具体取决于屏幕或投影距离他们的面部的距离,并且与可视化中前景和背景物体的相对规模密切相关(更宽的视野使背景看起来更小,更窄的视野放大背景-类似于正交相机的效果,尽管不如此明显)。我希望您像我一样发现这个信息有用!

更新3 - 更多阅读

对于那些想要了解不同用途相机规格的细节的人,你可能会像我一样发现计算机图形学原理与实践中的第13章非常有用。

更新4 - 正交相机中z轴的考虑事项

随着项目的继续,我决定使用正交相机,以便我可以增加精灵的z维度,以避免z-fighting,但不会使它们逐渐消失到远处。相比之下,如果我想让精灵看起来逐渐消失到远处,我只需调整其大小即可。然而,今天我遇到了一个愚蠢的错误,我想指出来以免其他人遇到同样的麻烦。虽然正交相机不会像物体距离更远时那样呈现收缩大小,但要注意仍有back frustrum plane,超过这个平面的物体将被剔除。今天我意外地将几个对象的z值增加到了该平面之上,无法弄清楚它们为什么不显示在屏幕上。在使用正交相机时,很容易忘记这个关于z坐标的因素。
1个回答

5

你的目标是什么?如果不需要透视畸变,使用正交相机即可。同时,只需查看文档:

https://threejs.org/docs/#api/en/cameras/PerspectiveCamera

视角/视野是很容易理解的,如果你不知道它是什么,请查阅相关资料。

http://www.incgamers.com/wp-content/uploads/2013/05/6a0120a85dcdae970b0120a86d9495970b.png

关于x、y和z值。这取决于你的平面大小和相机距离。您可以设置相机位置或平面位置,并将相机保持在(0,0,0)。想象一下一个在3D空间中的平面,您可以根据平面的大小计算相机的位置,或者通过试错法来解决。有关使用正交相机,请参阅此帖子:Three.js - 正交相机

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接