How we can add three js 3D model in Cesium map

Question

I want to add three JS 3D model in Cesium map application but i have not idea how we can do this.

below code is my cesium map code where we create this https://sandcastle.cesium.com/?src=3D%20Tiles%20BIM.html model using cesium but. But i want to add three js 3D model in this code. suggest me how we can add three js 3D model in this code. I am using Cesium through npm.

const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
      animation: false,
      timeline: false,
    });
    const scene = viewer.scene;

    viewer.cesiumWidget.creditContainer.parentNode?.removeChild(
      viewer.cesiumWidget.creditContainer);

    viewer.clock.currentTime = Cesium.JulianDate.fromIso8601(
      "2022-08-01T00:00:00Z"
    );

    const tileset = scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(1240402),
      })
    );

    tileset.readyPromise
      .then(function (tileset: any) {
        viewer.zoomTo(
          tileset,
          new Cesium.HeadingPitchRange(
            0.5,
            -0.4,
            tileset.boundingSphere.radius * 4.0
          )
        );
      })
      .catch(function (error: any) {
        console.log(error);
      });

    tileset.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.REPLACE;

    let selectedFeature: any;
    let picking = false;

    function setElementColor(element: any, color: any) {
      const featuresToColor = element[element];
      const length = featuresToColor.length;
      for (let i = 0; i < length; ++i) {
        const feature = featuresToColor[i];
        feature.color = Cesium.Color.clone(color, feature.color);
      }
    }


    function selectFeature(feature: any) {
      const element = feature.getProperty("element");
      setElementColor(element, Cesium.Color.YELLOW);
      selectedFeature = feature;
    }

    function unselectFeature(feature: any) {
      if (!Cesium.defined(feature)) {
        return;
      }
      const element = feature.getProperty("element");
      setElementColor(element, Cesium.Color.WHITE);
      if (feature === selectedFeature) {
        selectedFeature = undefined;
      }
    }

    const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    handler.setInputAction(function (movement: any) {
      if (!picking) {
        return;
      }

      const feature = scene.pick(movement.endPosition);

      unselectFeature(selectedFeature);

      if (feature instanceof Cesium.Cesium3DTileFeature) {
        selectFeature(feature);
      }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

Answer 1

If you're looking to add 3D Models to a Cesium view, the simplest way is to use the model format supported by Cesium, which is glTF / GLB. Various examples show 3D models being loaded into Cesium, for example:

https://sandcastle.cesium.com/?src=3D%20Models.html

const entity = viewer.entities.add({
    name: url,
    position: position,
    orientation: orientation,
    model: {
        uri: url
    },
});
viewer.trackedEntity = entity;

These kinds of models can be created and exported from ThreeJS using the ThreeJS GLTFExporter. The exported result can then be loaded into Cesium, for example by providing the URL to the code above.