--- title: "3D objects on MapTiler maps | 3D JS | JavaScript maps SDK" description: "Add 3D objects to your basemap from glTF files." --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # 3D objects on MapTiler maps ![NpmLogo](https://docs.maptiler.com/assets/img/npm.svg) [Get it from npm registry](https://www.npmjs.com/package/@maptiler/3d) ![GitHubLogo](https://docs.maptiler.com/assets/img/github.svg) [View source code on GitHub](https://github.com/maptiler/maptiler-3d-js/) With the [MapTiler SDK](https://docs.maptiler.com/sdk-js/) 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. [Model credit](#fn:1) ## Get started Check out the [Add a 3D model on a map example](https://docs.maptiler.com/sdk-js/examples/3d-js-get-started/). ## API reference The [reference](https://docs.maptiler.com/sdk-js/modules/3d/api/) 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. The **main class** in the MapTiler 3D JS module is the [**Layer3D class**](https://docs.maptiler.com/sdk-js/modules/3d/api/classes/Layer3D/) [COLLADA duck](https://github.com/KhronosGroup/glTF-Sample-Assets/tree/main) One texture Credit: © 2006, Sony. [SCEA Shared Source License, Version 1.0](https://spdx.org/licenses/SCEA.html) [↩](#fnref:1) ## Related examples [![3D model set the pitch and roll](https://docs.maptiler.com/assets/img/example-card.png) ### 3D model pitch and roll Example Rotate 3D models using pitch and roll properties.](https://docs.maptiler.com/sdk-js/examples/3d-js-roll-pitch/) [![3D model set the pitch or tilt](https://docs.maptiler.com/assets/img/example-card.png) ### 3D model pitch Example Rotate 3D models by setting the pitch tilt property.](https://docs.maptiler.com/sdk-js/examples/3d-js-pitch/) [![3D model set the position relative to another 3D model](https://docs.maptiler.com/assets/img/example-card.png) ### 3D model position relative Example Position 3D models relative to other models or coordinates.](https://docs.maptiler.com/sdk-js/examples/3d-js-position-relative/) [![3D model set the roll](https://docs.maptiler.com/assets/img/example-card.png) ### 3D model roll Example Rotate 3D models by setting the roll property.](https://docs.maptiler.com/sdk-js/examples/3d-js-roll/) [![3D models intersections](https://docs.maptiler.com/assets/img/example-card.png) ### 3D models intersections Example Detect intersections between 3D models using MapTiler JS module.](https://docs.maptiler.com/sdk-js/examples/3d-js-intersections/) [![Add a 3D model on a map](https://docs.maptiler.com/assets/img/example-card.png) ### Add a 3D model on a map Example Add 3D glTF models to maps using MapTiler SDK.](https://docs.maptiler.com/sdk-js/examples/3d-js-get-started/) [![Add a 3D model to globe using MapTiler 3D JS](https://docs.maptiler.com/assets/img/example-card.png) ### Add a 3D model to globe using MapTiler 3D JS Example Integrate 3D models into your interactive globe map surface.](https://docs.maptiler.com/sdk-js/examples/globe-3d-model/) [![Add a airplane 3D model](https://docs.maptiler.com/assets/img/example-card.png) ### Add a plane 3D model Example Add and position flying 3D airplane models on maps.](https://docs.maptiler.com/sdk-js/examples/3d-js-plane/) [![Add events on 3D models](https://docs.maptiler.com/assets/img/example-card.png) ### 3D model events Example Listen for mouse events on 3D models in maps.](https://docs.maptiler.com/sdk-js/examples/3d-js-events/) [![Add multiple 3D models to the map](https://docs.maptiler.com/assets/img/example-card.png) ### Add multiple 3D models Example Incorporate multiple 3D models with adjustable parameters on maps.](https://docs.maptiler.com/sdk-js/examples/3d-js-multi/) [![Animate a 3D plane flight](https://docs.maptiler.com/assets/img/example-card.png) ### Animate a 3D plane flight Example Simulate and animate a 3D plane flight between cities.](https://docs.maptiler.com/sdk-js/examples/3d-js-flight/) [![Animate a 3D plane flight in a globe using MapTiler 3D JS](https://docs.maptiler.com/assets/img/example-card.png) ### Animate a 3D plane flight in a globe Example Animate airplane flight paths using 3D models on globe.](https://docs.maptiler.com/sdk-js/examples/globe-3d-model-animated/) [![Animate routes with a dynamic camera](https://docs.maptiler.com/assets/img/example-card.png) ### Animate routes dynamic camera Example Animate multidimensional routes with a dynamic camera that follows the journey in real-time.](https://docs.maptiler.com/sdk-js/examples/3d-js-cinematic-path/) [![Animation with 3D Module](https://docs.maptiler.com/assets/img/example-card.png) ### Animation with 3D Module Example Animates a 3D model (UFO) around the Burj Khalifa using MaptilerAnimation and the 3D module.](https://docs.maptiler.com/sdk-js/examples/maptiler-animation/) [![Display a 3D building model generated with photogrammetry software](https://docs.maptiler.com/assets/img/example-card.png) ### Display a 3D photogrammetry building model Example Show 3D photogrammetry building models using MapTiler 3D module.](https://docs.maptiler.com/sdk-js/examples/3d-js-point-cloud-dundee/) [![Display a LIDAR data 3D city model](https://docs.maptiler.com/assets/img/example-card.png) ### Display a LIDAR data 3D city model Example Render LIDAR-based 3D city models on interactive maps.](https://docs.maptiler.com/sdk-js/examples/3d-js-point-cloud-lidar/) [![Display a building model based on point cloud data on a map.](https://docs.maptiler.com/assets/img/example-card.png) ### Display a building model Example Display wireframe 3D building models from point cloud data.](https://docs.maptiler.com/sdk-js/examples/3d-js-point-cad/) [![Display a point cloud 3D building model on a map.](https://docs.maptiler.com/assets/img/example-card.png) ### Display a point cloud 3D building model Example Display point cloud 3D building models on interactive maps.](https://docs.maptiler.com/sdk-js/examples/3d-js-point-cloud-nmh/) [![Display an animated 3D model](https://docs.maptiler.com/assets/img/example-card.png) ### Animate a 3D model Example Animate 3D models and display them on a map.](https://docs.maptiler.com/sdk-js/examples/3d-js-animated/) [![Import and play GLTF animations from GLTF files](https://docs.maptiler.com/assets/img/example-card.png) ### Play GLTF animations Example Play animations in GLTF models simulating a plane flight.](https://docs.maptiler.com/sdk-js/examples/3d-js-animated-flight/) [![Interactive 3D urban explorer with animated building components](https://docs.maptiler.com/assets/img/example-card.png) ### Interactive 3D building components Example Explore a dynamic 3D urban environment where buildings come to life](https://docs.maptiler.com/sdk-js/examples/3d-js-model-interaction/)