Intégration propre du konami et du webgl

src/CG/PlatformBundle/Resources/public/js/earth.js

@@ -9,7 +9,9 @@ var windowHalfY = window.innerHeight / 2;
 var earthMesh;
 
 // Mouse object
-var mouse = {x : 0, y : 0, isClicked: false};
+var mouse = {x : -0.01, y : 0, isClicked: false};
+
+var objects = [];
 
 init();
 animate();
@@ -41,11 +43,20 @@ function init()
 	var manager = new THREE.LoadingManager();
 	var texture = new THREE.Texture();
 
+	var onProgress = function ( xhr ) {
+		console.log('On Progress')
+	};
+
+	var onError = function ( xhr ) {
+		//console.log('An error has occured');
+		console.log(xhr)
+	};
+
 	var loader = new THREE.ImageLoader( manager );
-		loader.load( '../img/earthTexture.jpg', function ( image ) {
-			texture.image = image;
-			texture.needsUpdate = true;
-		} );
+	loader.load( '../img/earthTexture.jpg', function ( image ) {
+		texture.image = image;
+		texture.needsUpdate = true;
+	}, onProgress, onError);
 
 	var geometry   = new THREE.SphereGeometry(0.5, 32, 32)
 	var material  = new THREE.MeshPhongMaterial()
@@ -62,21 +73,24 @@ function init()
 			var pos = latLongToVector3(lat, lon, 0.5, 0)
 
 			var geometry = new THREE.SphereGeometry(0.02,32,32);
-			var material = new THREE.MeshBasicMaterial( { color: 0xFA2A2A } );
-			var cube = new THREE.Mesh( geometry, material );
-			cube.position.x = pos.x;
-			cube.position.y = pos.y;
-			cube.position.z = pos.z;
+			var material = new THREE.MeshLambertMaterial( { color: 0xE61E17 , ambient: 0x909090} );
+			material.transparent = true;
+			material.opacity = 0.8;
+			var pin = new THREE.Mesh( geometry, material );
+			pin.position.x = pos.x;
+			pin.position.y = pos.y;
+			pin.position.z = pos.z;
 
-			earthMesh.add(cube);
+			pin.name = value.link;
+
+			objects.push(pin);
+
+			earthMesh.add(pin);
 		});
-	});
-/*
-	// 34.909568, 38.991521
-	// 45.926093, 4.832203
 
+		console.log(objects)
+	});
 
-*/
 	// Rendering
 	renderer = new THREE.WebGLRenderer({alpha:true});
 	renderer.setClearColor( 0xffffff, 1);
@@ -101,57 +115,73 @@ function onWindowResize()
 	camera.aspect = window.innerWidth / window.innerHeight;
 	camera.updateProjectionMatrix();
 
-	renderer.setSize( window.innerWidth / 2, window.innerHeight / 2 );
+	renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
 }
 
 
 document.addEventListener('mousemove', function(event)
 {
 	if(mouse.isClicked)
-	{
-		mouse.x	= (event.clientX / window.innerWidth ) - 0.5
-		mouse.y	= (event.clientY / window.innerHeight) - 0.5
-	}
-}, false)
+		{
+			mouse.x	= (event.clientX / window.innerWidth ) - 0.5
+			mouse.y	= (event.clientY / window.innerHeight) - 0.5
+		}
+	}, false)
 
-document.addEventListener('mousedown', function(event)
-{
-	mouse.isClicked = true;
-})
+	document.addEventListener('mousedown', function(event)
+	{
+		mouse.isClicked = true;
+		//console.log(objects)
+		var projector = new THREE.Projector();
+		var mouse3D = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,   //x
+		-( event.clientY / window.innerHeight ) * 2 + 1,  //y
+		0.5 );                                            //z
+		var raycaster = projector.pickingRay( mouse3D.clone(), camera );
+		// Intercept the position of the click
+		var intersects = raycaster.intersectObjects( objects );
+
+		if ( intersects.length > 0 ) {
+			var object = intersects[ 0 ].object
+			object.onclick = window.open(object.name)
+		}
+
+	})
+
+	document.addEventListener('mouseup', function(event)
+	{
+		mouse.isClicked = false;
+		mouse.x = 0;
+		mouse.y = 0;
+	})
 
-document.addEventListener('mouseup', function(event)
-{
-	mouse.isClicked = false;
-	mouse.x = 0;
-	mouse.y = 0;
-})
+	function animate()
+	{
+		requestAnimationFrame( animate );
 
-function animate()
-{
-	requestAnimationFrame( animate );
-	render();
-}
+		render();
+	}
 
-function render()
-{
-	if(!( (mouse.y>0 && earthMesh.rotation.x>1) || (mouse.y<0 && earthMesh.rotation.x<-1) ) )
+	function render()
 	{
-		earthMesh.rotation.x += mouse.y/10
-	}
-	earthMesh.rotation.y += mouse.x/5
+		if(!( (mouse.y>0 && earthMesh.rotation.x>1) || (mouse.y<0 && earthMesh.rotation.x<-1) ) )
+			{
+				earthMesh.rotation.x += mouse.y/10
+			}
+			earthMesh.rotation.y += mouse.x/5
 
-	camera.lookAt( scene.position )
+			camera.lookAt( scene.position )
 
-	renderer.render( scene, camera );
-}
+			renderer.render( scene, camera );
+		}
 
