Extrude height of GLTF model in CesiumJS

[Rahul_Choudhary]

Hi,

I work for an organization where we are building a solution which requires intensive use of cesium.
In a nutshell, The idea is to plot the 2D floorplans in 3D on the globe using cesium. To do this, I have converted AutoCAD DWG file into GLTF using FME. The conversion gave me individual gltf file with ‘.bin’ for each feature.
I have plotted the model on the globe by georeferencing it using an origin point. Below is how I did it.

    var heading = Cesium.Math.toRadians(-35.5484764854);
    var pitch = 0.0;
    var roll = 0.0;
    var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

    var origin_gf = Cesium.Cartesian3.fromDegrees(-118.4513819217682, 34.05261942045958, 0.0);
    var modelMatrix_gf = Cesium.Transforms.headingPitchRollToFixedFrame(origin_gf, hpr);

    $.getJSON('./Source/SampleData/file_paths/gf.json').then( function(data){
        for(var i = 0; i < data.file_path.length; i++){
            viewer.scene.primitives.add(Cesium.Model.fromGltf({
                url : data.file_path[i],
                modelMatrix : modelMatrix_gf,
                scale : 0.025,
                color : Cesium.Color.WHITE
            }));
        }      
    })

Now, this plot is in 2D. I would like to extrude the height of the walls. Is it possible to do so? If yes, How can I do it?

Thank you in advance for your guidance.

–Rahul

[omar]

Since glTF is already a 3D model, you could scale that up on the vertical axis before loading it in CesiumJS. You could also upload the model to Cesium ion (https://cesium.com/ion) and use the scaling tool to scale that before loading it in your CesiumJS app.

Alternatively you can extrude polygons in GeoJSON, see this example: https://sandcastle.cesium.com/index.html?src=GeoJSON%20and%20TopoJSON.html.

[Rahul_Choudhary]

Hey Omar,

Thanks for the information. It is of great help to me. There’s one more thing I am curious about. Is there a way to scale the gltf vertical axis from the CesiumJS itself, without having to go to ion first to scale it and then use it in CesiumJS?

@Rahul_Choudhary

viewer.scene.primitives.add(Cesium.Model.fromGltf({
                url : data.file_path[i],
                modelMatrix : modelMatrix_gf,
                scale : 0.025,
                color : Cesium.Color.WHITE
            }));

In the above code, The GLTF was loaded in CesiumJS directly and the scaled there itself. Is there a way to scale the vertical axis to extrude the height in CesiumJS itself?

Thanks.
–Rahul

[Rahul_Choudhary]

@omar

Since glTF is already a 3D model, you could scale that up on the vertical axis before loading it in CesiumJS.

I tried doing this. Here is how I did it. First I converted a 2D Floor plan made in Autocad with dwg file format into gltf using FME.

Then I Uploaded it on Ion with 3D Model (Tile with 3D Tiles) option.

Then I placed it on the globe by choosing the Adjust Tileset Location option where I found the scaling option. with different scaling for x, y, z axes. x and y scaling was working as it was supposed to but z scaling did not had any effect on the model.

I am guessing this happened because there was no z component in the plot as it was a 2d floor plan.

Please guide me if I am doing it wrong or whether this method works on such kind of models or not.

Thanks
–Rahul

[omar]

Thanks for documenting your process here @Rahul_Choudhary. I think the issue here is that the model can’t be scaled in Cesium ion if it has no thickness at all.

Does FME have a way of exporting it with some base thickness?