Start css

.gitignore

@@ -1,4 +1,5 @@
-.DS_Dtore
+.DS_Store
 node_modules
 bower_components
 data
+dist

config.js

@@ -6,7 +6,7 @@ var config = {
   index: 'src/index.html',
   outFileMin: 'build.min.js',
   outFile: 'build.js',
-  out: 'dist/',
+  out: '',
   in: 'src/',
   entryPoint: './src/main.js',
   allIn: ['src/**/*'],

src/app.vue

@@ -2,6 +2,7 @@
   <div class="app-container">
     <loader v-if="displayLoader" transition="fade"></loader>
     <graph></graph>
+    <sidebar></sidebar>
   </div>
 </template>
 
@@ -12,6 +13,7 @@
   }
 
   @import "./styles/transitions.scss";
+  @import "./styles/fonts.scss";
 
   .app-container{
     position: fixed;
@@ -23,8 +25,9 @@
 </style>
 
 <script>
-import Graph from './components/graph.vue'
-import Loader from './components/loader.vue'
+import Graph from './components/Graph.vue'
+import Loader from './components/Loader.vue'
+import Sidebar from './components/Sidebar.vue'
 
 export default {
   data () {
@@ -34,7 +37,8 @@ export default {
   },
   components: {
     Graph,
-    Loader
+    Loader,
+    Sidebar
   },
   events: {
     "loader-off": function () {

src/components/Sidebar.vue

@@ -0,0 +1,70 @@
+<style lang="sass?outputStyle=expanded" scoped>
+
+  @import "../styles/variables.scss";
+
+  .sidebar{
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+		width : 325px;
+    background: $color_main;
+    opacity : 0.98 ;
+		padding-left: 40px;
+		padding-right: 35px;
+
+    h3{
+      color : #808080;
+  		text-transform: uppercase;
+  		font-family : 'cpcompanyregular', sans-serif;
+      font-size: 16px;
+      padding-top: 30px;
+      padding-bottom: 12px;
+      letter-spacing: 3px;
+      margin: 0;
+    }
+
+    hr{
+      //width : 250px;
+  		background-color : #303030;
+      height : 1px;
+      border: none;
+    }
+
+    p.legende-info{
+      font-family : ‘Helvetica-Neue’, sans-serif;
+      font-weight: 300;
+  		font-size : 14px;
+      line-height: 1.6;
+  		color : #666666;
+  		margin-top : 15px;
+  		margin-bottom : 20px;
+    }
+  }
+
+</style>
+
+<template>
+  <div class="sidebar">
+      <h3>Légendes</h3>
+      <hr/>
+      <p class="legende-info"><span class="num">1.</span>Afficher/Masquer les facteurs affectant la solitude des arbres.</p>
+      <p class="legende-info"><span class="num">2.</span>Jaugez l’importance que vous accordez à  l’impact des
+	 différents facteurs sur la solitude des arbres</p>
+      <hr/>
+
+  </div>
+</template>
+
+<script>
+import $ from 'jquery';
+
+export default {
+  ready() {
+
+  },
+  methods: {
+
+  }
+}
+</script>

src/components/graph.vue

@@ -22,7 +22,7 @@ canvas {
 
 <script>
 import raf from 'raf';
-import dat from 'dat-gui';
+//import dat from 'dat-gui';
 import $ from 'jquery';
 import 'gsap';
 import Webgl from '../three/Webgl';
@@ -36,8 +36,8 @@ export default {
     $(this.$el).height(winHeight);
     this.webgl = new Webgl(this.$el.clientWidth, this.$el.clientHeight);
     // GUI settings
-    this.gui = new dat.GUI();
-    this.gui.add(this.webgl.params, 'usePostprocessing');
+    // this.gui = new dat.GUI();
+    // this.gui.add(this.webgl.params, 'usePostprocessing');
     // handle resize
     window.addEventListener('resize', this.resizeHandler);
     this.$el.appendChild(this.webgl.renderer.domElement);

src/main.js

@@ -1,5 +1,5 @@
 var Vue = require('vue')
-var App = require('./app.vue')
+var App = require('./App.vue')
 var VueRouter = require('vue-router')
 
 Vue.use(VueRouter)

src/styles/fonts.scss

@@ -0,0 +1,27 @@
+/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 26, 2015 */
+
+@font-face {
+    font-family: 'cpcompanyregular';
+    src: url('styles/fonts/cpcompany-light-webfont.eot');
+    src: url('styles/fonts/cpcompany-light-webfont.eot?#iefix') format('embedded-opentype'),
+         url('styles/fonts/cpcompany-light-webfont.woff2') format('woff2'),
+         url('styles/fonts/cpcompany-light-webfont.woff') format('woff'),
+         url('styles/fonts/cpcompany-light-webfont.ttf') format('truetype'),
+         url('styles/fonts/cpcompany-light-webfont.svg#cpcompanyregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'dekarregular';
+    src: url('styles/fonts/dekar-webfont.eot');
+    src: url('styles/fonts/dekar-webfont.eot?#iefix') format('embedded-opentype'),
+         url('styles/fonts/dekar-webfont.woff2') format('woff2'),
+         url('styles/fonts/dekar-webfont.woff') format('woff'),
+         url('styles/fonts/dekar-webfont.ttf') format('truetype'),
+         url('styles/fonts/dekar-webfont.svg#dekarregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}

src/styles/fonts/generator_config.txt

@@ -0,0 +1,5 @@
+# Font Squirrel Font-face Generator Configuration File
+# Upload this file to the generator to recreate the settings
+# you used to create these fonts.
+
+{"mode":"optimal","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}

src/styles/variables.scss

@@ -0,0 +1,3 @@
+
+
+$color_main : #1b1b1b;

src/three/Webgl.js

@@ -40,24 +40,24 @@ export default class Webgl {
     this.camera.position.set(280, 330, 410);
     this.camera.lookAt(new THREE.Vector3())
 
+    /**
+     * RENDERER
+     */
+    this.renderer = new THREE.WebGLRenderer();
+    this.renderer.setSize(width, height);
+    this.renderer.setClearColor(0x121111);
+
     /**
      * CONTROL
      */
-    this.controls = new OrbitControls(this.camera);
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
     //this.controls.minDistance = 100;
     this.controls.maxDistance = 700;
     this.controls.minAzimuthAngle = -Math.PI/2;
     this.controls.maxAzimuthAngle = Math.PI/2;
     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);
-
     this.composer = null;
     this.initPostprocessing();
   }

src/three/objects/Forest.js

@@ -7,10 +7,10 @@ export default class Forest extends THREE.Object3D {
     super();
 
 		this.dataParams = {
-			hauteur: { multiplier: 0.001, color: 0xFFFFFF, user_multiplier: 1 },
-			arbres_align_dist: { multiplier: 1, color: 0xFF0000, user_multiplier: 1, max: 104025 },
-			bancs_dist: { multiplier: 1, color: 0x00FF00, user_multiplier: 1, max: 11581 },
-			poteaux_bois_dist: { multiplier: 0.5, color: 0x0000FF, user_multiplier: 1, max: 137 }
+			hauteur: { multiplier: 0.001, color: 0xffffff, user_multiplier: 1 },
+			arbres_align_dist: { multiplier: 1, color: 0x16f1d4, user_multiplier: 1, max: 104025 },
+			bancs_dist: { multiplier: 1, color: 0x18f277, user_multiplier: 1, max: 11581 },
+			poteaux_bois_dist: { multiplier: 0.5, color: 0x1dacdd, user_multiplier: 1, max: 137 }
 		};
 
     this.allData = [];

src/three/objects/Tree.js

@@ -1,6 +1,5 @@
 import THREE from 'three';
 
-import Leaf from './Leaf';
 import textures from '../textures';
 import _ from 'lodash';
 import Tools from '../../modules/tools';
@@ -130,12 +129,12 @@ export default class Tree extends THREE.Object3D {
     geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
     geometry.computeBoundingSphere();
     var material = new THREE.PointsMaterial({
-      size: 2,
+      size: 1.7,
       vertexColors: THREE.VertexColors,
-      map: textures.particle2,
+      map: textures.particle3,
       transparent : true,
       //blending: THREE.AdditiveBlending,
-      opacity: 0.4,
+      opacity: 0.9,
       depthTest: false,
     });
     var particleSystem = new THREE.Points( geometry, material );

src/three/textures.js

@@ -8,7 +8,8 @@ const textures = {};
 
 const texturesUrl = [
 	{ name: 'particle1', url: 'textures/particle1.png' },
-	{ name: 'particle2', url: 'textures/particle2.png' }
+	{ name: 'particle2', url: 'textures/particle2.png' },
+	{ name: 'particle3', url: 'textures/particle3.png' }
 ];
 
 let nbrOfTexture = texturesUrl.length;

webpack.config.js

@@ -24,10 +24,18 @@ var webpackConfig = {
         test: /src\/(three|modules)\/.*(\.js)$/,
         loader: 'babel'
       },
+      {
+        test: /src\/styles\/.*(\.scss)$/,
+        loader: 'sass'
+      },
       {
         // edit this for additional asset file types
         test: /\.(png|jpg|gif)$/,
         loader: 'file?name=[name].[ext]?[hash]'
+      },
+      {
+        test: /\.(svg|eot|woff2|woff|ttf)$/,
+        loader: 'file?name=[name].[ext]?[hash]'
       }
     ]
   },