使用Three.js从2D转换为3D的项目

Question

如何将二维坐标投影到三维空间中？

例如，我有一张宽度为256像素的图片（表示为一个粒子）。如果我假设这张图片在二维空间中以原点(0,0)为中心，则正方形的垂直边缘位于x = 128和x = -128处。

因此，当这个图像（粒子）被放置在Three.js场景中的原点(0,0)，相机与原点的距离为CamZ时，该怎样将原始的2D坐标投影到3D中，从而告诉我图像（粒子！）在屏幕上以three.js单位出现的宽度。

- Jamie Fearon

---

通常的处理方式是通过除以z值来实现，因此您可以想象通过除以越来越高的z值来使您拥有的x值变小。但是，您实际上是在除以z值的某个因子，并且您的视野会影响它。不确定如何从中推断出您需要的宽度。 - Cory Gross

Answer 1

一个易于理解的方法是创建一个几何体，其顶点为-128, 128, 0、128, 128, 0、-128, -128, 0和128, -128, 0。然后使用Projector将该几何体使用相机进行投影。这将给你一个投影点数组，应该在-1到1之间。然后需要将其乘以视口大小。

- mrdoob

---

谢谢您的回答。我想我有点傻。我按照您的建议使用顶点（128，-128），（128，128），（-128，128），（-128，128）构建了一个网格，然后结果正方形的大小与粒子相同。因此，在three.js中，粒子大小只是原始映射图像大小*比例 :) - Jamie Fearon

Answer 2

还有另一种方法可以实现。可以通过启发式方法近似计算2D和3D之间的精确转换。通常，这比使用three.js投影向量更难实现，但是通过指数转换，您可以映射许多2D/3D转换。

这里的想法是使用指数缓动函数来计算转换。大多数库使用的缓动函数（例如jQuery UI）是Robert Penner Easing functions。

easeOutExpo函数在近似2D/3D转换方面表现出色。通常会像这样：

// easeOutExpo(time, base, change, duration)
var xPosition3D = xPosition2D * expo(xPosition2D, 0, coefficient, xMax2D);

这需要一个系数，具体数字取决于3D相机的宽高比和焦距。通常，类似-.2这样的数字效果不错。

我知道这个解释可能不够充分，但希望能指引您朝着正确的方向前进。

- BishopZ