经纬志
首页 / three.js / 使用示例

坐标轴

three 默认 Y 向上,GIS 习惯 Z 向上。这页把东、北、天三个方向摆进场景, 并给出要素坐标 (E, N, U) 到 (x, y, z) 的对应关系。

three.js 0.160.0 · 更新 2026-10-27
源码与运行效果
运行效果

说明

红色箭头指向 +X,对应东;绿色箭头指向 −Z,对应北; 蓝色箭头指向 +Y,对应天。地面网格铺在 XZ 平面上, 所以「平面坐标」直接对应 three 的 X 与 Z。要素放在 (4, 1.1, −3),含义是东 4 米、北 3 米、高 1.1 米。

ArrowHelper 负责画方向与箭头,文字标签用 Canvas 生成贴图后挂在 Sprite 上。 这样不依赖任何图片文件,标签颜色也能随场景主题调整。

GIS 方向three 轴说明
东 E+X经度增大的方向
北 N−Z纬度增大的方向,取负号让俯视时北朝上
天 U+Y高程方向,three 的向上轴
平面坐标 (E, N)(x, z) = (E, −N)写进 Vector3 时顺序为 (x, y, z)
旋转方向右手系绕 Y 轴正角度为逆时针(从 +Y 俯视)

换算函数

// 输入:东偏移、北偏移、高程,单位米
// 输出:three 场景坐标,1 场景单位 = 1 米
function enuToScene(east, north, up) {
  return new THREE.Vector3(east, up, -north);
}

// 反过来:从场景坐标取回 ENU
function sceneToEnu(v) {
  return { east: v.x, north: -v.z, up: v.y };
}

如果团队坚持 Z 向上,可以整体绕 X 轴转 −90 度,把平面放到 XY。 但这样做之后,所有相机、光照、标注朝向都要跟着调整, 而且 three 的内置几何体默认按 Y 向上生成,混用容易出错。 多数项目选择接受 Y 向上,只在数据入口做一次映射。

方向与旋转

在右手坐标系里,绕 Y 轴正角度旋转,从 +Y 向下看是逆时针。 把北定为 −Z 时,方位角 0 度朝北,正角度向顺时针增大, 与测绘里从北起算、顺时针为正的习惯一致。如果北取 +Z,方位角的方向会反过来, 所有风向、坡向、流向数据都要额外取负。

把映射写进一个函数。东、北、天的映射一旦确定,就固定在一个转换函数里, 所有图层、模型、相机目标都走它。临时在别处手写 -z 或 +z, 是南北颠倒问题最常见的来源。