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

[Premkumar Jayaseelan]

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.

[andre....@inovmapping.com]

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

[andre....@inovmapping.com]

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() {
});

[Premkumar Jayaseelan]

Thank you!

This is what I wanted!

[Premkumar Jayaseelan]

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

[Abhishek Kumar]

Hi,

[Abhishek Kumar]

Hi,

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

Thanks.

[Abhishek Kumar]

Hi Andre, 

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

Thanks

Abhishek kr.

On Thursday, 30 October 2014 01:42:21 UTC+5:30, andre....@inovmapping.com wrote:

[Hannah Pinkos]

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

-Hannah