Updated stl viewer to add wireframe mode

web/SystemAO/utilities/stlViewer.html

@@ -59,11 +59,24 @@
 			<a id="displayFilepath" style="cursor: pointer;" onclick="openThisFileInFM(this);"></a>
 			<p>{model_dimension}</p>
 			<p id="filesize"></p>
+			<div>
+				<input type="checkbox" id="showWireframe" name="showWireframe" onchange="setMeshToWireframe(this.checked);">
+				<label for="showWireframe">Show Wireframe</label>
+			</div>
+			<br>
 		</div>
 		<script>
 			//Get file information from the hash info
 			var files = ao_module_loadInputFiles();
 			var file = "";
+
+			//Rendering materials
+			var outlineMaterial = new THREE.MeshBasicMaterial( { color: 0x1f1f1f, side: THREE.BackSide, wireframe: true } );
+			var mainMaterial = new THREE.MeshPhongMaterial( { 
+				color: 0x70721e, 
+				specular: 0x050505, 
+				shininess: 100,
+			});
 			if (files.length > 0){
 				file = files[0];
 				$("#filename").text(file.filename);
@@ -133,9 +146,7 @@
 				var loader = new THREE.STLLoader();
 				
 				loader.load( filename, function ( geometry ) {
-
-					var material = new THREE.MeshPhongMaterial( { color: 0x70721e, specular: 0x0c0c0c, shininess: 100 } );
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new THREE.Mesh( geometry, mainMaterial );
 					stlMesh = mesh;
 					const center = new THREE.Vector3();
 
@@ -148,18 +159,16 @@
 					mesh.updateMatrixWorld();
 					console.log((bbox.max.x - bbox.min.x));
 					mesh.rotateOnAxis(new THREE.Vector3( 1, 0, 0 ), -1.57079633);
-					//mesh.position.set(-1 * (bbox.max.x + bbox.min.x) / 2, -1 * (bbox.max.y + bbox.min.y) / 2, -1 * (bbox.max.z + bbox.min.z) / 2);
 					mesh.geometry.center()
 				
 					mesh.updateMatrixWorld();
 					console.log("Setting mesh world position: ", mesh.getWorldPosition())
-					//mesh.rotation.set( 0,  0, 0);
 					render();
 
 					var box = new THREE.Box3().setFromObject(mesh);
 					console.log( box.min, box.max, box.getSize(center) );
 					objectSize = box.getSize(center);
-					fillValue("model_dimension","W,D,H: " + round(objectSize.x * 10) + ", " + round(objectSize.z * 10) + ", " + round(objectSize.y * 10) + " mm");
+					fillValue("model_dimension",round(objectSize.x * 10) + " x " + round(objectSize.z * 10) + " x " + round(objectSize.y * 10) + " mm");
 					
 					var helper = new THREE.Box3Helper( box, 0xffff00 );
 					scene.add( helper );
@@ -174,9 +183,9 @@
 
 
 				// Lights
-				scene.add( new THREE.HemisphereLight( 0x898989, 0x3f3f3f ) );
-				addShadowedLight( 1, 1, 1, 0x898989, 1.35 );
-				addShadowedLight( 0.5, 1, - 1, 0xcccccc, 1 );
+				scene.add( new THREE.HemisphereLight( 0x898989, 0x3f3f3f, 2) );
+				addShadowedLight( -50, 30, -100, 0xfafafa, 1 );
+				addShadowedLight( 50, -10, 100, 0xcccccc, 0.6);
 
 				//Create renderer
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -221,6 +230,14 @@
 
 			}
 
+			function setMeshToWireframe(isWireframe){
+				if (isWireframe){
+					stlMesh.material = outlineMaterial;
+				}else{
+					stlMesh.material = mainMaterial;
+				}
+			}
+
 			function onWindowResize() {
 
 				camera.aspect = window.innerWidth / window.innerHeight;