Google Photorealistic 3D Tiles in iTwin.js
iTwin.js supports displaying Google Photorealistic 3D Tiles via the class Google3dTilesProvider. This provider handles authentication, tile loading, and attribution display.
Here is an example of how to use the new provider by supplying an API key:
export async function setUpGoogle3dTilesProviderWithApiKey(viewport: Viewport, apiKey: string) {
// Specify your API key in the provider options
const provider = new Google3dTilesProvider({ apiKey });
// The provider must be initialized before attaching, to load imagery for its decorator
await provider.initialize();
// Register the provider with a name that will also be used to attach the reality model
IModelApp.realityDataSourceProviders.register("google3dTiles", provider);
// This function just provides the Google 3D Tiles URL, or you can get it another way via a service, etc.
const url = getGoogle3dTilesUrl();
viewport.displayStyle.attachRealityModel({
tilesetUrl: url,
name: "google3dTiles",
rdSourceKey: {
// provider property must be the same name you registered your provider under
provider: "google3dTiles",
format: "ThreeDTile",
id: url,
},
});
}
Instead of an API key, you can also supply a getAuthToken function:
export async function setUpGoogle3dTilesProviderWithGetAuthToken() {
const fetchToken = async () => {
const apiUrl = "https://my-api.com/";
const response = await fetch(apiUrl);
const data = await response.json();
return data.accessToken;
}
// Specify the getAuthToken function to authenticate via authorization header in the Google 3D Tiles request, instead of API key
const provider = new Google3dTilesProvider({ getAuthToken: fetchToken });
await provider.initialize();
// Next you can register the provider and attach the reality model, etc.
}
You can also use the Google3dTilesProviderOptions showCreditsOnScreen flag to control the display of the data attributions on-screen. It is set to true by default.
Last Updated: 27 June, 2025
Found something wrong, missing, or unclear on this page? Raise an issue in our repo.