Add rotation parameter to example

wonyoungso · Jan 4, 2017 · 4c27064 · 4c27064
1 parent 70e4b7e
commit 4c27064
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 181 deletions.
diff --git a/example/app.js b/example/app.js
@@ -229,7 +229,8 @@ class ExampleApp extends React.Component {
       hoverChoropleth: null,
       clickItem: null,
       settings: {
-        separation: 0
+        separation: 0,
+        rotation: 0
       }
     };
 
@@ -386,7 +387,7 @@ class ExampleApp extends React.Component {
   }
 
   _renderExamples() {
-    const {settings: {separation}} = this.state;
+    const {settings: {separation, rotation}} = this.state;
     const props = {
       ...this.props,
       ...this.state,
@@ -427,10 +428,11 @@ class ExampleApp extends React.Component {
           // Generate common props
           index++;
           // const modelMatrix = new Matrix4().fromTranslation([0, 0, 1000 * index * separation]);
-          layerProps.modelMatrix =
+          const modelMatrix =
             mat4.fromTranslation(mat4.create(), [0, 0, 300 * index * separation, 0]);
+          mat4.rotateZ(modelMatrix, modelMatrix, index * rotation * Math.PI / 10000);
           console.log(layerProps.modelMatrix); // eslint-disable-line
-
+          Object.assign(layerProps, {modelMatrix});
           /* eslint-enable max-depth */
           layers.push(example(layerProps));
         }

diff --git a/example/layer-controls.js b/example/layer-controls.js
@@ -44,6 +44,7 @@ export default class LayerControls extends Component {
       <div className="layer-controls" style={{marginTop: 0, padding: 0, width: 270}}>
         <h4>Layer Controls</h4>
         {this._renderSlider('separation', {}, settings.separation, 'Separation')}
+        {this._renderSlider('rotation', {}, settings.rotation, 'Rotation')}
       </div>
     );
   }

diff --git a/package.json b/package.json
@@ -63,7 +63,7 @@
     "gl": "^4.0.2",
     "highlight.js": "^9.7.0",
     "immutable": "^3.7.5",
-    "luma.gl": "^2.10.3",
+    "luma.gl": "3.0.0-alpha2",
     "marked": "^0.3.6",
     "react": "^15.3.2",
     "react-addons-test-utils": "^15.0.2",
@@ -84,7 +84,7 @@
     "uglify-js": "^2.6.1"
   },
   "peerDependencies": {
-    "luma.gl": "^2.10.3",
+    "luma.gl": "3.0.0-alpha2",
     "react": "0.14.x - 15.x",
     "react-dom": "0.14.x - 15.x"
   },