---
title: "Animate a 3D plane flight | 3D JS | JavaScript maps SDK"
description: "Simulate and animate a 3D plane flight between cities."
---
> 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.
# Animate a 3D plane flight
Use the [MapTiler 3D JS module](https://docs.maptiler.com/sdk-js/modules/3d/) to simulate and animate a plane flight between two cities. Thanks to the 3D JS module we can track the flight position of a airplane.
This demonstration showcases a compact control interface that allows us to animate the plane flight and track the position.
[Model credit](#fn:1)
### NPM module setup
```bash
npm install --save @maptiler/sdk @maptiler/3d lil-gui
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { Layer3D, AltitudeReference } from '@maptiler/3d';
import { GUI } from 'lil-gui';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
//const newYorkCity = [-73.98918779556983, 40.74072950731568];
//const capeTown = [18.428021658130994, -33.913973526198134];
//const melbourne = [144.84097472271193, -37.94589718135184];
const paris = [2.3120283730734648, 48.8556923989924];
const ankara = [32.866609260522345, 39.959329480757354];
const map = new Map({
container: document.getElementById('map'),
style: MapStyle.STREETS.DARK,
zoom: 9,
center: paris,
maxPitch: 85,
terrainControl: true,
terrain: true,
maptilerLogo: true,
});
(async () => {
await map.onReadyAsync();
map.setSky({
"sky-color": "#0C2E4B",
"horizon-color": "#09112F",
"fog-color": "#09112F",
"fog-ground-blend": 0.5,
"horizon-fog-blend": 0.1,
"sky-horizon-blend": 1.0,
"atmosphere-blend": 0.5,
})
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});
// Adding a mesh of a plane.
const originalPlaneID = "plane";
const mesh = await layer3D.addMeshFromURL(
originalPlaneID,
"https://docs-media.maptiler.com/docs/models/plane_a340.glb",
{
lngLat: paris,
heading: 12,
scale: 5,
altitude: 5000,
altitudeReference: AltitudeReference.MEAN_SEA_LEVEL,
}
);
const guiObj = {
play: false,
trackFlight: true,
speed: 0.0001,
}
const gui = new GUI({ width: 200 });
gui.add( guiObj, 'trackFlight')
gui.add( guiObj, 'play')
.onChange((play) => {
if (play) {
playAnimation();
}
});
gui.add( guiObj, 'speed', 0, 0.001);
let progress = 0;
function playAnimation() {
progress += guiObj.speed;
if (progress > 1) {
progress = 0;
}
const position = maptilersdk.math.haversineIntermediateWgs84(paris, ankara, progress);
mesh.modify({lngLat: position});
if (guiObj.trackFlight) {
map.setCenter(position);
// map.setBearing(360 * progress * 2);
}
if (guiObj.play) {
requestAnimationFrame(playAnimation);
}
}
})()
```
#### index.html
```html
Animate a 3D plane flight | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
.lil-gui.autoPlace {
right: inherit;
left: 15px;
}
```
### Basic JavaScript setup
```html
Add a 3D model
```
[plane a340](https://skfb.ly/oJWGw) by mamont nikita is licensed under [Creative Commons Attribution](https://creativecommons.org/licenses/by/4.0/) [↩](#fnref:1)
## Related examples
### [Add a 3D model with babylon.js](https://docs.maptiler.com/sdk-js/examples/add-3d-model-babylon/)
Examples
Add 3D models using custom layers and babylon.js.
### [Start with AR maps](https://docs.maptiler.com/sdk-js/examples/ar-control/)
Examples
Add an AR control button to map 3D viewports.
### [Add a plane 3D model](https://docs.maptiler.com/sdk-js/examples/3d-js-plane/)
Examples
Add and position flying 3D airplane models on maps.
### [3D terrain map](https://docs.maptiler.com/sdk-js/examples/3d-map/)
Tutorials
Create and display 3D terrain maps on web pages.