peterqliu · kronick · Mar 29, 2017 · Mar 27, 2017 · Mar 29, 2017
diff --git a/dist/threebox.js b/dist/threebox.js
diff --git a/examples/SymbolLayer3D.html b/examples/SymbolLayer3D.html
@@ -0,0 +1,139 @@
+<!doctype html>
+<head>
+    <title>SymboLayer3D example</title>
+    <script src="../dist/threebox.js" type="text/javascript"></script>
+    <script src="config.js"></script>
+
+    <script src='https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
+    <link href='https://api.mapbox.com/mapbox-gl-js/v0.29.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/dark-v9',
+      center: [-122.4131, 37.7743],
+      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 source = {
+            type: "FeatureCollection",
+            features: []
+        };
+
+        for (var i = 0; i < 100; i++) {
+            var newFeat = {
+                type: "Feature",
+                properties: {
+                    heading: randomRange(0, 360),
+                    id: i
+                },
+                geometry: {
+                    type: "Point",
+                    coordinates: [randomRange(-122.508544921875, -122.37945556640624), randomRange(37.70229391925025, 37.800289863702076)]
+                }
+            }
+            source.features.push(newFeat);
+        }
+
+        var symbols = threebox.addSymbolLayer({
+            id:             "trucks",
+            source:         source, //"data/points.geojson",
+            modelName:      "Truck",    // 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, 0, feature.properties['heading'] * Math.PI / 180 + Math.PI / 2, "ZXY")) },
+            rotationTransition: {time: 1000, easing: "linear"},
+            scale:          100,
+            scaleWithMapProjection: true,
+            key:            { property: "id" }
+        });
+
+        var lastT = performance.now();
+        const drive = (t) => {
+            const dT = t - lastT;
+            lastT = t;
+            const fpsFactor = dT / 16.7;
+
+            //console.log("FPS", (1000/dT).toFixed(2));
+            var source = symbols.source;
+            if(symbols.loaded && source) {
+
+                const speed = 0.000005 * fpsFactor;
+                source.features.forEach(f => {
+                    const dX = Math.sin((f.properties.heading + 90) * Math.PI / 180) * speed;
+                    const dY = Math.cos((f.properties.heading + 90) * Math.PI / 180) * speed;
+                    if(f.properties.headingChange === undefined) f.properties.headingChange = 0;
+                    f.properties.headingChange += (Math.random() - 0.5) / 20 * fpsFactor;
+                    f.properties.headingChange = Math.min(f.properties.headingChange, 0.25);
+                    f.properties.headingChange = Math.max(f.properties.headingChange, -0.25);
+                    f.properties.heading += f.properties.headingChange * fpsFactor;
+                    f.geometry.coordinates = [f.geometry.coordinates[0] + dX, f.geometry.coordinates[1] + dY]
+                });
+
+                symbols.updateSourceData(source);
+            }
+
+            window.requestAnimationFrame(drive);
+        }
+        drive();
+
+        // source3D.onEnter(function(feature) {
+
+        // });
+
+        // source3D.onUpdate(function(feature, sceneObject) {
+        //     // if(featureIsSpecialInSomeWay) {
+        //     //     return {rotation: 0}
+        //     // }
+        // });
+
+        // source3D.onExit(function(feature) {
+
+        // });
+
+        // Transitions on:
+        // - Scale xyz
+        // - Translation offset
+        // - Opacity
+        // - Rotate
+        // window.setInteval(function(t) {
+        //     var newData = downloadNewData(url);
+        //     source3D.updateData(newData);    
+        // }, 1000);
+
+        // source3D.setProperty({
+        //     rotation: { generator: feature => feature.properties['heading'] }
+        // });
+    });
+
+    function randomRange(low, high) {
+        return Math.random() * (high - low) + low;
+    }
+
+    </script>
+</body>
diff --git a/examples/basic.html b/examples/basic.html
@@ -2,6 +2,7 @@
 <head>
     <title>Threebox example</title>
     <script src="../dist/threebox.js" type="text/javascript"></script>
+    <script src="config.js"></script>
 
     <script src='https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
     <link href='https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
