Display a specific area from Google Tiles

[ebeaufay]

Recently I was asked in this issue: ebeaufay/UltraGlobe#5 if it would be possible to display a specific area from google tiles rather than the entire globe.

Rather than implement this in the other project https://github.com/ebeaufay/UltraGlobe, I suggest this approach:

1. load Google tiles via this project
2. Compute the transformation that would bring the location you're interested in to 0,0,0
3. add some clipping planes around the area you're interested in (https://threejs.org/examples/?q=clip#webgl_clipping)

That way, you'll have the area of interest, y-up, and you can use threejs standard controls.

Here's how you can transform the google 3DTiles tileset to bring the location of interest to the origin and rotate the model:

const pointOfInterestLLH = new THREE.Vector3(5,50,0);
const pointOfInterestCartesian = llhToCartesian(pointOfInterestLLH);

//quaternionRotation
const quaternionToEarthNormalOrientation = new THREE.Quaternion();
quaternionToEarthNormalOrientation.setFromUnitVectors(new THREE.Vector3(0, 1, 0), pointOfInterestCartesian.clone().normalize());
tileset.quaternion.copy(quaternionToEarthNormalOrientation.invert());
tileset.position.copy(cartesianLocation.negate());

you still need to implement #llhToCartesian (see proj4 library or just ask chat-gpt)

One more thing, the tiles outside of the clipping plane will still be loaded so, don't set the far plane too far.