├── notes.doc
├── asset
    ├── arrowUp.png
    ├── arrowDown.png
    ├── arrowLeft.png
    ├── arrowRight.png
    ├── cube_vnt.stl
    ├── monkey_vtn.stl
    ├── torus_vtn.stl
    ├── arrowUpOver.png
    ├── arrowDownOver.png
    ├── arrowLeftOver.png
    ├── arrowRightOver.png
    ├── cone_vtn_100v.stl
    ├── cylinder_vtn_200v.stl
    └── sphere_vtn_32x32.stl
├── README.md
├── default.css
├── index.html
└── STL.js


/notes.doc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/notes.doc


--------------------------------------------------------------------------------
/asset/arrowUp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/asset/arrowUp.png


--------------------------------------------------------------------------------
/asset/arrowDown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/asset/arrowDown.png


--------------------------------------------------------------------------------
/asset/arrowLeft.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/asset/arrowLeft.png


--------------------------------------------------------------------------------
/asset/arrowRight.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/asset/arrowRight.png


--------------------------------------------------------------------------------
/asset/cube_vnt.stl:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/asset/cube_vnt.stl


--------------------------------------------------------------------------------
/asset/monkey_vtn.stl:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/asset/monkey_vtn.stl


--------------------------------------------------------------------------------
/asset/torus_vtn.stl:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/asset/torus_vtn.stl


--------------------------------------------------------------------------------
/asset/arrowUpOver.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/asset/arrowUpOver.png


--------------------------------------------------------------------------------
/asset/arrowDownOver.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/asset/arrowDownOver.png


--------------------------------------------------------------------------------
/asset/arrowLeftOver.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/asset/arrowLeftOver.png


--------------------------------------------------------------------------------
/asset/arrowRightOver.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/asset/arrowRightOver.png


--------------------------------------------------------------------------------
/asset/cone_vtn_100v.stl:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/asset/cone_vtn_100v.stl


--------------------------------------------------------------------------------
/asset/cylinder_vtn_200v.stl:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/asset/cylinder_vtn_200v.stl


--------------------------------------------------------------------------------
/asset/sphere_vtn_32x32.stl:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yeuchi/STLDecoder/HEAD/asset/sphere_vtn_32x32.stl


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # STLDecoder
 2 | 3D format: STL file decoder for javascript \
 3 | - binary 
 4 | - ascii
 5 | 
 6 | Page: https://yeuchi.github.io/STLDecoder/index.html
 7 | 
 8 | <img width="700" src="https://user-images.githubusercontent.com/1282659/131421807-a0ffd819-fd6a-4727-9582-11090f8bca16.png">
 9 | 
10 | # References
11 | 1. Wiki
12 | https://en.wikipedia.org/wiki/STL_(file_format)
13 | 


--------------------------------------------------------------------------------
/default.css:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | /* CSS Document */
 3 | 
 4 | 
 5 | canvas {
 6 |         border: 1px dashed red;
 7 | 		position:relative;
 8 | 		left: 50;
 9 | 		top: 20;
10 |     }
11 | 	
12 | button {
13 | 	width: 200px;
14 | }
15 | 
16 | #divLeft {
17 | 	margin-left: 160px;
18 | 	float: left;
19 | 	position:relative; 
20 | 	top:20; 
21 | 	left:190;
22 | }
23 | 
24 | #divRight {
25 | 	margin-left: 20px;
26 | 	float: left;
27 | 	position:relative; 
28 | 	top:-15; 
29 | 	left:280;
30 | }
31 | 
32 | #divCanvas {
33 | 	float: left;
34 | 	position: relative;
35 | }
36 | 
37 | #divControls {
38 | 	margin-left: 10px;
39 | 	top:-450; 
40 | 	left:470; 
41 | 	position:relative;
42 |         float: left;
43 | }
44 | 
45 | 
46 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <!--
  4 | 	Module:			DecodeSTL.html
  5 |     
  6 |     Description:	decode STL 3D file
  7 |     				extending work of Devon Govett from bmp.js
  8 |     
  9 | 	Reference:
 10 |     	BMP.js		http://devongovett.github.com/bmp.js/
 11 |         STL sample:	http://www.thingiverse.com/thing:9656  (I think?)
 12 |         
 13 |     Author(s):		Devon Govett provide a bmp decoding example.
 14 |     				C.T. Yeung modify to decode STL.
 15 |     
 16 |     History:		
 17 |     20Dec11			1st crack at it								cty
 18 |     23Dec11			loading vertexies OK
 19 |     				need to test normal when rendering shades
 20 |                     rotation is off when passed 180 degrees		cty
 21 |     24Dec11			add a few more models
 22 | -->
 23 | <head>
 24 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 25 | <title>STL decoder</title>
 26 | 
 27 | 	<LINK REL=StyleSheet HREF="default.css" TYPE="text/css"> 
 28 |     <script src="jquery_1.11.1.js"></script>
 29 | 	<script src="STL.js"></script>
 30 |     <script>
 31 | 		$(document).ready(function() {
 32 | 			var canvas = document.getElementById("myCanvas");
 33 | 			var context = canvas.getContext("2d");
 34 | 			var rX = 270;
 35 | 			var rY = 0;
 36 | 			var rZ = 0;
 37 | 			var STEP = 10;
 38 | 			var instance;
 39 | 			
 40 | 			loadSTL();
 41 | 			
 42 | 			$("#slider").change(function() {
 43 | 				if(null!=instance)
 44 | 					update();
 45 | 			});
 46 | 			
 47 | 			// rotation controls
 48 | 			$("#imgLeft").click(function() {
 49 | 			
 50 | 				rY -= STEP;
 51 | 				if(rY<0)
 52 | 					rY = 360+rY;
 53 | 				
 54 | 				$("#ypos").html("Rotate Y: "+rY);
 55 | 				if(null==instance)
 56 | 					loadSTL();
 57 | 				else
 58 | 					update();
 59 | 			});
 60 | 			
 61 | 			$("#imgRight").click(function() {
 62 | 				
 63 | 				rY += STEP;
 64 | 				if(rY>360)
 65 | 					rY -= 360;
 66 | 				
 67 | 				$("#ypos").html("Rotate Y: "+rY);
 68 | 				if(null==instance)
 69 | 					loadSTL();
 70 | 				else
 71 | 					update();
 72 | 			});
 73 | 			
 74 | 			$("#combo").change(function() {
 75 | 				loadSTL();
 76 | 			});
 77 | 			
 78 | 			function loadSTL() {
 79 | 				var url = "asset/" + $("#combo").val();
 80 | 				STL.load(url, render);
 81 | 				
 82 | 			}
 83 | 			
 84 | 			function render(stl) {
 85 | 				instance = stl;
 86 | 				update();
 87 | 			}
 88 | 			
 89 | 			function update() {	
 90 | 				var mag = $("#slider").val();
 91 | 				context.clearRect(0,0,canvas.width, canvas.height);
 92 | 				context = canvas.getContext('2d');
 93 | 				context.strokeStyle = 'black';
 94 | 				instance.decode();
 95 | 				instance.drawWireFrame(context, canvas.width, canvas.height, mag,rX, rY, rZ);
 96 | 			}
 97 | 			
 98 | 			function getRequestAnimation() {
 99 | 				    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
100 | 							        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
101 | 				    window.requestAnimationFrame = requestAnimationFrame;
102 | 			}
103 | 			getRequestAnimation();
104 | 			
105 | 			function step() {
106 | 				    rX += 2;
107 | 				    if(rX>360)
108 | 					    rX -= 360;
109 | 				    
110 | 				    $("#xpos").html("Rotate X: "+rX);
111 | 				    
112 | 				    if(null==instance)
113 | 					    loadSTL();
114 | 				    else
115 | 					    update();
116 | 				      
117 | 				    requestAnimationFrame(step);
118 | 			}
119 | 			requestAnimationFrame(step);
120 | 		});
121 |     </script>
122 | </head>
123 | 
124 | <body style="position:absolute">
125 | 	    <div>
126 | 			<div id="divCanvas">
127 | 			    <canvas id="myCanvas" width="400" height="400">
128 | 				HTML5 canvas failed to load.
129 | 			    </canvas>
130 | 			</div>
131 | 			
132 | 			<div id="divControls">
133 | 				    <p> Javascript-STL loader<br>
134 | 				    <br>
135 | 				    Reference: <br>
136 | 				    (1)3D Computer Graphics - 3rd Edition by Alan Watt, pg. 5<br>
137 | 				    (2)<a href="http://en.wikipedia.org/wiki/STL_(file_format)">STL (binary)specification</a><br>
138 | 				    (3)<a href="http://en.wikipedia.org/wiki/STL_%28file_format%29#ASCII_STL">STL (ascii)specification</a><br/>
139 | 				    (4)<a href="http://devongovett.github.com/bmp.js/">Devon Govett's bmp.js</a><br>
140 | 				    (5)<a href="http://www.thingiverse.com/thing:9656">sample models</a><br>
141 | 				    <br>
142 | 				    Controls:<br>
143 | 				    (1) Magnification (slider range: 0 - 200 in Chrome).<br>
144 | 				    (2) Click on an arrow to rotate 10 degrees increment.<br><br>
145 | 				    </p>
146 | 				    <select id="combo">
147 | 				      <option value="monkey_vtn.stl">monkey</option>
148 | 				      <option value="torus_vtn.stl">torus</option>
149 | 				      <option value="cylinder_vtn_200v.stl">cylinder</option>
150 | 				      <option value="cone_vtn_100v.stl">cone</option>
151 | 				      <option value="monkey_ascii.stl">monkey(ascii)</option>
152 | 				      <option value="torus_ascii.stl">torus(ascii)</option>
153 | 					</select> 
154 | 				    <p id="xpos"> Rotate X: </p>
155 | 				    <p id="ypos"> Rotate Y: </p>
156 | 				    
157 | 					Magnification: <input id="slider" type="range" value=100  min="1" max="200" step="10" /><br>
158 | 				    <br>
159 | 			</div>
160 | 	    </div>
161 | 
162 | 
163 | <div id="divLeft">
164 | 	<img id="imgLeft" class="img" src="asset/arrowLeft.png"
165 | 	    onMouseOver="src='asset/arrowLeftOver.png'"
166 | 	    onMouseOut="src='asset/arrowLeft.png'"/>
167 | </div>
168 | 
169 | <div id="divRight">
170 | 	<img id="imgRight" class="img" src="asset/arrowRight.png"
171 | 	    onMouseOver="src='asset/arrowRightOver.png'"
172 | 	    onMouseOut="src='asset/arrowRight.png'"/>
173 | </div>
174 | 
175 | </body>
176 | </html>
177 | 


--------------------------------------------------------------------------------
/STL.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 |   /*
  3 |   #	Module:			STL.js
  4 |   #	
  5 |   #	Description:	decode STL 3D file
  6 |   #					modified Devon Govett's bmp.js
  7 |   #
  8 |   #	Reference:
  9 |   #		STL specs.	http://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL
 10 |   # 	BMP.js		http://devongovett.github.com/bmp.js/
 11 |   #      
 12 |   # Author(s):		Devon Govett provide a bmp decoding example.
 13 |   # 				C.T. Yeung modify to decode STL.
 14 |   #  
 15 |   # History:		
 16 |   # 20Dec11			1st crack at it								cty
 17 |   # 23Dec11			loading vertexies OK
 18 |   # 				need to test normal when rendering shades
 19 |   #                 rotation is off when passed 180 degrees		cty
 20 |   #
 21 |   # MIT LICENSE
 22 |   # Copyright (c) 2011 CT Yeung
 23 |   # Copyright (c) 2011 Devon Govett
 24 |   # 
 25 |   # Permission is hereby granted, free of charge, to any person obtaining a copy of this 
 26 |   # software and associated documentation files (the "Software"), to deal in the Software 
 27 |   # without restriction, including without limitation the rights to use, copy, modify, merge, 
 28 |   # publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons 
 29 |   # to whom the Software is furnished to do so, subject to the following conditions:
 30 |   # 
 31 |   # The above copyright notice and this permission notice shall be included in all copies or 
 32 |   # substantial portions of the Software.
 33 |   # 
 34 |   # THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING 
 35 |   # BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 
 36 |   # NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 
 37 |   # DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
 38 |   # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 39 |   */  
 40 |   
 41 |   var STL;
 42 |   var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 43 |   var HDR_LEN = 80;
 44 |   var PI = 3.14159265;
 45 | 	
 46 | 	STL = (function() {
 47 | 		STL.load = function(url, callback) {
 48 | 		  var xhr;
 49 | 		  xhr = new XMLHttpRequest;
 50 | 		  xhr.open("GET", url, true);
 51 | 		  xhr.responseType = "arraybuffer";
 52 | 		  xhr.onload = __bind(function() {
 53 | 			  var data = new Uint8Array(xhr.response || xhr.mozResponseArrayBuffer);
 54 | 			  return callback(new STL(data));
 55 | 		  }, this);
 56 | 		  return xhr.send(null);
 57 | 		};
 58 | 		
 59 | 		function STL(data) {
 60 | 		  var HDR_LEN = 80;
 61 | 		  var hdr;
 62 | 		  this.data = data;
 63 | 		  this.TYPE_ASCII = "ascii";
 64 | 		  this.TYPE_BINARY = "binary";
 65 | 		  this.dataType = "";
 66 | 		  
 67 | 		  this.ASCII_TITLE = "solid";
 68 | 		  this.TYPE_VERTEX = "vertex";
 69 | 		  this.TYPE_NORMAL = "normal";
 70 | 		  this.TYPE_END = "end"
 71 | 		  this.NOT_ASCII = -1;
 72 | 		  this.listVertex = null;
 73 | 		  this.listNormal = null;
 74 | 	    
 75 | 		  if(this.data.length<(HDR_LEN+4))
 76 | 			  throw 'STL file too small';
 77 | 		}
 78 | 		
 79 | 		STL.prototype.findEndPos = function(stt) {
 80 | 		  var i = stt;
 81 | 		  while(i<(this.data.length-1)) {
 82 | 			  // seek linefeed
 83 | 			  if(this.data[i]==10)
 84 | 				  return i;
 85 | 			  i++;
 86 | 		  }			
 87 | 		  return this.data.length-1;
 88 | 		};
 89 | 		
 90 | 		STL.prototype.bin2String = function(sttPos, endPos) {
 91 | 		  var buf="";
 92 | 		  for(var i=sttPos; i<endPos; i++) {
 93 | 			  var char = this.data[i].toString();
 94 | 			  buf += String.fromCharCode(char);
 95 | 		  }
 96 | 		  return buf.replace('\r', '');
 97 | 		};
 98 | 		
 99 | 		STL.prototype.readUInt16 = function() {
100 | 		  var b1, b2;
101 | 		  b1 = this.data[this.pos++];
102 | 		  b2 = this.data[this.pos++] << 8;
103 | 		  return b1 | b2;
104 | 		};
105 | 		
106 | 		STL.prototype.readUInt32 = function() {
107 | 		  var b1, b2, b3, b4;
108 | 		  b1 = this.data[this.pos++];
109 | 		  b2 = this.data[this.pos++] << 8;
110 | 		  b3 = this.data[this.pos++] << 16;
111 | 		  b4 = this.data[this.pos++] << 24;
112 | 		  var num = b1 | b2 | b3 | b4;
113 | 		  return num;
114 | 		};
115 | 		
116 | 		STL.prototype.readReal32 = function() {
117 | 		  if(this.data.length<=this.pos+4)		// over run !!! error condition
118 | 			  return 0;
119 | 			  
120 | 		  var byteArray = [0,0,0,0];
121 | 		  byteArray[3] = this.data[this.pos++];
122 | 		  byteArray[2] = this.data[this.pos++];
123 | 		  byteArray[1] = this.data[this.pos++];
124 | 		  byteArray[0] = this.data[this.pos++];
125 | 		  
126 | 		  var sign = this.parseSign(byteArray);
127 | 		  var exponent = this.parseExponent(byteArray);
128 | 		  var mantissa = this.parseSignificand(byteArray);
129 | 		  var num = sign * exponent * mantissa;
130 | 		  return num;
131 | 		};
132 | 		
133 | 		STL.prototype.parseSign = function(byteArray) {
134 | 		  if(byteArray[0]&0x80)
135 | 			  return -1;
136 | 		  return 1;
137 | 		};
138 | 		
139 | 		STL.prototype.parseExponent = function(byteArray) {
140 | 		  var ex = (byteArray[0] & 0x7F);
141 | 		  ex = ex << 1;
142 | 		  
143 | 		  if(0!=(byteArray[1] & 0x80))
144 | 			  ex += 0x01;
145 | 		  
146 | 		  ex = Math.pow(2, ex-127);
147 | 		  return ex;
148 | 		};
149 | 		
150 | 		STL.prototype.parseSignificand = function(byteArray) {
151 | 		  var num=0;
152 | 		  var bit;
153 | 		  var mask = 0x40;
154 | 		  for(var i=1; i<8; i++) {
155 | 			  if(0!=(byteArray[1]&mask)) 
156 | 				  num += 1 / Math.pow(2, i);
157 | 			  mask = mask >> 1;
158 | 		  }
159 | 		  mask = 0x80;
160 | 		  for(var j=0; j<8; j++) {
161 | 			  if(0!=(byteArray[2]&mask))
162 | 				  num += 1 / Math.pow(2, j+8);
163 | 			  mask = mask >> 1;
164 | 		  }
165 | 		  mask = 0x80;
166 | 		  for(var k=0; k<8; k++) {
167 | 			  if(0!=(byteArray[2]&mask))
168 | 				  num += 1 / Math.pow(2, k+16);
169 | 			  mask = mask >> 1;
170 | 		  }
171 | 		  return (num+1);
172 | 		};
173 | 		
174 | 		STL.prototype.readNormal = function(index) {
175 | 		  var sttPos = this.listNormal[index];
176 | 		  var endPos = this.findEndPos(sttPos);		// return EOF pos if not found
177 | 		  var vString = this.bin2String(sttPos, endPos);
178 | 		  var pos = vString.indexOf(this.TYPE_NORMAL);
179 | 		  vString = vString.substring(pos+this.TYPE_NORMAL.length+1, vString.length)
180 | 		  var list = vString.split(" ");
181 | 		   
182 | 		  var normal = new Array();
183 | 		  for(var i=0; i<list.length; i++) {
184 | 		    if(list[i].length)
185 | 		      normal.push(Number(list[i]));
186 | 		  }
187 | 		
188 | 		  if(list.length<3)
189 | 			  return null;							// invalid normal
190 | 				  
191 | 		  return normal;
192 | 		};
193 | 		
194 | 		STL.prototype.readVertex = function(index) {
195 | 		  var sttPos = this.listVertex[index];
196 | 		  var endPos = this.findEndPos(sttPos);		// return EOF pos if not found
197 | 		  var vString = this.bin2String(sttPos, endPos);
198 | 		  var pos = vString.indexOf(this.TYPE_VERTEX);
199 | 		  vString = vString.substring(pos+this.TYPE_VERTEX.length+1, vString.length);
200 | 		  var list = vString.split(" ");
201 | 		  
202 | 		  var vertex = new Array();
203 | 		  for(var i=0; i<list.length; i++) {
204 | 		    if(list[i].length)
205 | 		      vertex.push(Number(list[i]));
206 | 		  }	  
207 | 		  if(vertex.length!=3)
208 | 			  return null;							// invalid vertex
209 | 			  
210 | 		  return vertex;
211 | 		};
212 | 		
213 | 		STL.prototype.decode = function() {
214 | 		  if(this.dataType.length)
215 | 		    return this.dataType;
216 | 		  
217 | 		  var str = this.bin2String(0, 10).toLocaleLowerCase();
218 | 		  var endPos = 0;
219 | 		  var sttPos = 0;
220 | 		  
221 | 		  if(str.indexOf(this.ASCII_TITLE)>=0) {
222 | 		    this.dataType = this.TYPE_ASCII;
223 | 		    this.listVertex = new Array();
224 | 		    this.listNormal = new Array();
225 | 		    
226 | 		    while(endPos < (this.data.length-1)) {
227 | 		      endPos = this.findEndPos(sttPos);		// return EOF pos if not found
228 | 		      str = this.bin2String(sttPos, endPos);
229 | 		      
230 | 		      if(str.indexOf(this.TYPE_VERTEX)>=0)
231 | 			this.listVertex.push(sttPos);
232 | 			
233 | 		      else if(str.indexOf(this.TYPE_NORMAL)>=0)
234 | 			this.listNormal.push(sttPos);
235 | 		      
236 | 		      sttPos = endPos+1;
237 | 		    }
238 | 		  }
239 | 		  else
240 | 		    this.dataType = this.TYPE_BINARY;
241 | 		    
242 | 		  return this.dataType;
243 | 		};
244 | 		
245 | 		STL.prototype.drawWireFrame = function(context,		// [in] canvas context 
246 | 											   w, 			// [in] canvas width
247 | 											   h, 			// [in] canvas height
248 | 											   mag,			// [in] magnification
249 | 											   rX,
250 | 											   rY,
251 | 											   rZ) {
252 | 			var numTriangles;
253 | 			var i;
254 | 			
255 | 			if(this.dataType==this.TYPE_BINARY){
256 | 			  this.pos = HDR_LEN;
257 | 			  numTriangles = this.readUInt32();
258 | 			}
259 | 			else
260 | 			  numTriangles = this.listVertex.length/3;
261 | 			
262 | 			if(this.dataType==this.TYPE_BINARY) {
263 | 			  for(i=0; i<numTriangles; i++) {
264 | 			    // retrieve normal
265 | 			    var normal = [0,0,0];
266 | 			    for(var j=0; j<3; j++) 
267 | 			      normal[j] = this.readReal32();
268 | 			    
269 | 			    this.drawTriangles(context, w, h, mag, rX, rY, rZ);
270 | 			    
271 | 			    //var attr = this.readUInt16();				// retrieve attribute
272 | 			    this.pos += 2;
273 | 			  }
274 | 			}
275 | 			else
276 | 			  for(i=0; i<numTriangles; i++) {
277 | 			    this.triangleIndex = i;
278 | 			    this.drawTriangles(context, w, h, mag, rX, rY, rZ);
279 | 			  }
280 | 		};
281 | 		
282 | 		STL.prototype.drawTriangles = function(context,		// [in] canvas context 
283 | 							w, 		// [in] canvas width
284 | 							h, 		// [in] canvas height
285 | 							mag,		// [in] magnification
286 | 							rX,		// [in] amount of rotation X
287 | 							rY,		// [in] amount of rotation Y
288 | 							rZ){		// [in] amount of rotation Z
289 | 			
290 | 			var vtx0 = [0,0,0];
291 | 			var vtx1 = [0,0,0];
292 | 			var offX = w/2;
293 | 			var offY = h/2;
294 | 			context.beginPath();
295 | 			
296 | 			// convert rotation from degrees to radian
297 | 			var radX = PI / 180.0 * rX;
298 | 			var radY = PI / 180.0 * rY;
299 | 			var radZ = PI / 180.0 * rZ;	
300 | 
301 | 			for(var j=0; j<3; j++) {  
302 | 			
303 | 			  if(this.dataType==this.TYPE_ASCII)
304 | 			    var vtx1 = this.readVertex(this.triangleIndex*3+j)
305 | 			    
306 | 			  else {
307 | 			    vtx1[0] = this.readReal32();
308 | 			    vtx1[1] = this.readReal32();
309 | 			    vtx1[2] = this.readReal32();
310 | 			  }
311 | 			  
312 | 			  //vtx1[0] = vtx1[0];
313 | 			  var y = vtx1[1];
314 | 			  var z = vtx1[2];
315 | 			  vtx1[1] = Math.cos(radX)*y-Math.sin(radX)*z;
316 | 			  vtx1[2] = Math.sin(radX)*y+Math.cos(radX)*z
317 | 			  
318 | 			  var x = vtx1[0];
319 | 			  z = vtx1[2];
320 | 			  vtx1[0] = Math.cos(radY)*x+Math.sin(radY)*z;
321 | 			  //vtx1[1] = vtx1[1];
322 | 			  vtx1[2] = -Math.sin(radY)*x+Math.cos(radY)*z;
323 | 					    
324 | 			  // draw 2 lengths of a triangle
325 | 			  if(j==0) {
326 | 			    context.moveTo(vtx1[0]*mag+ offX, 
327 | 					   vtx1[1]*mag+ offY);		      // move to 1st triangle corner
328 | 			    vtx0[0] = vtx1[0];
329 | 			    vtx0[1] = vtx1[1];
330 | 			    vtx0[2] = vtx1[2];
331 | 			  }
332 | 			  else 
333 | 			    context.lineTo(vtx1[0]*mag+ offX, 
334 | 					  vtx1[1]*mag+ offY);
335 | 					    
336 |       			} 
337 | 			// complete triangle		
338 | 			context.lineTo(vtx0[0]*mag+ offX, 
339 | 				       vtx0[1]*mag+ offY);
340 | 			// render on canvase
341 | 			context.stroke();
342 | 			context.closePath();
343 | 		};
344 | 		
345 | 		return STL;
346 | 	})();
347 | 	
348 | 	window.STL = STL;
349 | }).call(this);
350 | // JavaScript Document


--------------------------------------------------------------------------------