用3D空间思考的方式

时间:2013-09-26 08:36:18

标签: canvas 3d three.js

我有一个webdevelopers背景,现在我正在用Three.js制作一个简单的2D侧卷轴。即使我制作2D游戏,我也会在3D空间中绘制它,以便在时间感觉正确的时候进行简单的3D转换。为什么我选择Three.js?嗯,它是JavaScript,因为我喜欢为网络创建和探索新技术,用我已经知道的语言制作它会很有趣。

但现在我的问题。这不是一个真正的技术问题,但由于我是3D领域的新手,因此它更像是一种思考方式。我习惯于在使用网络时考虑像素或百分比(相对)尺寸,它总是2轴(X / Y)或宽度/高度。但3D空间,相机和视角让我头疼,因为我不习惯它。

我怎么能想到3D空间中的尺寸问题?相机在800x600画布上具有45度的视野。截头体是1(近)和1000(远)。这是否意味着如果一个物体靠近(1)并且大小为800x600,它实际上会填满画布?

好吧,你可以看到我对这个以及3D空间思维方式的新手,这对我来说是一个新的领域。

3 个答案:

答案 0 :(得分:1)

你必须考虑三角学。

靠近近平面的物体必须小于靠近远处平面的物体才能填满画布。

在你的情况下,填充画布的近平面中物体的大小是多少?

请注意,对于45度的视野,相机顶点与中心和近平面顶部的终点角度为22.5度,对吗?

然后,如果物体到相机的距离是1(近平面),则该物体填充从画布中心到顶部的距离的高度为:tan(22.5)。因此填充画布的对象高度应为:2 * tan(22.5)。一般来说:

     height = 2 * distance_object_camera * tan( field_of_view / 2 )

另请注意,此结果与您正在使用的画布大小无关。

答案 1 :(得分:1)

选择适合您项目的比例,然后调整相机参数以便对要显示的内容有一个很好的视图。所以你可以想到现实世界中的尺寸和位置。 。

1个单位= 1米是一个非常常见的惯例,但实际上它可以是你喜欢的任何东西,只要它是一致的。如果你主要处理微观事物,也许认为1mm作为基本单位更合适。 Three.js不需要知道或关心你的单位系统是什么。但是,例如,尝试用1mm单位模拟整个行星将导致如此巨大的值,以至于您可能遇到与浮点数如何工作相关的问题。

屏幕分辨率等与位图图形不同,此处没有太多相关性。如果您确实需要与显示器相关的像素完美定位(例如调整对象大小或设置相机以使对象填满屏幕或以特定像素大小显示),则可能但通常涉及相当多的数学运算。

很难给出数学部分的明确答案,对于那些具体情况,有很多不同的用例,问题和答案。

您还可以考虑使用OrtographicCamera对3D场景进行严格的2D(无透视)视图。这也可以使像素定位/屏幕位置和尺寸计算更容易。

答案 2 :(得分:0)

你需要很多几何和三角学。例如,在欧几里德空间中存在三角不等式。