# How to load many GLTf files

**URL:** <https://community.cesium.com/t/how-to-load-many-gltf-files/6599>\
**Category:** CesiumJS\
**Created:** [February 26, 2018, 3:55pm UTC](https://community.cesium.com/t/how-to-load-many-gltf-files/6599 "2018-02-26T15:55:02Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![David1](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@David1](https://community.cesium.com/u/David1)\
**Post date:** [February 26, 2018, 3:55pm UTC](https://community.cesium.com/t/how-to-load-many-gltf-files/6599/1 "2018-02-26T15:55:02Z")

</div>

Hi,

I'm using the last version of Cesium and i'm not able to load correctly several GLTF files at the same time.  
The thing is i have many GLTf files, each one of them representing a 3D building, and i want to load all of them together at the same time,  
but the result i get is a mesh of overlapping structures.

Any help would be appreciated.

Thanks,

David

---

<div class="post-metadata">

**Author:** ![sean\_lilley](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sean_lilley/32/2083_2.png) [@sean\_lilley](https://community.cesium.com/u/sean_lilley)\
**Post date:** [February 27, 2018, 1:12am UTC](https://community.cesium.com/t/how-to-load-many-gltf-files/6599/2 "2018-02-27T01:12:40Z")

</div>

Do you have information about where each building should be positioned, for example longitude and latitude? It sounds like the models themselves don’t have positional information and so they all render at the same spot.

---

<div class="post-metadata">

**Author:** ![David1](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@David1](https://community.cesium.com/u/David1)\
**Post date:** [February 27, 2018, 7:57am UTC](https://community.cesium.com/t/how-to-load-many-gltf-files/6599/3 "2018-02-27T07:57:05Z")

</div>

Hi Sean,

Thanks for answering. As far as i know, yes the gltf files have positional information. I used the 3Dcity-importer-exporter to transform de data from a cityGML file (which has location information) to the GLTF files. These new files have the property POSITION referencing an accessor, which is for instance like this;

"accessor\_12": {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"bufferView": "bufferView\_15",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"byteOffset": 0,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"byteStride": 12,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"componentType": 5126,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"count": 854,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"max": [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;15.083,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.504,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;25.24  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"min": [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-56.259,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-59.658,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"type": "VEC3"  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

Where "bufferView\_15" is also included in the file, with the data in an uri.

David

---

<div class="post-metadata">

**Author:** ![sean\_lilley](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sean_lilley/32/2083_2.png) [@sean\_lilley](https://community.cesium.com/u/sean_lilley)\
**Post date:** [March 2, 2018, 12:44am UTC](https://community.cesium.com/t/how-to-load-many-gltf-files/6599/4 "2018-03-02T00:44:44Z")

</div>

What do some of the other gltfs look like? Are the min/max in the same sort of range? It seems like the vertex positions might be just for the building alone and not positioned relative to other buildings. If you send over some files I could help check.

---

<div class="post-metadata">

**Author:** ![David1](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@David1](https://community.cesium.com/u/David1)\
**Post date:** [March 2, 2018, 1:20pm UTC](https://community.cesium.com/t/how-to-load-many-gltf-files/6599/5 "2018-03-02T13:20:03Z")

</div>

Hi Sean,

Here you can download a .zip file (25 mb; 100mb when unzziped) which contains around 6000~7000 gltf files.

Thanks!

[https://wetransfer.com/downloads/c9943176dd39ebb1ee47a3cdd81190a920180302131457/93f30a](https://wetransfer.com/downloads/c9943176dd39ebb1ee47a3cdd81190a920180302131457/93f30a)

---

<div class="post-metadata">

**Author:** ![sean\_lilley](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sean_lilley/32/2083_2.png) [@sean\_lilley](https://community.cesium.com/u/sean_lilley)\
**Post date:** [March 6, 2018, 2:23pm UTC](https://community.cesium.com/t/how-to-load-many-gltf-files/6599/6 "2018-03-06T14:23:50Z")

</div>

From those files it does look like each model has roughly the same origin (0, 0, 0) which will cause them to all render on top of each other. Does 3Dcity-importer-exporter save any other information during the conversion, such as where model is positioned relative to the city as a whole? You’ll need information like that in order to place the glTFs in their correct locations.

---

<div class="post-metadata">

**Author:** ![David1](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@David1](https://community.cesium.com/u/David1)\
**Post date:** [March 15, 2018, 12:58pm UTC](https://community.cesium.com/t/how-to-load-many-gltf-files/6599/7 "2018-03-15T12:58:30Z")

</div>

Hi Sean,

The 3Dcity-importer-exporter also creates one .kml file which seems to be like a "master" file with references to each one of the gltf files, but if i load the KML file i only obtain the border of the city, perhaps the references are not correct?

The .kml file is something like this;

\<kml xmlns:xal="urn:oasis:names:tc:ciq:xsdschema:xAL:2.0" xmlns="[http://www.opengis.net/kml/2.2](http://www.opengis.net/kml/2.2)" xmlns:atom="[http://www.w3.org/2005/Atom](http://www.w3.org/2005/Atom)" xmlns:gx="[http://www.google.com/kml/ext/2.2](http://www.google.com/kml/ext/2.2)"\>  
&nbsp;&nbsp;\<Document\>  
&nbsp;&nbsp;&nbsp;&nbsp;\<name\>noTiles\_Tile\_0\_0\_collada\</name\>  
&nbsp;&nbsp;&nbsp;&nbsp;\<open\>false\</open\>  
&nbsp;&nbsp;&nbsp;&nbsp;\<Placemark\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<name\>Tile border\</name\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<LineString\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<tessellate\>true\</tessellate\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<coordinates\>-2.6882315813700774,42.832737463758754 -2.645598461482068,42.832737463758754 -2.645598461482068,42.854820236527694 -2.6882315813700774,42.854820236527694 -2.6882315813700774,42.832737463758754\</coordinates\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\</LineString\>  
&nbsp;&nbsp;&nbsp;&nbsp;\</Placemark\>  
&nbsp;&nbsp;&nbsp;&nbsp;\<Placemark id="COLLADA\_\_104"\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<name\>\_104\</name\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<Model\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<altitudeMode\>absolute\</altitudeMode\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<Location\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<longitude\>-2.6846207\</longitude\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<latitude\>42.8548064\</latitude\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<altitude\>0.0\</altitude\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\</Location\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<Orientation\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<heading\>0.2173963\</heading\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\</Orientation\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<Link\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<href\>3076/\_104.gltf\</href\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\</Link\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\</Model\>  
&nbsp;&nbsp;&nbsp;&nbsp;\</Placemark\>  
&nbsp;&nbsp;&nbsp;&nbsp;\<Placemark id="COLLADA\_\_176"\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<name\>\_176\</name\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<Model\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<altitudeMode\>absolute\</altitudeMode\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<Location\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<longitude\>-2.6793701\</longitude\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<latitude\>42.8547503\</latitude\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<altitude\>0.0\</altitude\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\</Location\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<Orientation\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<heading\>0.2160434\</heading\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\</Orientation\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<Link\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<href\>3112/\_176.gltf\</href\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\</Link\>  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\</Model\>

..... and so on.

Thanks in advise!

---

<div class="post-metadata">

**Author:** ![sean\_lilley](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sean_lilley/32/2083_2.png) [@sean\_lilley](https://community.cesium.com/u/sean_lilley)\
**Post date:** [March 15, 2018, 10:48pm UTC](https://community.cesium.com/t/how-to-load-many-gltf-files/6599/8 "2018-03-15T22:48:10Z")

</div>

Ah yeah the KML is the missing piece. Unfortunately I don’t think our KML implementation loads models.

However if you are able to parse the KML yourself and get the longitude/latitude for each model you should be able to position the models.

As a side note, KML + Collada (or glTF) is a common format that we are able to convert to 3D Tiles. This type of conversion will ultimately be available with Cesium ion - [https://cesium.com/blog/2018/03/01/hello-cesium-ion/](https://cesium.com/blog/2018/03/01/hello-cesium-ion/)

---

<div class="post-metadata">

**Author:** ![Scott\_Haynes](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/scott_haynes/32/2063_2.png) [@Scott\_Haynes](https://community.cesium.com/u/Scott_Haynes)\
**Post date:** [March 16, 2018, 1:36am UTC](https://community.cesium.com/t/how-to-load-many-gltf-files/6599/9 "2018-03-16T01:36:03Z")

</div>

I used X2JS to turn the kml into JavaScript objects and then there really isn’t any parsing. Here’s the way you access the placemarks.

[https://github.com/x2js/x2js](https://github.com/x2js/x2js)

var x2js = new X2JS();

var kmlFile = x2js.xml2json( kmlFilePath );

var placeMarks = kmlFile.kml.Folder.Placemark;

Scott

---

<div class="post-metadata">

**Author:** ![David1](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@David1](https://community.cesium.com/u/David1)\
**Post date:** [March 16, 2018, 7:46am UTC](https://community.cesium.com/t/how-to-load-many-gltf-files/6599/10 "2018-03-16T07:46:10Z")

</div>

Great! Thanks both!

David

---

<div class="post-metadata">

**Author:** ![sean\_lilley](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sean_lilley/32/2083_2.png) [@sean\_lilley](https://community.cesium.com/u/sean_lilley)\
**Post date:** [March 19, 2018, 10:48pm UTC](https://community.cesium.com/t/how-to-load-many-gltf-files/6599/11 "2018-03-19T22:48:21Z")

</div>

Ah good idea Scott.