Updated code for webview

mapview/js/mapviewgl.js

@@ -1,8 +1,6 @@
 if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 var camera, controls, scene, renderer;
-var canvas_t=[];
-var context_t=[];
 var clock = new THREE.Clock();
 var WIDTH = window.innerWidth , HEIGHT = window.innerHeight
 
@@ -10,7 +8,6 @@ window.onload = function() {
 loadData(function() {
 init();
 animate();
-render();
 });
 }
 
@@ -22,7 +19,7 @@ function loadData(_callback) {
 
 	xmlhttp.onreadystatechange = function() {
 	    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-	        jsonEmpire = JSON.parse(xmlhttp.responseText);
+	        jsonEmpire = JSON.parse(xmlhttp.responseText)['ATS_Navcomp_DB']['empires'];
 	        _callback();
 
 	    }
@@ -34,81 +31,66 @@ function loadData(_callback) {
 
 function reset_view() {
 	camera.position.set(-9300,50,550);
-	controls.target.x = jsonEmpire[1]['borders'][0].x;
+	controls.target.x = scene.getObjectByName("Federation").position.x;
-    	controls.target.y = jsonEmpire[1]['borders'][0].y;
+	controls.target.y = scene.getObjectByName("Federation").position.y;
-      	controls.target.z = jsonEmpire[1]['borders'][0].z;
+	controls.target.z = scene.getObjectByName("Federation").position.z;
+  camera.updateProjectionMatrix();
+	render();
 }
 
 function init() {
 				scene = new THREE.Scene();
-        //scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
         renderer = new THREE.WebGLRenderer();
         renderer.setSize( window.innerWidth, window.innerHeight );
         document.body.appendChild( renderer.domElement );
-
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 
         camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1e7);
-      /*  controls = new THREE.TrackballControls( camera, renderer.domElement );  // I don't like how the Trackball controls work. 
-				controls.rotateSpeed = 1.0;
-				controls.zoomSpeed = 1.2;
-				controls.panSpeed = 0.8;
-				controls.noZoom = false;                   
-				controls.noPan = true;
-				controls.staticMoving = true;
-				controls.dynamicDampingFactor = 0.3;
-				controls.keys = [ 65, 83, 68 ];
-        camera.position.set(-8500,50,550);
-/*        camera.target =  new THREE.Vector3().addVectors(/*new line for readability*/
-            //  new THREE.Vector3(-9800,200,0), camera.getWorldDirection()); */
-              //camera.target = new THREE.Vector3(-9197,0,0);                                           //  END Trackball controls
 
         controls = new THREE.OrbitControls( camera, renderer.domElement );
 				controls.enableDamping = true;
 				controls.dampingFactor = 0.25;
 				controls.enableZoom = true;
-        camera.position.set(-9300,50,550);
   		  controls.addEventListener( 'change', render );
 
 
 
-var borders=[];
+
-var geometry=[];
+
-var material=[];
+
-var planets=[];
+
-var labels=[];
-var bases=[];
 var Text2D = THREE_Text.Text2D;
 var SpriteText2D = THREE_Text.SpriteText2D;
 var textAlign = THREE_Text.textAlign
 var raycaster = new THREE.Raycaster();
 var mouse = new THREE.Vector2();
-var rays = [];
+var b_geometry, b_material, b_mesh, p_geometry, p_material, p_mesh, s_geometry, s_material, s_mesh, l_text;
+
+
 
-jsonEmpire = jsonEmpire['ATS_Navcomp_DB']['empires'];
 
 for (var key in jsonEmpire) {
   area=jsonEmpire[key];
-  // Border Generation. If it's not visible, don't generate it, dummy.
+
   for (var key2 in area['borders']) {
 			var border = area['borders'][key2];
 
- 	geometry[border.name] = new THREE.SphereGeometry( border.radius, 10, 10 ); 
+		  b_geometry = new THREE.SphereGeometry( border.radius, 10, 10 );
-  	material[border.name] = new THREE.MeshBasicMaterial( { color: area.color, wireframe: true} );
+		  b_material = new THREE.MeshBasicMaterial( { color: area.color, wireframe: true} );
-	borders[border.name] = new THREE.Mesh( geometry[border.name], material[border.name] );
+			b_mesh = new THREE.Mesh( b_geometry, b_material );b_mesh
-  	borders[border.name].position.x = border.x;
+		  b_mesh.position.x = border.x;
-  	borders[border.name].position.y = border.y;
+		  b_mesh.position.y = border.y;
-  	borders[border.name].position.z = border.z;
+		  b_mesh.position.z = border.z;
-  	borders[border.name].name = border.name;
+		  b_mesh.name = border.name;
-	scene.add( borders[border.name] );
+			scene.add( b_mesh );
 			if (border.radius > 10) {
-		var text = new Text2D(border.name, { align: textAlign.center,  font: '25px Arial', fillStyle: '#777' , antialias: false });
+				l_text = new Text2D(border.name, { align: textAlign.center,  font: '25px Arial', fillStyle: '#777' , antialias: false });
-		text.material.alphaTest = 0.5;
+				l_text.material.alphaTest = 0.5;
-		text.position.set(border.x,border.y,border.z);
+				l_text.position.set(border.x,border.y,border.z);
-		text.scale.set(0.75,0.75,0.75);
+				l_text.scale.set(0.75,0.75,0.75);
-		scene.add(text);
+				scene.add(l_text);
 			}
 	}
 
@@ -117,44 +99,41 @@ for (var key in jsonEmpire) {
   // Planet Generation
   for (var key in area["planets"]) {
     var planet = area.planets[key];
-    geometry[planet.name] = new THREE.SphereGeometry( 1, 10, 10 );
+    p_geometry= new THREE.SphereGeometry( 1, 10, 10 );
-    material[planet.name] = new THREE.MeshBasicMaterial( { color: area.color, wireframe: false} );
+    p_material = new THREE.MeshBasicMaterial( { color: area.color, wireframe: false} );
-    planets[planet.name]= new THREE.Mesh( geometry[planet.name], material[planet.name] );  
+    p_mesh =  new THREE.Mesh( p_geometry, p_material );
-    planets[planet.name].position.x=planet.x;
+    p_mesh.position.x=planet.x;
-    planets[planet.name].position.y=planet.y;
+    p_mesh.position.y=planet.y;
-    planets[planet.name].position.z=planet.z;
+    p_mesh.position.z=planet.z;
-    planets[planet.name].name = planet.name;
+    p_mesh.name = planet.name;
-    var text = new Text2D(planet.name, { align: textAlign.right,  font: '12px Arial', fillStyle: '#FFF' , antialias: false });
+		scene.add( p_mesh );
-        text.material.alphaTest = 0.0;
+    l_text = new Text2D(planet.name, { align: textAlign.right,  font: '12px Arial', fillStyle: '#FFF' , antialias: false });
-        text.position.set(planet.x,planet.y,planet.z);
+    l_text.material.alphaTest = 0.0;
-        text.scale.set(0.25,0.25,0.25);
+    l_text.position.set(planet.x,planet.y,planet.z);
-        scene.add(text);
+    l_text.scale.set(0.25,0.25,0.25);
-        scene.add( planets[planet.name] );
+    scene.add(l_text);
   }
 
   // Base Generation
   for (var key in area["stations"]) {
     var base = area.stations[key];
-          var TILE_SIZE = 0.5; 
+    s_geometry = new THREE.CylinderGeometry( 0.1, 0.5*3, 0.5*3, 4 );
-          geometry[base.name] = new THREE.CylinderGeometry( 0.1, TILE_SIZE*3, TILE_SIZE*3, 4 );
+    s_material = new THREE.MeshBasicMaterial( { color: area.color, wireframe: false} );
-          material[base.name] = new THREE.MeshBasicMaterial( { color: area.color, wireframe: false} );
+    s_mesh = new THREE.Mesh( s_geometry, s_material );
-          bases[base.name] = new THREE.Mesh( geometry[base.name], material[base.name] );
+    s_mesh.position.x=base.x;
-          bases[base.name].position.x=base.x;
+    s_mesh.position.y=base.y;
-          bases[base.name].position.y=base.y;
+    s_mesh.position.z=base.z;
-          bases[base.name].position.z=base.z;
+		s_mesh.name = base.name;
-	  bases[base.name].name = base.name;
+    scene.add( s_mesh );
-          scene.add( bases[base.name] );
+  	l_text = new Text2D(base.name, { align: textAlign.left,  font: '12px Arial', fillStyle: '#ABABAB' , antialias: false });
-           var text = new Text2D(base.name, { align: textAlign.left,  font: '12px Arial', fillStyle: '#ABABAB' , antialias: false });
+    l_text.material.alphaTest = 0.0;
-               text.material.alphaTest = 0.0;
+    l_text.position.set(base.x,base.y+3,base.z);
-               text.position.set(base.x,base.y+3,base.z);
+		l_text.scale.set(0.20,0.20,0.20);
-               text.scale.set(0.20,0.20,0.20);
+    scene.add(l_text);
-               scene.add(text);
-               
-
-  }
   }
 
-    // Initial Target spot. UFP for convinence. 
+}
+    // Set view and camera to point to initial location
 		reset_view();
 
 }
@@ -163,27 +142,25 @@ window.onresize = function() {
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
-        
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 				render();
 
 }
-
 function animate() {
 				var delta = clock.getDelta();
 	        requestAnimationFrame( animate );
 	        scene.updateMatrixWorld()
 					controls.update(delta);
-        renderer.render(scene, camera);
+	        render();
+
+
 			}
 
 
 function render () {
-				
+		//requestAnimationFrame( render );
-      requestAnimationFrame( animate );
-      
     renderer.render( scene, camera );
 
 }
@@ -219,6 +196,9 @@ function zoomfocus(name) {
 					var vantage = new THREE.Vector3( 5, 60 , 150 );
 					focus.add(vantage);
 					camera.position.set(focus.x,focus.y,focus.z);
+					camera.updateProjectionMatrix();
+					render();
+
 
 			}
 

mapview/webviewgl.htm

@@ -114,15 +114,14 @@
     					<option value=''></option>
     				</select> </span>
     				<br/><input type="checkbox" name="objtype" id="cbp" value="planets" onclick="populateUserFields();"><label for="cbp"> Planets</label> <input type="checkbox" name="objtype" id="cbs" value="stations" onclick="populateUserFields();"> <label for="cbs">Stations</label>
-		<br><button id="submitfindbyname" class="btn">Find</button>
+    			  <br /><button id="submitfindbyname" class="btn">Find</button>
     		  </div>
-		
     			<div class="wvg-tools" id="Info">
     				<span> This tool was designed by Frey @ ATSMUSH. It is based on MapView for ATS with data used from the Navcomp MUSHClient plugin with permission. </span>
     			</div>
-	</div> <div class="reset-container"><span class="reset-button">  Reset </span></div>
+    		</div>
+    		<div class="reset-container"><span class="reset-button">  Reset </span></div>
 
       </div>
   </body>
-  
 </html>