How to bind 3D model on mouse movement?

CesiumJS
1

Hi, I’m trying to make 3D model move on mouse movement.

var viewer = new Cesium.Viewer('cesiumContainer', {
  infoBox: false,
  selectionIndicator: false,
  shadows: true,
  shouldAnimate: true,
});

var scene = viewer.scene;
var handler;
var selectedMesh;
var isMove = false;
var lon = -123.0744619;
var lat = 44.0503706;
// Mouse over the globe to see the cartographic position
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
  isMove = !isMove;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (movement) {
  var cartesian = viewer.camera.pickEllipsoid(
    movement.endPosition,
    scene.globe.ellipsoid
  );
  if (cartesian && selectedMesh && isMove) {
    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    selectedMesh.position = cartesian;
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

function createModel(url, height) {
  viewer.entities.removeAll();

  var position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
  var heading = Cesium.Math.toRadians(135);
  var pitch = 0;
  var roll = 0;
  var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
  var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

  var entity = viewer.entities.add({
    name: url,
    position: position,
    orientation: orientation,
    model: {
      uri: url,
      minimumPixelSize: 128,
      maximumScale: 20000,
    },
  });
  viewer.trackedEntity = entity;
  selectedMesh = entity;
}

var options = [
  {
    text: 'Aircraft',
    onselect: function () {
      createModel('../SampleData/models/CesiumAir/Cesium_Air.glb', 5000.0);
    },
  },
  {
    text: 'Drone',
    onselect: function () {
      createModel('../SampleData/models/CesiumDrone/CesiumDrone.glb', 150.0);
    },
  },
  {
    text: 'Ground Vehicle',
    onselect: function () {
      createModel('../SampleData/models/GroundVehicle/GroundVehicle.glb', 0);
    },
  },
  {
    text: 'Hot Air Balloon',
    onselect: function () {
      createModel(
        '../SampleData/models/CesiumBalloon/CesiumBalloon.glb',
        1000.0
      );
    },
  },
  {
    text: 'Milk Truck',
    onselect: function () {
      createModel(
        '../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb',
        0
      );
    },
  },
  {
    text: 'Skinned Character',
    onselect: function () {
      createModel('../SampleData/models/CesiumMan/Cesium_Man.glb', 0);
    },
  },
  {
    text: 'Draco Compressed Model',
    onselect: function () {
      createModel(
        '../SampleData/models/DracoCompressed/CesiumMilkTruck.gltf',
        0
      );
    },
  },
];

Sandcastle.addToolbarMenu(options);

But the movement is weird, the model always falls behind the mouse instead on the mouse.

But this works on labeled text entity, is there anything particular with 3D model entity?

2

Never mind, it’s the camera movement that makes this not working, just remove viewer.trackedEntity = entity;

1 Like