> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)
# Add a 3D model with three.js
Use a [custom style layer](https://docs.mapbox.com/mapbox-gl-js/api/properties/#customlayerinterface) with [three.js](https://threejs.org) to add a 3D model to the map.
An alternative example using [threebox](https://github.com/jscastro76/threebox) to abstract three.js is available at [Add a 3D model with threebox](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model-threebox/).
> Example code:
**JavaScript**
```html
Add a 3D model with three.js
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const MapboxExample = () => {
const mapContainerRef = useRef(null);
const mapRef = useRef(null);
useEffect(() => {
const map = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/standard',
config: {
basemap: {
theme: 'monochrome'
}
},
zoom: 18,
center: [148.9819, -35.3981],
pitch: 60,
antialias: true
});
const modelOrigin = [148.9819, -35.39847];
const modelAltitude = 0;
const modelRotate = [Math.PI / 2, 0, 0];
const modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
modelOrigin,
modelAltitude
);
const modelTransform = {
translateX: modelAsMercatorCoordinate.x,
translateY: modelAsMercatorCoordinate.y,
translateZ: modelAsMercatorCoordinate.z,
rotateX: modelRotate[0],
rotateY: modelRotate[1],
rotateZ: modelRotate[2],
scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
};
const createCustomLayer = (map) => {
const camera = new THREE.Camera();
const scene = new THREE.Scene();
const directionalLight1 = new THREE.DirectionalLight(0xffffff);
directionalLight1.position.set(0, -70, 100).normalize();
scene.add(directionalLight1);
const directionalLight2 = new THREE.DirectionalLight(0xffffff);
directionalLight2.position.set(0, 70, 100).normalize();
scene.add(directionalLight2);
const loader = new GLTFLoader();
loader.load(
'https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf',
(gltf) => {
scene.add(gltf.scene);
}
);
const renderer = new THREE.WebGLRenderer({
canvas: map.getCanvas(),
context: map.painter.context.gl,
antialias: true
});
renderer.autoClear = false;
return {
id: '3d-model',
type: 'custom',
renderingMode: '3d',
onAdd: () => {
// Add logic that runs on layer addition if necessary.
},
render: (gl, matrix) => {
const rotationX = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(1, 0, 0),
modelTransform.rotateX
);
const rotationY = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(0, 1, 0),
modelTransform.rotateY
);
const rotationZ = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(0, 0, 1),
modelTransform.rotateZ
);
const m = new THREE.Matrix4().fromArray(matrix);
const l = new THREE.Matrix4()
.makeTranslation(
modelTransform.translateX,
modelTransform.translateY,
modelTransform.translateZ
)
.scale(
new THREE.Vector3(
modelTransform.scale,
-modelTransform.scale,
modelTransform.scale
)
)
.multiply(rotationX)
.multiply(rotationY)
.multiply(rotationZ);
camera.projectionMatrix = m.multiply(l);
renderer.resetState();
renderer.render(scene, camera);
map.triggerRepaint();
}
};
};
map.on('style.load', () => {
const customLayer = createCustomLayer(map);
map.addLayer(customLayer);
});
mapRef.current = map;
return () => map.remove();
}, []);
return (
);
};
export default MapboxExample;
```