From cb7a70258a8df29372af7b3116b962448fe5e935 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Tue, 13 Jun 2023 21:32:22 +0900 Subject: [PATCH] Move GoogleTilesRenderer into core (#361) * Add google tiles renderer to core * Update demos * README update --- README.md | 30 +++++++++++++++++++ example/googleMapsAerial.js | 3 +- example/googleMapsExample.js | 3 +- src/index.d.ts | 1 + src/index.js | 1 + .../three/renderers/GoogleMapsTilesCredits.js | 2 +- src/three/renderers/GoogleTilesRenderer.d.ts | 23 ++++++++++++++ .../three/renderers}/GoogleTilesRenderer.js | 8 +++-- 8 files changed, 63 insertions(+), 8 deletions(-) rename example/src/MapsTilesCredits.js => src/three/renderers/GoogleMapsTilesCredits.js (94%) create mode 100644 src/three/renderers/GoogleTilesRenderer.d.ts rename {example/src => src/three/renderers}/GoogleTilesRenderer.js (88%) diff --git a/README.md b/README.md index 9327ce724..41b78e046 100644 --- a/README.md +++ b/README.md @@ -677,6 +677,36 @@ schedulingCallback = requestAnimationFrame : ( cb : Function ) => void A function used for scheduling when to run jobs next so more work doesn't happen in a single frame than there is time for -- defaults to the next frame. This should be overriden in scenarios where requestAnimationFrame is not reliable, such as when running in WebXR. See the VR demo for one example on how to handle this with WebXR. +## GoogleTilesRenderer + +_extends [TilesRenderer](#TilesRenderer)_ + +Variant of the TilesRenderer designed to easily support [Google's Photorealistic 3D Tiles API](https://cloud.google.com/blog/products/maps-platform/create-immersive-3d-map-experiences-photorealistic-3d-tiles). Handles adding api key to all requests, reading tile credits, and initializes tile set traversal options to reasonable defaults for the globe. + +### constructor + +```js +constructor( apiKey: String ) +``` + +Takes the Google Photorealistic Tiles API Key. + +### .getCreditsString + +```js +getCreditsString(): String; +``` + +Returns a string of unique credits for all the tiles currently displayed. + +### .setLatLonToYUp + +```js +setLatLonToYUp( lat: Number, lon: Number ): void; +``` + +Rotates and positions the local transformation of the tile group object so the surface of the globe ellipsoid at the specified latitude and longitude faces Y+. + ## LRUCache Utility class for the TilesRenderer to keep track of currently used items so rendered items will not be unloaded. diff --git a/example/googleMapsAerial.js b/example/googleMapsAerial.js index 2cd0c43b1..cdf87b7fe 100644 --- a/example/googleMapsAerial.js +++ b/example/googleMapsAerial.js @@ -1,5 +1,4 @@ -import { GeoUtils, WGS84_ELLIPSOID } from '../src/index.js'; -import { DebugGoogleTilesRenderer as GoogleTilesRenderer } from './src/GoogleTilesRenderer.js'; +import { GeoUtils, WGS84_ELLIPSOID, GoogleTilesRenderer } from '../src/index.js'; import { Scene, WebGLRenderer, diff --git a/example/googleMapsExample.js b/example/googleMapsExample.js index b0904d5d9..bdbef13e4 100644 --- a/example/googleMapsExample.js +++ b/example/googleMapsExample.js @@ -1,5 +1,4 @@ -import { GeoUtils, WGS84_ELLIPSOID, WGS84_RADIUS } from '../src/index.js'; -import { DebugGoogleTilesRenderer as GoogleTilesRenderer } from './src/GoogleTilesRenderer.js'; +import { GeoUtils, WGS84_ELLIPSOID, WGS84_RADIUS, DebugGoogleTilesRenderer as GoogleTilesRenderer } from '../src/index.js'; import { Scene, WebGLRenderer, diff --git a/src/index.d.ts b/src/index.d.ts index d4eda722f..e6fdd1ce4 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -23,6 +23,7 @@ export { Ellipsoid } from './three/math/Ellipsoid'; export { EllipsoidRegion } from './three/math/EllipsoidRegion'; export * as GeoUtils from './three/math/GeoUtils'; export * from './three/math/GeoConstants'; +export * from './three/renderers/GoogleTilesRenderer'; export { TilesRendererBase } from './base/TilesRendererBase'; export { Tile } from './base/Tile'; diff --git a/src/index.js b/src/index.js index 4635be36d..b09d71feb 100644 --- a/src/index.js +++ b/src/index.js @@ -25,6 +25,7 @@ export { Ellipsoid } from './three/math/Ellipsoid.js'; export { EllipsoidRegion } from './three/math/EllipsoidRegion.js'; export * as GeoUtils from './three/math/GeoUtils.js'; export * from './three/math/GeoConstants.js'; +export * from './three/renderers/GoogleTilesRenderer.js'; export { TilesRendererBase } from './base/TilesRendererBase.js'; export { LoaderBase } from './base/LoaderBase.js'; diff --git a/example/src/MapsTilesCredits.js b/src/three/renderers/GoogleMapsTilesCredits.js similarity index 94% rename from example/src/MapsTilesCredits.js rename to src/three/renderers/GoogleMapsTilesCredits.js index 2b7073c52..ea60dd5e2 100644 --- a/example/src/MapsTilesCredits.js +++ b/src/three/renderers/GoogleMapsTilesCredits.js @@ -1,4 +1,4 @@ -export class MapsTilesCredits { +export class GoogleMapsTilesCredits { constructor() { diff --git a/src/three/renderers/GoogleTilesRenderer.d.ts b/src/three/renderers/GoogleTilesRenderer.d.ts new file mode 100644 index 000000000..13ab0dd58 --- /dev/null +++ b/src/three/renderers/GoogleTilesRenderer.d.ts @@ -0,0 +1,23 @@ +import { TilesRenderer } from '../TilesRenderer'; +import { DebugTilesRenderer } from '../DebugTilesRenderer'; +import { Ellipsoid } from '../math/Ellipsoid'; + +export class GoogleTilesRenderer extends TilesRenderer { + + ellipsoid: Ellipsoid; + + constructor( apiKey: String ); + getCreditsString(): String; + setLatLonToYUp( lat: Number, lon: Number ): void; + +} + +export class DebugGoogleTilesRenderer extends DebugTilesRenderer { + + ellipsoid: Ellipsoid; + + constructor( apiKey: String ); + getCreditsString(): String; + setLatLonToYUp( lat: Number, lon: Number ): void; + +} diff --git a/example/src/GoogleTilesRenderer.js b/src/three/renderers/GoogleTilesRenderer.js similarity index 88% rename from example/src/GoogleTilesRenderer.js rename to src/three/renderers/GoogleTilesRenderer.js index 193cfc061..9ff50ef4b 100644 --- a/example/src/GoogleTilesRenderer.js +++ b/src/three/renderers/GoogleTilesRenderer.js @@ -1,6 +1,8 @@ import { Matrix4 } from 'three'; -import { TilesRenderer, DebugTilesRenderer, WGS84_ELLIPSOID } from '../../src/index.js'; -import { MapsTilesCredits } from './MapsTilesCredits.js'; +import { TilesRenderer } from '../TilesRenderer.js'; +import { DebugTilesRenderer } from '../DebugTilesRenderer.js'; +import { WGS84_ELLIPSOID } from '../math/GeoConstants.js'; +import { GoogleMapsTilesCredits } from './GoogleMapsTilesCredits.js'; const API_ORIGIN = 'https://tile.googleapis.com'; const TILE_URL = `${ API_ORIGIN }/v1/3dtiles/root.json`; @@ -17,7 +19,7 @@ const GoogleTilesRendererMixin = base => class extends base { super( new URL( `${ baseUrl }?key=${ apiKey }` ).toString() ); - this._credits = new MapsTilesCredits(); + this._credits = new GoogleMapsTilesCredits(); this.fetchOptions.mode = 'cors'; this.parseQueue.maxJobs = 7;