Google tiles overlay

Quick demo for overlaying custom mesh on Google earth data : threedtiles getting started

Using Google tiles in custom projects has a few obstacles.

First is loading the format, I use this GitHub - ebeaufay/threedtiles: 3DTiles viewer for three.js

Then, the tiles are georeferenced so either use a geospatial framework ( e.g. GitHub - ebeaufay/UltraGlobe: A globe in threejs with OGC WMS imagery, OGC 3dtiles and elevation ) but everything is georeferenced and you won’t be working with three.js directly anymore.
Instead in this demo, I compute the transform to position a specific lon/lat at the Cartesian origin.

Then, custom models like drone photogrammetry or CAD models will likely overlap with the tiles. Rather than clipping out the Google tiles which will cause holes, I draw the Google tiles and the custom model in separate render targets. I then compose them and the custom mesh is drawn on top of if it is in front of the Google tiles or marginally behind.

1 Like