Question

我是three.js的新手，正在尝试使用这些3D工具设置相当于2D可视化（适用于各种分层精灵）。我想对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的值。假设我希望在平面上有一个平面摄像机视图，屏幕大小应该如何分配这些变量？我尝试了一系列的值，但很难从可视化中看出发生了什么。提前谢谢！

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()效果，例如精灵层之间的少量视差（所以我猜我的项目不仅仅是2D！）。

似乎主要的是让所有精灵层与观察平面平行，而camera.position.set()是到视野中心的正交观察线。这对于这么多必须是基本的人们在这里;对我来说这是一个新世界！

我认为我仍然很难围绕VIEW_ANGLE，x和y的角色以及相机与远近观看平面之间的距离2D可视化。使用正交相机这非常不重要 - 您只需要足够的深度来包含您想要的所有图层以及适合您的精灵比例的观察平面。然而，透视相机深度和场的作用会影响视差效果，但还有其他考虑因素吗？

更新2 - 视角和其他变量：

在追求如何考虑相机的视角（视野或视场）以及相机位置的x，y，z参数之后，我进行了一些工具，我遇到了这个有用的{{ 3}}（足够接近模拟以回答我的2D可视化问题）。除了这个video summary of the role of Field of View in game design，我也发现它很有帮助（如果可能有点俗气;），这两个资源帮助我了解了如何为我的项目选择视野以及无论是宽还是窄都会发生什么视野（以360度的度数来衡量）。最好的结果是感觉像是人类的自然视野，取决于屏幕的距离或投影与脸部的距离，并且与前景中的事物相对于背景的相对比例敏感地相关。可视化（更宽的视野使背景看起来更小，更窄的视野放大背景 - 类似于，但不像正交相机的效果那样明显）。我希望你觉得这和我一样有用！

更新3 - 进一步阅读

对于有兴趣了解有关各种用途的相机规格的更多细节的人，您可能会发现Field of View tutorial for photographers的第13章与我解决上述问题以及更多内容一样有用。

更新4 - 正交相机中z尺寸的注意事项

当我继续我的项目时，我决定使用正交相机，这样我就可以增加我的精灵的z尺寸，以避免Computer Graphics Principles and Practice，但不会让它们逐渐向后退去。相比之下，如果我想让它看起来好像精灵正在退去距离，我可以简单地调整它的大小。然而，今天我遇到了一个愚蠢的错误，我想指出要避免其他人遇到同样的麻烦。虽然正交相机没有描绘物体更远的后退尺寸，但要注意仍然有z-fighting过去哪些物体将从视野中剔除。今天我偶然增加了几个物体经过那架飞机的z值，无法弄清楚它们为什么没有出现在屏幕上。在使用正交相机时，很容易忘记关于z坐标的这个因素。

Answer 1

你的目标是什么？如果您不需要透视变形，请使用正交相机。另外，请查看文档：

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

View Angle / Fieldof View是不言自明的，如果您不知道它是什么，请阅读它。

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

关于x y和z值。嗯，这取决于你的飞机的大小和相机的距离。您可以设置摄像机位置或平面位置，并将摄像机保持在（0,0,0）。想象一下3D空间中的一架飞机。您可以根据飞机的大小计算摄像机的位置，或者只是尝试和错误... 有关使用正交相机的信息，请参阅以下文章：

Three.js - Orthographic camera

在Three.js中设置2D视图

1 个答案: