3d preview of key working

web/3d_preview.js

@@ -0,0 +1,119 @@
+var container;
+
+var camera, cameraTarget, scene, renderer;
+
+function preview_load(data) {
+    scene = new THREE.Scene();
+
+    var loader = new THREE.STLLoader();
+    geometry = loader.parse( data );
+
+    geometry.computeBoundingBox();
+    var centerX = 0.5 * (geometry.boundingBox.max.x + geometry.boundingBox.min.x);
+    var centerY = 0.5 * (geometry.boundingBox.max.y + geometry.boundingBox.min.y);
+    var centerZ = 0.5 * (geometry.boundingBox.max.z + geometry.boundingBox.min.z);
+    console.log(centerX, centerY, centerZ);
+
+    var material = new THREE.MeshPhongMaterial( { color: 0x775500, specular: 0x111111, shininess: 200 } );
+    var mesh = new THREE.Mesh( geometry, material );
+
+    var scale = 0.03;
+    mesh.position.set(-centerX * scale, -centerY * scale, -centerZ * scale);
+    //mesh.rotation.set( - Math.PI / 2, 0, 0 );
+    mesh.scale.set( scale, scale, scale );
+
+    mesh.castShadow = true;
+    mesh.receiveShadow = true;
+
+    scene.add( mesh );
+
+    // Lights
+
+    scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
+
+    addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
+    addShadowedLight( -1, 1, -1, 0xffffff, 1.35 );
+}
+
+function preview_init() {
+    container = document.getElementById("key_preview");
+
+    camera = new THREE.PerspectiveCamera( 35, container.offsetWidth / container.offsetHeight, 1, 15 );
+    camera.position.set( 3, 0, 3 );
+
+    cameraTarget = new THREE.Vector3( 0, 0, 0 );
+
+    // renderer
+
+    renderer = new THREE.WebGLRenderer( { antialias: true } );
+    renderer.setClearColor( 0xFFFFFF );
+    renderer.setPixelRatio( window.devicePixelRatio );
+    renderer.setSize( container.offsetWidth, container.offsetHeight );
+
+    renderer.gammaInput = true;
+    renderer.gammaOutput = true;
+
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.renderReverseSided = false;
+
+    container.appendChild( renderer.domElement );
+
+    window.addEventListener( 'resize', onWindowResize, false );
+    console.log("Init.");
+}
+
+function addShadowedLight( x, y, z, color, intensity ) {
+
+    var directionalLight = new THREE.DirectionalLight( color, intensity );
+    directionalLight.position.set( x, y, z );
+    scene.add( directionalLight );
+
+    directionalLight.castShadow = true;
+
+    var d = 1;
+    directionalLight.shadow.camera.left = -d;
+    directionalLight.shadow.camera.right = d;
+    directionalLight.shadow.camera.top = d;
+    directionalLight.shadow.camera.bottom = -d;
+
+    directionalLight.shadow.camera.near = 1;
+    directionalLight.shadow.camera.far = 4;
+
+    directionalLight.shadow.mapSize.width = 1024;
+    directionalLight.shadow.mapSize.height = 1024;
+
+    directionalLight.shadow.bias = -0.005;
+
+}
+
+function onWindowResize() {
+
+    camera.aspect = container.offsetWidth / container.offsetHeight;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize( container.offsetWidth, container.offsetHeight );
+
+}
+
+function preview_animate() {
+    if(scene) {
+        onWindowResize();
+        requestAnimationFrame( preview_animate );
+
+        render();
+        console.log("Animate.");
+    }
+}
+
+function render() {
+
+    var timer = Date.now() * 0.0005;
+
+    camera.position.x = Math.cos( timer ) * 3;
+    camera.position.z = Math.sin( timer ) * 3;
+
+    camera.lookAt( cameraTarget );
+
+    renderer.render( scene, camera );
+
+}

web/STLLoader.js

@@ -0,0 +1,284 @@
+/**
+ * @author aleeper / http://adamleeper.com/
+ * @author mrdoob / http://mrdoob.com/
+ * @author gero3 / https://github.com/gero3
+ * @author Mugen87 / https://github.com/Mugen87
+ *
+ * Description: A THREE loader for STL ASCII files, as created by Solidworks and other CAD programs.
+ *
+ * Supports both binary and ASCII encoded files, with automatic detection of type.
+ *
+ * The loader returns a non-indexed buffer geometry.
+ *
+ * Limitations:
+ *  Binary decoding supports "Magics" color format (http://en.wikipedia.org/wiki/STL_(file_format)#Color_in_binary_STL).
+ *  There is perhaps some question as to how valid it is to always assume little-endian-ness.
+ *  ASCII decoding assumes file is UTF-8.
+ *
+ * Usage:
+ *  var loader = new THREE.STLLoader();
+ *  loader.load( './models/stl/slotted_disk.stl', function ( geometry ) {
+ *    scene.add( new THREE.Mesh( geometry ) );
+ *  });
+ *
+ * For binary STLs geometry might contain colors for vertices. To use it:
+ *  // use the same code to load STL as above
+ *  if (geometry.hasColors) {
+ *    material = new THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: THREE.VertexColors });
+ *  } else { .... }
+ *  var mesh = new THREE.Mesh( geometry, material );
+ */
+
+
+THREE.STLLoader = function ( manager ) {
+
+	this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
+
+};
+
+THREE.STLLoader.prototype = {
+
+	constructor: THREE.STLLoader,
+
+	load: function ( url, onLoad, onProgress, onError ) {
+
+		var scope = this;
+
+		var loader = new THREE.FileLoader( scope.manager );
+		loader.setResponseType( 'arraybuffer' );
+		loader.load( url, function ( text ) {
+
+			onLoad( scope.parse( text ) );
+
+		}, onProgress, onError );
+
+	},
+
+	parse: function ( data ) {
+
+		var isBinary = function () {
+
+			var expect, face_size, n_faces, reader;
+			reader = new DataView( binData );
+			face_size = ( 32 / 8 * 3 ) + ( ( 32 / 8 * 3 ) * 3 ) + ( 16 / 8 );
+			n_faces = reader.getUint32( 80, true );
+			expect = 80 + ( 32 / 8 ) + ( n_faces * face_size );
+
+			if ( expect === reader.byteLength ) {
+
+				return true;
+
+			}
+
+			// An ASCII STL data must begin with 'solid ' as the first six bytes.
+			// However, ASCII STLs lacking the SPACE after the 'd' are known to be
+			// plentiful.  So, check the first 5 bytes for 'solid'.
+
+			// US-ASCII ordinal values for 's', 'o', 'l', 'i', 'd'
+			var solid = [ 115, 111, 108, 105, 100 ];
+
+			for ( var i = 0; i < 5; i ++ ) {
+
+				// If solid[ i ] does not match the i-th byte, then it is not an
+				// ASCII STL; hence, it is binary and return true.
+
+				if ( solid[ i ] != reader.getUint8( i, false ) ) return true;
+
+ 			}
+
+			// First 5 bytes read "solid"; declare it to be an ASCII STL
+			return false;
+
+		};
+
+		var binData = this.ensureBinary( data );
+
+		return isBinary() ? this.parseBinary( binData ) : this.parseASCII( this.ensureString( data ) );
+
+	},
+
+	parseBinary: function ( data ) {
+
+		var reader = new DataView( data );
+		var faces = reader.getUint32( 80, true );
+
+		var r, g, b, hasColors = false, colors;
+		var defaultR, defaultG, defaultB, alpha;
+
+		// process STL header
+		// check for default color in header ("COLOR=rgba" sequence).
+
+		for ( var index = 0; index < 80 - 10; index ++ ) {
+
+			if ( ( reader.getUint32( index, false ) == 0x434F4C4F /*COLO*/ ) &&
+				( reader.getUint8( index + 4 ) == 0x52 /*'R'*/ ) &&
+				( reader.getUint8( index + 5 ) == 0x3D /*'='*/ ) ) {
+
+				hasColors = true;
+				colors = [];
+
+				defaultR = reader.getUint8( index + 6 ) / 255;
+				defaultG = reader.getUint8( index + 7 ) / 255;
+				defaultB = reader.getUint8( index + 8 ) / 255;
+				alpha = reader.getUint8( index + 9 ) / 255;
+
+			}
+
+		}
+
+		var dataOffset = 84;
+		var faceLength = 12 * 4 + 2;
+
+		var geometry = new THREE.BufferGeometry();
+
+		var vertices = [];
+		var normals = [];
+
+		for ( var face = 0; face < faces; face ++ ) {
+
+			var start = dataOffset + face * faceLength;
+			var normalX = reader.getFloat32( start, true );
+			var normalY = reader.getFloat32( start + 4, true );
+			var normalZ = reader.getFloat32( start + 8, true );
+
+			if ( hasColors ) {
+
+				var packedColor = reader.getUint16( start + 48, true );
+
+				if ( ( packedColor & 0x8000 ) === 0 ) {
+
+					// facet has its own unique color
+
+					r = ( packedColor & 0x1F ) / 31;
+					g = ( ( packedColor >> 5 ) & 0x1F ) / 31;
+					b = ( ( packedColor >> 10 ) & 0x1F ) / 31;
+
+				} else {
+
+					r = defaultR;
+					g = defaultG;
+					b = defaultB;
+
+				}
+
+			}
+
+			for ( var i = 1; i <= 3; i ++ ) {
+
+				var vertexstart = start + i * 12;
+
+				vertices.push( reader.getFloat32( vertexstart, true ) );
+				vertices.push( reader.getFloat32( vertexstart + 4, true ) );
+				vertices.push( reader.getFloat32( vertexstart + 8, true ) );
+
+				normals.push( normalX, normalY, normalZ );
+
+				if ( hasColors ) {
+
+					colors.push( r, g, b );
+
+				}
+
+			}
+
+		}
+
+		geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( vertices ), 3 ) );
+		geometry.addAttribute( 'normal', new THREE.BufferAttribute( new Float32Array( normals ), 3 ) );
+
+		if ( hasColors ) {
+
+			geometry.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( colors ), 3 ) );
+			geometry.hasColors = true;
+			geometry.alpha = alpha;
+
+		}
+
+		return geometry;
+
+	},
+
+	parseASCII: function ( data ) {
+
+		var geometry, length, patternFace, patternNormal, patternVertex, result, text;
+		geometry = new THREE.BufferGeometry();
+		patternFace = /facet([\s\S]*?)endfacet/g;
+
+		var vertices = [];
+		var normals = [];
+
+		var normal = new THREE.Vector3();
+
+		while ( ( result = patternFace.exec( data ) ) !== null ) {
+
+			text = result[ 0 ];
+			patternNormal = /normal[\s]+([\-+]?[0-9]+\.?[0-9]*([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+/g;
+
+			while ( ( result = patternNormal.exec( text ) ) !== null ) {
+
+				normal.x = parseFloat( result[ 1 ] );
+				normal.y = parseFloat( result[ 3 ] );
+				normal.z = parseFloat( result[ 5 ] );
+
+			}
+
+			patternVertex = /vertex[\s]+([\-+]?[0-9]+\.?[0-9]*([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+[\s]+([\-+]?[0-9]*\.?[0-9]+([eE][\-+]?[0-9]+)?)+/g;
+
+			while ( ( result = patternVertex.exec( text ) ) !== null ) {
+
+				vertices.push( parseFloat( result[ 1 ] ), parseFloat( result[ 3 ] ), parseFloat( result[ 5 ] ) );
+				normals.push( normal.x, normal.y, normal.z );
+
+			}
+
+		}
+
+		geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( vertices ), 3 ) );
+		geometry.addAttribute( 'normal', new THREE.BufferAttribute( new Float32Array( normals ), 3 ) );
+
+		return geometry;
+
+	},
+
+	ensureString: function ( buf ) {
+
+		if ( typeof buf !== "string" ) {
+
+			var array_buffer = new Uint8Array( buf );
+			var strArray = [];
+			for ( var i = 0; i < buf.byteLength; i ++ ) {
+
+				strArray.push(String.fromCharCode( array_buffer[ i ] )); // implicitly assumes little-endian
+
+			}
+			return strArray.join('');
+
+		} else {
+
+			return buf;
+
+		}
+
+	},
+
+	ensureBinary: function ( buf ) {
+
+		if ( typeof buf === "string" ) {
+
+			var array_buffer = new Uint8Array( buf.length );
+			for ( var i = 0; i < buf.length; i ++ ) {
+
+				array_buffer[ i ] = buf.charCodeAt( i ) & 0xff; // implicitly assumes little-endian
+
+			}
+			return array_buffer.buffer || array_buffer;
+
+		} else {
+
+			return buf;
+
+		}
+
+	}
+
+};

web/index.htm

@@ -2,21 +2,24 @@
 <head>
 <title>keygen</title>
 <script type="text/javascript" src="jquery.min.js"></script>
+<script type="text/javascript" src="three.min.js"></script>
+<script type="text/javascript" src="STLLoader.js"></script>
+<script type="text/javascript" src="3d_preview.js"></script>
 <script type="text/javascript" src="keygen.js"></script>
 </head>
 <body>
 <h1>keygen</h1>
-<form>
+<form id="key_form">
 <div>Type: <select id="key_type"></select></div>
 <div>Outline: <select id="key_outline"></select></div>
 <div>Warding: <select id="key_warding"></select></div>
 <div id="key_description"></div>
 <div>Bitting: <input id="key_bitting"></input></div>
-<input type="submit" value="Generate"></input>
+<input type="submit" value="Generate" id="generate_button"></input>
 </form>
 <div id="please_wait" style="display:none;">Please wait...</div>
 <div id="generated_key" style="display:none;">
-    <div id="key_preview"></div>
+    <div id="key_preview" style="width:200px; height:400px;"></div>
     <button id="key_download">Download</button>
 </div>
 </body>

web/keygen.js

@@ -1,6 +1,7 @@
 keygen_endpoint = "http://localhost:8080"; // Change me to your serve.py endpoint
 
 var key_metadata;
+var key_stl;
 
 function populate_types() {
     $.getJSON( keygen_endpoint, function( data ) {
@@ -43,7 +44,41 @@ function populate_outlines_wardings() {
     });
 }
 
+function generate_key() {
+    $("#generated_key").hide();
+    $("#generate_button").prop("disabled", true);
+    $("#please_wait").show();
+    get_data = $.param({
+        "key": $("#key_type").val(),
+        "outline": $("#key_outline").val(),
+        "warding": $("#key_warding").val(),
+        "bitting": $("#key_bitting").val(),
+    });
+
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", keygen_endpoint + "?" + get_data, true);
+    xhr.responseType = "arraybuffer";
+
+    xhr.onload = function(e) {
+        if (this.status == 200) {
+            key_stl = this.response;
+            preview_load(key_stl);
+            preview_animate();
+            $("#generated_key").show();
+        } else {
+            alert("An error occurred");
+        }
+        $("#please_wait").hide();
+        $("#generate_button").prop("disabled", false);
+    };
+
+    xhr.send();
+}
+
 $(document).ready(function() {
     $("#key_type").on("change", populate_outlines_wardings);
+    $("#key_form").submit(function(e) {generate_key(); e.preventDefault();});
+
     populate_types();
+    preview_init();
 });