3D objects on MapTiler maps
With the MapTiler SDK 3D JS module, you can add 3D objects to your basemap with plenty of customizations from glTF/glb files! These can be meshes, groups of meshes, point clouds, or a mix of all these.
Get started
-
Since the 3D model is going to be added to a Map, let’s instantiate a map first. Copy the following code, paste it into your favorite text editor, and save it as a
.html
file. -
Replace
YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key. -
Waiting for the map to be ready to add the 3D layer. An instance of
Layer3D
is a custom type of layer that contain a 3D scene, where multiple 3D meshes and lights can be added. Like any other layer in MapTiler SDK/Maplibre GL JS, it must have an ID and then be added to aMap
instance. -
Install the npm package.
-
Include the CSS file.
If you have a bundler that can handle CSS, you can
import
the CSS or include it with a<link>
in the head of the document via the CDN -
Include the following code in your JavaScript file (Example: app.js).
-
Replace
YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key. -
Waiting for the map to be ready to add the 3D layer. An instance of
Layer3D
is a custom type of layer that contain a 3D scene, where multiple 3D meshes and lights can be added. Like any other layer in MapTiler SDK/Maplibre GL JS, it must have an ID and then be added to aMap
instance. -
Once created and added, a mesh can be added. In this version any glTF and their binary counterpart glb files can be added. Add a mesh to the layer. In this example we will use the model The COLLADA duck. One texture. Credit: © 2006, Sony. SCEA Shared Source License, Version 1.0
API Reference
This reference documents every object and method available. Each section describes classes or objects as well as their properties, parameters, methods, and associated events. Many sections also include inline code examples and related resources.
COLLADA duck One texture Credit: © 2006, Sony. SCEA Shared Source License, Version 1.0 ↩