Cesium drag 3D model

Cesium Drag and drop 3D Model

What effect does this place want to achieve ？ Is the use of cesium Add a... To the map 3D Model , Then the drag and drop effect is realized .

Add a base station model

Then this blog post is not about adding models , But simply paste the code directly , I won't go into details .

  //  Add a base station model 
  function addSite() {
    
    let position = Cesium.Cartesian3.fromDegrees(116.236393, 40.075119, 0);
    //  Set model orientation 
    let hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(0), 0, 0);
    let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);
    //  Add model 
    let model = viewer.entities.add({
    
      id: 'site',   //  Model id
      position: position,   //  Model location 
      orientation: orientation,   //  Model orientation 
      model: {
    
        uri: './models/siteModel/scene.gltf',   //  Model path , Change into your own model 
        scale: 1,
        show: true, //  Whether the model is visible 
      },
      description: ' Base station model '  //  Add model description 
    });
    viewer.trackedEntity = model;    //  View switch to model 
  }

The code above completes adding model functions to the interface .

Drag and drop

In fact, dragging is for this cesium Add a listening event .

For example, the simple logic analysis of drag and drop ：

1、 Mouse down event , If there is a model , You can set a color for the model , Know which model is selected by pressing .
2、 Then listen for mouse drag events , Get the position of the mouse drag , Assign to model .
3、 Mouse up event , End the mouse movement event , Then change the color back .

   //  Registration events 
  function setHandler() {
    
    handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    //  Register mouse down events 
    handler.setInputAction((e) => {
    
      const pick = viewer.scene.pick(e.position);
      if (!Cesium.defined(pick)) {
     return; };//  If you click on a blank area , Then it doesn't go down 
      viewer.scene.screenSpaceCameraController.enableRotate = false;//  Lock camera , Otherwise, the camera will move when the entity is moved later 
      pick.id.model.color = Cesium.Color.fromAlpha(Cesium.Color.RED, 1)  // Set the color 

      //  Register mouse drag events 
      viewer.screenSpaceEventHandler.setInputAction((arg) => {
    //  by viewer binding MOUSE_MOVE Event listener （ Execute function , Listening events ）
        const position = arg.endPosition;// arg Yes startPosition And endPosition Two attributes , That is, the position information before and after the movement ：Cartesian2 object 
        const cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(position), viewer.scene);// take Cartesian2 To Cartesian3
        pick.id.position._value = cartesian
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


      //  Bind the mouse up event 
      viewer.screenSpaceEventHandler.setInputAction(({
      position }) => {
    // by viewer binding LEFT_UP Event listener （ Execute function , Listening events ）
        viewer.scene.screenSpaceCameraController.enableRotate = true;//  Unlock camera 
        pick.id.model.color = null  // Set the color 
        viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);//  relieve viewer Of MOUSE_MOVE Event listener 
      }, Cesium.ScreenSpaceEventType.LEFT_UP)

    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
  }

When it's done, it's , It's so simple .