three.js - 使用 Three.js 从 2D 投影到 3D

Question

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

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

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

Answer 1

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

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

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