-function latLongToVector3(lat, lon, radius, heigth) {
-        var phi = (lat)*Math.PI/180;
-        var theta = (lon-180)*Math.PI/180;
+		function latLongToVector3(lat, lon, radius, heigth) {
+			var phi = (lat)*Math.PI/180;
+			var theta = (lon-180)*Math.PI/180;
 
-        var x = -(radius+heigth) * Math.cos(phi) * Math.cos(theta);
-        var y = (radius+heigth) * Math.sin(phi);
-        var z = (radius+heigth) * Math.cos(phi) * Math.sin(theta);
+			var x = -(radius+heigth) * Math.cos(phi) * Math.cos(theta);
+			var y = (radius+heigth) * Math.sin(phi);
+			var z = (radius+heigth) * Math.cos(phi) * Math.sin(theta);
 
-        return new THREE.Vector3(x,y,z);
-}
+			return new THREE.Vector3(x,y,z);
+		}
+

src/CG/PlatformBundle/Resources/public/js/load_konamis.js

@@ -75,7 +75,10 @@ $(document).ready(function() {
                 displayOverlay();
                 startAnimation('fadeInRight');
                 $('#overlay').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
-                function(){$('#overlay').addClass('animated fadeOutLeft');});
+                function(){
+                  $('#overlay').addClass('animated fadeOutLeft');
+
+                });
 
                 kkeys = [];
               }

src/CG/PlatformBundle/Resources/views/Platform/home.html.twig

@@ -12,7 +12,7 @@
 {% endblock %}
 
 {% block body %}
-<div class="page-header">
+<div class="page-header col-md-8 col-md-offset-2">
 	{{ 'cg.presentation'|trans }}
 </div>
 

web/data/data.csv

@@ -1,10 +1,14 @@
-id,lat,lon
-1,34.909568,38.991521
-2,32.038198, 35.216177
-3,10.473390, -10.797727
-4,9.554772, 8.194058
-5,14.404424, -14.505146
-6,6.324517, -9.399779
-7,8.607039, -11.748377
-8,17.866956, -2.140406
-9,12.514220, 122.445973
+id,lat,lon,link
+1,34.909568,38.991521,http://donate.handicapinternational.be/fr/projet/syrie-3-ans-de-conflit
+2,32.038198, 35.216177,http://www.actioncontrelafaim.org/fr/content/territoire-palestinien-occupe
+3,10.473390, -10.797727,http://www.unicef.fr/pages/landingpage/EBOLA/index.html?gclid=Cj0KEQiAqYCkBRC4xNiSu5-Y-PcBEiQA96OM9HhMUqQEHhXwKCWlcYDSmN0NvP2bi9L1hg3KyYH9yPIaAs-m8P8HAQ
+4,9.554772, 8.194058,http://www.unicef.fr/pages/landingpage/EBOLA/index.html?gclid=Cj0KEQiAqYCkBRC4xNiSu5-Y-PcBEiQA96OM9HhMUqQEHhXwKCWlcYDSmN0NvP2bi9L1hg3KyYH9yPIaAs-m8P8HAQ
+5,14.404424, -14.505146,http://www.unicef.fr/pages/landingpage/EBOLA/index.html?gclid=Cj0KEQiAqYCkBRC4xNiSu5-Y-PcBEiQA96OM9HhMUqQEHhXwKCWlcYDSmN0NvP2bi9L1hg3KyYH9yPIaAs-m8P8HAQ
+6,6.324517, -9.399779,http://www.unicef.fr/pages/landingpage/EBOLA/index.html?gclid=Cj0KEQiAqYCkBRC4xNiSu5-Y-PcBEiQA96OM9HhMUqQEHhXwKCWlcYDSmN0NvP2bi9L1hg3KyYH9yPIaAs-m8P8HAQ
+7,8.607039, -11.748377,http://www.unicef.fr/pages/landingpage/EBOLA/index.html?gclid=Cj0KEQiAqYCkBRC4xNiSu5-Y-PcBEiQA96OM9HhMUqQEHhXwKCWlcYDSmN0NvP2bi9L1hg3KyYH9yPIaAs-m8P8HAQ
+8,17.866956, -2.140406,http://www.unicef.fr/pages/landingpage/EBOLA/index.html?gclid=Cj0KEQiAqYCkBRC4xNiSu5-Y-PcBEiQA96OM9HhMUqQEHhXwKCWlcYDSmN0NvP2bi9L1hg3KyYH9yPIaAs-m8P8HAQ
+9,48.876771, 31.545419,https://www.croix-rouge.fr/Je-donne/Don-ponctuel?elk_daf_code=UA106
+10,-9.511013, -51.818197,http://www.planfrance.org/parrainage
+11,19.163752, 103.196883,https://dons.medecinsdumonde.org/abov/abovision2.php?P1=MDM&P2=DEF2&PG=FAIRE1DON&typabo=1&PROMO=146202&utm_source=CN14&utm_medium=Landing%20Page&utm_campaign=MDMFA14
+12,18.900009, -72.252077,https://dons.solidarites.org/a/mon-don
+13,46.711090, 2.630969,http://donenligne.secours-catholique.org/abov/abovision2.php?PG=FAIRE1DON&P1=SCC&P2=ALL_URGE&typabo=1