examples/18-extrusions.html

<!doctype html>
<head>
	<title>Threbox extrusions sample</title>
	<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
	<script src="../dist/threebox.js" type="text/javascript"></script>
	<link href="../dist/threebox.css" rel="stylesheet" />
	<script src="https://d3js.org/d3.v6.min.js"></script>
	<script src="config.js"></script>
	<style>
		body, html {
			width: 100%;
			height: 100%;
			margin: 0;
		}

		#map {
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
    <div id="map"></div>
    <script type="module">

        ///// THIS EXTRUSION SAMPLE SHOWS HOW TO CREATE EXTRUSIONS IN TWO WAYS
		///// THE FIRST WAY IS TO CREATE AN ARRAY OF VECTOR2 AND USE tb.extrusion
		///// THE SECOND WAY IS TO READ geoJson FEATURES FROM A FILE 

		if (!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");

		mapboxgl.accessToken = config.accessToken;

		let origin1 = [-74.001058, 40.714914, 0];
		let origin2 = [-74.0001269, 40.7151698, 50]

		let map = new mapboxgl.Map({
			container: 'map',
			style: 'mapbox://styles/mapbox/outdoors-v11',
			center: origin1,
			zoom: 16.9,
			pitch: 60,
			antialias: true,
			heading: 0, hash: true
		});

		// we can add Threebox to mapbox to add built-in mouseover/mouseout and click behaviors
		window.tb = new Threebox(
			map,
			map.getCanvas().getContext('webgl'),
			{
				defaultLights: true,
				enableSelectingFeatures: true, //change this to false to disable fill-extrusion features selection
				enableSelectingObjects: true, //change this to false to disable 3D objects selection
				enableTooltips: true, // change this to false to disable default tooltips on fill-extrusion and 3D models
			}
		);

		let redMaterial = new THREE.MeshPhongMaterial({
			color: 0x660000,
			side: THREE.DoubleSide
		});

		let stats;
		import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
		function animate() {
			requestAnimationFrame(animate);
			stats.update();
		}

		let buildings = [];
		map.on('style.load', function () {
			//// stats
			stats = new Stats();
			map.getContainer().appendChild(stats.dom);
			animate();

			map.addLayer({
				id: 'custom_layer',
				type: 'custom',
				renderingMode: '3d',
				onAdd: function (map, mbxContext) {

					//[jscastro] we add a star based on this example https://threejs.org/examples/?q=extrud#webgl_geometry_extrude_shapes
					const points = [], numPts = 5;
					for (let i = 0; i < numPts * 2; i++) {
						const l = i % 2 == 1 ? 10 : 20;
						const a = i / numPts * Math.PI;
						points.push(new THREE.Vector2(Math.cos(a) * l, Math.sin(a) * l));
					}
					const material1 = new THREE.MeshLambertMaterial({ color: 0xb00000, wireframe: false });
					const material2 = new THREE.MeshLambertMaterial({ color: 0xff8000, wireframe: false });
					let star = tb.extrusion({
						coordinates: points,
						geometryOptions: { depth: 20, steps: 1, bevelEnabled: true, bevelThickness: 2, bevelSize: 4, bevelSegments: 1 },
						anchor: 'center',
						units: 'meters',
						rotation: { x: 90, y: 0, z: 20 },
						materials: [material1, material2]
					});
					star.addTooltip("A animated extruded star over Columbus Park", true);
					star.setCoords(origin2);
					star.set({ rotation: {x: 0, y: 0, z: 720}, duration: 20000 })
					tb.add(star);

					//[jscastro] we read a geoJson that is filled with 3 real features from the composite source
					d3.json('./geojson/extrusion.geojson').then(function (fc) {
						console.log(fc);
						//then we create the extrusions based on the geoJson features
						addBuildings(fc.features);
					})

				},

				render: function (gl, matrix) {
					tb.update();
				}
			});

		});

		function addBuildings(data, info, height = 1) {

			data.forEach((b) => {
				let center = b.properties.center;
				let s = tb.projectedUnitsPerMeter(center[1]);

				let extrusion = tb.extrusion({
					coordinates: b.geometry.coordinates,
					geometryOptions: { curveSegments: 1, bevelEnabled: false, depth: b.layer.paint["fill-extrusion-height"] * s },
					materials: redMaterial
				});
				extrusion.addTooltip(b.properties.tooltip, true);
				extrusion.setCoords([center[0], center[1], 0]);
				tb.add(extrusion);

			});
		}

    </script>
</body>