Iman-
RE: What is the best streamlined process to convert and visualize models from shape files?
I am just another developer, adding my two-cents-worth of input regarding your question.
I took a look at your shapefile in ArcGIS, and see that it is a rectangular polygon, representing a building roof-top “footprint”.
I assume for your purposes of generating a 3D model, you have chosen Multi-patch geometry, and are attempting to extrude 3D buildings using the 2D “footprint” and building height attributes for the 3rd dimension.
In theory, your approach loading gltf models would permit applying photo-realistic materials to the building models’ surfaces, and converting rooftop data from GIS shapefiles into a virtual 3D world suitable for computer-gaming, and high-quality fly-through animations in Cesium.
First, I could not load your .gltf model.
I used ArcGIS Desktop 10.3, ArcToolbox, Conversion Tools, Collada, Multipatch to Collada, to convert your multipatch shapefile, which output 2 files: ID_0.dae and ID_0.kml
The KML contains the insertion point for your model, 18.070008205824664, 59.323336434606304
Using the online converter, https://cesiumjs.org/convertmodel.html, I created ID_0.gltf
Here’s a code snippet of what I had working; paste it into Sandcastle’s 3D Models example, with ID_0.gltf in the appropriate path, and it will load correctly.
Set the Terrain provider to STK Terrain, and you will see the correct elevation for the building.
console log should show height = 52.264872275241345.
Sandcastle.addToolbarButton(‘ROOF MODEL’, function(){
try{
var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(18.070008205824664, 59.323336434606304);
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid);
viewer.entities.suspendEvents();
viewer.entities.removeAll();
var url = 'http://127.0.0.1:4001//wordpress/wp-content/plugins/lftgly/datasources/gltf/model/ID_0.gltf';
var height = 0; //height above ellipsoid in meters;
var positions = [Cesium.Cartographic.fromDegrees(18.070008205824664, 59.323336434606304, height)];
var promiseTerrainHeight = Cesium.sampleTerrain(viewer.terrainProvider, 11, positions);
Cesium.when(promiseTerrainHeight, function(updatedPositions) {
// positions[0].height and positions[1].height have been updated.
// updatedPositions is just a reference to positions.
height = positions[0].height;
console.log("height = " + positions[0].height);
var position = Cesium.Cartesian3.fromDegrees(18.070008205824664, 59.323336434606304, height);
var heading = Cesium.Math.toRadians(0);
var pitch = 0;
var roll = 0;
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
var modelTerrain =
viewer.entities.add({
name : url,
position : position,
orientation : orientation,
model : {
uri : url,
minimumPixelSize : 128
}
});
viewer.trackedEntity = modelTerrain;
viewer.entities.resumeEvents();
Cesium.when(modelTerrain.readyPromise).then(function(){
//modelTerrain.addEventListener;
});
});
} catch(error){
var strMessage = '...an error occurred adding Cesium Model (terrain): ' + error.message;
console.log(strMessage);
}
});
``
Good luck, Iman!
