Intégration webgl ok

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

@@ -41,26 +41,11 @@ 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;
-		console.log('image loaded successfully')
-	}, onProgress, onError);
-
-
-
-
-
+		loader.load( '../img/earthTexture.jpg', function ( image ) {
+			texture.image = image;
+			texture.needsUpdate = true;
+		} );
 
 	var geometry   = new THREE.SphereGeometry(0.5, 32, 32)
 	var material  = new THREE.MeshPhongMaterial()
@@ -69,16 +54,45 @@ function init()
 
 	scene.add(earthMesh)
 
+	d3.csv("../data/data.csv", type, function(error, data) {
+		data.forEach( function(value,index,array) {
+			var lat = value.lat
+			var lon =  value.lon
+
+			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;
+
+			earthMesh.add(cube);
+		});
+	});
+/*
+	// 34.909568, 38.991521
+	// 45.926093, 4.832203
+
+
+*/
 	// Rendering
 	renderer = new THREE.WebGLRenderer({alpha:true});
-	renderer.setClearColor( 0xeeeeee, 1);
-	renderer.setSize(window.innerWidth, window.innerHeight);
+	renderer.setClearColor( 0xffffff, 1);
+	renderer.setSize(window.innerWidth/2, window.innerHeight/2);
 	container.appendChild( renderer.domElement );
 
 	window.addEventListener( 'resize', onWindowResize, false );
 
 }
 
+function type(d)
+{
+	d.value = +d.value;
+	return d;
+}
+
 function onWindowResize()
 {
 	windowHalfX = window.innerWidth / 2;
@@ -87,46 +101,57 @@ function onWindowResize()
 	camera.aspect = window.innerWidth / window.innerHeight;
 	camera.updateProjectionMatrix();
 
-	renderer.setSize( window.innerWidth, window.innerHeight );
+	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)
-
-	document.addEventListener('mousedown', function(event)
 	{
-		mouse.isClicked = true;
-	})
+		mouse.x	= (event.clientX / window.innerWidth ) - 0.5
+		mouse.y	= (event.clientY / window.innerHeight) - 0.5
+	}
+}, false)
 
-	document.addEventListener('mouseup', function(event)
-	{
-		mouse.isClicked = false;
-		mouse.x = 0;
-		mouse.y = 0;
-	})
+document.addEventListener('mousedown', function(event)
+{
+	mouse.isClicked = true;
+})
 
-	function animate()
+document.addEventListener('mouseup', function(event)
+{
+	mouse.isClicked = false;
+	mouse.x = 0;
+	mouse.y = 0;
+})
+
+function animate()
+{
+	requestAnimationFrame( animate );
+	render();
+}
+
+function render()
+{
+	if(!( (mouse.y>0 && earthMesh.rotation.x>1) || (mouse.y<0 && earthMesh.rotation.x<-1) ) )
 	{
-		requestAnimationFrame( animate );
-		render();
+		earthMesh.rotation.x += mouse.y/10
 	}
+	earthMesh.rotation.y += mouse.x/5
 
-	function render()
-	{
-		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;
+
+        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);
+}

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

@@ -15,7 +15,7 @@
 </div>
 
 
-	<div id="canvas_container">
+	<div id="canvas_container" class="col-md-8 col-md-offset-2">
 
 	</div>
 
@@ -27,6 +27,7 @@
 {% block javascripts %}
 {{ parent() }}
 <script src="{{ asset('bundles/cgplatform/js/load_canvas_content.js') }}"></script>
+<script src="{{ asset('bundles/cgplatform/js/d3.min.js') }}"></script>
 <script src="{{ asset('bundles/cgplatform/js/three.min.js') }}"></script>
 <script src="{{ asset('bundles/cgplatform/js/earth.js') }}"></script>
 

web/app_dev.php

@@ -9,13 +9,13 @@
 
 // This check prevents access to debug front controllers that are deployed by accident to production servers.
 // Feel free to remove this, extend it, or make something more sophisticated.
-if (isset($_SERVER['HTTP_CLIENT_IP'])
+/*if (isset($_SERVER['HTTP_CLIENT_IP'])
     || isset($_SERVER['HTTP_X_FORWARDED_FOR'])
     || !(in_array(@$_SERVER['REMOTE_ADDR'], array('127.0.0.1', 'fe80::1', '::1')) || php_sapi_name() === 'cli-server')
 ) {
     header('HTTP/1.0 403 Forbidden');
     exit('You are not allowed to access this file. Check '.basename(__FILE__).' for more information.');
-}
+}*/
 
 $loader = require_once __DIR__.'/../app/bootstrap.php.cache';
 Debug::enable();

web/data/data.csv

@@ -0,0 +1,10 @@
+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