How to move 3D model on Cesium

Question

I wanted to move the model dynamically using keyboard shortcuts. I could not find relevant article on that.

So for now, I'm trying to move the model on click. When click on the model. The model has to move in one direction (increment the value 1 on tick). Find below the sandcastle code for that.

var selectedMesh; var i=0;

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

var handle = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

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

    var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
    var heading = Cesium.Math.toRadians(135);
    var pitch = 0;
    var roll = 0;
    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);

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


    viewer.clock.onTick.addEventListener(function () {
        if (selectedMesh) {
            console.log("Before 0 : " + selectedMesh.primitive.modelMatrix[12]);
            selectedMesh.primitive.modelMatrix[12] = selectedMesh.primitive.modelMatrix[12] + 1;
            console.log("After 0 : " + selectedMesh.primitive.modelMatrix[12]);
        } 
    });
}

handle.setInputAction(function (movement) {
    console.log("LEFT CLICK");
    var pick = viewer.scene.pick(movement.position);
    if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {

        if (!selectedMesh) {
            selectedMesh = pick;
        }
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

var options = [{
    text: 'Aircraft',
    onselect: function () {
        createModel('../../SampleData/models/CesiumAir/Cesium_Air.bgltf', 5000.0);
    }
}, {
    text: 'Ground vehicle',
    onselect: function () {
        createModel('../../SampleData/models/CesiumGround/Cesium_Ground.bgltf', 0);
    }
}, {
    text: 'Milk truck',
    onselect: function () {
        createModel('../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.bgltf', 0);
    }
}, {
    text: 'Skinned character',
    onselect: function () {
        createModel('../../SampleData/models/CesiumMan/Cesium_Man.bgltf', 0);
    }
}];

Sandcastle.addToolbarMenu(options);

When I click, the model is moving for the first time. After that, It stays on the same place. I've printed the value in the console. It seems the value is not changing. I'm not sure about the problem here. or I'm implementing the transformation wrongly.

Answer 1

If you keep track of the current lat and lon of the entity, and adjust that lat and lon based on user input, all you need to do is update the orientation of the entity.

var lon = // the updated lon
var lat = // updated lat
var position = Cesium.Cartesian3.fromDegrees(lon, lat, height);

var heading = Cesium.Math.toRadians(135);
var pitch = 0;
var roll = 0;

// create an orientation based on the new position
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);

Then you just need to update the orientation of the entity.

entity.orientation = orientation;

By changing the value, the models orientation, and therefore position will get updated.