在 Three.js 中设置 2D 视图

2024-06-25

我是新来的three.js我正在尝试使用这些 3D 工具建立 2D 可视化(针对各种分层精灵)。我想要一些指导PerspectiveCamera()论据和camera.position.set()论据。我已经朝着正确的方向轻推了这个答案 https://stackoverflow.com/a/11469614/2441384 to a 相关问题 https://stackoverflow.com/questions/11456758/is-there-at-two-js-counterpart-to-three-js/16071265#16071265,这表示要设置z坐标等于0 in camera.position.set(x,y,z).

下面是我正在修改的代码片段之一Stemkoski 的 Three.js 示例 https://github.com/stemkoski/stemkoski.github.com。目前让我困惑的部分是VIEW_ANGLE, x, and 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 https://stackoverflow.com/a/14823021/2441384, 然而OrthographicCamera()无论我的 2D 元素位于哪一层,都将允许按字面渲染尺寸(不会随着距离而减小)。我倾向于认为我仍然会使用PerspectiveCamera()用于精灵层之间的少量视差等效果(所以我想我的项目不是纯粹的 2D!)。

看来主要的事情是使所有精灵层平行于观察平面,并且camera.position.set()是与视场中心正交的视线。这对于这里的很多人来说一定是基本的;这对我来说真是一个新世界!

我想我仍然很难理解这个角色VIEW_ANGLE, x, and y以及二维可视化中相机与远视平面和近视平面之间的距离。对于正交相机来说,这是非常无关紧要的 - 您只需要足够的深度来包含您想要的所有图层以及适合您的精灵比例的查看平面。然而,对于透视相机来说,深度和场的作用会影响视差的效果,但还有其他考虑因素吗?

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

经过更多的工具探索如何考虑相机的视角(视场或 FOV)以及相机位置的 x、y、z 参数,我发现了这个有用的东西视场在游戏设计中的作用的视频摘要 http://www.youtube.com/watch?v=blZUao2jTGA(一个足够接近的模拟来回答我的 2D 可视化问题)。伴随着这个摄影师视野教程 http://www.youtube.com/watch?v=eCa1dfl5o7k我也发现很有帮助(如果可能有点俗气;),这两个资源帮助我了解如何为我的项目选择视野,以及非常宽或窄的视野(以360 度数)。最佳结果是人类自然视野的混合,具体取决于屏幕或投影距人脸的距离,并且还与前景中事物与背景中事物的相对比例密切相关。可视化(较宽的视野使背景看起来更小,较窄的视野放大背景 - 类似于正交相机的效果,但不那么明显)。我希望你发现这和我一样有帮助!

更新 3 - 进一步阅读

对于任何热衷于了解有关各种用途的相机规格的更多详细信息的人,您可以找到第 13 章计算机图形学原理与实践 https://rads.stackoverflow.com/amzn/click/com/0321399528与我解决上述问题和其他问题一样有用。

更新 4 - 正交相机中 z 维度的注意事项

当我继续我的项目时,我决定使用正交相机,这样我就可以增加精灵的 z 尺寸,以避免深度战斗 https://en.wikipedia.org/wiki/Z-fighting,但并没有让它们看起来逐渐退到远处。相比之下,如果我想让它看起来好像一个精灵正在退到远处,我可以简单地调整它的大小。然而,今天我遇到了一个愚蠢的错误,我想指出这一错误,以帮助其他人避免同样的麻烦。尽管正交相机没有描绘出随着物体距离更远而缩小的尺寸,但请注意仍然存在后截锥体平面 https://learnopengl.com/img/getting-started/orthographic_frustum.png超过哪些对象将从视图中剔除。今天,我不小心将几个对象的 z 值增加到了该平面之外,并且无法弄清楚为什么它们没有显示在屏幕上。使用正交相机时,很容易忘记 z 坐标的这个因素。


你的目标是什么?如果不需要透视变形,请使用正交相机。 也只需检查文档:

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

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

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

关于 x y 和 z 值。嗯,这取决于您的飞机的大小以及到相机的距离。您可以设置相机位置或平面位置并将相机保持在 (0,0,0)。 想象一下 3D 空间中的一架飞机。您可以根据飞机的大小计算相机的位置,或者只是通过尝试和错误...... 有关使用正交相机,请参阅此帖子:

Three.js - 正交相机 https://stackoverflow.com/questions/17558085/three-js-orthographic-camera

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Three.js 中设置 2D 视图 的相关文章

随机推荐