---
title: "Display a building model based on point cloud data on a map. | 3D JS | JavaScript maps SDK"
description: "Display wireframe 3D building models from point cloud data."
---
> 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 a building model based on point cloud data on a map.
Use the [MapTiler 3D JS module](https://docs.maptiler.com/sdk-js/modules/3d/) to display the wireframe of a building 3D model based on point cloud data on a map. Thanks to the 3D JS module we can view the model wireframe or the solid model.
This demonstration show a compact control interface that allows to modify diferent model parameters and observe their immediate impact on the model’s behavior.
[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 map = new Map({
container: document.getElementById('map'),
style: MapStyle.DATAVIZ.DARK,
zoom: 18,
center: [139.401378125492, 35.567323827763786],
pitch: 60,
maxPitch: 85,
terrainControl: 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", {antiaslias: true});
map.addLayer(layer3D);
// Increasing the intensity of the ambient light
layer3D.setAmbientLight({intensity: 2});
// Adding a point light
layer3D.addPointLight("point-light-1", {intensity: 30, lngLat: [40, 0], color: 0xdbf8ff, altitude: 1_000_000});
layer3D.addPointLight("point-light-2", {intensity: 30, lngLat: [-120, 80], color: 0xfff7db});
const gui = new GUI({ width: 200 });
const guiObj = {
heading: 320.5,
scale: 1,
altitude: 0.16,
altitudeReference: "GROUND",
opacity: 1,
wireframe: true,
fov: map.transform.fov,
}
const meshId = "some-mesh";
const mesh = await layer3D.addMeshFromURL(
meshId,
"https://docs-media.maptiler.com/docs/models/building_f_agu_sagamihara_campus_lod2-3.glb",
{
lngLat: [139.401378125492, 35.567323827763786],
heading: guiObj.heading,
scale: guiObj.scale,
visible: true,
altitude: guiObj.altitude,
altitudeReference: AltitudeReference.GROUND,
wireframe: guiObj.wireframe,
}
);
gui.add( guiObj, 'heading', 0, 360, 0.1 )
.onChange((heading) => {
mesh.modify({heading});
});
gui.add( guiObj, 'scale', 0.01, 5, 0.01 )
.onChange((scale) => {
mesh.modify({scale});
});
gui.add( guiObj, 'altitude', -100, 100, 0.01 )
.onChange((altitude) => {
mesh.modify({altitude});
});
gui.add( guiObj, 'opacity', 0, 1)
.onChange((opacity) => {
mesh.modify({opacity});
});
gui.add( guiObj, 'altitudeReference', ["GROUND", "MEAN_SEA_LEVEL"])
.onChange((altRef) => {
mesh.modify({altitudeReference: maptiler3d.AltitudeReference[altRef]});
});
gui.add( guiObj, 'wireframe')
.onChange((wireframe) => {
mesh.modify({wireframe});
});
gui.add( guiObj, 'fov', 0, 60)
.onChange((fov) => {
map.transform.fov = fov;
map.triggerRepaint();
});
})()
```
#### index.html
```html
Display a building model based on point cloud data on a map. | 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
```
[Building F, AGU Sagamihara Campus (LOD2-3)](https://skfb.ly/oCRuD) by ibukilego is licensed under [Creative Commons Attribution](https://creativecommons.org/licenses/by/4.0/) [↩](#fnref:1)
## Related examples
### [Display a point cloud 3D building model](https://docs.maptiler.com/sdk-js/examples/3d-js-point-cloud-nmh/)
Examples
Display point cloud 3D building models on interactive maps.
### [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.