Question

我一直试图从头顶视角（如迷你地图）在网页上显示3D游戏中玩家的位置。我只是将标记（通过SVG）叠加在游戏关卡的1024x1024图像上（从游戏本身拍摄的俯视图）。我只关注x，y坐标，因为我在顶视图中没有使用z。

游戏的世界具有x和y：-4096到4096的最小/最大坐标。 0, 0坐标是世界的中心。

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

我最初的困惑来自于网页中的0,0坐标是左上角，而不是世界空间中心。

如何正确转换3D世界空间坐标以在任何维度的网页视口中正确显示？

这是我尝试过的（我一直试图在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
    };
},

将3D世界空间坐标转换为SVG视口坐标

0 个答案: