Google 3D Tiles with R3F and ENU Coordinates

When to Use This Skill

• Integrating Google Maps Photorealistic 3D Tiles or Google Earth 3D Tiles API into a web app
• Building a Three.js or React Three Fiber (R3F) scene that displays real-world 3D terrain/buildings
• Correcting 座標系 (coordinate systems): converting ECEF (Earth-Centered, Earth-Fixed) to ENU (East-North-Up) so the map is flat and Y-up for gameplay, camera, or audio
• Placing objects (camera, vehicles, audio sources) in the same coordinate system as the tiles

Quick Overview

1. Tiles: Google 3D Tiles are served in ECEF. Use 3d-tiles-renderer with TilesRenderer (R3F) and GoogleCloudAuthPlugin (API key).
2. R3F: Render tiles inside a <Canvas>; wrap TilesRenderer in a transformer group that applies an ECEF→ENU matrix so the scene is local and Y-up.
3. Consistency: Use a single origin (e.g. city center). Convert all lat/lng/alt to ENU with that origin so camera, physics, and tiles share the same 座標系.

Stack and Packages

• three + @react-three/fiber (R3F)
• 3d-tiles-renderer (provides TilesRenderer, TilesPlugin, WGS84_ELLIPSOID, GoogleCloudAuthPlugin, GLTFExtensionsPlugin)