Threebox example

by jscastro76

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css">
<link rel="stylesheet" href="https://unpkg.com/threebox-plugin/examples/css/threebox.css">
<script src="https://unpkg.com/[email protected]/dist/threebox.js"></script>
<div id='map' class='map'></div>

CSS

body, html {
			width: 100%;
			height: 100%;
			margin: 0;
		}

		#map {
			width: 100%;
			height: 100%;
		}

JavaScript

mapboxgl.accessToken = "PASTE YOUR TOKEN HERE";

		//starting location for both map and eventual sphere
		var origin = [-122.4340, 37.7353, 1];

		var map = new mapboxgl.Map({
		  container: 'map',
		  style: 'mapbox://styles/mapbox/light-v9',
		  center: origin,
		  zoom: 17,
		  pitch: 60,
		  antialias: true
		});


		map.on('style.load', function() {

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

		      // instantiate threebox
		      window.tb = new Threebox(
		        map,
		        mbxContext, {
		          defaultLights: true,
		          enableSelectingObjects: true
		        }
		      );

		      //instantiate a red sphere and position it at the origin lnglat
		      var sphere = tb.sphere({
		          color: 'red',
		          material: 'MeshToonMaterial'
		        })
		        .setCoords(origin);
		      // add sphere to the scene
		      sphere.addEventListener('ObjectMouseOver', onObjectMouseOver, false);
		      sphere.addEventListener('ObjectMouseOut', onObjectMouseOut, false);
		      tb.add(sphere);

		    },

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


		//actions to execute onObjectMouseOver
		function onObjectMouseOver(e) {
		  console.log("ObjectMouseOver: " + e.detail.name);
		}

		//actions to execute onObjectMouseOut
		function onObjectMouseOut(e) {
		  console.log("ObjectMouseOut: " + e.detail.name);
		}