Use real data to generate trees

etienne-dldc · Nov 26, 2015 · 0778081 · 0778081
1 parent e8a65aa
commit 0778081
Show file tree

Hide file tree

Showing 16 changed files with 406 additions and 178 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .DS_Dtore
 node_modules
 bower_components
+data
diff --git a/dist/build.js b/dist/build.js
diff --git a/dist/data.json b/dist/data.json
diff --git a/dist/index.html b/dist/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Vue Webpack Example</title>
+    <title>Les arbres de Paris se sentent-ils seuls ?</title>
     <link rel="stylesheet" href="styles/vendors.css">
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "gulp-util": "^3.0.7",
     "gulp-webpack": "^1.5.0",
     "jade": "^1.11.0",
+    "lodash": "^3.10.1",
     "node-sass": "^3.4.2",
     "require-dir": "^0.3.0",
     "run-sequence": "^1.1.5",

diff --git a/src/app.vue b/src/app.vue
@@ -1,16 +1,26 @@
 <template lang="html">
+  <loader v-if="displayLoader"></loader>
   <graph></graph>
 </template>
 
 <script>
 import Graph from './components/graph.vue'
+import Loader from './components/loader.vue'
 
 export default {
   data () {
-    return {}
+    return {
+      displayLoader: true
+    };
   },
   components: {
-    Graph
+    Graph,
+    Loader
+  },
+  events: {
+    "loader-off": function () {
+      this.displayLoader = false;
+    }
   }
 }
 </script>

diff --git a/src/assets/data.json b/src/assets/data.json
diff --git a/src/components/graph.vue b/src/components/graph.vue
@@ -27,9 +27,11 @@ import $ from 'jquery';
 import 'gsap';
 import Webgl from '../three/Webgl';
 import { loadAllTextures } from '../three/textures';
+import { loadData } from '../modules/data';
 
 export default {
   ready() {
+    this.allData = [];
     var winHeight = $(window).height();
     $(this.$el).height(winHeight);
     this.webgl = new Webgl(this.$el.clientWidth, this.$el.clientHeight);
@@ -39,11 +41,18 @@ export default {
     // handle resize
     window.addEventListener('resize', this.resizeHandler);
     this.$el.appendChild(this.webgl.renderer.domElement);
+    // Load
+    this.texturesLoaded = false;
     loadAllTextures( (textures) => {
-      this.webgl.start();
-      // let's play !
-      this.animate();
+      this.texturesLoaded = true;
+      this.loaded();
     });
+    this.dataLoaded = false;
+    loadData( (data) => {
+      this.allData = data;
+      this.dataLoaded = true;
+      this.loaded();
+    })
   },
   methods: {
     resizeHandler() {
@@ -52,6 +61,14 @@ export default {
     animate() {
       raf(this.animate);
       this.webgl.render();
+    },
+    loaded() {
+      if (this.texturesLoaded && this.dataLoaded) {
+        this.webgl.setData(this.allData);
+        this.webgl.start();
+        this.animate();
+        this.$dispatch('loader-off');
+      }
     }
   }
 }

diff --git a/src/components/loader.vue b/src/components/loader.vue
@@ -0,0 +1,37 @@
+<style lang="sass" scoped>
+  .loader {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+    color: white;
+    font-size: 20px;
+    z-index: 1000;
+    text-align: center;
+  }
+
+  p{
+    padding-top: 200px;
+  }
+</style>
+
+<template>
+  <div class="loader">
+    <p>Loading...</p>
+  </div>
+</template>
+
+<script>
+import $ from 'jquery';
+
+export default {
+  ready() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/src/modules/data.js b/src/modules/data.js
@@ -0,0 +1,14 @@
+'use strict';
+
+import $ from 'jquery';
+
+var allData = {};
+
+export function loadData(callback) {
+  $.getJSON( "data.json", ( theData ) => {
+    allData = theData;
+    callback(theData);
+  });
+}
+
+export default allData;
diff --git a/src/modules/tools.js b/src/modules/tools.js
@@ -0,0 +1,29 @@
+'use strict';
+
+const size = 300;
+
+var Tools = {
+  map(val, fromIn, toIn, fromOut, toOut) {
+    let progress = (val - fromIn) / (toIn - fromIn);
+    return fromOut + ((toOut - fromOut) * progress);
+  },
+  /**
+   * @posArray [x, z]
+   * @return [x, z]
+   */
+  geoCoordsToCanvas(posArray) {
+    let xRangeIn = [2.29, 2.39];
+    let xRangeOut = [-size/2, size/2];
+    let zRangeIn = [48.80, 48.90];
+    let zRangeOut = [-size/2, size/2];
+    return [
+      Tools.map(posArray[1], xRangeIn[0], xRangeIn[1], xRangeOut[0], xRangeOut[1]),
+      Tools.map(posArray[0], zRangeIn[0], zRangeIn[1], zRangeOut[0], zRangeOut[1])
+    ]
+  },
+  geoDistToCanvas(dist) {
+    return Tools.map(dist, 0, 0.1, 0, size);
+  }
+}
+
+export default Tools;
diff --git a/src/three/Webgl.js b/src/three/Webgl.js
@@ -12,9 +12,16 @@ export default class Webgl {
     this.params = {
       usePostprocessing: false,
     };
+    this.allData = [];
+    this.mouse = new THREE.Vector2();
+    this.raycaster = new THREE.Raycaster();
+    this.treesHitbox = [];
+    this.hoverTree = null;
 
+    /**
+     * SCENE
+     */
     this.scene = new THREE.Scene();
-
     this.scene.fog = new THREE.Fog( 0x000000, 300, 1000 );
 		this.scene.fog.color.setHSL( 0, 0, 0 );
 
@@ -24,20 +31,6 @@ export default class Webgl {
     var ambientLight = new THREE.AmbientLight( 0xffffff );
 		this.scene.add( ambientLight );
 
-		var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
-		directionalLight.position.x = Math.random() - 0.5;
-		directionalLight.position.y = Math.random() - 0.5;
-		directionalLight.position.z = Math.random() - 0.5;
-		directionalLight.position.normalize();
-		//this.scene.add( directionalLight );
-
-		var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
-		directionalLight.position.x = Math.random() - 0.5;
-		directionalLight.position.y = Math.random() - 0.5;
-		directionalLight.position.z = Math.random() - 0.5;
-		directionalLight.position.normalize();
-		//this.scene.add( directionalLight );
-
     /**
      * CAMERA
      */
@@ -47,6 +40,9 @@ export default class Webgl {
     this.camera.rotation.x = -0.3;
     this.camera.lookAt(new THREE.Vector3())
 
+    /**
+     * CONTROL
+     */
     this.controls = new OrbitControls(this.camera);
     //this.controls.minDistance = 100;
     this.controls.maxDistance = 700;
@@ -55,6 +51,9 @@ export default class Webgl {
     this.controls.minPolarAngle = 0; // radians
     this.controls.maxPolarAngle = Math.PI * 0.4; // radians
 
+    /**
+     * RENDERER
+     */
     this.renderer = new THREE.WebGLRenderer();
     this.renderer.setSize(width, height);
     this.renderer.setClearColor(0x000000);
@@ -63,6 +62,10 @@ export default class Webgl {
     this.initPostprocessing();
   }
 
+  setData(data) {
+    this.allData = data;
+  }
+
   initPostprocessing() {
     if (!this.params.usePostprocessing) { return; }
 
@@ -72,7 +75,13 @@ export default class Webgl {
   start() {
     this.forest = new Forest();
     this.forest.position.set(0, 0, 0);
+    this.forest.setData(this.allData);
+    this.forest.generateTrees();
+    this.treesHitbox = this.forest.getHitboxList();
     this.scene.add(this.forest);
+
+    // handle mousemove
+    this.renderer.domElement.addEventListener( 'mousemove', this.onMouseMove.bind(this) );
   }
 
   resize(width, height) {
@@ -86,13 +95,42 @@ export default class Webgl {
     this.renderer.setSize(width, height);
   }
 
+  onMouseMove(event) {
+    this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+	  this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+  }
+
+  findHoverElem() {
+    this.raycaster.setFromCamera( this.mouse, this.camera );
+    //console.log(this.scene.children);
+  	var intersects = this.raycaster.intersectObjects( this.treesHitbox );
+    if (intersects.length == 0) {
+      if (this.hoverTree !== null) {
+        this.hoverTree.hoverOff();
+        this.hoverTree = null;
+      }
+      return;
+    }
+    var tree = intersects[0].object.treeObject;
+    if (tree !== undefined && this.hoverTree !== tree) {
+      if (this.hoverTree !== null) {
+        this.hoverTree.hoverOff();
+        this.hoverTree = null;
+      }
+      this.hoverTree = tree;
+      tree.hoverOn();
+    }
+  }
+
   render() {
     if (this.params.usePostprocessing) {
       console.warn('WebGL - No effect composer set.');
     } else {
       this.renderer.render(this.scene, this.camera);
     }
 
+    this.findHoverElem();
+
     this.forest.update();
   }
 }