---
title: "3D model set the pitch or tilt | 3D JS | JavaScript maps SDK"
description: "Rotate 3D models by setting the pitch tilt property."
---
> 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 model set the pitch or tilt
Use the [MapTiler 3D JS module](https://docs.maptiler.com/sdk-js/modules/3d/) to rotate a 3D model, setting the pitch property. Set the model’s tilt (pitch) in degrees, either positive or negative. Thanks to the 3D JS module we can add 3D models to the map and configure it as we want, rotating it, animating it, scaling it, etc.
[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, AltitudeReference } from '@maptiler/3d';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const center = [2.3492790851936776, 48.85417501375531];
const map = new Map({
container: document.getElementById('map'),
hash: true,
style: MapStyle.DATAVIZ.LIGHT,
zoom: 11,
center: [2.4444, 48.8785],
pitch: 65,
bearing: 44,
maxPitch: 85,
terrainControl: true,
terrain: true,
maptilerLogo: true,
});
(async () => {
await map.onReadyAsync();
const layer3D = new Layer3D("custom-3D-layer");
map.addLayer(layer3D);
const LNGLAT_OFFSET = 0.25;
const PLANE_BASE_ALT = 2200;
// Adding a point light
layer3D.addPointLight("point-light", {
intensity: 20,
color: "#ffffff",
lngLat: center.map(num => num + 0.0001),
altitude: 2000,
altitudeReference: AltitudeReference.GROUND,
});
// Adding a mesh of a plane.
const originalPlaneID = "biplaneOne";
const biplaneOne = await layer3D.addMeshFromURL(
originalPlaneID,
"https://docs-media.maptiler.com/docs/models/low_poly_biplane.glb",
{
lngLat: center,
heading: 0,
scale: 300,
altitude: PLANE_BASE_ALT,
altitudeReference: AltitudeReference.GROUND,
transform: {
rotation: {
y: Math.PI / 2,
},
}
}
);
layer3D.cloneMesh("biplaneOne", "biplaneTwo");
layer3D.cloneMesh("biplaneOne", "biplaneThree");
layer3D.cloneMesh("biplaneOne", "biplaneFour");
layer3D.cloneMesh("biplaneOne", "biplaneFive");
const biplaneTwo = layer3D.getItem3D("biplaneTwo");
biplaneTwo.setLngLat([center[0]+0.05, center[1]]);
biplaneTwo.setPitch(45);
const biplaneThree = layer3D.getItem3D("biplaneThree");
biplaneThree.setLngLat([center[0]+(0.05*2), center[1]]);
biplaneThree.setPitch(120);
const biplaneFour = layer3D.getItem3D("biplaneFour");
biplaneFour.setLngLat([center[0]+(0.05*3), center[1]]);
biplaneFour.setPitch(-45);
const biplaneFive = layer3D.getItem3D("biplaneFive");
biplaneFive.setLngLat([center[0]+(0.05*4), center[1]]);
biplaneFive.setPitch(-90);
})()
```
#### index.html
```html
3D model set the pitch or tilt | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Add a 3D model
```
[Low-Poly Biplane](https://skfb.ly/oG9qS) by ElectrikGoat0395 is licensed under [Creative Commons Attribution](https://creativecommons.org/licenses/by/4.0/) [↩](#fnref:1)
## Related examples
### [Animate a 3D model](https://docs.maptiler.com/sdk-js/examples/3d-js-animated/)
Examples
Animate 3D models and display them on a map.
### [3D model pitch and roll](https://docs.maptiler.com/sdk-js/examples/3d-js-roll-pitch/)
Examples
Rotate 3D models using pitch and roll properties.
### [Start with AR maps](https://docs.maptiler.com/sdk-js/examples/ar-control/)
Examples
Add an AR control button to map 3D viewports.
### [3D terrain map](https://docs.maptiler.com/sdk-js/examples/3d-map/)
Tutorials
Create and display 3D terrain maps on web pages.