Hi,
I have four GLTF tiles from Boston:
https://dl.dropboxusercontent.com/s/5piiujui3sdiaj3/1.glb
https://dl.dropboxusercontent.com/s/1tcbgqqzzomypb9/2.glb
https://dl.dropboxusercontent.com/s/98v1v0f6lwmhy0r/3.glb
https://dl.dropboxusercontent.com/s/osse5akgmys8pe0/4.glb
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});
scene.primitives.add(model1);
scene.primitives.add(model2);
scene.primitives.add(model3);
scene.primitives.add(model4);
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:
https://dl.dropboxusercontent.com/s/bllbanltu1rs10s/cesium1.png
https://dl.dropboxusercontent.com/s/luvy5ayvo8sfzeh/three1.png
https://dl.dropboxusercontent.com/s/hep82jaocrzaobc/three2.png
https://dl.dropboxusercontent.com/s/qwzhapyaoalgqcs/three3.png
https://dl.dropboxusercontent.com/s/tdy6tfbwtft8ioy/three4.png
Here is the Three.js code:
https://codepen.io/randymilbert/pen/QxrWzL
I would very much appreciate your help with this!
Sincerely,
Randy