Homepage

Appearance

概述 ​

在 Cesium 中，Primitive（图元） 是渲染管线中最底层、最核心的渲染对象。相比 Entity API（更上层、更易用的封装），Primitive 更底层、性能更高、可控性更强。

图元的组成 ​

Primitive 代表真正被渲染到场景中的“底层绘制单元”，由 Geometry（几何） + Appearance（外观材质）组成。

javascript
const rect = Cesium.Rectangle.fromDegrees(120.0, 20.0, 130.0, 25.0)
const instance = new Cesium.GeometryInstance({
  geometry: new Cesium.RectangleGeometry({
    rectangle: rect,
    extrudedHeight: 100000.0,
    // 几何体的顶点格式：位置 + 颜色
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
  }),
  attributes: {
    color: Cesium.ColorGeometryInstanceAttribute.fromColor(
      Cesium.Color.RED.withAlpha(0.5)
    ),
  },
})

const primitive = viewer.scene.primitives.add(
  new Cesium.Primitive({
    geometryInstances: instance,
    appearance: new Cesium.PerInstanceColorAppearance({
      translucent: false,   // 不透明
    }),
  })
)
javascript
const rect = Cesium.Rectangle.fromDegrees(120.0, 20.0, 130.0, 25.0)
const instance = new Cesium.GeometryInstance({
  geometry: new Cesium.RectangleGeometry({
    rectangle: rect,
    // 位置 + 法线 + 纹理坐标
    vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
  }),
})
viewer.scene.primitives.add(new Cesium.Primitive({
  geometryInstances: instance,
  appearance: new Cesium.EllipsoidSurfaceAppearance({
    material: Cesium.Material.fromType('Color', {
      color: Cesium.Color.RED.withAlpha(0.5)
    }),
  }),
}))


// 支持更多材质
Cesium.Material.fromType('Checkerboard', {
  evenColor: Cesium.Color.RED,
  oddColor: Cesium.Color.WHITE,
  repeat: new Cesium.Cartesian2(8.0, 8.0),
})
...
/次