3D坐标转2D坐标透视变换代码异常问题求助

我正在编写代码，要把3D坐标(x, y, z)基于z值将x、y转换为带透视效果的2D坐标(x, y)，当前代码如下：

translate() {
    this.distance = Math.sqrt((this.x**2)+(this.y**2));
    this.bear = (180/Math.PI)*(Math.asin(this.y/this.distance));
    this.transX = (this.x + Math.cos(this.bear)*this.z);
    this.transY = (this.y + Math.sin(this.bear)*this.z);
}

运行后输出效果如图：

我预期非中心的点会向透视点收缩移动，但实际没达到这个效果，求解决思路或其他实现方法。

问题分析与解决思路 #

你的当前代码逻辑是在原坐标基础上叠加了基于方位角的z方向偏移，本质是平行投影，不是透视投影。透视投影的核心是近大远小——物体离视点越远（z值越大，假设z轴指向视点方向），2D坐标应该越靠近透视中心，坐标缩放比例和z值成反比。

修正方案：标准透视投影公式 #

假设：

• 透视消失点在屏幕中心，对应2D坐标原点(0,0)
• z表示点到视点的距离（z越大离视点越远）
• screenDistance为视点到屏幕的距离（可通过视场角计算：比如60度视场下，screenDistance = 1 / Math.tan(30 * Math.PI/180)）

替换为以下代码：

// 先定义全局或实例级的参数，可根据需求调整
const screenDistance = 1.732; // 对应60度视场角的计算值
const vanishingPointX = 0; // 透视消失点X坐标
const vanishingPointY = 0; // 透视消失点Y坐标

translate() {
    // 计算缩放比例：距离越远，缩放比例越小
    const scale = screenDistance / (screenDistance + this.z);
    // 应用缩放并偏移到透视消失点
    this.transX = this.x * scale + vanishingPointX;
    this.transY = this.y * scale + vanishingPointY;
}

原代码无效的原因 #

• 你计算的bear是点相对于原点的方位角，叠加z方向偏移属于平移操作，不是透视收缩
• 透视效果需要的是坐标缩放，而非平移：离视点越远的点，缩放比例越小，自然会向透视点收缩

额外调整建议 #

• 如果你的坐标系中z轴方向相反（z越大离视点越近），把缩放公式改为scale = (screenDistance + this.z) / screenDistance
• 调整screenDistance可以控制透视强度：值越小，透视畸变越明显；值越大，越接近平行投影

内容的提问来源于stack exchange，提问作者kineticcat_