Loading GLTF tiles in Three.js


I have four GLTF tiles from Boston:


When I load these tiles in Cesium Sandcastle, they look great. There are no gaps between tiles. Here is the relevant code:

    var viewer = new Cesium.Viewer('cesiumContainer');

    var scene = viewer.scene;

    var url1 = "https://dl.dropboxusercontent.com/s/5piiujui3sdiaj3/1.glb";
    var url2 = "https://dl.dropboxusercontent.com/s/1tcbgqqzzomypb9/2.glb";
    var url3 = "https://dl.dropboxusercontent.com/s/98v1v0f6lwmhy0r/3.glb";
    var url4 = "https://dl.dropboxusercontent.com/s/osse5akgmys8pe0/4.glb";

    var model1 = Cesium.Model.fromGltf({url: url1});
    var model2 = Cesium.Model.fromGltf({url: url2});
    var model3 = Cesium.Model.fromGltf({url: url3});
    var model4 = Cesium.Model.fromGltf({url: url4});


    var center = Cesium.Cartesian3.fromDegrees(-71.10743878, 42.38356126);

    viewer.camera.lookAt(center, new Cesium.Cartesian3(0.0, 0.0, 200.0));

I am trying to replicate this using Three.js. I am pretty close, but I have small gaps between the tiles. The tiles seem to have some baked-in transformations, but I am having trouble figuring out what those are and how to reverse them.

Here are screenshots of the Cesium and Three.js projects:


Here is the Three.js code:


I would very much appreciate your help with this!



I got it to work! I was able to eliminate the tile gaps by changing how I was rotating and translating the loaded tiles. Here is the working code:


good job Randy!