Mapbox GL basic template

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.1/mapbox-gl.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.js"></script>
<div id='map'>
</div>
<!-- vertex shader -->
<script id="vertInstanced" type="x-shader/x-vertex">
attribute vec3 cubePos;

#ifdef PICKING
	attribute vec3 pickingColor;
#else
	attribute vec3 color;
#endif

varying vec3 vColor;

void main() {
		#ifdef PICKING
			vColor = pickingColor;
		#else
			vColor = color;
		#endif
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position + cubePos, 1.0 );
}
</script>
<!-- fragment shader -->
<script id="fragInstanced" type="x-shader/x-fragment">
varying vec3 vColor;
void main() {
		gl_FragColor = vec4( vColor, 1.0 );
}
</script>

CSS

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiY2hya2kiLCJhIjoid0ZoNy1SZyJ9.X5fpB3ORT1-BSWItzx3Xbw';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
    center: [-97, 39], // starting position
    zoom: 3 // starting zoom
});

function transformCoords(coords) {
  const MERCATOR_A = 6378137.0;
  const PROJECTION_WORLD_SIZE = 512 / (2 * (MERCATOR_A * Math.PI));

  const projected = [
    -MERCATOR_A * coords[0] * (Math.PI / 180) * PROJECTION_WORLD_SIZE,
    -MERCATOR_A * Math.log(Math.tan((Math.PI * 0.25) + (0.5 * coords[1] * (Math.PI / 180)))) * PROJECTION_WORLD_SIZE
  ];

  return new THREE.Vector3(projected[0], projected[1], 0);
}

var camera, scene, renderer;
var mouse = new THREE.Vector2();
var pixelBuffer = new Uint8Array(4);

renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setSize( map.transform.width, map.transform.height );
map._container.appendChild( renderer.domElement );
renderer.domElement.style["position"] = "relative";
renderer.domElement.style["pointer-events"] = "none";
renderer.domElement.addEventListener('mousemove', onMouseMove);

function onMouseMove(e) {
console.log(e);
    mouse.x = e.clientX;
    mouse.y = e.clientY;
}

scene = new THREE.Scene();

var pickingScene = new THREE.Scene();
console.log(map.transform.width, map.transform.height);
console.log(window.innerWidth, window.innerHeight);
var pickingTexture = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);

camera = new THREE.PerspectiveCamera(28, window.innerWidth / window.innerHeight, 0.000001, 5000000000);
camera.matrixAutoUpdate = false;   // We're in charge of the camera now!

var world = new THREE.Group();
world.matrixAutoUpdate = false;
scene.add( world );

var nodes = [
  [-122.3, 47.45],
  [-84.43, 33.65],
  [-80.28, 25.8],
  [-95.3, 29.65],
  [-94.73, 39.29]
];

offsets = [];
colors = [];
pickingColors = [];
var color = new THREE.Color();
for ( var i =...