前置條件
mapbox-gl.jsjavascript
mapbox-gl.csscss
threebox.jshtml
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>
