JavaScript中实现正等距投影的逆变换函数需求
正等距投影的逆变换实现
我有一个可将3D坐标(x、y、z)转换为2D屏幕位置(w、h)的正等距投影函数,代码如下:
Coords_3D_To_2D (x, y, z) { return { w: ((x-y) * (Math.sqrt(3)/2)), h: (((-x-y) / 2) - z) } }
示意图中蓝色线条代表2D屏幕,黑色线条代表3D等距空间:
该函数运行正常,例如调用Coords_3D_To_2D(15, -10, 5)会返回{ w: 21.65, h: -7.5 }。
现需实现其逆变换函数,接收2D屏幕坐标(w、h)及指定z值,返回对应的3D等距坐标。
推导过程
通过原函数的公式联立方程组求解x和y:
已知原函数的两个公式:
- ( w = (x - y) \times \frac{\sqrt{3}}{2} )
- ( h = \frac{-x - y}{2} - z )
对公式2变形,将z移项后两边乘2:
( x + y = -2(h + z) )
对公式1变形,两边除以( \frac{\sqrt{3}}{2} ):
( x - y = \frac{2w}{\sqrt{3}} )
将两个变形后的公式相加,解出x:
( 2x = -2(h + z) + \frac{2w}{\sqrt{3}} )
( x = -(h + z) + \frac{w}{\sqrt{3}} )
将两个变形后的公式相减,解出y:
( 2y = -2(h + z) - \frac{2w}{\sqrt{3}} )
( y = -(h + z) - \frac{w}{\sqrt{3}} )
完整逆变换函数代码
Coords_2D_To_3D (w, h, z = 5) { const sqrt3 = Math.sqrt(3); return { x: -(h + z) + w / sqrt3, y: -(h + z) - w / sqrt3, z: z } }
验证
用原函数的测试案例验证:传入w: 21.65, h: -7.5, z:5,逆函数会返回{x:15, y:-10, z:5},和原输入一致,验证正确。
内容的提问来源于stack exchange,提问作者Imagitori
相关产品推荐
相关产品推荐

