Mercator view counting objects

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">
<script src="https://unpkg.com/threebox-plugin/dist/threebox.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/threebox-plugin/dist/threebox.css">
	<div id='map' class='map' />

CSS

body {
			margin: 0;
			padding: 0;
		}

		html, body, #map {
			height: 100%;
		}

JavaScript

mapboxgl.accessToken = '';
		var origin = [-0, 6.5, 10];

		var map = new mapboxgl.Map({
		  container: 'map',
		  style: 'mapbox://styles/mapbox/dark-v10',
		  center: origin,
		  zoom: 0,
		  pitch: 60,
		  bearing: -41,
		  antialias: true,
		  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,
		    enableSelectingObjects: true
		  }
		);

		var active = false
		map.on('style.load', function() {

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

		      // generate 100 points around the world, at random locations but the same altitude
		      let randomPoints = [];

		      for (var i = 0; i < 100; i++) {

		        let point = [
		          360 * (Math.random() - 0.5),
		          160 * (Math.random() - 0.5),
		          2000000
		        ]

		        randomPoints.push(point);
		      }

		      // build a template sphere sized in meters, such that it will appear to scale with its local surroundings
		      let sphereTemplate = tb.sphere({
		        radius: 200000,
		        units: 'meters',
		        sides: 120,
		        color: 'purple',
		        material: 'MeshToonMaterial'

		      })

		      // for best performance, clone the template sphere for each point in randomPoint
		      randomPoints.forEach(function(pt) {

		        let newSphere = sphereTemplate
		          .duplicate()
		          .setCoords(pt);

		        tb.add(newSphere);

		      })
          
          tb.world.children.forEach((o) =>{console.log(o)});


		    },

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

		});