mapbox gl加载400万点动画旋转

前置条件

mapbox-gl.js
mapbox-gl.css
threebox.js
DEMO

<!doctype html>
<head>
    <title>Threebox example</title>
    <script src="../dist/threebox.js" type="text/javascript"></script>

    <script src='mapbox-gl.js'></script>
    <link href='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>
    mapboxgl.accessToken = 'pk.eyJ1Ijoia3JvbmljayIsImEiOiJjaWxyZGZwcHQwOHRidWxrbnd0OTB0cDBzIn0.u2R3NY5PnevWH3cHRk6TWQ';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/bright-v9-cdn.json',
      center: [-122.4340, 37.7353],
      zoom: 5.55,
      pitch: 60,
      heading: 41,
      hash: true
    });

    var highlighted = [];
    
    var cube = {}
    
    map.on("load", function() {
        // Initialize threebox
        window.threebox = new Threebox(map);
        threebox.setupDefaultLights();

        // initialize geometry and material of our cube object
        
        var lng = -122.4340;
        var lat = 37.7353;
        
        var geometry = new THREE.Geometry();
        
        for(x=-1000;x<1000;x++){
            for(y=-1000;y<=1000;y++){
                
                
                geometry.vertices.push(new THREE.Vector3(x*10,y*10, Math.random() * 3000));
                /**
                //new THREE.BoxGeometry(500, 500, 0);
                 var geometry = new THREE.CylinderGeometry(5,5,60,64,1,false);
                 
                    var greenMaterial = new THREE.MeshPhongMaterial( {color: 0xaaffaa, side: THREE.DoubleSide});
                    var redMaterial = new THREE.MeshPhongMaterial( {color: 0xff0000, side: THREE.DoubleSide});

                    var cube = new THREE.Mesh(geometry, redMaterial);
                    cube.rotation.x += 1.5;
                    cube.userData.name = "Red cube";
                    threebox.addAtCoordinate(cube, [-122.4340 + (x/1000), 37.7353 + (y/1000), 0], {preScale: 1});
                    */
                    
                
                
            }
            
            
        }
        
        
        var redMaterial = new THREE.PointsMaterial( {color: 0x00ff00, side: THREE.DoubleSide});
        cube = new THREE.Points(geometry, redMaterial);
        
         
        
        threebox.addAtCoordinate(cube, [-122.4340 , 37.7353 , 555], {preScale: 22});
    
        var render = function() {
            
              
            map.setBearing(map.getBearing()+2.5)
              requestAnimationFrame(render);
              
          };

          render();

    });

    </script>
</body>
mapbox gl加载400万点动画旋转

前置条件

DEMO

效果
