3D v1 :)

etienne-dldc · Nov 25, 2015 · e8a65aa · e8a65aa
1 parent dcbb502
commit e8a65aa
Show file tree

Hide file tree

Showing 18 changed files with 494 additions and 170 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/dist/build.js b/dist/build.js
diff --git a/dist/textures/particle1.png b/dist/textures/particle1.png
diff --git a/dist/textures/particle2.png b/dist/textures/particle2.png
diff --git a/gulpfile.js b/gulpfile.js
@@ -62,7 +62,9 @@ gulp.task('watch', function() {
   gulp.watch(config.all, ['build']);
 });
 
-gulp.task('build', ['html', 'assets', 'webpack']);
+gulp.task('build', function () {
+  gulp.start(['html', 'assets', 'webpack']);
+});
 
 gulp.task('default', ['clean'], function () {
   gulp.start(['webpack-dev-server', 'watch', 'build']);

diff --git a/package.json b/package.json
@@ -10,8 +10,10 @@
   "dependencies": {
     "dat-gui": "^0.5.0",
     "gsap": "^1.18.0",
+    "jquery": "^2.1.4",
     "raf": "^3.1.0",
     "three": "^0.73.0",
+    "three-orbit-controls": "^72.0.0",
     "vue": "^1.0.0",
     "vue-router": "^0.7.7"
   },
@@ -36,8 +38,10 @@
     "gulp-util": "^3.0.7",
     "gulp-webpack": "^1.5.0",
     "jade": "^1.11.0",
+    "node-sass": "^3.4.2",
     "require-dir": "^0.3.0",
     "run-sequence": "^1.1.5",
+    "sass-loader": "^3.1.2",
     "script-loader": "^0.6.1",
     "style-loader": "^0.13.0",
     "stylus-loader": "^1.4.0",

diff --git a/src/assets/textures/particle1.png b/src/assets/textures/particle1.png
diff --git a/src/assets/textures/particle2.png b/src/assets/textures/particle2.png
diff --git a/src/classes/Webgl.js b/src/classes/Webgl.js
diff --git a/src/components/graph.vue b/src/components/graph.vue
@@ -1,35 +1,53 @@
+<style lang="sass" scoped>
+
+.container {
+  position: relative;
+  min-height: 200px;
+}
+
+canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+</style>
+
 <template>
   <div class="container">
   </div>
 </template>
 
 <script>
-import Webgl from '../classes/Webgl';
 import raf from 'raf';
 import dat from 'dat-gui';
+import $ from 'jquery';
 import 'gsap';
+import Webgl from '../three/Webgl';
+import { loadAllTextures } from '../three/textures';
 
 export default {
-  created() {
-    // webgl settings
-    this.webgl = new Webgl(window.innerWidth, window.innerHeight);
+  ready() {
+    var winHeight = $(window).height();
+    $(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');
-
     // handle resize
     window.addEventListener('resize', this.resizeHandler);
-  },
-  compiled() {
     this.$el.appendChild(this.webgl.renderer.domElement);
-  },
-  ready() {
-    // let's play !
-    this.animate();
+    loadAllTextures( (textures) => {
+      this.webgl.start();
+      // let's play !
+      this.animate();
+    });
   },
   methods: {
     resizeHandler() {
-      this.webgl.resize(window.innerWidth, window.innerHeight);
+      this.webgl.resize(this.$el.clientWidth, this.$el.clientHeight);
     },
     animate() {
       raf(this.animate);

diff --git a/src/index.html b/src/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>
     <!-- build:css styles/vendors.css -->
     <link href="../bower_components/normalize-css/normalize.css" rel="stylesheet">
     <!-- endbuild -->

diff --git a/src/three/Webgl.js b/src/three/Webgl.js
@@ -0,0 +1,98 @@
+'use strict';
+
+import THREE from 'three';
+import OrbitControlsInit from 'three-orbit-controls';
+import Forest from './objects/Forest';
+
+window.THREE = THREE;
+const OrbitControls = OrbitControlsInit(THREE);
+
+export default class Webgl {
+  constructor(width, height) {
+    this.params = {
+      usePostprocessing: false,
+    };
+
+    this.scene = new THREE.Scene();
+
+    this.scene.fog = new THREE.Fog( 0x000000, 300, 1000 );
+		this.scene.fog.color.setHSL( 0, 0, 0 );
+
+    /**
+     * LIGHTS
+     */
+    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
+     */
+    this.camera = new THREE.PerspectiveCamera(50, width / height, 1, 1000);
+    this.camera.position.z = 600;
+    this.camera.position.y = 30;
+    this.camera.rotation.x = -0.3;
+    this.camera.lookAt(new THREE.Vector3())
+
+    this.controls = new OrbitControls(this.camera);
+    //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
+
+    this.renderer = new THREE.WebGLRenderer();
+    this.renderer.setSize(width, height);
+    this.renderer.setClearColor(0x000000);
+
+    this.composer = null;
+    this.initPostprocessing();
+  }
+
+  initPostprocessing() {
+    if (!this.params.usePostprocessing) { return; }
+
+    /* Add the effect composer of your choice */
+  }
+
+  start() {
+    this.forest = new Forest();
+    this.forest.position.set(0, 0, 0);
+    this.scene.add(this.forest);
+  }
+
+  resize(width, height) {
+    if (this.composer) {
+      this.composer.setSize(width, height);
+    }
+
+    this.camera.aspect = width / height;
+    this.camera.updateProjectionMatrix();
+
+    this.renderer.setSize(width, height);
+  }
+
+  render() {
+    if (this.params.usePostprocessing) {
+      console.warn('WebGL - No effect composer set.');
+    } else {
+      this.renderer.render(this.scene, this.camera);
+    }
+
+    this.forest.update();
+  }
+}
diff --git a/src/classes/objects/Cube.js → src/three/objects/Cube.js b/src/classes/objects/Cube.js → src/three/objects/Cube.js
diff --git a/src/three/objects/Forest.js b/src/three/objects/Forest.js
@@ -0,0 +1,89 @@
+import THREE from 'three';
+import Tree from './Tree';
+
+export default class Forest extends THREE.Object3D {
+  constructor() {
+    super();
+
+		/**
+		 * GRID
+		 */
+		var groundGeo = new THREE.Geometry();
+    // var size = 300, step = 50;
+		// for ( var i = - size; i <= size; i += step ) {
+		// 	groundGeo.vertices.push( new THREE.Vector3( - size, 0, i ) );
+		// 	groundGeo.vertices.push( new THREE.Vector3(   size, 0, i ) );
+		//
+		// 	groundGeo.vertices.push( new THREE.Vector3( i, 0, - size ) );
+		// 	groundGeo.vertices.push( new THREE.Vector3( i, 0,   size ) );
+		// }
+		var length = 15, step = 50, cutAngleRatio = 0.7;
+		var size = length * step * 0.5, cutAngle = Math.floor(length * cutAngleRatio * 0.5);
+		for ( var i = 0; i < length/2; i++ ) {
+			let z = (-size) + (i * step);
+			let xSub = (cutAngle-i) * step;
+			xSub = xSub < 0 ? 0 : xSub;
+			// top
+			groundGeo.vertices.push( new THREE.Vector3( - size + xSub, 0, z ) );
+			groundGeo.vertices.push( new THREE.Vector3(   size - xSub, 0, z ) );
+			// left
+			groundGeo.vertices.push( new THREE.Vector3( z, 0, - size + xSub ) );
+			groundGeo.vertices.push( new THREE.Vector3( z, 0,   size - xSub ) );
+			// bottom
+			z = size - (i * step);
+			groundGeo.vertices.push( new THREE.Vector3( - size + xSub, 0, z ) );
+			groundGeo.vertices.push( new THREE.Vector3(   size - xSub, 0, z ) );
+			// right
+			groundGeo.vertices.push( new THREE.Vector3( z, 0, - size + xSub ) );
+			groundGeo.vertices.push( new THREE.Vector3( z, 0,   size - xSub ) );
+		}
+		var groundMat = new THREE.LineBasicMaterial( { color: 0xFFFFFF, linewidth: 0.1, opacity: 0.4 } );
+    groundMat.transparent = true;
+		this.groundLines = new THREE.LineSegments( groundGeo, groundMat );
+		this.add( this.groundLines );
+
+		/**
+		 * GENERATE THREE
+		 */
+    this.trees = [];
+		var treesPos = [];
+
+		for (var i = 0; i < 97; i++) {
+			var maxLoop = 50;
+			var x, z;
+			do {
+				let posAngle = Math.random() * Math.PI * 2;
+				let posDist = Math.random() * (size * 0.9 );
+				x =  Math.cos(posAngle) * posDist;
+				z = Math.sin(posAngle) * posDist;
+				maxLoop--;
+				if (maxLoop == 0) { console.log('max'); }
+			} while (maxLoop > 0 && closestTree(x, z) < 30);
+			treesPos.push([x, z]);
+
+			var newTree = new Tree();
+			newTree.position.set(x, 0, z );
+			this.add(newTree);
+			this.trees.push(newTree);
+		}
+
+		function closestTree(x, y) {
+			var minDist = 1000;
+			for (var i = 0; i < treesPos.length; i++) {
+				var tx = treesPos[i][0];
+				var ty = treesPos[i][1];
+				var dx = tx - x;
+				var dy = ty - y;
+				var dist = Math.sqrt( (dy * dy) + (dx * dx));
+				if (dist < minDist) { minDist = dist }
+			}
+			return minDist;
+		}
+
+
+  }
+
+  update() {
+
+  }
+}
diff --git a/src/three/objects/Leaf.js b/src/three/objects/Leaf.js
@@ -0,0 +1,21 @@
+import THREE from 'three';
+
+export default class Leaf extends THREE.Object3D {
+  constructor(color) {
+    super();
+
+    this.geom = new THREE.BoxGeometry( 0.3, 0.3, 0.3 );
+    this.mat = new THREE.MeshBasicMaterial({
+      color: color
+    });
+    this.mesh = new THREE.Mesh(this.geom, this.mat);
+
+    this.add(this.mesh);
+  }
+
+
+
+  update() {
+    this.rotation.y += 0.01;
+  }
+}