Loading 3D gltf data

CesiumJS
1

Hi,

I am a newbie to cesium, so I request you to be co-operative with my question.

I am working on loading gltf data on ol3-cesium globe in my project. Found some code online but did not help.
Also, i want to show terrain provider on my globe. But no success.
What exactly is missing or what is the right way for this?

The code for both gltf data and terrain provider is:

var olcesium = new olcs.OLCesium({ map: OLMap, target: ‘cesiumdiv’ });

scene = olcesium.getCesiumScene();

camera = olcesium.getCamera();

gltf3D();

scene.imageryLayers.addImageryProvider(imageryprovider, 0);

var terrainProvider = new Cesium.CesiumTerrainProvider({

url : ‘//assets.agi.com/stk-terrain/world’

});

scene.terrainProvider = terrainProvider;

olcesium.setEnabled(true);

function gltf3D()

{

terreny = new Cesium.CesiumTerrainProvider({

url : ‘/cesium/terrenys/demextes’

});

mapaFons = new Cesium.OpenStreetMapImageryProvider({

url : ‘http://mapcache.icc.cat/map/bases_noutm/wmts/orto/GRID3857/’,

fileExtension : ‘jpeg’,

credit : ‘Ortofoto ICGC’

});

viewer = new Cesium.Viewer(‘map3d’, {

imageryProvider : mapaFons,

terrainProvider : terreny,

timeline : false,

navigationHelpButton : true,

scene3DOnly : true,

fullscreenButton : true,

baseLayerPicker : false,

homeButton : false,

infoBox : true,

sceneModePicker : false,

animation : false,

geocoder : false,

sceneMode : Cesium.SceneMode.SCENE3D,

});

scene = viewer.scene;

scene.globe.depthTestingAgainstTerrain = true;

camera = viewer.scene.camera;

ellipsoid = scene.globe.ellipsoid;

var dadesDemo = [

Cesium.CzmlDataSource.load(‘data/Girona18_42.czml’),

Cesium.GeoJsonDataSource.load(‘data/geojson/Girona_constru_v3.geojson’),

Cesium.GeoJsonDataSource.load(‘data/geojson/Girona_bt5m_v1.geojson’),

Cesium.GeoJsonDataSource.load(‘data/geojson/Girona_Pois_v1.geojson’)

];

scene.frameState.creditDisplay.addDefaultCredit(new Cesium.Credit(‘ICGC’, ‘/cesium/img/icgc.png’, ‘http://www.icgc.cat/’));

Cesium.when.all(dadesDemo).then(function (dataSources) {

var model3d = dataSources[0];

edificis25d = dataSources[1];

bt5m25d = dataSources[2];

GironaPois = dataSources[3];

viewer.dataSources.add(model3d);

calculaMatriuAlcades(edificis25d, XYZ_Edificis, 3);

calculaMatriuAlcades(bt5m25d, XYZ_bt5m, 0.9);

processPOIS(GironaPois);

}

Thanks in advance.

2

Hi Preshita,

You are creating two Cesium globes. One is created by OL3-Cesium and one you are creating in the gltf3D function.

Is it really what you want?

In order to have gltf in the 3D globe of OL3-Cesium you should:

  • first check you are able to display your GLTF in a pure Cesium application;

  • then integrate it in OL3-Cesium by getting the scene: scene = olcesium.getCesiumScene(); …

If you want Cesium datasources, please check and adapt the KML example at http://openlayers.org/ol3-cesium/examples/kml.html.

Cheers,

Guillaume