使用Three.js从二维投影到三维

如何将二维坐标投影到三维

例如，我有一个256px宽的图像（表示为粒子）。如果我假设该图像在2D空间中以原点（0,0）为中心，则正方形的垂直边位于x=128和x=-128处

---

因此，当将此图像（粒子）放置在原点（0,0）处的Three.js场景中，并且相机与原点的距离为CamZ时，如何将原始2D坐标投影到3D，这将告诉我图像（粒子！）在屏幕上以三个.js单位显示的宽度

一种简单易懂的方法是创建一个几何体，其顶点位于

-128,128,0

，

128,128,0

，

-128，-128,0

和

128，-128,0

中。然后使用

Projector

使用相机投影该几何体。它将为您提供一组投影点，这些点的范围应为-1到1。然后需要将其乘以视口大小。

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

这里的想法是使用指数缓和函数来计算平移。大多数库使用的函数（如jqueryui）是

easeOutExpo函数在近似二维/三维平移方面的效果令人惊讶。一般情况下，它看起来像这样：

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

它需要一个系数，确切的数字将取决于3D相机的纵横比和焦距。通常，-.2之类的东西效果很好

---

我知道这是一个不充分的解释，但希望它能为您指出正确的方向。

通常的处理方法是除以z值，因此您可以想象，通过除以越来越高的z值，x值会越来越小。然而，你实际上是除以z值的某个因子，你的视野会影响它。不知道如何从中推断出你需要的宽度。谢谢你的回答。我觉得我有点傻。我按照你的建议构建了一个顶点为（128，-128），（128128），（-128128），（-128128），（-128128）的网格，然后生成的正方形与粒子大小相同。因此three.js中的粒子大小只是原始映射图像大小*比例：）