How to set 3D model scale like Google earth in czml

CesiumJS
1

Hi,

We are using cesium to migrate from google earth.I am able to render 3D models by using gltf file. I need help in setting scale and orientation properties for 3D models since in GE for scale we need to set scaleX,scaleY and scaleZ.

Thanks,
Gayatri

2

Hello Gayatri,

Have you seen this demo? : http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=3D%20Models.html&label=Showcases

You can set the orientation using the Model orientation argument. This demo shows you how to create an orientation from heading/pitch/roll.

If scaleX, scaleY and scaleZ all have the same value, you can use the model.scale argument to do a uniform scale on the model. If not, you’ll need to use a modelMatrix to do the non-uniform scale which will be a little more complicated. If that’s the case, let me know and I can write a demo to show you how to do this.

Best,

Hannah

3

Hello,

Actually, I just found out that it is not currently possible to do a non-uniform scale using CZML or entities. I’ve created an issue here: https://github.com/AnalyticalGraphicsInc/cesium/issues/2922

Meanwhile, if you don’t need to use the entities layer, you can do a non-uniform scale on a model using a model matrix. Here’s an example that I modified from from the development/3D models sandcastle example

function createModel(url, height, heading, pitch, roll) {

var origin = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);

var modelMatrix = Cesium.Matrix4.multiply(

Cesium.Transforms.headingPitchRollToFixedFrame(origin, heading, pitch, roll),

Cesium.Matrix4.fromScale(new Cesium.Cartesian3(1.0, 2.0, 3.0)), //Apply non-uniform scale of scaleX=1, scaleY=2, scaleZ=3

new Cesium.Matrix4());

scene.primitives.removeAll(); // Remove previous model

var model = scene.primitives.add(Cesium.Model.fromGltf({

url : url,

modelMatrix : modelMatrix,

minimumPixelSize : 128

}));

model.readyPromise.then(function(model) {

// Play and loop all animations at half-speed

model.activeAnimations.addAll({

speedup : 0.5,

loop : Cesium.ModelAnimationLoop.REPEAT

});

var camera = viewer.camera;

// Zoom to model

var controller = scene.screenSpaceCameraController;

var r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);

controller.minimumZoomDistance = r * 0.5;

var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());

var heading = Cesium.Math.toRadians(230.0);

var pitch = Cesium.Math.toRadians(-20.0);

camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, r * 2.0));

});

}

``

-Hannah