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

[tl.ga...@gmail.com]

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

[Hannah Pinkos]

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

[Hannah Pinkos]

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