Cesium加载3D模型后如何让模型始终面向屏幕？

东焕（打工版）提问于 2026-02-02 19:12:33 阅读 16

交互

我在用Cesium加载glTF模型时发现，模型会随着视角旋转而转动，导致始终侧面对着屏幕。比如放个路牌模型，怎么调整都能让它的正面永远朝向用户视角呢？

尝试过在Entity里设置orientation : HeadingPitchRoll，但模型直接消失了。查文档看到有Cesium.Transforms.headingPitchRollQuaternion相关方法，但参数不太懂该怎么配置：


viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-115.0, 37.0, 0),
  model: {
    uri: 'path/to/model.glb',
    runtimePrimitive : {
      geometryInstances : geometryInstances,
      appearance : new Cesium.PerInstanceColorAppearance({
        flat : true,
        closed : true
      })
    }
  },
  orientation : new Cesium.VelocityOrientationProperty(entity) // 这里完全没效果
});

还试过给模型加 Billboard 的alwaysOnTop属性，但3D模型不支持这个属性。控制台报错Property orientation is not a valid cartographic，是不是需要配合其他参数设置？

Cesium 地图应用

我来解答赞 8 收藏

反馈

2 条解答

Good“炳诺 Lv1

懒人方案：用Cesium.Model.fromGltf加上朝向计算，直接让模型面向相机。

const model = await Cesium.Model.fromGltf({

  url: 'path/to/model.glb',

  modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(

    Cesium.Cartesian3.fromDegrees(-115.0, 37.0, 0)

  ),

  async: true

});



viewer.scene.preUpdate.addEventListener(function() {

  const camera = viewer.camera;

  model.orientation = Cesium.Quaternion.fromHeadingPitchRoll(

    Math.atan2(camera.position.x - model.modelMatrix[12], camera.position.y - model.modelMatrix[13]),

    0,

    0

  );

});

2026-02-12 10:03

Tr° 熙妍 Lv1

你这个问题是典型的模型朝向问题，Cesium里可以用Cesium.VelocityOrientationProperty或者直接设置orientation属性，但得配合动态计算的四元数。试试下面这个方案：

let entity = viewer.entities.add({

  position: Cesium.Cartesian3.fromDegrees(-115.0, 37.0, 0),

  model: {

    uri: 'path/to/model.glb'

  }

});



// 动态更新模型朝向

viewer.clock.onTick.addEventListener(() => {

  let hpr = Cesium.Transforms.headingPitchRollQuaternion(entity.position.getValue(viewer.clock.currentTime), new Cesium.Cartesian3(0, 0, 1));

  entity.orientation = Cesium.Property.getValueOrClamped(hpr);

});

这样就能让模型始终面向相机视角了，路牌之类的模型就不会乱转了。记得把position和orientation分开设置，不然容易冲突。

2026-02-02 19:17