How to show a simple triangle with Primitive API?

CesiumJS
1 
const viewer = new Cesium.Viewer('cesiumViewport')
// geography coordinates, an unclockwise triangle
const coords = [
  [112.470,25.694,1000],
  [109.961,19.862,1000],
  [118.122,21.921,1000]
]
// transform to world coordinate
const coords_world = coords.map((coord) => {
  const cart = Cesium.Cartesian3.fromDegrees(...coord)
  return [cart.x, cart.y, cart.z]
})
const coords_buffer = new Float32Array(coords_world.flat())
const geometry = new Cesium.Geometry({
  attributes: {
    position: new Cesium.GeometryAttribute({
      componentDatatype: Cesium.ComponentDatatype.FLOAT,
      componentsPerAttribute: 3,
      values: coords_buffer
    })
  },
})
const instance = new Cesium.GeometryInstance({
  geometry: geometry,
})
const primitive = new Cesium.Primitive({
  geometryInstances: [instance],
})
viewer.scene.primitives.add(primitive)

I want to draw a triangle, present as the variable coords store the geography coordinates, but the code above does not work, what should I do?
Thanks.

2

Update: has been solved by myself.

3

@onsummer

Thank you for your post! I am happy to hear that you solved the issue yourself :confetti_ball:

If possible, can you please post your solution to this thread? If the solution is robust, I will use this thread as a reference for other community members with similar questions.

-Sam

4

I wrote a note and sync to my github, but it is in Chinese:

This url will address to the code part of the note, run well for Cesium@1.84

1 Like
5

@onsummer

That is perfectly fine - thanks!

-Sam