---
title: "Display an animated 3D model | 3D JS | JavaScript maps SDK"
description: "Animate 3D models and display them on a map."
---
> 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.
# Display an animated 3D model
With animation, your 3D models take on a whole new dimension. You can bring them to life and display them on a map. If your 3D model has animations you can play these animations with the 3D JS module of the MapTiler SDK.
This demonstration showcases how to add a animated 3D model in a map.
[Model credit](#fn:1)
### NPM module setup
```bash
npm install --save @maptiler/sdk @maptiler/3d
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { Layer3D } from '@maptiler/3d';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: document.getElementById('map'),
style: MapStyle.STREETS,
center: [-3.0615632, 56.4547039], // starting position [lng, lat]
zoom: 13, // starting zoom
bearing: 90.1,
pitch: 60,
attributionControl: {
customAttribution: "Model by Mirada for 3 Dreams of Black",
}
});
// Waiting for the map to be ready
map.on('ready', async () => {
// Create a Layer3D and add it
const layer3D = new Layer3D("custom-3D-layer");
map.addLayer(layer3D);
// Increasing the intensity of the ambient light
layer3D.setAmbientLight({ intensity: 2 });
// Adding a point light
layer3D.addPointLight("point-light", { intensity: 30 });
// The call can be awaited for the whole download of the mesh to complete
await layer3D.addMeshFromURL(
// ID to give to this mesh, unique within this Layer3D instance
"flamingo",
// The URL of the mesh
"https://docs-media.maptiler.com/docs/models/flamingo.glb",
// A set of options, these can be modified later
{
lngLat: [-3.0615632, 56.4547039],
heading: 150,
scale: 10,
animationMode: "continuous",
}
);
const mesh = layer3D.getItem3D("flamingo");
const animationNames = mesh?.getAnimationNames();
const animationName = animationNames?.[0];
if (!animationName) {
throw new Error(`No animation found with name '${animationName}'`);
}
mesh?.playAnimation(
animationName,
"loop",
);
});
```
#### index.html
```html
Display an animated 3D model | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Add an animated 3D model
```
Model by [Mirada](https://mirada.com/) for [3 Dreams of Black](https://experiments.withgoogle.com/3-dreams-of-black) [↩](#fnref:1)
## Related examples
### [Play GLTF animations](https://docs.maptiler.com/sdk-js/examples/3d-js-animated-flight/)
Examples
Play animations in GLTF models simulating a plane flight.
### [3D model events](https://docs.maptiler.com/sdk-js/examples/3d-js-events/)
Examples
Listen for mouse events on 3D models in maps.
### [Animate a 3D plane flight](https://docs.maptiler.com/sdk-js/examples/3d-js-flight/)
Examples
Simulate and animate a 3D plane flight between cities.
### [Add multiple 3D models](https://docs.maptiler.com/sdk-js/examples/3d-js-multi/)
Examples
Incorporate multiple 3D models with adjustable parameters on maps.