在 Three.js 中设置 2D 视图 [英] Setting up a 2D view in Three.js
问题描述
我是 three.js 的新手，我正在尝试使用这些 3D 工具设置相当于 2D 可视化(用于各种分层精灵)的内容.我想要一些关于 PerspectiveCamera() 参数和 camera.position.set() 参数的指导.从这个答案到相关问题，其中说设置z坐标等于0 in camera.position.set(x,y,z).
I'm new to three.js and 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 answer to a related question, which said to set the z coordinate equal to 0 in 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!
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 上下文中也允许像 视差，而 OrthographicCamera() 将允许大小的文字渲染(不随距离减小)，无论我的 2D 元素位于哪个层.我倾向于认为我仍然会使用 PerspectiveCamera() 来实现精灵层之间的少量视差等效果(所以我猜我的项目不是纯 2D 的！).
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!).
看来，主要的事情是使所有精灵层平行于观察平面，并且 camera.position.set() 是到视野中心的正交观察线视图.这对于这里的很多人来说一定是基本的；对我来说这是一个全新的世界！
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!
我想我仍然很难理解 VIEW_ANGLE、x 和 y 的作用以及它们之间的距离相机以及 2D 可视化中的远景和近景平面.使用正交相机，这是非常无关紧要的 - 您只需要足够的深度来包含您想要的所有图层和适合您的精灵比例的查看平面.然而，对于透视相机来说，深度和场的作用会影响视差的效果，但还有其他的考虑吗?
I think I still have a hard time wrapping my head around the role of VIEW_ANGLE, x, and y and 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?
更新 2 - 视角和其他变量:
在探索如何考虑相机的视角(视场或 FOV)和相机位置的 x、y、z 参数后，我使用了更多工具，我发现了这个很有帮助的
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 photographers that 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!
更新 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 Practice as useful as I have for addressing my above questions and much more.
更新 4 - 正交相机中 z 维的注意事项
当我继续我的项目时，我决定使用正交相机，这样我就可以增加我的精灵的 z 维度，以避免 z-fighting，但没有让它们看起来逐渐向远方退去.相比之下，如果我想让它看起来好像一个精灵正在向远处退去，我可以简单地调整它的大小.然而，今天我遇到了一个愚蠢的错误，我想指出它以拯救其他人免于同样的麻烦.虽然正交相机不会随着物体更远而描绘出后退的尺寸，但请注意仍然存在 后视锥体平面 过去的对象将从视图中剔除.今天，我不小心将我的几个对象的 z 值增加了超过该平面，但无法弄清楚为什么它们没有显示在屏幕上.在使用正交相机时，很容易忘记这个关于 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 plane past 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.
推荐答案
您的目标是什么?如果不需要透视失真，请使用正交相机.也只需检查文档:
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/透视相机
视角/视野是不言自明的，如果您不知道它是什么，请阅读它.
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
关于 x y 和 z 值.嗯，这取决于您的飞机的大小和与相机的距离.您可以设置相机位置或平面位置并将相机保持在 (0,0,0).想象一下 3D 空间中的飞机.您可以根据飞机的大小计算相机的位置，或者只是通过尝试和错误...有关使用正交相机，请参阅此帖子:
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:
这篇关于在 Three.js 中设置 2D 视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
