在Three.js中设置2D视图

本文介绍了在Three.js中设置2D视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 three.js 的新手，正在尝试使用这些3D工具设置相当于2D可视化效果的图像（用于各种分层的精灵）。我想对 PerspectiveCamera（）参数和 camera.position.set（）参数提供一些指导。从到，该问题设置为 z 中，c $ c>坐标等于 0 。

下面是我正在从。目前让我挂念的部分是 VIEW_ANGLE ， x 和<$ c $的值c> y 。假设我想在平面屏幕上看到平面的摄像机视图，该如何分配这些变量？我尝试了值的范围，但是从可视化中很难分辨正在发生什么。

  var SCREEN_WIDTH = window.innerWidth，SCREEN_HEIGHT = window.innerHeight;谢谢！ 
 var VIEW_ANGLE =？，ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT，NEAR = 0.1，FAR = 20000; 
摄像头=新的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，我意识到我需要对透视相机和正交相机做出设计选择。我现在看到，即使在此2D上下文中， PerspectiveCamera（）也会允许，而 OrthographicCamera（）则无论我的2D元素位于哪一层，都可以对大小进行文字渲染（不随距离减小）。我倾向于认为我仍然会使用 PerspectiveCamera（）来实现诸如精灵层之间的少量视差之类的效果（所以我想我的项目不是纯粹的2D ！）。

然后看来，最主要的是使所有子画面层与观察平面平行，并且使 camera.position.set （）是与视场中心正交的视线。这对于这里的很多人来说必须是基本的；

我认为我仍然很难理解 VIEW_ANGLE ， x 和 y 以及2D中相机与远近平面之间的距离可视化。使用正交摄影机，这几乎是无关紧要的-您只需要足够的深度即可包含所需的所有图层以及适合子画面比例的观察平面。但是，使用透视相机时，深度和视场的作用会影响视差的效果，但是还有其他考虑因素吗？

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

在尝试了一些如何思考摄像机视角（视野或FOV）的工具之后以及相机位置的x，y，z参数，我遇到了这个有用的（一个非常接近的类比，可以回答我有关2D可视化的问题）。连同这个一样，我也觉得很有帮助（如果这两个资源帮助我了解了如何为我的项目选择视野，以及非常宽或狭窄的视野（以360度为单位进行度量）会发生什么。最好的结果是混合在一起，感觉就像是人类的自然视野，这取决于屏幕或投影相对于其面部的距离，并且还与前景中物体相对于背景中物体的相对比例密切相关。可视化（较宽的视野使背景看起来更小，较窄的视野使背景放大-类似于但不如正交摄影机的效果明显）。希望您能像我一样有帮助！

更新3-进一步阅读

对于那些热衷于在一系列用途中获取更多有关相机规格的人，您可以在对解决上述问题以及其他方面都非常有用。

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

在我继续进行项目时，我决定使用正交摄影机，以便增大精灵的z尺寸，以避免，但没有它们似乎逐渐向远处退去。相比之下，如果要使它看起来像是精灵在向后退，则可以简单地调整其大小。但是，今天我遇到了一个愚蠢的错误，我想指出这是为了使其他人免于同样的麻烦。尽管正交摄影机不会随着物体距离的增加而缩小大小，但请注意，仍然存在，从该视线中剔除对象。今天，我不小心将几个对象的z值增加到该平面之外，无法弄清为什么它们没有显示在屏幕上。在使用正交摄影机时，可能很容易忘记关于z坐标的这个因素。

解决方案

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

视角/视野是自我的说明性的，如果您不知道它是什么，请继续阅读。

关于xy和z值。好吧，这取决于飞机的大小和到相机的距离。您可以设置相机位置或飞机的位置，并将相机保持在（0,0,0）。
想象一下3D空间中的飞机。您可以根据飞机的大小来计算相机的位置，也可以通过反复尝试...
有关使用正交相机的信息，请参见以下文章：

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

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!).

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!

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?

UPDATE 2 - Angle of view and other variables:

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!

UPDATE 3 - Further reading

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.

UPDATE 4 - Considerations for the z dimension in the Orthographic camera

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/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

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 - Orthographic camera

这篇关于在Three.js中设置2D视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！