cesiumjs Primitive动态修改实体颜色

今天要学习的是cesiumjs动态修改实体的颜色.

修改前

修改后

实例演示地址

创建实体

创建实体，并给实体一个id,用来修改实体的颜色,这里我们设置的id为redRect，为后面修改颜色做准备。

// 创建几何体
  let rectGeometry = new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(
        // 西边经度
        90,
        // 南边纬度
        20,
        // 东边经度
        110,
        // 北边纬度
        30),
    height: 0,
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
  })
  创建实体
let instance = new Cesium.GeometryInstance({
    geometry: rectGeometry,
    id:'redRect',
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
          Cesium.Color.RED.withAlpha(0.5)
      )
    }
})

创建图元

  let primitive = new Cesium.Primitive({
    geometryInstances: instance,
    // 材质 设置外观
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true
    })
  })

添加

viewer.scene.primitives.add(primitive)

修改颜色

这里我们设置，2秒后，将红色矩形设置为蓝色矩形。首先通过id获取实体，上面我们创建的实体的id是redRect，然后修改这个实体的颜色。

  setTimeout(() => {
    let attributes = primitive.getGeometryInstanceAttributes('redRect');
    attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
        Cesium.Color.YELLOW.withAlpha(1)
    )
  }, 2000)

随机颜色

上面我们实现了指定颜色，接下来我们要实现一个随机的颜色,这里我们使用Cesium.Color.fromRandom来生成一个随机的颜色，然后传给实体。

  setTimeout(() => {
    let attributes = primitive.getGeometryInstanceAttributes('redRect');
    attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
        Cesium.Color.fromRandom({
          alpha: 0.5
        })
    )
  }, 2000)

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课课程-cesiumjs Primitive多个实体与颜色修改-实践的学习笔记

笔记汇总

Cesium学习笔记汇总

cesiumjs Primitive动态修改实体颜色完整实例代码下载

代码运行环境：vue3 + vite + js nodejs 14