我如何将 2D 坐标投影到 3D 上?
例如,我有一个 256px 宽的图像(表示为粒子)。如果我假设此图像以 2D 空间中的原点 (0,0) 为中心,则正方形的垂直边位于 x = 128 和 x = -128。
因此,当此图像(粒子)放置在原点(0,0)的 Three.js 场景中并且相机与原点的距离为 CamZ 时,我如何将原始 2D 坐标投影到 3D,这在 tern 会告诉我图像(粒子!)以三个.js 为单位出现在屏幕上的宽度。
我如何将 2D 坐标投影到 3D 上?
例如,我有一个 256px 宽的图像(表示为粒子)。如果我假设此图像以 2D 空间中的原点 (0,0) 为中心,则正方形的垂直边位于 x = 128 和 x = -128。
因此,当此图像(粒子)放置在原点(0,0)的 Three.js 场景中并且相机与原点的距离为 CamZ 时,我如何将原始 2D 坐标投影到 3D,这在 tern 会告诉我图像(粒子!)以三个.js 为单位出现在屏幕上的宽度。
一种易于理解的方法是创建一个具有 、 和 中的-128, 128, 0
顶点的128, 128, 0
几何图形。然后用于使用相机投影该几何图形。它将为您提供应该从 -1 到 1 的投影点数组。然后您需要将其乘以视口大小。-128, -128, 0
128, -128, 0
Projector
还有另一种方法可以做到这一点。可以启发式地近似 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 这样的东西效果很好。
我知道这是一个不充分的解释,但希望它能为您指明正确的方向。