Javascript 在Three.js中设置二维视图

我不熟悉

three.js

，我正在尝试使用这些3D工具设置2D可视化（针对各种分层精灵）。我想要一些关于

PerspectiveCamera（）

参数和

camera.position.set（）

参数的指导。我已经在从到a的正确方向上进行了一次轻推，这意味着在

camera.position.set（x，y，z）

中将

z

坐标设置为

0

下面是我正在修改的一段代码。暂时挂断我的部分是

视角

、

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上下文中，也会允许这样的事情，而

OrthographicalCamera（）

会允许大小的文字渲染（不随距离减小），不管我的2D元素在哪一层上。我倾向于认为我仍然会使用透视照相机（）来获得效果，比如精灵层之间的少量视差（因此我想我的项目不是纯粹的2D！）

看起来主要的事情是使所有的精灵层平行于观察平面，并且

camera.position.set（）

是垂直于视野中心的观察线。这对于这里的很多人来说是基本的；对我来说，这是一个全新的世界

我想我仍然很难在二维可视化中思考

视角

、

x

和

y

的角色以及相机与远近观察平面之间的距离。对于正交相机，这是非常无关紧要的-你只需要足够的深度来包含你想要的所有层和一个适合你精灵比例的观察平面。然而，对于透视相机，深度和视场的作用会影响视差的效果，但是还有其他考虑因素吗

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

在对如何考虑摄像机的视角（视野或FOV）和摄像机位置的x、y、z参数进行了更多的研究之后，我发现了这个有用的方法（一个足够接近的模拟方法，可以回答我的2D可视化问题）。除此之外，我还发现这一点很有帮助（如果可能有点俗气的话），这两个资源帮助我了解了如何为我的项目选择一个视野，以及非常宽或非常窄的视野（以360度中的度数衡量）会发生什么。最好的结果是，根据屏幕或投影距人脸的距离，混合了人类的自然视野，并且与可视化中前景与背景的相对比例密切相关（更宽的视野会使背景看起来更小，更窄的视野会放大背景-类似于正交摄影机的效果，但不如正交摄影机的效果明显）。我希望您能像我一样发现这一点

更新3-进一步阅读

对于那些热衷于在各种用途中了解更多相机规格细节的人来说，你可能会发现第13章和我在解决上述问题以及更多问题时一样有用

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

---

当我继续我的项目时，我决定使用正交摄影机，这样我可以增加精灵的z维度，以避免它们逐渐后退到远处。相比之下，如果我想让精灵看起来好像正在后退到远处，我可以简单地调整它的大小。然而，t今天我遇到了一个愚蠢的错误，我想指出这一错误，以避免其他人陷入同样的麻烦。虽然正交相机不会随着物体距离的增加而显示出后退的大小，但要注意，仍然有一个过去，物体将被从视图中剔除。今天我无意中增加了几个物体的z值，超过了这个值平面，无法找出它们没有显示在屏幕上的原因。在使用正交摄影机时，很容易忘记z坐标的这个因素。

您的目标是什么？如果不需要透视失真，请使用正交摄影机。 另外，只需查看文档：

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

关于x、y和z值。这取决于平面的大小和到摄影机的距离。您可以设置摄影机位置或平面的位置，并将摄影机保持在（0,0,0）。 想象一下三维空间中的一个平面。你可以根据你的平面大小来计算相机的位置，也可以试着出错。。。 有关使用正交摄影机的信息，请参见本文：