Add a 3D model with threebox
This example uses a custom style layer with the threebox plugin to add a 3D model to the map. Threebox abstracts the 3D rendering library three.js, and keeps its scene camera in sync with the Mapbox GL JS camera.
An alternative example that uses three.js directly to display a 3D model is available at Add a 3D model.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add a 3D model with threebox</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/gh/jscastro76/threebox@v.2.2.2/dist/threebox.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/gh/jscastro76/threebox@v.2.2.2/dist/threebox.css" rel="stylesheet">
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/light-v11',
center: { lng: -73.97627, lat: 40.75155 },
zoom: 15.4,
pitch: 64.9,
bearing: 172.5,
antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
});
// eslint-disable-next-line no-undef
const tb = (window.tb = new Threebox(
map,
map.getCanvas().getContext('webgl'),
{
defaultLights: true
}
));
map.on('style.load', () => {
map.addLayer({
id: 'custom-threebox-model',
type: 'custom',
renderingMode: '3d',
onAdd: function () {
// Creative Commons License attribution: Metlife Building model by https://sketchfab.com/NanoRay
// https://sketchfab.com/3d-models/metlife-building-32d3a4a1810a4d64abb9547bb661f7f3
const scale = 3.2;
const options = {
obj: 'https://docs.mapbox.com/mapbox-gl-js/assets/metlife-building.gltf',
type: 'gltf',
scale: { x: scale, y: scale, z: 2.7 },
units: 'meters',
rotation: { x: 90, y: -90, z: 0 }
};
tb.loadObj(options, (model) => {
model.setCoords([-73.976799, 40.754145]);
model.setRotation({ x: 0, y: 0, z: 241 });
tb.add(model);
});
},
render: function () {
tb.update();
}
});
});
</script>
</body>
</html>
import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import { Threebox } from 'threebox-plugin';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
mapRef.current = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v11',
center: [-73.97627, 40.75155],
zoom: 15.4,
pitch: 64.9,
bearing: 172.5,
antialias: true
});
mapRef.current.on('style.load', () => {
mapRef.current.addLayer({
id: 'custom-threebox-model',
type: 'custom',
renderingMode: '3d',
onAdd: function () {
window.tb = new Threebox(
mapRef.current,
mapRef.current.getCanvas().getContext('webgl'),
{ defaultLights: true }
);
const scale = 3.2;
const options = {
obj: 'https://docs.mapbox.com/mapbox-gl-js/assets/metlife-building.gltf',
type: 'gltf',
scale: { x: scale, y: scale, z: 2.7 },
units: 'meters',
rotation: { x: 90, y: -90, z: 0 }
};
window.tb.loadObj(options, (model) => {
model.setCoords([-73.976799, 40.754145]);
model.setRotation({ x: 0, y: 0, z: 241 });
window.tb.add(model);
});
},
render: function () {
window.tb.update();
}
});
});
}, []);
return <div id="map" ref={mapContainerRef} style={{ height: '100%' }}></div>;
};
export default MapboxExample;
このexampleは役に立ちましたか?