我是新手three.js
,正在尝试使用这些 3D 工具设置相当于 2D 可视化(用于各种分层精灵)的内容。我想要一些关于PerspectiveCamera()
论点和camera.position.set()
论点的指导。从这个答案到相关问题,我已经朝着正确的方向轻推,该问题说将z
坐标设置为等于0
in camera.position.set(x,y,z)
。
下面是我从stemkoski 的 three.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);
更新 - 透视与正交相机:
谢谢@GuyGood,我意识到我需要对透视相机和正交相机做出设计选择。我现在看到PerspectiveCamera()
, 即使在这个 2D 上下文中,也允许像parallax之类的东西,而OrthographicCamera()
无论我的 2D 元素在什么层上,都允许字面渲染大小(不随距离减小)。我倾向于认为我仍然会使用PerspectiveCamera()
for 效果,例如精灵层之间的少量视差(所以我想我的项目不是纯粹的 2D !)。
看来主要的事情是使所有精灵层平行于观察平面,即camera.position.set()
与视野中心正交的观察线。这对于这里的许多人来说一定是基本的;这对我来说真是一个新世界!
我想我仍然很难理解VIEW_ANGLE
、x
和y
2D 可视化中相机与远近观察平面之间的距离。使用正交相机,这是非常无关紧要的——你只需要足够的深度来包含你想要的所有层和一个适合你的精灵比例的观察平面。然而,对于透视相机,景深和场的作用会影响视差的效果,但还有其他考虑因素吗?
更新 2 - 视角和其他变量:
在进行了更多工具以寻求如何考虑相机的视角(视野或 FOV)和相机位置的 x、y、z 参数之后,我看到了这个有用的角色视频摘要游戏设计中的视野(一个足够接近的模拟来回答我的 2D 可视化问题)。连同这个针对摄影师的视野教程我也觉得很有帮助(如果可能有点俗气;),这两个资源帮助我了解了如何为我的项目选择视野以及非常宽或窄的视野会发生什么(以360 度中的度数)。最好的结果是人的自然视野的混合,这取决于屏幕或投影与他们脸部的距离,并且还与前景中事物与背景中事物的相对比例密切相关可视化(更宽的视野使背景看起来更小,更窄的视野放大背景 - 类似于,但不像正交相机的效果那样明显)。我希望你觉得这和我一样有帮助!
更新 3 - 进一步阅读
对于任何想了解更多关于各种用途的相机规格的详细信息的人,您可能会发现计算机图形学原理与实践的第 13 章对解决上述问题等非常有用。
更新 4 - 正交相机中 z 维度的注意事项
当我继续我的项目时,我决定使用正交相机,这样我就可以增加精灵的 z 尺寸以避免z-fighting,但不会让它们看起来逐渐退到远处。相比之下,如果我想让它看起来好像一个精灵正在退到远处,我可以简单地调整它的大小。但是,今天我遇到了一个愚蠢的错误,我想指出以使其他人免于同样的麻烦。尽管正交相机没有描绘出物体距离较远时后退的大小,但请注意仍然有一个后截头体平面过去哪些对象将从视图中剔除。今天我不小心增加了我的几个对象的 z 值超过了那个平面,并且无法弄清楚为什么它们没有出现在屏幕上。在使用正交相机时,很容易忘记 z 坐标的这个因素。