Javascript 将三维世界空间坐标转换为SVG视口坐标

我一直在尝试在一个3D游戏中，在一个网页上，从一个俯视的角度，比如一个小地图，显示玩家的位置。我只是通过SVG将标记叠加在一个1024x1024的游戏关卡图像上，一个俯视图，取自游戏本身。我只关心x，y坐标，因为我没有在俯视图中使用z

游戏世界的x和y的最小/最大坐标相等：-4096到4096。0，0坐标是世界的中心

为了让事情变得更有趣，游戏级别在游戏世界中的初始位置是任意的。例如，我测试的特定级别的左上角世界坐标是-24403383

我最初的困惑来自这样一个事实：网页中的0,0坐标是左上角，而不是世界空间的中心

如何正确转换三维世界空间坐标以正确显示在任意尺寸的网页视口中

以下是我尝试过的，我尝试在svg中使用viewbox属性来处理左上角的世界坐标偏移

scalePosition: function (targetWidth, targetHeight) {
    // in-game positions
    var gamePosition = this.get('pos');

    var MAX_X = 8192,
        MAX_Y = 8192;

    // Flip y
    gamePosition.y = -gamePosition.y;

    // Ensure game coordinates are only positive values
    // In game = -4096 < x|y < 4096 (0,0 = center)
    // Browser = 0 < x|y < 8192 (0,0 = top-left)
    gamePosition.x += 4096;
    gamePosition.y += 4096;


    // Target dimenions
    targetWidth = (targetWidth || 1024),
    targetHeight = (targetHeight || 1024);

    // Find scale between game dimensions and target dimensions
    var xScale = MAX_X / targetWidth,
        yScale = MAX_Y / targetHeight;

    // Convert in-game coords to target coords
    var targetX = gamePosition.x / xScale,
        targetY = gamePosition.y / yScale;

    return {
        x: targetX,
        y: targetY
    };
},

---

您需要某种类型的投影，请参见，或者SVG是您正在寻找的吗？viewBox=-4096-4096 8192 8192作为元素的属性，将原点移动到中心，并提供所需的坐标范围。如果这不是您想要的，那么您必须更加具体，特别是在脚本、SVG和HTMLDOM之间的关系上。您需要某种类型的投影，请参见，或者SVG是您想要的？viewBox=-4096-4096 8192 8192作为元素的属性，将原点移动到中心，并提供所需的坐标范围。如果这不是您想要的，那么您必须更加具体，特别是在脚本、SVG和HTMLDOM之间的关系方面。