javascript 在 Three.js 中设置 2D 视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21786184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting up a 2D view in Three.js
提问by gromiczek
I'm new to three.jsand am trying to set up what amounts to a 2D visualization (for an assortment of layered sprites) using these 3D tools. I'd like some guidance on the PerspectiveCamera()arguments and camera.position.set()arguments. I already have a nudge in the right direction from this answerto a related question, which said to set the zcoordinate equal to 0in camera.position.set(x,y,z).
我是新手three.js，正在尝试使用这些 3D 工具设置相当于 2D 可视化（用于各种分层精灵）的内容。我想要一些关于PerspectiveCamera()论点和camera.position.set()论点的指导。我已经从这个对相关问题的答案中朝着正确的方向推动了，其中说将z坐标设置为等于0in camera.position.set(x,y,z)。
Below is the snippet of code I'm modifying from one of stemkoski's three.js examples. The parts that are hanging me up for the moment are the values for the VIEW_ANGLE, x, and y. Assuming I want to have a flat camera view on a plane the size of the screen how should I assign these variables? I've tried range of values but it's hard to tell from the visualization what is happening. Thanks in advance!
下面是我正在从stemkoski 的三个.js 示例之一修改的代码片段。被挂了我的时刻的部分是对的价值观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);
UPDATE - perspective vs orthographic camera:
更新 - 透视与正交相机：
Thanks @GuyGood, I realize I need to make a design choice about the perspective camera versus the orthographic camera. I now see that the PerspectiveCamera(), even in this 2D context would allow for things like parallax, whereas OrthographicCamera()would allow for literal rendering of sizes (no diminishing with distance) no matter what layer my 2D element is on. I'm inclined to think I'll still use the PerspectiveCamera()for effects such as small amounts of parallax between the sprite layers (so I guess my project is not purely 2D!).
谢谢@GuyGood，我意识到我需要对透视相机与正交相机进行设计选择。我现在看到PerspectiveCamera(), 即使在这个 2D 上下文中也允许像parallax这样的东西，而OrthographicCamera()无论我的 2D 元素在哪个层上，它都允许大小的文字渲染（不随距离减小）。我倾向于认为我仍然会使用PerspectiveCamera()效果，例如精灵层之间的少量视差（所以我想我的项目不是纯 2D 的！）。
It seems then that the main thing is to make all the sprite layers parallel to the viewing plane and that camera.position.set()is the orthogonal viewing line to the center of the field of view.This must be basic for so many folks here; it is such a new world to me!
看来，主要的事情是让所有的精灵层平行于视平面，也camera.position.set()就是到视场中心的正交视线。这对这里的很多人来说一定是基本的；这对我来说是一个全新的世界！
I think I still have a hard time wrapping my head around the role of VIEW_ANGLE, x, and yand the distance between the camera and the far and near viewing planes in a 2D visualization. With the orthographic camera this is pretty immaterial - you just need enough depth to include all the layers you want and a viewing plane that suits the scale of your sprites. However, with the perspective camera the role of depth and field influences the effect of parallax, but are there other considerations as well?
我想我还是有一个很难包装我的头周围的作用VIEW_ANGLE，x以及y与相机的在2D可视化远和近距离观察平面之间的距离。使用正交相机，这是非常无关紧要的 - 您只需要足够的深度来包含您想要的所有图层和适合您的精灵比例的查看平面。然而，对于透视相机来说，深度和场的作用会影响视差的效果，但还有其他的考虑吗？
UPDATE 2 - Angle of view and other variables:
更新 2 - 视角和其他变量：
After a bit more tooling around in pursuit of how to think about Angle of View (Field of View, or FOV) for the camera and the x,y,z arguments for the camera position, I came across this helpful video summary of the role of Field of View in game design(a close enough analog to answer my questions for my 2D visualization). Along with this Field of View tutorial for photographersthat I also found helpful (if maybe a touch cheesy ;), these two resources helped me get a sense of how to choose a Field of View for my project and what happens with either very wide or narrow Fields of View (which are measured in number of degrees out of 360). The best results are a mix of what feels like a natural field of vision for a human, depending on the distance of the screen or projection from their face, and is also keenly related to the relative scale of things in the foreground versus background in the visualization (wider fields of view make the background look smaller, narrower fields of view magnify the background - similar to, though not as pronounced as the effect of an orthographic camera). I hope you find this as helpful as I did!
在探索如何考虑摄像机的视角（视场，或 FOV）以及摄像机位置的 x、y、z 参数的更多工具之后，我看到了这个有用的角色视频摘要游戏设计中的视野（一个足够接近的模拟来回答我的 2D 可视化问题）。连同这个面向摄影师的视野教程我也觉得很有帮助（如果可能有点俗气；），这两个资源帮助我了解如何为我的项目选择视野以及非常宽或窄的视野会发生什么（以360 度中的度数）。最好的结果是混合了人类自然视野的感觉，这取决于屏幕或投影与他们脸部的距离，并且还与前景中事物与背景中事物的相对比例密切相关。可视化（更宽的视野使背景看起来更小，更窄的视野放大背景 - 类似于，但不像正交相机的效果那么明显）。我希望你觉得这和我一样有帮助！
UPDATE 3 - Further reading
更新 3 - 进一步阅读
For anyone zesting for more detail about camera specifications in a range of uses, you may find chapter 13 of Computer Graphics Principles and Practiceas useful as I have for addressing my above questions and much more.
对于任何想了解相机在各种用途中的规格的更多详细信息的人，您可能会发现《计算机图形原理与实践》的第 13 章与我解决上述问题以及更多其他问题一样有用。
UPDATE 4 - Considerations for the z dimension in the Orthographic camera
更新 4 - 正交相机中 z 维的注意事项
As I've continued my project I decided to use the orthographic camera so that I could increment the z dimensions of my sprites in order to avoid z-fighting, yet not have them appear to recede progressively into the distance. By contrast, if I want to make it appear as though a sprite is receding into the distance, I can simply adjust its size. However, today I ran across a silly mistake that I wanted to point out to save others from the same trouble. Although the orthographic camera does not depict receding size as objects are more distant, take care that there is still a back frustrum planepast which objects will be culled from view. Today I accidentally incremented the z values of several of my objects past that plane and could not figure out why they were not showing up on screen. It can be easy to forget this factor about the z coordinate while working with the orthographic camera.
当我继续我的项目时，我决定使用正交相机，这样我就可以增加我的精灵的 z 尺寸以避免z-fighting，但不会让它们看起来逐渐后退到远处。相比之下，如果我想让它看起来好像一个精灵正在向远处退去，我可以简单地调整它的大小。然而，今天我遇到了一个愚蠢的错误，我想指出它以拯救其他人免于同样的麻烦。尽管由于物体距离更远，正交相机不会描绘后退尺寸，但请注意仍有后截头锥平面过去哪些对象将从视图中剔除。今天，我不小心将我的几个对象的 z 值增加了超过该平面，但无法弄清楚为什么它们没有显示在屏幕上。在使用正交相机时，很容易忘记有关 z 坐标的这个因素。
采纳答案by GuyGood
What is your goal? If you do not need perspective distortion, use the orthographic camera. Also just check the documentation:
你的目标是什么？如果不需要透视失真，请使用正交相机。也只需检查文档：
https://threejs.org/docs/#api/en/cameras/PerspectiveCamera
https://threejs.org/docs/#api/en/cameras/PerspectiveCamera
View Angle/Fieldof View is self explanatory, if you don't know what it is, read up on it.
视角/视野是不言自明的，如果您不知道它是什么，请仔细阅读。
http://www.incgamers.com/wp-content/uploads/2013/05/6a0120a85dcdae970b0120a86d9495970b.png
http://www.incgamers.com/wp-content/uploads/2013/05/6a0120a85dcdae970b0120a86d9495970b.png
Concerning the x y and z value. Well, this depends on the size of your plane and the distance to the camera. You can either set the camera position or the plane's position and keep the camera at (0,0,0). Just imagine a plane in 3D space. You can calculate the position of the camera depending on the size of your plane or just go by try and error... For using the orthographic camera, see this post:
关于 xy 和 z 值。嗯，这取决于您的飞机的大小和与相机的距离。您可以设置相机位置或平面位置并将相机保持在 (0,0,0)。想象一下 3D 空间中的飞机。您可以根据飞机的大小计算相机的位置，也可以通过尝试和错误来计算...有关使用正交相机的信息，请参阅此帖子：
