examples/04-mercator.html

<!doctype html>
<head>
    <title>Mercator projection</title>
    <script src="../dist/threebox.js" type="text/javascript"></script>
    <link href="../dist/threebox.css" rel="stylesheet" />
    <script src="config.js"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
    <style>
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id='map' class='map'></div>

    <script type="module">

        // this example demonstrates the use of duplicate(), to replicate a sphere many times with minimal performance implications. Also shows the distortion effects of mercator: despite their appearance, all spheres have a radius of 500km, at an altitude of 2000km.

        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;

        var origin = [-0, 6.5, 10];

        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/dark-v9', //'/Styles/empty-v9.json', //
            center: origin,
            zoom: 0,
            pitch: 47,
            heading: 56,
            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
            }
        );

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

        var active = false
        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) {

                    // 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);

					})


                },

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

        });

    </script>
</body>
</html>