javascript - 3D ワールド空間座標を SVG ビューポート座標に変換します

Question

私は、3D ゲームの Web ページで、俯瞰視点 (ミニマップなど) からプレーヤーの位置を表示しようとしています。ゲームのレベルの 1024x1024 の画像 (ゲーム自体から取得した俯瞰図) にマーカーを (SVG 経由で) 重ね合わせているだけです。私は俯瞰図で使用していないのでx、y座標のみに関心があります。z

xゲームの世界では、とy: -4096toの両方の最小/最大座標が等しくなり4096ます。0, 0座標は世界の中心です。

さらに興味深いことに、ゲーム世界内のゲーム レベルの初期位置は任意です。したがって、たとえば、私がテストしてきた特定のレベルの左上の世界座標は-2440, 3383.

0,0私の最初の混乱は、Web ページの座標が左上であり、ワールド空間の中心であるという事実から来ています。

3D ワールド空間座標を正しく変換して、任意の次元の Web ページ ビューポートに正しく表示するにはどうすればよいですか?

これが私が試したことです（私はsvgでビューボックス属性を使用して、左上のワールド座標オフセットを処理しようとしています）

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
    };
},