# How to show a simple triangle with Primitive API?

**URL:** <https://community.cesium.com/t/how-to-show-a-simple-triangle-with-primitive-api/14732>\
**Category:** CesiumJS\
**Created:** [August 6, 2021, 4:19am UTC](https://community.cesium.com/t/how-to-show-a-simple-triangle-with-primitive-api/14732 "2021-08-06T04:19:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![onsummer](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/onsummer/32/5408_2.png) [@onsummer](https://community.cesium.com/u/onsummer)\
**Post date:** [August 6, 2021, 4:19am UTC](https://community.cesium.com/t/how-to-show-a-simple-triangle-with-primitive-api/14732/1 "2021-08-06T04:19:00Z")

</div>

```auto
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.

---

<div class="post-metadata">

**Author:** ![onsummer](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/onsummer/32/5408_2.png) [@onsummer](https://community.cesium.com/u/onsummer)\
**Post date:** [August 9, 2021, 7:34am UTC](https://community.cesium.com/t/how-to-show-a-simple-triangle-with-primitive-api/14732/2 "2021-08-09T07:34:16Z")

</div>

Update: has been solved by myself.

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [August 10, 2021, 6:45pm UTC](https://community.cesium.com/t/how-to-show-a-simple-triangle-with-primitive-api/14732/3 "2021-08-10T18:45:33Z")

</div>

@onsummer

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

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

---

<div class="post-metadata">

**Author:** ![onsummer](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/onsummer/32/5408_2.png) [@onsummer](https://community.cesium.com/u/onsummer)\
**Post date:** [August 11, 2021, 3:18am UTC](https://community.cesium.com/t/how-to-show-a-simple-triangle-with-primitive-api/14732/4 "2021-08-11T03:18:52Z")

</div>

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

> <https://github.com/onsummer/my-dev-notes/blob/master/opengis-frontEnd-Notes/Cesium-Notes/20.%E8%87%AA%E5%AE%9A%E4%B9%89Primitive%E5%AE%9E%E8%B7%B5%EF%BC%9A%E7%BB%98%E5%88%B6%E4%B8%80%E4%B8%AA%E4%B8%89%E8%A7%92%E5%BD%A2.md#4-%E4%BB%A3%E7%A0%81>

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

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [August 11, 2021, 2:25pm UTC](https://community.cesium.com/t/how-to-show-a-simple-triangle-with-primitive-api/14732/5 "2021-08-11T14:25:15Z")

</div>

@onsummer

That is perfectly fine - thanks!

-Sam