---
title: "MapTiler 3D objects examples | 3D JS | JavaScript maps SDK"
description: "Explore 3D web mapping examples with MapTiler SDK."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs-qmgv.pages.dev/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# MapTiler 3D objects examples

 [![Import and play GLTF animations from GLTF files](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Play GLTF animations

Examples Sdk-js

Play animations in GLTF models simulating a plane flight.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-animated-flight/)

 [![Display a building model based on point cloud data on a map.](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Display a building model

Examples Sdk-js

Display wireframe 3D building models from point cloud data.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-point-cad/)

 [![Display a point cloud 3D building model on a map.](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Display a point cloud 3D building model

Examples Sdk-js

Display point cloud 3D building models on interactive maps.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-point-cloud-nmh/)

 [![Display a 3D building model generated with photogrammetry software](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Display a 3D photogrammetry building model

Examples Sdk-js

Show 3D photogrammetry building models using MapTiler 3D module.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-point-cloud-dundee/)

 [![3D models intersections](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## 3D models intersections

Examples Sdk-js

Detect intersections between 3D models using MapTiler JS module.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-intersections/)

 [![3D model set the pitch or tilt](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## 3D model pitch

Examples Sdk-js

Rotate 3D models by setting the pitch tilt property.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-pitch/)

 [![Add a 3D model on a map](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Add a 3D model on a map

Examples Sdk-js

Add 3D glTF models to maps using MapTiler SDK.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-get-started/)

 [![Display a LIDAR data 3D city model](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Display a LIDAR data 3D city model

Examples Sdk-js

Render LIDAR-based 3D city models on interactive maps.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-point-cloud-lidar/)

 [![Interactive 3D urban explorer with animated building components](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Interactive 3D building components

Examples Sdk-js

Explore a dynamic 3D urban environment where buildings come to life](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-model-interaction/)

 [![3D model set the pitch and roll](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## 3D model pitch and roll

Examples Sdk-js

Rotate 3D models using pitch and roll properties.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-roll-pitch/)

 [![Display an animated 3D model](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Animate a 3D model

Examples Sdk-js

Animate 3D models and display them on a map.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-animated/)

 [![Add multiple 3D models to the map](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Add multiple 3D models

Examples Sdk-js

Incorporate multiple 3D models with adjustable parameters on maps.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-multi/)

 [![3D model set the roll](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## 3D model roll

Examples Sdk-js

Rotate 3D models by setting the roll property.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-roll/)

 [![Add events on 3D models](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## 3D model events

Examples Sdk-js

Listen for mouse events on 3D models in maps.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-events/)

 [![Add a 3D model to globe using MapTiler 3D JS](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Add a 3D model to globe using MapTiler 3D JS

Examples Sdk-js

Integrate 3D models into your interactive globe map surface.](https://docs-qmgv.pages.dev/sdk-js/examples/globe-3d-model/)

 [![Animate a 3D plane flight in a globe using MapTiler 3D JS](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Animate a 3D plane flight in a globe

Examples Sdk-js

Animate airplane flight paths using 3D models on globe.](https://docs-qmgv.pages.dev/sdk-js/examples/globe-3d-model-animated/)

 [![3D model set the position relative to another 3D model](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## 3D model position relative

Examples Sdk-js

Position 3D models relative to other models or coordinates.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-position-relative/)

 [![Add a airplane 3D model](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Add a plane 3D model

Examples Sdk-js

Add and position flying 3D airplane models on maps.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-plane/)

 [![Animation with 3D Module](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Animation with 3D Module

Examples Sdk-js

Animates a 3D model (UFO) around the Burj Khalifa using MaptilerAnimation and the 3D module.](https://docs-qmgv.pages.dev/sdk-js/examples/maptiler-animation/)

 [![Animate a 3D plane flight](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Animate a 3D plane flight

Examples Sdk-js

Simulate and animate a 3D plane flight between cities.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-flight/)

 [![Animate routes with a dynamic camera](https://docs-qmgv.pages.dev/assets/img/example-card.webp)

![SDK JS](https://docs-qmgv.pages.dev/assets/img/logos/sdk-js.svg)

## Animate routes dynamic camera

Examples Sdk-js

Animate multidimensional routes with a dynamic camera that follows the journey in real-time.](https://docs-qmgv.pages.dev/sdk-js/examples/3d-js-cinematic-path/)

Reset filter Founds X results.