SuperAPI AI 工具集

google-3d-tiles-r3f

编程与开发

查看项目

更新于 10-16 00:00

技能介绍

用途:将 Google Maps Photorealistic 3D Tiles 或 Google Earth 3D Tiles API 集成到 Web 应用,在 Three.js 或 React Three Fiber(R3F)场景中显示真实世界三维地形与建筑,并统一坐标系。

主要能力:Google 3D Tiles 以 ECEF(地心直角坐标)提供,需用 3d-tiles-renderer 的 TilesRenderer 与 GoogleCloudAuthPlugin(API key)加载;在 R3F 的 Canvas 内渲染瓦片,并用一个变换组对 TilesRenderer 应用 ECEF→ENU 矩阵,使场景变为本地 Y-up。ENU 定义为 X=东、Y=北、Z=上,再重映射为 Three.js 约定 X=东、Y=上、Z=-北。

使用方式:依赖 three、@react-three/fiber、3d-tiles-renderer(含 TilesRenderer、TilesPlugin、WGS84_ELLIPSOID、GoogleCloudAuthPlugin、GLTFExtensionsPlugin),可选 three/examples/jsm/loaders/DRACOLoader 处理压缩瓦片。Google 瓦片根 URL 为 https://tile.googleapis.com/v1/3dtiles/root.json,需要 Google Cloud Maps API / 3D Tiles 的 API key。步骤:用 WGS84 椭球在选定原点(如城市中心)取得 ENU→ECEF 帧并求逆得到 ECEF→ENU;应用 Y-up 重映射;将该矩阵设置到包裹 TilesRenderer 的父组,并设 matrixAutoUpdate = false;相机与其他实体使用同一原点及同一 ENU↔经纬高转换(如 latLngAltToENU / enuToLatLngAlt),保证位置对齐。

适用场景:需要真实地形建筑的三维地图、游戏、相机或音频定位等。

限制:资料未提供具体收费、价格、平台支持范围与效果数据;需自行准备 API key,并注意大场景的相机 near/far 与 logarithmicDepthBuffer 设置。