使用Three.js从2D到3D项目

Question

如何将2D坐标投影到3D？

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

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

Answer 1

一种易于理解的方法是在-128, 128, 0，128, 128, 0，-128, -128, 0和128, -128, 0中创建包含顶点的几何体。然后使用Projector使用相机投影该几何体。它将为您提供一个从-1到1的投影点数组。然后，您需要将其乘以视口大小。

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这样的东西效果很好。

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