@@ -21,7 +22,9 @@
     <div id='map' class='map'></div>
 
     <script>
-    mapboxgl.accessToken = 'pk.eyJ1Ijoia3JvbmljayIsImEiOiJjaWxyZGZwcHQwOHRidWxrbnd0OTB0cDBzIn0.u2R3NY5PnevWH3cHRk6TWQ';
+    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-v8',
@@ -38,33 +41,29 @@
         threebox.setupDefaultLights();
 
         var geometry = new THREE.PlaneGeometry(6378137, 6378137, 1);
-        var material = new THREE.MeshBasicMaterial( {color: 0x00ff00, side: THREE.DoubleSide});
+        var material = new THREE.MeshPhongMaterial( {color: 0xaaffaa, side: THREE.DoubleSide});
         material.wireframe = true;
         var plane = new THREE.Mesh(geometry, material);
-        threebox.addAtCoordinate(plane, [0,0,0]);
+        threebox.addAtCoordinate(plane, [-122.41356, 37.77577 ,500]);
 
         // threebox.addAtCoordinate(plane, [0,0]);
 
         // Load and manipulate a THREE.js scenegraph as you would normally
         loader = new THREE.JSONLoader();
 
         loader.load("models/boeing747-400-jw.json", function(geometry) {
+            console.log("Model loaded");
             geometry.rotateY((90/360)*2*Math.PI);
             geometry.rotateX((90/360)*2*Math.PI);
 
-            material = new THREE.MeshPhongMaterial( { color:0xaaffaa, side: THREE.BackSide, shininess:0 } );
-            for(var i = 0; i < 3; i++) {
-                aircraft = new THREE.Mesh( geometry.clone(), material );
-                // geometry.computeFaceNormals();
-                // geometry.computeVertexNormals();
-                var planePosition = [-122.41356,i == 0 ? 37.77577 : i == 1 ? 0 : 80,500];
-
-                var aircraftSize = 10.0;
-                aircraft.scale.set(aircraftSize, aircraftSize, aircraftSize);
+            var material = new THREE.MeshPhongMaterial( {color: 0xaaffaa, side: THREE.DoubleSide}); //material = new THREE.MeshPhongMaterial( { color:0xaaffaa, side: THREE.DoubleSide, shininess:0 } );
+            aircraft = new THREE.Mesh( geometry, material );
+            // geometry.computeFaceNormals();
+            // geometry.computeVertexNormals();
+            var planePosition = [-122.41356, 37.77577 ,500];
 
-                // Add the model to the threebox scenegraph at a specific geographic coordinate
-                threebox.addAtCoordinate(aircraft, planePosition);
-            }
+            // Add the model to the threebox scenegraph at a specific geographic coordinate
+            threebox.addAtCoordinate(aircraft, planePosition, {scaleToLatitude: true, preScale: 10});
 
             //threebox.scene.add(aircraft);
         });

diff --git a/examples/config_template.js b/examples/config_template.js
@@ -0,0 +1,3 @@
+var config = {
+    accessToken: 'your_mapbox_access_token_here'
+};
diff --git a/examples/data/points.geojson b/examples/data/points.geojson
@@ -0,0 +1,145 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "id": "001",
+        "heading": 0
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -122.44848489761347,
+          37.78711479331146
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "id": "002",
+        "heading": 10
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -122.44138240814203,
+          37.784113193898264
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "id": "003",
+        "heading": 20
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -122.4721258878708,
+          37.80438433939691
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "id": "004",
+        "heading": 30
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -122.477388381958,
+          37.76545645336399
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "id": "005",
+        "heading": 40
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -122.37969964742655,
+          37.79636895736933
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "id": "006",
+        "heading": 50
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -122.3963668942451,
+          37.79800092745137
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "id": "007",
+        "heading": 60
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -122.4184548854828,
+          37.75228365607875
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "id": "008",
+        "heading": 70
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -122.4379599094391,
+          37.745448230008236
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "id": "009",
+        "heading": 80
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -122.3898303508758,
+          37.78364471293512
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "id": "010",
+        "heading": 90
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -122.42338210344315,
+          37.795887837230445
+        ]
+      }
+    }
+  ]
+}