Canvas 三维空间的思维方式

我有webdevelopers的背景，现在我开始用Three.js制作一个简单的2D侧边滚动条。即使我做了一个2D游戏，我也会在3D空间里画出来，以便在我觉得时间合适的时候简单地转换成3D。为什么我选择了Three.js？嗯，这是JavaScript，因为我喜欢为web创建和探索新技术，所以用我已经知道的语言制作它会很有趣

但现在来谈谈我的问题。这并不是一个真正的技术问题，但因为我是3D空间的新手，这更多的是一种思维方式。我习惯于在处理web时使用像素或百分比（相对）大小，它总是2轴（X/Y）或者更确切地说是宽度/高度。但是3D空间、相机和透视图让我头疼，因为我不习惯

我该如何看待3D空间中的尺寸问题？相机在800x600画布上的视野为45度。圆台为1（近）和1000（远）。这是否意味着，如果一个对象靠近（1）且大小为800x600，它将实际填充画布

---

嗯，正如你所看到的，我对这个和3D空间的思维方式还不熟悉，这对我来说是一块新的地盘。

你需要很多几何和三角。例如，在euklidian空间中有一个三角形不等式。

你必须从三角角度来思考

为了填充画布，靠近近平面的对象必须比靠近远平面的对象小

在您的例子中，填充画布的近平面中的对象的大小是多少

请注意，如果视野为45度，则与摄影机中的顶点以及靠近平面中心和顶部的端点的角度为22.5度，对吗

然后，如果对象到摄影机的距离为1（接近平面），则该对象填充从画布中心到顶部的距离的高度为：tan（22.5）。因此，填充画布的对象高度应为：2*tan（22.5）。一般而言：

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

---

还请注意，此结果与您使用的画布的大小无关。

选择适合您的项目的比例，然后调整相机参数，以便能够很好地查看您想要显示的内容。所以你可以想象真实世界中的大小和位置。 .

1个单位=1m是一个非常常见的约定，但实际上，只要它是一致的，它可以是您喜欢的任何东西。如果你主要处理微观事物，也许把1mm作为基本单位更合适。Three.js不需要知道或关心您的单元系统是什么。但举例来说，试图用1毫米的单位来模拟一个完整的星球会产生如此巨大的数值，以至于你可能会遇到与浮点数如何工作有关的问题

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

很难给数学部分一个明确的答案，有很多不同的用例，这些特定情况的问题和答案

---

您还可以考虑使用OrtGraphicCamera对3D场景进行严格的2D（无透视）查看。这也会使像素定位/屏幕位置和大小的计算变得更容易。

一个好的起点可能是尝试理解（也是简化的：）和向量。使用向量定义对象。然后使用x/y/z将其投影到二维平面。你的深度是z轴。