Three.js实现Rust游戏地图与NPC位置可视化坐标映射错误求助

AI 小北

2026-8-25

问题排查与解决

核心问题分析

NPC位置显示错误的根源是Three.js平面几何的轴映射与游戏坐标系的轴方向不匹配，导致坐标对应关系出现偏差。

1. PlaneBufferGeometry的坐标逻辑确认

你创建的PlaneBufferGeometry(2, 2)默认处于XY平面，X轴范围为[-1, 1]，Y轴范围为[-1, 1]。执行rotateX(-Math.PI/2)后，平面躺平到XZ平面：

原平面X轴 → 对应Three.js的X轴（范围保持[-1, 1]）
原平面Y轴 → 对应Three.js的Z轴负方向（原Y=1对应Z=-1，原Y=-1对应Z=1）

而游戏中Z轴范围是[-2000, 2000]，直接映射到[-1, 1]会导致Z轴方向完全反转，这是NPC位置偏移的关键原因。

2. 坐标映射修正方案

调整Z坐标的映射范围，修正轴方向的匹配问题，同时保留原有的X、Y轴映射逻辑：

修正后的代码

function storeNPCPositions(data) {
    let npcs = [];
    for (const npc in data.npcPositions) {
        const gamePos = data.npcPositions[npc];
        npcs.push({
            name: npc,
            position: {
                // 游戏X轴与Three.js X轴范围匹配，映射逻辑不变
                x: remapPosition(gamePos.x, -2000, 2000, -1, 1),
                // 游戏高度轴映射到Three.js Y轴，保持原缩放规则
                y: remapPosition(gamePos.y, heightData.min, heightData.max, 0, 0.02),
                // 反转Z轴映射范围，匹配平面旋转后的轴方向
                z: remapPosition(gamePos.z, -2000, 2000, 1, -1)
            }
        });
    }
    window.murkymap.positionData.npcs = npcs;
}

function remapPosition(value, from1, to1, from2, to2) {
    return (value - from1) / (to1 - from1) * (to2 - from2) + from2;
}