CesiumJS 3D Tiles Simple Demo

**European Economic Area (EEA) developers** > [!NOTE] > If your billing address is in the European Economic Area, effective on 8 July 2025, the [Google > Maps Platform EEA Terms of Service](https://cloud.google.com/terms/maps-platform/eea) will apply to your use of the Services. [Learn more](https://developers.google.com/maps/comms/eea/faq.md.txt). In addition, certain content from the Map Tiles API will no longer be returned. [Learn more](https://developers.google.com/maps/comms/eea/map-tiles.md.txt). Photorealistic 3D Tiles are in the [OGC standard glTF format](https://portal.ogc.org/files/102132), meaning you can use any renderer that supports the OGC 3D Tiles spec to build your 3D visualizations. For example, [Cesium](https://cesium.com/platform/) is a foundational open source library for rendering 3D visualizations. ## Work with CesiumJS CesiumJS is an open source Javascript library for 3D visualization on the web. For more information about using CesiumJS, see [Learn CesiumJS](https://cesium.com/learn/cesiumjs-learn/). > [!TIP] > **Tip:** For demonstrations of several CesiumJS code samples, see [CesiumJS renderer examples](https://developers.google.com/maps/documentation/tile/use-renderer.md.txt#cesiumjs-renderer-examples). ### User controls The CesiumJS tile renderer has a standard set of user controls. | Action | Description | |---|---| | Pan view | Left click \& drag | | Zoom view | Right click \& drag, or scroll the mouse wheel | | Rotate view | Ctrl + left/right click \& drag, or middle click \& drag | ### Best practices There are several approaches that you can take to decrease CesiumJS 3D loading times. For example: - Enable simultaneous requests by adding the following statement to your rendering HTML: ```javascript Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = ``` The higher the `REQUEST_COUNT`, the quicker the tiles load. However, when loading in a Chrome browser with `REQUEST_COUNT` greater than 10 and cache disabled, you might run into a known [Chrome issue](https://bugs.chromium.org/p/chromium/issues/detail?id=1428295). For most use cases, we recommend a `REQUEST_COUNT` of 18 for optimal performance. - Enable skipping levels of detail. For more information, see this [Cesium issue](https://github.com/CesiumGS/cesium/issues/3857). Ensure that you properly display data attributions by enabling `showCreditsOnScreen: true`. For more information, see [Policies](https://developers.google.com/maps/documentation/tile/policies.md.txt#cesiumjs). ### Rendering metrics To find the framerate, look at how many times per second the [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) method is called. To see how the frame latency is calculated, take a look at the [PerformanceDisplay](https://github.com/CesiumGS/cesium/blob/9295450e64c3077d96ad579012068ea05f97842c/packages/engine/Source/Scene/PerformanceDisplay.js#L83) class. ### CesiumJS renderer examples You can use the CesiumJS renderer with Map Tiles API's 3D Tiles by simply supplying the root tileset URL. #### Simple example The following example initializes the CesiumJS renderer, and then loads the root tileset. ```html CesiumJS 3D Tiles Simple Demo

``` For information about `requestRenderMode`, see [Enabling request render mode](https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/#enabling-request-render-mode). The HTML page renders as shown here. ![](https://developers.google.com/static/maps/documentation/tile/images/cesium-display.png) #### Places API (New) integration You can use CesiumJS with the [Places API (New)](https://developers.google.com/maps/documentation/places/web-service) to retrieve more information. You can use the Autocomplete widget to fly to the viewport of Places. This example uses the Places Autocomplete API, which is enabled by [following these instructions](https://developers.google.com/maps/documentation/javascript/places-autocomplete), and the Maps JavaScript API, which is enabled by [following these instructions](https://developers.google.com/maps/documentation/javascript/cloud-setup#enabling-apis). ```html CesiumJS 3D Tiles Places API (New) Integration Demo Go to a place:

``` #### Rotating drone view You can control the camera to animate through the tileset. When combined with the Places API (New) and the Elevation API, this animation simulates an interactive drone flyover of any point of interest. This code sample flies you around the place that you selected in the Autocomplete widget. > [!NOTE] > **Note:** To use this code sample, you must enable the [Places API (New)](https://console.cloud.google.com/apis/library/places-backend.googleapis.com), [Maps JavaScript API](https://console.cloud.google.com/apis/library/maps-backend.googleapis.com), and the [Elevation API](https://console.cloud.google.com/apis/library/elevation-backend.googleapis.com) on the same project that you're using for 3D Tiles. Go to each of these pages, select your 3D Tiles project from the dropdown menu in the blue bar at the top of the page. Then select the blue **ENABLE** button under the API's name. > > - If the button says **MANAGE**, then the API is already enabled on that project. ```html CesiumJS 3D Tiles Rotating Drone View Demo Go to a place:

``` #### Draw polylines and labels This code sample demonstrates how to add polylines and labels to a map. You can add polylines to a map to show driving and walking directions, or to show property boundaries, or to calculate driving and walking durations. You can also get attributes without actually rendering the scene. You could take users on a curated tour of a neighborhood, or you could show neighboring properties that are currently on sale, and then you could add 3D objects such as billboards to the scene. You could summarize a trip, listing the properties that you viewed, displaying these details in virtual objects. ```html CesiumJS 3D Tiles Polyline and Label Demo

``` #### Camera orbit In Cesium, you can orbit the camera around a point of interest, avoiding collisions with buildings. Alternatively, you can make buildings transparent when the camera moves through them. First, lock the camera onto a point, then you can create a camera orbit to showcase your asset. You can do this by using the camera's [`lookAtTransform`](https://cesium.com/learn/cesiumjs/ref-doc/Camera.html#lookAtTransform) function with an event listener, as demonstrated in this code sample. ```javascript // Lock the camera onto a point. const center = Cesium.Cartesian3.fromRadians( 2.4213211833389243, 0.6171926869414084, 3626.0426275055174 ); const transform = Cesium.Transforms.eastNorthUpToFixedFrame(center); viewer.scene.camera.lookAtTransform( transform, new Cesium.HeadingPitchRange(0, -Math.PI / 8, 2900) ); // Orbit around this point. viewer.clock.onTick.addEventListener(function (clock) { viewer.scene.camera.rotateRight(0.005); }); ``` For more information about controlling the camera, see [Control the camera](https://cesium.com/learn/cesiumjs-learn/cesiumjs-camera/) ## Work with Cesium for Unreal To use the Cesium for Unreal Plugin with the 3D Tiles API, follow the steps below. > [!TIP] > **Tip:** For detailed instructions, see the [Cesium for Unreal Quickstart](https://cesium.com/learn/unreal/unreal-quickstart/). 1. Install the Cesium for Unreal plugin. 2. Create a new Unreal project. 3. Connect to Google Photorealistic 3D Tiles API. 1. Open the Cesium window by selecting **Cesium** \> **Cesium** from the menu. 2. Select **Blank 3D Tiles Tileset**. 3. In the **World Outliner** , open the **Details** panel by selecting this **Cesium3DTileset**. 4. Change the **Source** from **From Cesium Ion** to **From URL**. 5. Set the URL to be the Google 3D Tiles URL. https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY 1. Enable **Show Credits On Screen** to properly display attributions. 4. This loads the world. To move to any LatLng, select the **CesiumGeoreference** item in the **Outliner** panel, and then edit the **Origin Latitude/Longitude/Height** in the **Details** panel. ## Work with Cesium for Unity > [!NOTE] > **Note:** For more information on Cesium for Unity, see the [Cesium for Unity Quickstart](https://cesium.com/learn/unity/unity-quickstart/). To use photorealistic tiles with Cesium for Unity, follow the steps below. 1. Create a new Unity project. 2. Add a new Scoped Registry in the Package Manager section (through **Editor** \> **Project Settings**). - Name: Cesium - URL: https://unity.pkg.cesium.com - Scope(s): com.cesium.unity 3. Install the Cesium for Unity package. 4. Connect to the Google Photorealistic 3D Tiles API. 1. Open the Cesium window by selecting **Cesium** \> **Cesium** from the menu. 2. Click **Blank 3D Tiles Tileset**. 3. On the left-side panel, in the **Tileset Source** option under **Source** , select **From URL** (instead of From Cesium Ion). 4. Set the URL to the Google 3D Tiles URL. https://tile.googleapis.com/v1/3dtiles/root.json?key=YOUR_API_KEY 1. Enable **Show Credits On Screen** to properly display attributions. 5. This loads the world. To move to any LatLng, select the **CesiumGeoreference** item in the **Scene Hierarchy** , and then edit the Origin Latitude/Longitude/Height in the **Inspector**. ## Work with deck.gl > [!NOTE] > **Note:** The minimum version of deck.gl to use with the Map Tiles API is 8.9.13 (and above). [deck.gl](https://deck.gl/), powered by WebGL, is an open source JavaScript framework for high-performance, large-scale data visualizations. ### Attribution Ensure that you properly display data attributions by extracting the `copyright` field from tiles gltf `asset`, and then displaying it on the rendered view. For more information, see [Display data attributions](https://developers.google.com/maps/documentation/tile/create-renderer.md.txt#display-attributions). ### deck.gl renderer examples #### Simple example The following example initializes the deck.gl renderer, and then loads a place in 3D. In your code, be sure to replace YOUR_API_KEY with your actual API key. ```html deck.gl Photorealistic 3D Tiles example

``` #### Visualize 2D layers on top of Google Photorealistic 3D Tiles The deck.gl [TerrainExtension](https://deck.gl/docs/api-reference/extensions/terrain-extension) renders otherwise 2D data onto a 3D surface. For example, you can drape the GeoJSON of a building footprint on top of the Photorealistic 3D Tiles Geometry. In the following example, a layer of buildings is visualized with the polygons adapted to the Photorealistic 3D Tiles surface. ```html Google 3D tiles example

```