How to move the 3D model from one point to another

CesiumJS
1

Hi,

I’m pretty
new to Cesium. But I’d a little bit of experience in WebGL using three.js
framework.

Now, with the
help of Cesium framework; I’m trying to animate the model. The model were
loaded into the canvas. Now, I stuck how to rotate the model in some
axis.

Just like,
changing the “x” or “y” axis value in the requestAnimationFrame to
make it animate. Below are the sample code from three.js library.

var render = function ()
{
requestAnimationFrame(render);

cube.rotation.y += 0.1;

renderer.render(scene, camera);
};

``

Is there is a way to do the same animate in Cesium
framework.

Appreciate your immediate support on this.

Thanks,

Premkumar.

2

Hi,

You will have to apply some transformations to the modelMatrix either to change its position or orientation.
Check the Sandcastle sample to load 3D models http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=3D%20Models.html&label=Showcases and play around with it. When you load a 3D model into Cesiumjs you will get access to the model object which contains the "modelMatrix" for you to manipulate.

Here is some code to rotate the model according to the heading, pitch, roll. You can paste it into Sandcastle to see it live.
What I do is get the Quaternions for each Axis, multiply them (beware of the order you multiply them), then you just generate a new "modelMatrix" according to the Translation and Orientation that you calculated:

// Manipulate model ----->
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var degreesToRadians = function(val) {
   return val*Math.PI/180;
}

var lon = -60;
var lat = -52;
var alt = 100;
var heading = 0;
var pitch = 0;
var roll = 0;

var primitives = scene.primitives;
var ellipsoid = viewer.scene.globe.ellipsoid;

var positionModel = function(model, lon, lat, alt, heading, pitch, roll) {
   var point = Cesium.Cartographic.fromDegrees(lon, lat, alt / 3);
   var epoint = ellipsoid.cartographicToCartesian(point);

   var heading = degreesToRadians((heading));
   var pitch = degreesToRadians(pitch);
   var roll = degreesToRadians(roll);

   var currentTranslation = new Cesium.Cartesian3();
   var currentRotation = new Cesium.Matrix3();

   var eastNorthUp = Cesium.Transforms.eastNorthUpToFixedFrame(epoint);
   var p = new Cesium.Cartesian3(lon, lat, alt);

   Cesium.Matrix4.getRotation(eastNorthUp, currentRotation);
   Cesium.Matrix4.getTranslation(eastNorthUp, currentTranslation);

   var headingQuaternion = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, -heading);
   var pitchQuaternion = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Y, -pitch);
   var rollQuaternion = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_X, -roll);

   var headingPitchQuaternion = Cesium.Quaternion.multiply(headingQuaternion, pitchQuaternion, new Cesium.Quaternion());
   var finalQuaternion = new Cesium.Quaternion();
   Cesium.Quaternion.multiply(headingPitchQuaternion, rollQuaternion, finalQuaternion);

   var rM = new Cesium.Matrix3();
   Cesium.Matrix3.fromQuaternion(finalQuaternion, rM);

   Cesium.Matrix3.multiply(currentRotation, rM, currentRotation);

   var modelMatrix = new Cesium.Matrix4();

   Cesium.Matrix4.fromRotationTranslation(
       currentRotation,
       currentTranslation,
       modelMatrix
   );

   model.modelMatrix = modelMatrix;
};

var positionCamera = function(model) {
   // Zoom to model
   var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());
   var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
   var camera = scene.camera;
   camera.transform = transform;
   var controller = scene.screenSpaceCameraController;
   var r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
   controller.minimumZoomDistance = r * 0.5;
   camera.lookAt(new Cesium.Cartesian3(r, r, r), Cesium.Cartesian3.ZERO, Cesium.Cartesian3.UNIT_Z);
};

var createModel = function(lon, lat, alt, heading, pitch, roll) {
   var model = scene.primitives.add(Cesium.Model.fromGltf({
       url : '../../SampleData/models/CesiumAir/Cesium_Air.gltf'
   }));

   model.readyToRender.addEventListener(function(model) {
       // Play and loop all animations at half-spead
       model.activeAnimations.addAll({
           speedup : 0.5,
           loop : Cesium.ModelAnimationLoop.REPEAT
       });

       viewer.clock.onTick.addEventListener(function() {
           positionModel(model, lon, lat, alt, heading, pitch, roll);
           positionCamera(model);
           
           //lon = lon+0.00001;
           //lat = lat+0.000005;
           //alt = alt+0.01;
           heading += 0.01;
           pitch += 0.05;
           roll += 0.1;
       });
   });
};

createModel(lon, lat, alt, heading, pitch, roll);
//<---- Manipulate model

Best,
André Santos

3

I forgot to mention that Cesiumjs provides us with onTick event that we can listen to and do our magic (I used it in the example I posted above):

viewer.clock.onTick.addEventListener(function() {
});

4

Thank you!

This is what I wanted!

5

Hi,

I have updated the Cesium version to 1.6. In the new library I’m facing some challenges to convert the above code to new version.

  1. In the above solution, we are setting the camera position in Model.readyToRender (Model.readyPromise) method. We have defined the model position, orientation using modelMatrix. But the new version library works differently. I’m facing challenge to bring the same functionality. Also, I wanted to reset the camera position [camera.setTransform(Cesium.Matrix4.IDENTITY);] on some event.

Currently I’ve taken example 3D Sandcastle example. Using that I could load the model with some position. but I wanted to do change the position and orientation of the model. I can’t play with the resultant entity or entity.model.

Can you help where I could write the readyRender event and perform animation (move or rotate).

Thanks in advance!

Regards,

Premkumar

6

Hi,

7

Hi,
Are you able to move 3D model in Cesium, If it is then knidly please share me code , how to do it.

Thanks.

8

Hi Andre,
Could you please tell me , how to move the 3D model in cesium.

Thanks

Abhishek kr.

9

Take a look at this demo: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Interpolation.html&label=All

-Hannah