Homepage

Appearance

概述 ​

  • 性能更好：多个图元可以一起渲染，geometryInstances: [instance1, instance2]
  • 对模型的精细化控制：gltfCallback: gltf => {}
  • 更多的材质：Dot、Water等，Fabric定义，GLSL着色器
javascript
const rect = Cesium.Rectangle.fromDegrees(120.0, 20.0, 130.0, 25.0)
const point = Cesium.Cartesian3.fromDegrees(125.0, 22.5, 0)
const instance1 = new Cesium.GeometryInstance({
  geometry: new Cesium.RectangleGeometry({
    rectangle: rect,
    vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
  }),
})

const instance2 = new Cesium.GeometryInstance({
  geometry: new Cesium.CylinderGeometry({
    length: 100000.0,
    topRadius: 20000.0,
    bottomRadius: 20000.0,
    vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
  }),
  modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(point),
})

viewer.scene.primitives.add(
  new Cesium.Primitive({
    geometryInstances: [instance1, instance2],
    appearance: new Cesium.EllipsoidSurfaceAppearance({
      material: Cesium.Material.fromType('Color', {
        color: Cesium.Color.RED.withAlpha(0.5)
      }),
    }),
  })
)
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('Dot', {
        lightColor: Cesium.Color.RED,
        darkColor: Cesium.Color.YELLOW,
      }),
    }),
  })
)
javascript
const lon = 121.47
const lat = 31.2
const position = Cesium.Cartesian3.fromDegrees(lon, lat, 5000.0)
const headingPositionRoll = new Cesium.HeadingPitchRoll()
const fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator(
  "north",
  "west"
)
const model = await Cesium.Model.fromGltfAsync({
  url: "/models/plane.glb",
  modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(
    position,
    headingPositionRoll,
    Cesium.Ellipsoid.WGS84,
    fixedFrameTransform
  ),
  scale: 100,
  gltfCallback: gltf => {
    gltf.materials[0].pbrMetallicRoughness.baseColorFactor = [0.0, 0.0, 1.0, 1.0]
    delete gltf.nodes[7].mesh
  }
})
viewer.scene.primitives.add(model)
/次