Add multiple 3D models to the map

Use the MapTiler 3D JS module to incorporate multiple 3D models into your map. The 3D JS module enables you to integrate multiple 3D objects onto the map surface. You can adjust model sizes, create duplicates, position models at specific elevations above sea level, and more. This offers complete flexibility in manipulating your 3D models.

This demonstration showcases a compact control interface that allows us to select diferents models and modify various model parameters and observe their immediate impact on the model’s behavior.

The models used in this example are:

• plane a340 by mamont nikita is licensed under Creative Commons Attribution
• The COLLADA duck. One texture Credit: © 2006, Sony. SCEA Shared Source License, Version 1.0
• Old wooden street light © 2018, Frank Galligan. CC0 1.0 Universal
• Stanford Dragon PBR by hackmans is licensed under Creative Commons Attribution

^{To add a model to the map, select a model from the list in the control panel and then click on the map.}

Related examples

Add a plane 3D model

Example

Use the MapTiler 3D JS module to add a airplane model to the map.

Display a LIDAR data 3D city model

Example

Use the MapTiler 3D JS module to display a LIDAR data 3D city model on a map.

3D terrain map

Example

This tutorial demonstrates how to create a 3D terrain map and display it on a web page using MapTiler Cloud.

Start with AR maps

Example

Getting started with AR maps: The Augmented reality (AR) control adds a button on your map to create a 3D model of the viewport, including 3D terrain and any layer you have put on top. Compatible with WebXR or Apple Quick Look.