[sanlingzhu]添加model|本地nodejs server|添加启动脚本

README.md

@@ -54,3 +54,9 @@ or to continually rebuild as you develop:
 `npm run dev`
 
 Both commands will output a bundled in `/dist/threebox.js`.
+
+## Run
+
+`node server.js`
+
+

dist/threebox.js

@@ -47,7 +47,7 @@ CameraSync.prototype = {
         const farZ = furthestDistance * 1.01;
 
         this.camera.projectionMatrix = utils.makePerspectiveMatrix(fov, this.map.transform.width / this.map.transform.height, 1, farZ);
-        
+
 
         var cameraWorldMatrix = new THREE.Matrix4();
         var cameraTranslateZ = new THREE.Matrix4().makeTranslation(0,0,cameraToCenterDistance);
@@ -59,12 +59,12 @@ CameraSync.prototype = {
         cameraWorldMatrix
             .premultiply(cameraTranslateZ)
             .premultiply(cameraRotateX)
-            .premultiply(cameraRotateZ);            
+            .premultiply(cameraRotateZ);
 
         this.camera.matrixWorld.copy(cameraWorldMatrix);
 
 
-        var zoomPow =  this.map.transform.scale; 
+        var zoomPow =  this.map.transform.scale;
         // Handle scaling and translation of objects in the map in the world's matrix transform, not the camera
         var scale = new THREE.Matrix4;
         var translateCenter = new THREE.Matrix4;
@@ -189,6 +189,16 @@ SymbolLayer3D.prototype = {
         this.source = source;
 
     },
+    hideFeature: function(key) {
+      this.features[key].rawObject.traverse(function(object){
+        object.visible = false;
+      });
+    },
+    showFeature: function(key) {
+      this.features[key].rawObject.traverse(function(object){
+        object.visible = true;
+      });
+    },
     removeFeature: function(key) {
         this.parent.remove(this.features[key].rawObject);
         delete this.features[key];
@@ -225,7 +235,7 @@ SymbolLayer3D.prototype = {
         console.log("Loading " + remaining + " models", this.models);
         const modelComplete = (m) => {
             console.log("Model complete!", m);
-            //if(this.models[m].loaded) 
+            //if(this.models[m].loaded)
             if(--remaining === 0) {
                 this.loaded = true;
                 this._addOrUpdateFeatures(this.features);
@@ -245,11 +255,11 @@ SymbolLayer3D.prototype = {
                     for(material in (materials.materials)) {
                         materials.materials[material].shininess /= 50;  // Shininess exported by Blender is way too high
                     }
-                    
+
                     objLoader.setMaterials( materials );
                 }
                 objLoader.setPath(this.models[modelName].directory);
-                
+
                 console.log("Loading model ", modelName);
 
                 objLoader.load(this.models[modelName].name + ".obj", obj => {
@@ -259,7 +269,7 @@ SymbolLayer3D.prototype = {
 
                     modelComplete(modelName);
                 }, () => (null), error => {
-                    console.error("Could not load SymbolLayer3D model file.");    
+                    console.error("Could not load SymbolLayer3D model file.");
                 } );
 
             }})(m);
@@ -1660,7 +1670,7 @@ Threebox.prototype = {
             -ThreeboxConstants.MERCATOR_A * coords[0] * ThreeboxConstants.DEG2RAD * ThreeboxConstants.PROJECTION_WORLD_SIZE,
             -ThreeboxConstants.MERCATOR_A * Math.log(Math.tan((Math.PI*0.25) + (0.5 * coords[1] * ThreeboxConstants.DEG2RAD))) * ThreeboxConstants.PROJECTION_WORLD_SIZE
         ];
-     
+
         var pixelsPerMeter = this.projectedUnitsPerMeter(coords[1]);
 
         //z dimension
@@ -1717,9 +1727,9 @@ Threebox.prototype = {
         this._flipMaterialSides(obj);
         this.world.add(geoGroup);
         this.moveToCoordinate(obj, lnglat, options);
-        
+
         // Bestow this mesh with animation superpowers and keeps track of its movements in the global animation queue
-        //this.animationManager.enroll(obj); 
+        //this.animationManager.enroll(obj);
 
         return obj;
     },
@@ -1809,7 +1819,7 @@ Threebox.prototype = {
         // //scene.add( lights[ 0 ] );
         // this.scene.add( lights[ 1 ] );
         // this.scene.add( lights[ 2 ] );
-        
+
     }
 }
 
@@ -17660,7 +17670,7 @@ module.exports = exports = {
 				size = 2;
 
 			} else {
-				
+
 				type = gl.UNSIGNED_BYTE;
 				size = 1;
 			}
@@ -21399,7 +21409,7 @@ module.exports = exports = {
 			}
 
 			scope.numPlanes = nPlanes;
-			
+
 			return dstArray;
 
 		}

docs/SymbolLayer3D.md

@@ -109,3 +109,7 @@ This will update a single feature in the collection while leaving all the others
 If this behavior is not desired, `updateSourceData` takes an optional second parameter, `absolute`, that if set to `true` will delete any features not included in the updated GeoJSON.
 
 To remove a feature, use the `SymbolLayer3D.removeFeature` method and specify the `key` of the feature you want to remove.
+
+To hide a feature, use the `SymbolLayer3D.hideFeature` method and specify the `key` of the feature you want to hide.
+
+To show a previously hidden feature, use the `SymbolLayer3D.showFeature` method and specify the `key` of the feature you want to show.

examples/airport.html

@@ -0,0 +1,78 @@
+<!doctype html>
+<head>
+    <title>SymboLayer3D example</title>
+    <script src="threebox-z.js" type="text/javascript"></script>
+    <script src="config.js"></script>
+
+    <script src='https://api.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
+    <link href='https://api.mapbox.com/mapbox-gl-js/v0.34.0/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>
+    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 map = new mapboxgl.Map({
+      container: 'map',
+      style: 'mapbox://styles/mapbox/streets-v9',
+      center: [117.3527934, 39.13083983],
+      zoom: 15.95,
+      pitch: 60,
+      heading: 41,
+      hash: true,
+      maxZoom: 24
+    });
+
+    map.on("load", function() {
+        // Initialize threebox
+        window.threebox = new Threebox(map);
+        threebox.setupDefaultLights();
+
+        var symbols = threebox.addSymbolLayer({
+            id:             "airport",
+            source:         "https://raw.githubusercontent.com/WillGIS/openmaptiles/tj_airport/geodata/points.geojson",
+            modelName:      "airport",    // will look for an .obj and .mtl file with this name
+            modelDirectory: "models/",          // in this directory
+            rotation:       { generator: feature => (new THREE.Euler(Math.PI / 2, 90, feature.properties['heading'] * Math.PI / 180 + Math.PI / 2, "ZXY")) },
+            scaleToLatitude: false,
+            preScale: 0.0001,
+            scale:          0.1,
+            scaleWithMapProjection: true,
+            key:            { property: "id" }
+        });
+
+        // That's all you need to add a static 3D sybmol layer!
+
+        // Add a native Mapbox GL JS circle layer to highlight each truck location
+        map.addLayer({
+            id: 'truck-circles',
+            type: 'circle',
+            source: {
+                type: 'geojson',
+                data: "https://raw.githubusercontent.com/WillGIS/openmaptiles/tj_airport/geodata/points.geojson"
+            },
+            paint: {
+                'circle-radius': {
+                    stops: [[12,10], [22,500]]
+                },
+                'circle-color': "#ffffff",
+                'circle-opacity': 0.5
+            }
+        });
+
+    });
+    </script>
+</body>

examples/config.js

@@ -0,0 +1,3 @@
+var config = {
+    accessToken: 'pk.eyJ1IjoiYmVpa2VoYW5iYW8yMyIsImEiOiJjamU5b2lhbjIwcW05MndtcTU2aTRyN3AwIn0.Bqh_En_g0SC879fMlBfdkg'
+};

examples/models/123.mtl

@@ -0,0 +1,38 @@
+# 3ds Max Wavefront OBJ Exporter v0.94b - (c)2007 guruware
+# �������ļ�:26.06.2018 22:05:34
+
+newmtl 09___Default
+	Ns 10.0000
+	Ni 1.5000
+	d 1.0000
+	Tr 1.0000
+	Tf 1.0000 1.0000 1.0000 
+	illum 2
+	Ka 0.0000 0.0000 0.0000
+	Kd 1.0000 0.0000 0.0000
+	Ks 0.0000 0.0000 0.0000
+	Ke 0.0000 0.0000 0.0000
+
+newmtl 02___Default
+	Ns 10.0000
+	Ni 1.5000
+	d 1.0000
+	Tr 1.0000
+	Tf 1.0000 1.0000 1.0000 
+	illum 2
+	Ka 0.0000 0.0000 0.0000
+	Kd 0.5843 0.5843 0.9961
+	Ks 0.0000 0.0000 0.0000
+	Ke 0.0000 0.0000 0.0000
+
+newmtl 07___Default
+	Ns 10.0000
+	Ni 1.5000
+	d 1.0000
+	Tr 1.0000
+	Tf 1.0000 1.0000 1.0000 
+	illum 2
+	Ka 0.0000 0.0000 0.0000
+	Kd 1.0000 0.9176 0.0000
+	Ks 0.0000 0.0000 0.0000
+	Ke 0.0000 0.0000 0.0000