javascript - 在 Three.js 中设置 2D View

Question

我是 three.js 的新手，正在尝试使用这些 3D 工具设置相当于 2D 可视化(用于各种分层 Sprite )的内容。我想要一些关于 PerspectiveCamera() 参数和 camera.position.set() 参数的指导。我已经在从 this answer 到 related question 的正确方向上进行了轻推，这表示将 z 坐标设置为等于 0 中的 camera.position.set(x,y,z) 。

下面是我从 stemkoski's three.js examples 之一修改的代码片段。目前困扰我的部分是 VIEW_ANGLE 、 x 和 y 的值。假设我想在屏幕大小的平面上有一个平面相机 View ，我应该如何分配这些变量？我已经尝试了一系列值，但很难从可视化中看出发生了什么。提前致谢!

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);

更新 - 透视与正交相机:

谢谢@GuyGood，我意识到我需要对透视相机与正交相机进行设计选择。我现在看到 PerspectiveCamera() ，即使在这个 2D 上下文中也允许 parallax 之类的东西，而 OrthographicCamera() 将允许大小的文字渲染(不随距离减小)，无论我的 2D 元素在哪一层。我倾向于认为我仍然会使用 PerspectiveCamera() 来实现 Sprite 层之间的少量视差等效果(所以我猜我的项目不是纯 2D 的!)。

看来，主要的事情是让所有的 Sprite 层平行于视平面， camera.position.set() 是到视场中心的正交视线。这对于这里的很多人来说必须是基本的；这对我来说是一个全新的世界!

我想我仍然很难理解 VIEW_ANGLE 、 x 和 y 的作用以及在 2D 可视化中相机与远景和近景平面之间的距离。使用正交相机，这是非常不重要的 - 您只需要足够的深度来包含您想要的所有图层和适合您的 Sprite 比例的查看平面。然而，对于透视相机来说，深度和场的作用会影响视差的效果，但还有其他的考虑吗？

更新 2 - 视 Angular 和其他变量:

在探索如何考虑相机的视 Angular (视场，或 FOV)以及相机位置的 x、y、z 参数的更多工具之后，我遇到了这个有用的 video summary of the role of Field of View in game design(足够接近模拟来回答我的 2D 可视化问题)。除了这个 Field of View tutorial for photographers 我也发现它很有帮助(如果可能有点俗气；)，这两个资源帮助我了解如何为我的项目选择视野以及非常宽或窄的视野会发生什么(以 360 度中的度数来衡量)。最好的结果是混合了人类自然视野的感觉，这取决于屏幕或投影与他们脸部的距离，并且还与前景中事物与背景中事物的相对比例密切相关。可视化(更宽的视野使背景看起来更小，更窄的视野放大背景 - 类似于，但不像正交相机的效果那么明显)。我希望你觉得这和我一样有帮助!

更新 3 - 进一步阅读

如果您想了解有关各种用途的相机规范的更多详细信息，您可能会发现 Computer Graphics Principles and Practice 的第 13 章与我解决上述问题以及更多其他问题一样有用。

更新 4 - 正交相机中 z 维度的注意事项

当我继续我的项目时，我决定使用正交相机，这样我就可以增加我的 Sprite 的 z 尺寸以避免 z-fighting ，但不会让它们看起来逐渐后退到远处。相比之下，如果我想让它看起来好像一个 Sprite 正在向远处退去，我可以简单地调整它的大小。然而，今天我遇到了一个愚蠢的错误，我想指出它以拯救其他人免于同样的麻烦。尽管正交相机不会在物体更远时描绘后退尺寸，但请注意仍然存在 back frustrum plane 过去，物体将从 View 中剔除。今天，我不小心将我的几个对象的 z 值增加了超过该平面，但无法弄清楚为什么它们没有显示在屏幕上。在使用正交相机时，很容易忘记有关 z 坐标的这个因素。

Answer 1

你的目标是什么？如果不需要透视失真，请使用正交相机。
也只需检查文档:

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

视 Angular/视野是不言自明的，如果您不知道它是什么，请仔细阅读。

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

关于 x y 和 z 值。嗯，这取决于你的飞机的大小和到相机的距离。您可以设置相机位置或平面位置并将相机保持在 (0,0,0)。
想象一下 3D 空间中的飞机。您可以根据飞机的大小计算相机的位置，或者只是通过尝试和错误...
要使用正交相机，请参阅此帖子:

Three.js - Orthographic camera