Create shape on model in cesiumJS

CesiumJS
1

i was trying to create a shape that covers a surface on building model that overlayed into simple cesium app. at first i tried to create a point and it works and then i tried to create a shape based on this tutorial but it doesnt give me any shape. i want to create a shape from those points

Screenshot_20211229_093855
Screenshot_20211229_0938551915×837 143 KB

here’s my html code

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Cesium.js"></script> 
  <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <div id="measureContainer"></div>
  <div id="cesiumContainer"></div>
  <script>
 
 Cesium.Ion.defaultAccessToken = "cesium-token";
var viewer = new Cesium.Viewer("cesiumContainer", {
  selectionIndicator: false,
  infoBox: false,
});
var scene = viewer.scene;
var handler;

var modelEntity = viewer.entities.add({
  name: "milktruck",
  position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
  model: {
    uri:
      "./kotak_ifc_gltf.glb",
  },
});

viewer.zoomTo(modelEntity);


// ini untuk menambahkan dot putih ketika hover mouse
function createPoint(worldPosition) {
  var point = viewer.entities.add({
    position: worldPosition,
    point: {
      color: Cesium.Color.WHITE,
      pixelSize: 10,
    },
  });
  return point;
}
function createShape(worldPosition) {
  var shape = viewer.entities.add({
      polygon: {
        hierarchy: worldPosition,
        material: new Cesium.ColorMaterialProperty(
          Cesium.Color.WHITE.withAlpha(0.7)
        ),
      },
    });
  return shape
}
vortex = []
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (click) {
  var earthPosition = viewer.scene.pickPosition(click.position);
  vortex.push(earthPosition)
  var dynamicPositions = new Cesium.CallbackProperty(function () { 
          return new Cesium.PolygonHierarchy(vortex);
        });
  createShape(dynamicPositions)
  createPoint(earthPosition);
}
, Cesium.ScreenSpaceEventType.LEFT_CLICK);

 </script>
  </script>
</body>
</html>

what should i do? thanks in advance

2

Hello @Ahyar ,
In last time I also work with similar task (but for me needed draw up to pointClouds data - but this NDA project)
For me helped this link:

General flow - need detect different object position and dependences from this use different methods get pick coords.
I hope this will helpful for you.
Sorry my english & happy Holidays

1 Like
3

thanks for your reply, i’m gonna check this

4

One other thing to keep in mind is that the tutorial example shared in the original post is likely adding an overlay Cesium World Terrain, not a glTF file (./kotak_ifc_gltf.glb). This may impact the implementation/performance.

5

I thought gltf is just the same as glb. Btw I’ve solved it by adding perPositionHeight as true on the polygon object

1 Like