gro*_*zek 11 javascript graphics 2d perspectivecamera three.js
我是新手three.js,正在尝试使用这些3D工具设置相当于2D可视化(适用于各种分层精灵).我想对PerspectiveCamera()论点和camera.position.set()论点提供一些指导.我已经在正确的方向轻推这个答案的相关问题,这说来设置z坐标等于0中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上下文中也允许像视差这样的东西,而OrthographicCamera()无论我的2D元素在哪个层上,都允许文字渲染大小(不随距离减小).我倾向于认为我仍然会使用PerspectiveCamera()效果,例如精灵层之间的少量视差(所以我想我的项目不仅仅是2D!).
那么似乎主要是让所有精灵层与观察平面平行,这camera.position.set()是到视野中心的正交观察线.这对于这里的许多人来说必须是基本的.对我来说这是一个新世界!
我想我还是有一个很难包装我的头周围的作用VIEW_ANGLE,x以及y与相机的在2D可视化远和近距离观察平面之间的距离.使用正交相机这非常不重要 - 您只需要足够的深度来包含您想要的所有图层以及适合您的精灵比例的观察平面.然而,使用透视相机,深度和场的作用会影响视差效果,但是还有其他考虑因素吗？
更新2 - 视角和其他变量:
经过一些工具来追求如何考虑相机的视角(视场或FOV)以及相机位置的x,y,z参数后,我偶然发现了这个角色的有用视频摘要在游戏设计中的视野(足够接近模拟以回答我的2D可视化问题).除了我为摄影师提供的这个视野教程之外我也觉得很有帮助(如果可能有点粗俗;),这两个资源帮助我了解了如何为我的项目选择视野,以及非常宽或者狭窄的视野(以360度的度数来衡量).最好的结果是对人类的自然视野感觉的混合,取决于屏幕的距离或投影与脸部的距离,并且还与前景中的事物的相对比例与背景中的事物的相对比例密切相关.可视化(更宽的视野使背景看起来更小,更窄的视野放大背景 - 类似于,但不像正交相机的效果那样明显).我希望你觉得这和我一样有用!
更新3 - 进一步阅读
对于有兴趣了解有关各种用途的相机规格的更多细节的人,您可能会发现计算机图形学原理和实践的第13章对我解决上述问题以及更多内容非常有用.
更新4 - 正交相机中z维度的考虑因素
当我继续我的项目时,我决定使用正交相机,这样我就可以增加我的精灵的z尺寸,以避免z战斗,但是没有它们似乎逐渐退去到距离.相比之下,如果我想让它看起来好像精灵正在退去距离,我可以简单地调整它的大小.然而,今天我遇到了一个愚蠢的错误,我想指出要避免其他人遇到同样的麻烦.虽然正交相机没有描绘物体更远的后退尺寸,但要注意仍然有一个后面的冰面,过去的物体将从视野中被剔除.今天我偶然增加了几个物体经过那架飞机的z值,无法弄清楚它们为什么没有出现在屏幕上.在使用正交相机时,很容易忘记关于z坐标的这个因素.
小智 5
你的目标是什么？如果不需要透视失真，请使用正交相机。也只需检查文档：
https://threejs.org/docs/#api/en/cameras/PerspectiveCamera
视角/视野是不言自明的，如果您不知道它是什么，请仔细阅读。
http://www.incgamers.com/wp-content/uploads/2013/05/6a0120a85dcdae970b0120a86d9495970b.png
关于 xy 和 z 值。嗯，这取决于你的飞机的大小和到相机的距离。您可以设置相机位置或平面位置并将相机保持在 (0,0,0)。想象一下 3D 空间中的飞机。您可以根据飞机的大小计算相机的位置，也可以通过尝试和错误来计算...有关使用正交相机的信息，请参阅此帖子：
