Initial fork of ffddaf01a9

2020-08-18 00:04:54 +02:00 · 2020-08-18 00:04:54 +02:00 · 9386117d77
commit 9386117d77
parent efe09fb464
30 changed files with 1627172 additions and 12 deletions
--- a/25
+++ b/25
@ -1,19 +1,22 @@
-MIT License Copyright (c) <year> <copyright holders>
+The MIT License (MIT)
+
+Copyright (c) 2014 Junho Jin

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is furnished
-to do so, subject to the following conditions:
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:

-The above copyright notice and this permission notice (including the next
-paragraph) shall be included in all copies or substantial portions of the
-Software.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
-OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF
-OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
--- a/README.md
+++ b/README.md
@ -1,2 +1,87 @@
-# Madeleine.js-for-Gitea
+# Madeleine.js

+Madeleine.js is a 3D Model parser & renderer for STL files (ASCII and binary both). 
+
+Madeleine.js uses [Three.js (r68)](http://github.com/mrdoob/three.js) as its 3D Engine, and was inspired by the demo code of [tonylukasavage](https://github.com/tonylukasavage/jsstl).
+
+Madeleine.js is smart enough to distinguish whether stl files are ASCII or binary, and is able to create and handle multiple 3D model viewers (WARNING: Multiple rendering may slow down the speed). Also, Madeleine.js helps you to immediately render any stl file as you upload!
+
+## Features
+
+- Parse, render and visualize STL format files.
+- Automatically distinguish binary and ASCII, and parse it properly.
+- Accept STL file from external url or user file upload.
+- Support rendering multiple models (also multi upload).
+- Provide various themes for model viewer.
+- Allow user to interact with the model via mouse actions.
+- Support capturing the rendered 3D model (Implementing)
+- Support downloading the original stl file (Implementing)
+- Support different viewpoint (Implementing)
+- Support fullscreen mode (Implementing)
+- And more features will be added later!
+
+
+## DEMO
+
+Visit [DEMO Website](http://jinjunho.github.io/Madeleine.js/) to see the demo!
+
+For developers, [download](https://github.com/JinJunho/Madeleine.js/archive/master.zip) or clone this repository and locate it on your web server root. You can check working demo by visiting **repo/examples/index.html** from your browser. Download any stl file and see how well it works!
+
+## Getting Started 
+
+First, include resources into <head> element of your code.
+
+```html
+<link href="src/css/Madeleine.css" rel="stylesheet">
+<script src="src/lib/stats.js"></script>
+<script src="src/lib/detector.js"></script>
+<script src="src/lib/three.min.js"></script>
+<script src="src/Madeleine.js"></script>
+```
+
+### 1. Immediate File Upload
+
+All you need to do is simply asking Lily (is Madeleine's sister) to get ready for file upload. She will take care of taking files, parsing, rendering and visualizing them.
+
+```html
+<form id="myForm" name="myForm">
+    <input type="file" id="myForm" name="myForm" multiple>
+</form>
+<div id="target"></div>
+
+<script>
+window.onload = function(){
+    Lily.ready({
+        target: 'target',  // target div id
+        file: 'files',  // file input id
+        path: '../src' // path to source directory from current html file
+    });
+}; 
+</script>
+```
+
+### 2. Render from file path
+
+If you know the url or path to the stl file, call Madeleine directly with target div id and the file path.
+
+```html
+<div id="target" class="madeleine"></div>
+
+<script>
+window.onload = function(){
+    var madeleine = new Madeleine({
+      target: 'target', // target div id
+      data: 'path/to/file.stl', // data path
+      path: '../src' // path to source directory from current html file
+    });
+}; 
+</script>
+```
+
+## License
+
+This code is under [MIT License](http://choosealicense.com/licenses/mit/). You can do anything you want with my code, as long as you leave the attribution. It will be grateful if you contact me for interesting ideas to do with Madeleine.js. I'm willing to co-work with you!
+
+## Who am I?
+
+I'm [Junho Jin](http://plrg.kaist.ac.kr/jjh) :)
--- a/css/pygment_trac.css
+++ b/css/pygment_trac.css
@ -0,0 +1,70 @@
+.highlight .hll { background-color: #ffffcc }
+.highlight  { background: #f0f3f3; }
+.highlight .c { color: #0099FF; font-style: italic } /* Comment */
+.highlight .err { color: #AA0000; background-color: #FFAAAA } /* Error */
+.highlight .k { color: #006699; font-weight: bold } /* Keyword */
+.highlight .o { color: #555555 } /* Operator */
+.highlight .cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #009999 } /* Comment.Preproc */
+.highlight .c1 { color: #0099FF; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #0099FF; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #003300; font-weight: bold } /* Generic.Heading */
+.highlight .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
+.highlight .go { color: #AAAAAA } /* Generic.Output */
+.highlight .gp { color: #000099; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #003300; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #99CC66 } /* Generic.Traceback */
+.highlight .kc { color: #006699; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #006699; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #006699; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #006699 } /* Keyword.Pseudo */
+.highlight .kr { color: #006699; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #007788; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #FF6600 } /* Literal.Number */
+.highlight .s { color: #CC3300 } /* Literal.String */
+.highlight .na { color: #330099 } /* Name.Attribute */
+.highlight .nb { color: #336666 } /* Name.Builtin */
+.highlight .nc { color: #00AA88; font-weight: bold } /* Name.Class */
+.highlight .no { color: #336600 } /* Name.Constant */
+.highlight .nd { color: #9999FF } /* Name.Decorator */
+.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #CC0000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #CC00FF } /* Name.Function */
+.highlight .nl { color: #9999FF } /* Name.Label */
+.highlight .nn { color: #00CCFF; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #330099; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #003333 } /* Name.Variable */
+.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #FF6600 } /* Literal.Number.Float */
+.highlight .mh { color: #FF6600 } /* Literal.Number.Hex */
+.highlight .mi { color: #FF6600 } /* Literal.Number.Integer */
+.highlight .mo { color: #FF6600 } /* Literal.Number.Oct */
+.highlight .sb { color: #CC3300 } /* Literal.String.Backtick */
+.highlight .sc { color: #CC3300 } /* Literal.String.Char */
+.highlight .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #CC3300 } /* Literal.String.Double */
+.highlight .se { color: #CC3300; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #CC3300 } /* Literal.String.Heredoc */
+.highlight .si { color: #AA0000 } /* Literal.String.Interpol */
+.highlight .sx { color: #CC3300 } /* Literal.String.Other */
+.highlight .sr { color: #33AAAA } /* Literal.String.Regex */
+.highlight .s1 { color: #CC3300 } /* Literal.String.Single */
+.highlight .ss { color: #FFCC33 } /* Literal.String.Symbol */
+.highlight .bp { color: #336666 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #003333 } /* Name.Variable.Class */
+.highlight .vg { color: #003333 } /* Name.Variable.Global */
+.highlight .vi { color: #003333 } /* Name.Variable.Instance */
+.highlight .il { color: #FF6600 } /* Literal.Number.Integer.Long */
+
+.type-csharp .highlight .k { color: #0000FF }
+.type-csharp .highlight .kt { color: #0000FF }
+.type-csharp .highlight .nf { color: #000000; font-weight: normal }
+.type-csharp .highlight .nc { color: #2B91AF }
+.type-csharp .highlight .nn { color: #000000 }
+.type-csharp .highlight .s { color: #A31515 }
+.type-csharp .highlight .sc { color: #A31515 }
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@ -0,0 +1,478 @@
+/*******************************************************************************
+Slate Theme for GitHub Pages
+by Jason Costello, @jsncostello
+*******************************************************************************/
+
+@import url(pygment_trac.css);
+
+/*******************************************************************************
+MeyerWeb Reset
+*******************************************************************************/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/*******************************************************************************
+Theme Styles
+*******************************************************************************/
+
+body {
+  box-sizing: border-box;
+  color:#373737;
+  background: #212121;
+  font-size: 16px;
+  font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 10px 0;
+  font-weight: 700;
+  color:#222222;
+  font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
+  letter-spacing: -1px;
+}
+
+h1 {
+  font-size: 36px;
+  font-weight: 700;
+}
+
+h2 {
+  padding-bottom: 10px;
+  font-size: 32px;
+  background: url('../images/bg_hr.png') repeat-x bottom;
+}
+
+h3 {
+  font-size: 24px;
+}
+
+h4 {
+  font-size: 21px;
+}
+
+h5 {
+  font-size: 18px;
+}
+
+h6 {
+  font-size: 16px;
+}
+
+p {
+  margin: 10px 0 15px 0;
+}
+
+footer p {
+  color: #f2f2f2;
+}
+
+a {
+  text-decoration: none;
+  color: #007edf;
+  text-shadow: none;
+
+  transition: color 0.5s ease;
+  transition: text-shadow 0.5s ease;
+  -webkit-transition: color 0.5s ease;
+  -webkit-transition: text-shadow 0.5s ease;
+  -moz-transition: color 0.5s ease;
+  -moz-transition: text-shadow 0.5s ease;
+  -o-transition: color 0.5s ease;
+  -o-transition: text-shadow 0.5s ease;
+  -ms-transition: color 0.5s ease;
+  -ms-transition: text-shadow 0.5s ease;
+}
+
+a:hover, a:focus {text-decoration: underline;}
+
+footer a {
+  color: #F2F2F2;
+  text-decoration: underline;
+}
+
+em {
+  font-style: italic;
+}
+
+strong {
+  font-weight: bold;
+}
+
+img {
+  position: relative;
+  margin: 0 auto;
+  max-width: 739px;
+  padding: 5px;
+  margin: 10px 0 10px 0;
+  border: 1px solid #ebebeb;
+
+  box-shadow: 0 0 5px #ebebeb;
+  -webkit-box-shadow: 0 0 5px #ebebeb;
+  -moz-box-shadow: 0 0 5px #ebebeb;
+  -o-box-shadow: 0 0 5px #ebebeb;
+  -ms-box-shadow: 0 0 5px #ebebeb;
+}
+
+p img {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  vertical-align: middle;
+  text-align: center;
+  border: none;
+}
+
+pre, code {
+  width: 100%;
+  color: #222;
+  background-color: #fff;
+
+  font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
+  font-size: 14px;
+
+  border-radius: 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+}
+
+pre {
+  width: 100%;
+  padding: 10px;
+  box-shadow: 0 0 10px rgba(0,0,0,.1);
+  overflow: auto;
+}
+
+code {
+  padding: 3px;
+  margin: 0 3px;
+  box-shadow: 0 0 10px rgba(0,0,0,.1);
+}
+
+pre code {
+  display: block;
+  box-shadow: none;
+}
+
+blockquote {
+  color: #666;
+  margin-bottom: 20px;
+  padding: 0 0 0 20px;
+  border-left: 3px solid #bbb;
+}
+
+
+ul, ol, dl {
+  margin-bottom: 15px
+}
+
+ul {
+  list-style: inside;
+  padding-left: 20px;
+}
+
+ol {
+  list-style: decimal inside;
+  padding-left: 20px;
+}
+
+dl dt {
+  font-weight: bold;
+}
+
+dl dd {
+  padding-left: 20px;
+  font-style: italic;
+}
+
+dl p {
+  padding-left: 20px;
+  font-style: italic;
+}
+
+hr {
+  height: 1px;
+  margin-bottom: 5px;
+  border: none;
+  background: url('../images/bg_hr.png') repeat-x center;
+}
+
+table {
+  border: 1px solid #373737;
+  margin-bottom: 20px;
+  text-align: left;
+ }
+
+th {
+  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  padding: 10px;
+  background: #373737;
+  color: #fff;
+ }
+
+td {
+  padding: 10px;
+  border: 1px solid #373737;
+ }
+
+form {
+  background: #f2f2f2;
+  padding: 20px;
+}
+
+/*******************************************************************************
+Full-Width Styles
+*******************************************************************************/
+
+.outer {
+  width: 100%;
+}
+
+.inner {
+  position: relative;
+  max-width: 640px;
+  padding: 20px 10px;
+  margin: 0 auto;
+}
+
+#forkme_banner {
+  display: block;
+  position: absolute;
+  top:0;
+  right: 10px;
+  z-index: 10;
+  padding: 10px 50px 10px 10px;
+  color: #fff;
+  background: url('../images/blacktocat.png') #0090ff no-repeat 95% 50%;
+  font-weight: 700;
+  box-shadow: 0 0 10px rgba(0,0,0,.5);
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+#header_wrap {
+  background: #212121;
+  background: -moz-linear-gradient(top, #373737, #212121);
+  background: -webkit-linear-gradient(top, #373737, #212121);
+  background: -ms-linear-gradient(top, #373737, #212121);
+  background: -o-linear-gradient(top, #373737, #212121);
+  background: linear-gradient(top, #373737, #212121);
+}
+
+#header_wrap .inner {
+  padding: 50px 10px 30px 10px;
+}
+
+#project_title {
+  margin: 0;
+  color: #fff;
+  font-size: 42px;
+  font-weight: 700;
+  text-shadow: #111 0px 0px 10px;
+}
+
+#project_tagline {
+  color: #fff;
+  font-size: 24px;
+  font-weight: 300;
+  background: none;
+  text-shadow: #111 0px 0px 10px;
+}
+
+#downloads {
+  position: absolute;
+  width: 210px;
+  z-index: 10;
+  bottom: -40px;
+  right: 0;
+  height: 70px;
+  background: url('../images/icon_download.png') no-repeat 0% 90%;
+}
+
+.zip_download_link {
+  display: block;
+  float: right;
+  width: 90px;
+  height:70px;
+  text-indent: -5000px;
+  overflow: hidden;
+  background: url(../images/sprite_download.png) no-repeat bottom left;
+}
+
+.tar_download_link {
+  display: block;
+  float: right;
+  width: 90px;
+  height:70px;
+  text-indent: -5000px;
+  overflow: hidden;
+  background: url(../images/sprite_download.png) no-repeat bottom right;
+  margin-left: 10px;
+}
+
+.zip_download_link:hover {
+  background: url(../images/sprite_download.png) no-repeat top left;
+}
+
+.tar_download_link:hover {
+  background: url(../images/sprite_download.png) no-repeat top right;
+}
+
+#main_content_wrap {
+  background: #f2f2f2;
+  border-top: 1px solid #111;
+  border-bottom: 1px solid #111;
+}
+
+#main_content {
+  padding-top: 40px;
+}
+
+#footer_wrap {
+  background: #212121;
+}
+
+.viewer + .viewer {
+  margin-top: 20px;
+}
+
+
+
+/*******************************************************************************
+Small Device Styles
+*******************************************************************************/
+
+@media screen and (max-width: 480px) {
+  body {
+    font-size:14px;
+  }
+
+  #downloads {
+    display: none;
+  }
+
+  .inner {
+    min-width: 320px;
+    max-width: 480px;
+  }
+
+  #project_title {
+  font-size: 32px;
+  }
+
+  h1 {
+    font-size: 28px;
+  }
+
+  h2 {
+    font-size: 24px;
+  }
+
+  h3 {
+    font-size: 21px;
+  }
+
+  h4 {
+    font-size: 18px;
+  }
+
+  h5 {
+    font-size: 14px;
+  }
+
+  h6 {
+    font-size: 12px;
+  }
+
+  code, pre {
+    min-width: 320px;
+    max-width: 480px;
+    font-size: 11px;
+  }
+
+}
+
+.theme {
+  text-align: center;
+}
+
+.themeButton {
+  padding: 0;
+  margin: 1px;
+  width: 150px;
+  height: 40px;
+  cursor: pointer;
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 40px;
+  text-align: center;
+  background: #FFFFFF;
+  display: inline-block;
+  border: 1px solid #EFEFEF;
+}
+
+.light {
+  color: #DFDFDF;
+}
+
+.dark {
+  color: #000000;
+}
+
+.soft {
+  color: #FF9900;
+}
+
+.lime {
+  color: #D4FF00;
+}
+
+.rose {
+  color: #C94C66;
+}
+
+.lego {
+  color: #00A08C;
+}
+
+.toxic {
+  color: #5254CB;
+}
+
+.cobalt {
+  color: #0C6BC0;
+}
--- a/examples/ajax.html
+++ b/examples/ajax.html
@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta charset='utf-8'>
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="description" content="Madeleine.js : Pure javaScript 3D Model Viewer (.STL Format)">
+
+    <link rel="stylesheet" type="text/css" media="screen" href="../src/css/Madeleine.css">
+    <link rel="stylesheet" type="text/css" media="screen" href="../css/stylesheet.css">
+
+    <script src="../src/lib/stats.js"></script>
+    <script src="../src/lib/detector.js"></script>
+    <script src="../src/lib/three.min.js"></script>
+    <script src="../src/Madeleine.js"></script>
+
+    <title>Madeleine.js</title>
+  </head>
+
+  <body>
+
+    <!-- HEADER -->
+    <div id="header_wrap" class="outer">
+      <header class="inner">
+        <a id="forkme_banner" href="https://github.com/JinJunho/Madeleine.js">View on GitHub</a>
+
+        <h1 id="project_title">Madeleine.js</h1>
+        <h2 id="project_tagline">Pure javaScript 3D Model Viewer (.STL Format)</h2>
+
+        <section id="downloads">
+          <a class="zip_download_link" href="https://github.com/JinJunho/Madeleine.js/zipball/master">Download this project as a .zip file</a>
+          <a class="tar_download_link" href="https://github.com/JinJunho/Madeleine.js/tarball/master">Download this project as a tar.gz file</a>
+        </section>
+      </header>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div id="main_content_wrap" class="outer">
+      <section id="main_content" class="inner">
+
+        <h1><a name="madeleinejs" class="anchor" href="#madeleinejs"><span class="octicon octicon-link"></span></a>Madeleine.js</h1>
+
+        <p>Madeleine.js is a 3D Model parser &amp; renderer for STL files (ASCII and binary both). </p>
+        <p>Madeleine.js uses <a href="http://github.com/mrdoob/three.js">Three.js</a> as its 3D Engine, and was inspired by the demo code of <a href="https://github.com/tonylukasavage/jsstl">tonylukasavage</a>.</p>
+        <p>Madeleine.js is smart enough to distinguish whether stl files are ASCII or binary, and is able to create and handle multiple 3D model viewers (WARNING: Multiple rendering may slow down the speed). Also, Madeleine.js helps you to immediately render any stl file as you upload!</p>
+
+        <h2><a name="features" class="anchor" href="#features"><span class="octicon octicon-link"></span></a>Features</h2>
+
+        <ul>
+          <li>Parse, render and visualize STL format files.</li>
+          <li>Automatically distinguish binary and ASCII, and parse it properly.</li>
+          <li>Accept STL file from external url or user file upload.</li>
+          <li>Support rendering multiple models (also multi upload).</li>
+          <li>Provide various themes for model viewer.</li>
+          <li>Allow user to interact with the model via mouse actions.</li>
+          <li>Support capturing the rendered 3D model (Implementing)</li>
+          <li>Support downloading the original stl file (Implementing)</li>
+          <li>Support different viewpoint (Implementing)</li>
+          <li>Support fullscreen mode (Implementing)</li>
+          <li>And more features will be added later!</li>
+        </ul>
+
+        <h2><a name="demo" class="anchor" href="#demo"><span class="octicon octicon-link"></span></a>DEMO</h2>
+
+        <h3>Ajax loading</h3>
+        <div style="font-size:10px;text-align:right">Source: http://www.thingiverse.com/thing:520393</div>
+        <div id="target"></div>
+        <div class="theme">
+          <div class="themeButton light"  onclick="mad.adaptViewerTheme('light');">Light</div>
+          <div class="themeButton lime"   onclick="mad.adaptViewerTheme('lime');">Lime</div>
+          <div class="themeButton toxic"  onclick="mad.adaptViewerTheme('toxic');">Toxic</div>
+          <div class="themeButton lego"   onclick="mad.adaptViewerTheme('lego');">Lego</div>
+          <div class="themeButton cobalt" onclick="mad.adaptViewerTheme('cobalt');">Cobalt</div>
+          <div class="themeButton soft"   onclick="mad.adaptViewerTheme('soft');">Soft</div>
+          <div class="themeButton rose"   onclick="mad.adaptViewerTheme('rose');">Rose</div>
+          <div class="themeButton dark"   onclick="mad.adaptViewerTheme('dark');">Dark</div>
+        </div>
+
+        <h2><a name="getting-started" class="anchor" href="#getting-started"><span class="octicon octicon-link"></span></a>Getting Started</h2>
+
+        <p>First, include resources into </p> element of your code.
+
+        <div class="highlight highlight-html">
+<pre>
+<span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">"src/css/Madeleine.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"src/lib/stats.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"src/lib/detector.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"src/lib/three.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"src/Madeleine.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
+</pre>
+        </div>
+
+        <h3><a name="1-immediate-file-upload" class="anchor" href="#1-immediate-file-upload"><span class="octicon octicon-link"></span></a>1. Immediate File Upload</h3>
+
+        <p>All you need to do is simply asking Lily (Madeleine's sister) to get ready for file upload. She will take care of taking files, parsing, rendering and showing them.</p>
+
+        <div class="highlight highlight-html">
+<pre>
+<span class="nt">&lt;form</span> <span class="na">id=</span><span class="s">"myForm"</span> <span class="na">name=</span><span class="s">"myForm"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">id=</span><span class="s">"myForm"</span> <span class="na">name=</span><span class="s">"myForm"</span> <span class="na">multiple</span><span class="nt">&gt;</span>
+<span class="nt">&lt;/form&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"target"</span><span class="nt">&gt;&lt;/div&gt;</span>
+
+<span class="nt">&lt;script&gt;</span>
+<span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
+    <span class="nx">Lily</span><span class="p">.</span><span class="nx">ready</span><span class="p">({</span>
+        <span class="nx">target</span><span class="o">:</span> <span class="s1">'target'</span></span><span class="p">,</span>  <span class="c1">// target div id</span>
+        <span class="nx">file</span><span class="o">:</span> <span class="s1">'files'</span><span class="p">,</span>  <span class="c1">// file input id</span>
+        <span class="nx">path</span><span class="o">:</span> <span class="s1">'./src'</span>  <span class="c1">// path to source directory from current html file</span>
+    <span class="p">});</span>
+<span class="p">};</span> 
+<span class="nt">&lt;/script&gt;</span>
+</pre>
+        </div>
+
+        <h3><a name="2-render-from-file-path" class="anchor" href="#2-render-from-file-path"><span class="octicon octicon-link"></span></a>2. Render from file path</h3>
+
+        <p>If you know the url or path to the stl file, call Madeleine directly with target div id and the file path.</p>
+
+        <div class="highlight highlight-html">
+<pre>
+<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"target"</span> <span class="na">class=</span><span class="s">"madeleine"</span><span class="nt">&gt;&lt;/div&gt;</span>
+
+<span class="nt">&lt;script&gt;</span>
+<span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
+    <span class="kd">var</span> <span class="nx">madeleine</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Madeleine</span><span class="p">({</span>
+      <span class="nx">target</span><span class="o">:</span> <span class="s1">'target'</span><span class="p">,</span> <span class="c1">// target div id</span>
+      <span class="nx">data</span><span class="o">:</span> <span class="s1">'path/to/file.stl'</span><span class="p">,</span> <span class="c1">// data path</span>
+      <span class="nx">path</span><span class="o">:</span> <span class="s1">'./src'</span>  <span class="c1">// path to source directory from current html file</span>
+    <span class="p">});</span>
+<span class="p">};</span> 
+<span class="nt">&lt;/script&gt;</span>
+</pre>
+        </div>
+
+        <h2><a name="license" class="anchor" href="#license"><span class="octicon octicon-link"></span></a>License</h2>
+
+        <p>This code is under <a href="http://choosealicense.com/licenses/mit/">MIT License</a>. You can do anything you want with my code, as long as you leave the attribution. It will be grateful if you contact me for interesting ideas to do with Madeleine.js. I'm willing to co-work with you!</p>
+
+        <h2><a name="who-am-i" class="anchor" href="#who-am-i"><span class="octicon octicon-link"></span></a>Who am I?</h2>
+
+        <p>My name is <a href="http://plrg.kaist.ac.kr/jjh">Junho Jin</a></p>
+      </section>
+    </div>
+
+    <!-- FOOTER  -->
+    <div id="footer_wrap" class="outer">
+      <footer class="inner">
+        <p class="copyright">Madeleine.js maintained by <a href="https://github.com/JinJunho">JinJunho</a></p>
+        <p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
+      </footer>
+    </div>
+
+    <script>
+      window.onload = function(){
+        // Source: http://www.thingiverse.com/thing:520394
+        // Ducati Desmosedici Superbike by IlRazzo, published Oct 29, 2014
+        // Source: http://www.thingiverse.com/thing:520393
+        // Lamborghini Gallardo by IlRazzo, published Oct 29, 2014
+        mad = new Madeleine({
+          target: 'target',
+          data: '../models/gallardo.stl',
+          path: '../src'
+        });
+      }; 
+    </script>
+
+  </body>
+</html>
--- a/examples/index.html
+++ b/examples/index.html
@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html lang="en" class="no-js">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Madeleine.js Working Example</title>
+</head>
+<body>
+<header>
+  <h1>Welcome to <a href="https://github.com/JinJunho/Madeleine.js">Madeleine.js</a> Demo Page!</h1>
+</header>
+
+<section>
+  <ul>
+    <li><a href="upload.html">File Upload Test</a></li>
+    <li><a href="ajax.html">Load by Ajax Test</a></li>
+  </ul>
+</section>
+
+</body>
+</html>
--- a/examples/upload.html
+++ b/examples/upload.html
@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta charset='utf-8'>
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="description" content="Madeleine.js : Pure javaScript 3D Model Viewer (.STL Format)">
+
+    <link rel="stylesheet" type="text/css" media="screen" href="../src/css/Madeleine.css">
+    <link rel="stylesheet" type="text/css" media="screen" href="../css/stylesheet.css">
+
+    <script src="../src/lib/stats.js"></script>
+    <script src="../src/lib/detector.js"></script>
+    <script src="../src/lib/three.min.js"></script>
+    <script src="../src/Madeleine.js"></script>
+
+    <title>Madeleine.js</title>
+  </head>
+
+  <body>
+
+    <!-- HEADER -->
+    <div id="header_wrap" class="outer">
+      <header class="inner">
+        <a id="forkme_banner" href="https://github.com/JinJunho/Madeleine.js">View on GitHub</a>
+
+        <h1 id="project_title">Madeleine.js</h1>
+        <h2 id="project_tagline">Pure javaScript 3D Model Viewer (.STL Format)</h2>
+
+        <section id="downloads">
+          <a class="zip_download_link" href="https://github.com/JinJunho/Madeleine.js/zipball/master">Download this project as a .zip file</a>
+          <a class="tar_download_link" href="https://github.com/JinJunho/Madeleine.js/tarball/master">Download this project as a tar.gz file</a>
+        </section>
+      </header>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div id="main_content_wrap" class="outer">
+      <section id="main_content" class="inner">
+
+        <h1><a name="madeleinejs" class="anchor" href="#madeleinejs"><span class="octicon octicon-link"></span></a>Madeleine.js</h1>
+
+        <p>Madeleine.js is a 3D Model parser &amp; renderer for STL files (ASCII and binary both). </p>
+        <p>Madeleine.js uses <a href="http://github.com/mrdoob/three.js">Three.js</a> as its 3D Engine, and was inspired by the demo code of <a href="https://github.com/tonylukasavage/jsstl">tonylukasavage</a>.</p>
+        <p>Madeleine.js is smart enough to distinguish whether stl files are ASCII or binary, and is able to create and handle multiple 3D model viewers (WARNING: Multiple rendering may slow down the speed). Also, Madeleine.js helps you to immediately render any stl file as you upload!</p>
+
+        <h2><a name="features" class="anchor" href="#features"><span class="octicon octicon-link"></span></a>Features</h2>
+
+        <ul>
+          <li>Parse, render and visualize STL format files.</li>
+          <li>Automatically distinguish binary and ASCII, and parse it properly.</li>
+          <li>Accept STL file from external url or user file upload.</li>
+          <li>Support rendering multiple models (also multi upload).</li>
+          <li>Provide various themes for model viewer.</li>
+          <li>Allow user to interact with the model via mouse actions.</li>
+          <li>Support capturing the rendered 3D model (Implementing)</li>
+          <li>Support downloading the original stl file (Implementing)</li>
+          <li>Support different viewpoint (Implementing)</li>
+          <li>Support fullscreen mode (Implementing)</li>
+          <li>And more features will be added later!</li>
+        </ul>
+
+        <h2><a name="demo" class="anchor" href="#demo"><span class="octicon octicon-link"></span></a>DEMO</h2>
+
+        <h3>File upload</h3>
+        <form><input type="file" id="files" name="files" multiple></form>
+        <div id="target" class="viewer"></div>
+
+        <p><a href="https://github.com/JinJunho/Madeleine.js/archive/master.zip">Download source</a> or <a href="github-mac://openRepo/https://github.com/JinJunho/Madeleine.js">Clone the repository</a> and locate it on your web server root. You can check working demo by visiting <strong>repo/examples/index.html</strong> from your browser. Download any stl file and see how well it works!</p>
+
+        <h2><a name="getting-started" class="anchor" href="#getting-started"><span class="octicon octicon-link"></span></a>Getting Started</h2>
+
+        <p>First, include resources into </p> element of your code.
+
+        <div class="highlight highlight-html">
+<pre>
+<span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">"src/css/Madeleine.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"src/lib/stats.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"src/lib/detector.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"src/lib/three.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"src/Madeleine.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
+</pre>
+        </div>
+
+        <h3><a name="1-immediate-file-upload" class="anchor" href="#1-immediate-file-upload"><span class="octicon octicon-link"></span></a>1. Immediate File Upload</h3>
+
+        <p>All you need to do is simply asking Lily (Madeleine's sister) to get ready for file upload. She will take care of taking files, parsing, rendering and showing them.</p>
+
+        <div class="highlight highlight-html">
+<pre>
+<span class="nt">&lt;form</span> <span class="na">id=</span><span class="s">"myForm"</span> <span class="na">name=</span><span class="s">"myForm"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">id=</span><span class="s">"myForm"</span> <span class="na">name=</span><span class="s">"myForm"</span> <span class="na">multiple</span><span class="nt">&gt;</span>
+<span class="nt">&lt;/form&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"target"</span><span class="nt">&gt;&lt;/div&gt;</span>
+
+<span class="nt">&lt;script&gt;</span>
+<span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
+    <span class="nx">Lily</span><span class="p">.</span><span class="nx">ready</span><span class="p">({</span>
+        <span class="nx">target</span><span class="o">:</span> <span class="s1">'target'</span></span><span class="p">,</span>  <span class="c1">// target div id</span>
+        <span class="nx">file</span><span class="o">:</span> <span class="s1">'files'</span><span class="p">,</span>  <span class="c1">// file input id</span>
+        <span class="nx">path</span><span class="o">:</span> <span class="s1">'./src'</span>  <span class="c1">// path to source directory from current html file</span>
+    <span class="p">});</span>
+<span class="p">};</span> 
+<span class="nt">&lt;/script&gt;</span>
+</pre>
+        </div>
+
+        <h3><a name="2-render-from-file-path" class="anchor" href="#2-render-from-file-path"><span class="octicon octicon-link"></span></a>2. Render from file path</h3>
+
+        <p>If you know the url or path to the stl file, call Madeleine directly with target div id and the file path.</p>
+
+        <div class="highlight highlight-html">
+<pre>
+<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"target"</span> <span class="na">class=</span><span class="s">"madeleine"</span><span class="nt">&gt;&lt;/div&gt;</span>
+
+<span class="nt">&lt;script&gt;</span>
+<span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
+    <span class="kd">var</span> <span class="nx">madeleine</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Madeleine</span><span class="p">({</span>
+      <span class="nx">target</span><span class="o">:</span> <span class="s1">'target'</span><span class="p">,</span> <span class="c1">// target div id</span>
+      <span class="nx">data</span><span class="o">:</span> <span class="s1">'path/to/file.stl'</span><span class="p">,</span> <span class="c1">// data path</span>
+      <span class="nx">path</span><span class="o">:</span> <span class="s1">'./src'</span>  <span class="c1">// path to source directory from current html file</span>
+    <span class="p">});</span>
+<span class="p">};</span> 
+<span class="nt">&lt;/script&gt;</span>
+</pre>
+        </div>
+
+        <h2><a name="license" class="anchor" href="#license"><span class="octicon octicon-link"></span></a>License</h2>
+
+        <p>This code is under <a href="http://choosealicense.com/licenses/mit/">MIT License</a>. You can do anything you want with my code, as long as you leave the attribution. It will be grateful if you contact me for interesting ideas to do with Madeleine.js. I'm willing to co-work with you!</p>
+
+        <h2><a name="who-am-i" class="anchor" href="#who-am-i"><span class="octicon octicon-link"></span></a>Who am I?</h2>
+
+        <p>My name is <a href="http://plrg.kaist.ac.kr/jjh">Junho Jin</a></p>
+      </section>
+    </div>
+
+    <!-- FOOTER  -->
+    <div id="footer_wrap" class="outer">
+      <footer class="inner">
+        <p class="copyright">Madeleine.js maintained by <a href="https://github.com/JinJunho">JinJunho</a></p>
+        <p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
+      </footer>
+    </div>
+
+    <script>
+      window.onload = function(){
+        Lily.ready({
+          target: 'target',
+          file: 'files',
+          path: '../src'
+        });
+      }; 
+    </script>
+
+  </body>
+</html>
--- a/images/bg_hr.png
+++ b/images/bg_hr.png
--- a/images/blacktocat.png
+++ b/images/blacktocat.png
--- a/images/icon_download.png
+++ b/images/icon_download.png
--- a/images/sprite_download.png
+++ b/images/sprite_download.png
--- a/models/dino2.stl
+++ b/models/dino2.stl
--- a/models/ducati.stl
+++ b/models/ducati.stl
--- a/models/gallardo.stl
+++ b/models/gallardo.stl
--- a/models/lamp.stl
+++ b/models/lamp.stl
--- a/models/octocat.stl
+++ b/models/octocat.stl
--- a/models/skull.stl
+++ b/models/skull.stl
--- a/models/treefrog.stl
+++ b/models/treefrog.stl
--- a/src/Madeleine.js
+++ b/src/Madeleine.js
--- a/src/css/Madeleine.css
+++ b/src/css/Madeleine.css
@ -0,0 +1,174 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: "madeleine";
+  src:url("../icons/madeleine.eot");
+  src:url("../icons/madeleine.eot?#iefix")    format("embedded-opentype"),
+      url("../icons/madeleine.svg#madeleine") format("svg"),
+      url("../icons/madeleine.ttf")           format("truetype"),
+      url("../icons/madeleine.woff")          format("woff");
+  font-weight: normal;
+  font-style: normal;
+
+}
+
+[data-icon]:before {
+  font-family: "madeleine" !important;
+  content: attr(data-icon);
+  font-style: normal !important;
+  font-weight: normal !important;
+  font-variant: normal !important;
+  text-transform: none !important;
+  speak: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: block;
+  margin: 1px 10px;
+  font-size: 18px;
+  color: #FFFFFF;
+  height: 18px;
+  width: 18px;
+  padding: 0;
+}
+
+[class^="icon-"]:before,
+[class*="icon-"]:before {
+  font-family: "madeleine" !important;
+  font-style: normal !important;
+  font-weight: normal !important;
+  font-variant: normal !important;
+  text-transform: none !important;
+  speak: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: block;
+  margin: 1px 10px;
+  font-size: 18px;
+  color: #FFFFFF;
+  height: 18px;
+  width: 18px;
+  padding: 0;
+}
+
+[data-icon]:hover,
+[data-icon]:focus,
+[class^="icon-"]:hover,
+[class^="icon-"]:focus,
+[class*="icon-"]:hover,
+[class*="icon-"]:focus {
+  text-shadow: 0 0 5px #009999;
+  -webkit-transition: text-shadow .4s ease; /* Safari and Chrome */
+  -moz-transition: text-shadow .4s ease; /* Firefox 4 */
+  -o-transition: text-shadow .4s ease;
+  transition: text-shadow .4s ease;
+}
+
+.focused {
+  text-shadow: 0 0 5px #009999;
+}
+
+.icon-mad-rotate-stop:before {
+  content: "p";
+}
+.icon-mad-rotate-play:before {
+  content: "r";
+}
+.icon-mad-rotate-slower:before {
+  content: "s";
+}
+.icon-mad-rotate-faster:before {
+  content: "f";
+}
+.icon-mad-screen-full:before {
+  content: "g";
+}
+.icon-mad-zoom:before {
+  content: "z";
+}
+.icon-mad-alert:before {
+  content: "w";
+}
+.icon-mad-capture:before {
+  content: "c";
+}
+.icon-mad-view:before {
+  content: "v";
+}
+.icon-mad-info:before {
+  content: "i";
+}
+.icon-mad-download:before {
+  content: "d";
+}
+.icon-mad-zoom-plus:before {
+  content: "a";
+}
+.icon-mad-zoom-minus:before {
+  content: "m";
+}
+.icon-mad-control-down:before {
+  content: "j";
+}
+.icon-mad-control-left:before {
+  content: "h";
+}
+.icon-mad-control-right:before {
+  content: "l";
+}
+.icon-mad-control-up:before {
+  content: "k";
+}
+.icon-mad-control-center:before {
+  content: "t";
+}
+
+.madeleine-logo {
+  background-image: url(../icons/logo.png);
+  background-repeat: no-repeat;
+  background-position: center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  margin: 0 15px 0 5px;
+  height: 20px;
+  width: 20px;
+  float: left;
+}
+
+.model-info {
+  float: left;
+  cursor: default;
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 20px;
+  font-size: 14px;
+  color: #FFFFFF;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.pull-left {
+  float: left;
+}
+.pull-right {
+  float: right;
+}
+
+.box {
+  -webkit-box-sizing:border-box;
+  -moz-box-sizing:border-box;
+  box-sizing:border-box;
+}
+
+.noselect {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
--- a/src/icons/logo.png
+++ b/src/icons/logo.png
--- a/src/icons/madeleine.eot
+++ b/src/icons/madeleine.eot
--- a/src/icons/madeleine.svg
+++ b/src/icons/madeleine.svg
@ -0,0 +1,28 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by Fontastic.me</metadata>
+<defs>
+<font id="madeleine" horiz-adv-x="512">
+<font-face font-family="madeleine" units-per-em="512" ascent="480" descent="-32"/>
+<missing-glyph horiz-adv-x="512" />
+
+<glyph unicode="&#112;" d="M128 96l96 0 0 320-96 0z m160 320l0-320 96 0 0 320z"/>
+<glyph unicode="&#114;" d="M128 416l256-160-256-160z"/>
+<glyph unicode="&#115;" d="M256 256l192-128 0 256z m-192 0l192-128 0 256z"/>
+<glyph unicode="&#102;" d="M64 128l192 128-192 128z m384 128l-192 128 0-256z"/>
+<glyph unicode="&#103;" d="M96 128l320 0 0 256-320 0z m64 192l192 0 0-128-192 0z m-96 96l96 0 0 32-128 0 0-128 32 0z m0-224l-32 0 0-128 128 0 0 32-96 0z m288 256l0-32 96 0 0-96 32 0 0 128z m96-352l-96 0 0-32 128 0 0 128-32 0z"/>
+<glyph unicode="&#122;" d="M493 96l-125 125c18 29 29 62 29 99 0 106-86 192-192 192-106 0-192-86-192-192 0-106 86-192 192-192 36 0 70 11 99 28l125-124c9-9 23-9 32 0l32 32c9 9 9 23 0 32z m-288 96c-71 0-128 57-128 128 0 71 57 128 128 128 70 0 128-57 128-128 0-71-58-128-128-128z"/>
+<glyph unicode="&#119;" d="M503 112l-219 383c-6 10-17 16-28 16-11 0-22-6-28-16l-219-383c-6-10-6-22 0-32 6-10 16-16 28-16l438 0c12 0 22 6 28 16 6 10 6 22 0 32z m-215 16l-64 0 0 64 64 0z m0 96l-64 0 0 128 64 0z"/>
+<glyph unicode="&#99;" d="M256 320c-35 0-64-29-64-64 0-35 29-64 64-64 3 0 6 0 8 1-23 3-40 23-40 47 0 27 21 48 48 48 24 0 44-17 47-40 1 2 1 5 1 8 0 35-29 64-64 64z m192 64l-64 0-64 64-128 0-64-64-64 0c-18 0-32-14-32-32l0-224c0-18 14-32 32-32l384 0c18 0 32 14 32 32l0 224c0 18-14 32-32 32z m-240 32l96 0 32-32-160 0z m-128-288c-9 0-16 7-16 16l0 144 32 0 0 32-32 0 0 16c0 9 7 16 16 16l91 0c-2-2-4-4-6-5-49-50-49-132 0-182l38-37z m176 32c-53 0-96 43-96 96 0 53 43 96 96 96 53 0 96-43 96-96 0-53-43-96-96-96z m160 112l-75 80 75 0z"/>
+<glyph unicode="&#118;" d="M256 448c-96 0-208-64-256-192 48-96 144-160 256-160 112 0 208 64 256 160-48 128-160 192-256 192z m0-320c-96 0-176 64-192 128 16 64 96 128 192 128 96 0 176-64 192-128-16-64-96-128-192-128z m0 224c-10 0-19-2-28-5 17-7 28-24 28-43 0-27-21-48-48-48-19 0-36 11-43 28-3-9-5-18-5-28 0-53 43-96 96-96 53 0 96 43 96 96 0 53-43 96-96 96z"/>
+<glyph unicode="&#105;" d="M253 492c65 0 120-22 167-67 46-45 70-100 72-165 0-65-22-121-68-167-45-47-100-71-165-73-65 0-121 22-167 68-47 45-71 100-72 165-1 65 21 121 67 167 46 47 101 71 166 72m27-78c-15 0-26-4-34-13-8-8-12-16-12-25 0-10 2-17 8-23 6-5 14-8 25-8 13 0 24 4 31 11 8 8 12 17 12 28 0 20-10 30-30 30m-62-304c10 0 25 4 43 13 19 9 37 22 54 40 0 0-9 12-9 12-16-12-28-18-37-18-4 0-5 6-2 19 0 0 22 82 22 82 9 33 5 49-11 49-11 0-26-5-46-15-20-10-40-22-59-38 0 0 8-13 8-13 18 11 31 17 38 17 4 0 4-6 0-17 0 0-18-78-18-78-9-36-3-53 17-53"/>
+<glyph unicode="&#100;" d="M478 233c8-17 11-34 7-49 0 0-17-94-17-94-1-7-4-13-10-18-6-5-12-7-20-7 0 0-364 0-364 0-8 0-15 2-20 7-6 5-9 11-10 18 0 0-18 94-18 94-2 17 0 34 8 49 0 0 80 192 80 192 8 16 20 24 37 24 0 0 54 0 54 0 0 0-11-105-11-105 0 0-68 0-68 0 0 0 130-107 130-107 0 0 131 107 131 107 0 0-70 0-70 0 0 0-9 105-9 105 0 0 52 0 52 0 17 0 30-8 38-24 0 0 80-192 80-192m-35-67c1 7-1 14-5 19-4 6-10 9-17 9 0 0-330 0-330 0-8 0-13-3-17-9-5-5-6-12-6-19 0 0 8-38 8-38 0-8 4-14 9-19 6-5 12-8 19-8 0 0 303 0 303 0 8 0 15 3 20 8 6 5 9 11 10 19 0 0 6 38 6 38"/>
+<glyph unicode="&#97;" d="M389 282c10 0 15-9 15-26 0-17-5-26-15-26 0 0-107 0-107 0 0 0 0-107 0-107 0-10-9-15-26-15-17 0-26 5-26 15 0 0 0 107 0 107 0 0-107 0-107 0-10 0-15 9-15 26 0 17 5 26 15 26 0 0 107 0 107 0 0 0 0 107 0 107 0 10 9 15 26 15 17 0 26-5 26-15 0 0 0-107 0-107 0 0 107 0 107 0"/>
+<glyph unicode="&#109;" d="M389 282c10 0 15-9 15-26 0-17-5-26-15-26 0 0-266 0-266 0-10 0-15 9-15 26 0 17 5 26 15 26 0 0 266 0 266 0"/>
+<glyph unicode="&#106;" d="M352 352l-96-96-96 96-64-64 160-160 160 160z"/>
+<glyph unicode="&#104;" d="M368 352l-64 64-160-160 160-160 64 64-96 96z"/>
+<glyph unicode="&#108;" d="M208 416l-64-64 96-96-96-96 64-64 160 160z"/>
+<glyph unicode="&#107;" d="M256 384l-160-160 64-64 96 96 96-96 64 64z"/>
+<glyph unicode="&#116;" d="M128 256c0 71 57 128 128 128 71 0 128-57 128-128 0-71-57-128-128-128-71 0-128 57-128 128z"/>
+</font></defs></svg>
--- a/src/icons/madeleine.ttf
+++ b/src/icons/madeleine.ttf
--- a/src/icons/madeleine.woff
+++ b/src/icons/madeleine.woff
--- a/src/lib/MadeleineConverter.js
+++ b/src/lib/MadeleineConverter.js
@ -0,0 +1,100 @@
+/**
+ * @author    Junho Jin[junho.jin@kaist.ac.kr] | https://github.com/JinJunho
+ * @version   1.0.0
+ *
+ * [Project] Madeleine.js, Pure JavaScript STL Parser & Renderer. 
+ * [Module] MadeleineConverter.js
+ * 
+ * [Description] MadeleineConverter parses your ASCII stl file into binary
+ * stl file. MadeleineConverter runs in the background without affecting any 
+ * performance degradation of other script execution.
+ */
+
+var workerFacadeMessage;
+
+MadeleineConverter = function(event) {
+
+  var data = event.data;
+
+  // Check if data is string
+  if (typeof data != "string") {
+    // Send error message
+    workerFacadeMessage({
+      type: "error",
+      data: "You've passed ill-formed data. MadeleineConverter failed."
+    });
+
+    return;
+  }
+
+  var vertexRegExp, normalRegExp, facetRegExp;
+  var blobArray, prefix, header, facets, vert, tail;
+  var vertex, normal, match, rest;
+  var count, progress, i;
+
+  progress = 0;
+  blobArray = new Array();
+  count = (data.match(/endfacet/g) || []).length;
+
+  header = new Uint8Array(80);
+  facets = new Uint32Array([count]);
+  prefix = "3CREATORS-CONVERTED-STL-BINARY-FORMAT-------------------------------------------";
+
+  facetRegExp = new RegExp(/facet([\s\S]*?)endfacet/g);
+  normalRegExp = new RegExp(/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);
+  vertexRegExp = new RegExp(/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);
+
+  // Attach header array
+  for (i = 0; i < 80; i++) {header[i] = prefix.charCodeAt(i)}
+  blobArray.push(header);
+  blobArray.push(facets);
+
+  // Attach vector array
+  while ((match = facetRegExp.exec(data)) !== null) {
+    vert = new Float32Array(12);
+    tail = new Uint16Array([0]);
+    rest = match[0]; // a facet 
+    progress++;
+    i = 0;
+
+    // Get normal vector
+    while ((match = normalRegExp.exec(rest)) !== null) {
+      vert[0] = parseFloat(match[1]);
+      vert[1] = parseFloat(match[2]);
+      vert[2] = parseFloat(match[3]);
+    }
+    // Get vectors for each vertex
+    while ((match = vertexRegExp.exec(rest)) !== null) {
+      vert[(i+1)*3 + 0] = parseFloat(match[1]);
+      vert[(i+1)*3 + 1] = parseFloat(match[2]);
+      vert[(i+1)*3 + 2] = parseFloat(match[3]);
+      i++;
+    }
+
+    // Append vector
+    blobArray.push(vert);
+    blobArray.push(tail);
+
+    // Report current progress
+    if (progress % 100 == 0) {
+      workerFacadeMessage({
+        type: "convert-progress",
+        data: Math.round((progress/count) * 100)
+      });
+    }
+  }
+
+  // Send done message
+  workerFacadeMessage({
+    type: "done",
+    data: new Blob(blobArray, {type: "application/octet-binary"})
+  });
+
+};
+
+if (typeof(window) === "undefined") {
+  onmessage = MadeleineConverter;
+  workerFacadeMessage = postMessage;
+} else {
+  workerFacadeMessage = WorkerFacade.add("../src/lib/MadeleineConverter.js", MadeleineConverter);
+}
--- a/src/lib/MadeleineLoader.js
+++ b/src/lib/MadeleineLoader.js
@ -0,0 +1,490 @@
+/**
+ * @author    Junho Jin[junho.jin@kaist.ac.kr] | https://github.com/JinJunho
+ * @version   1.0.0
+ *
+ * [Project] Madeleine.js, Pure JavaScript STL Parser & Renderer. 
+ * [Module] MadeleineLoader.js
+ * 
+ * [Description] MadeleineLoader takes raw arrayBuffer data of a stl file and
+ * parses the data properly by checking if its format is binary of ASCII. For
+ * better performance, MadeleineLoader runs in the background, not affecting
+ * any performance degradation of browser rendering or script execution.
+ */
+
+var workerFacadeMessage;
+
+MadeleineLoader = function(event) {
+
+  var arrbuf = event.data.arrbuf;
+  var rawText = event.data.rawtext;
+  var reader = new DataReader(arrbuf);
+
+  var maxX = 0, maxY = 0, maxZ = 0;
+  var minX = 0, minY = 0, minZ = 0;
+  var avgX = 0, avgY = 0, avgZ = 0;
+  var centerX, centerY, centerZ;
+  var normals, vertices;
+  var facets = 0;
+
+  var checkSTLType, parseBinarySTL, parseASCIISTL;
+  var hasColors = false, colors, alpha;
+  var normalX, normalY, normalZ;
+  var vertexX, vertexY, vertexZ;
+
+  // STL file type checker
+  checkSTLType = function() {
+    var realSize, dataSize, isBinary;
+
+    // NOTE:
+    //    Because STL files don't provide any information whether they are ASCII or binary,
+    //    We have to distinguish them by looking up the file structure.
+    //      - REFERENCE: http://en.wikipedia.org/wiki/STL_(file_format)
+    //    STL binary file starts with 80-character header.
+    //    (If a file starts with "solid" (literally), it's mostly accepted as an ASCII STL file)
+    //    After header, 4 bytes unsigned ingeter follows. (number of triangular facets in the file)
+    //    Now the data (triangular facets) starts, where each facet consists of 50 bytes.
+    //      First 12 bytes     : 32-bit normal vector
+    //      Following 36 bytes : 32-bit vertex for 3 coordinates (X|Y|Z)
+    //      Last 2 bytes       : short unsigned integer for "attribute byte count"
+    //    So if the file is Binary STL file, then the size must be
+    //    80 + 4 + 50 * number of triangular facets
+
+    reader.skip(80);
+
+    // reader.readUInt32() == number of facets
+    dataSize = 80 + 4 + 50 * reader.readUInt32();
+    realSize = reader.getLength();
+    isBinary = dataSize == realSize;
+
+    // Send data type
+    workerFacadeMessage({
+      type: "info",
+      prop: "type",
+      data: isBinary ? "binary" : "ascii"
+    });
+
+    // Send data size
+    workerFacadeMessage({
+      type: "info",
+      prop: "size",
+      data: (function(bytes) {
+        var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        if (bytes == 0) return '0 Byte';
+        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+        return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
+      })(realSize)
+    });
+
+    return isBinary;
+  };
+
+  // Parse binary stl file
+  parseBinarySTL = function() {
+    var color, colorR, colorG, colorB;
+    var defaultR, defaultG, defaultB;
+    var index, i, j;
+
+    // Point head of reader.
+    reader.reset();
+
+    // Get color information from the first 80 bytes if exists.
+    for (i = 0; i < 80 - 10; i++) {
+      if ((reader.getUInt32(i, false) == 0x434F4C4F /*COLO*/) && (reader.getUInt8(i + 4) == 0x52 /*'R'*/) && (reader.getUInt8(index + 5) == 0x3D /*'='*/)) {
+        hasColors = true;
+        colors = new Float32Array(facets * 3 * 3);
+        defaultR = reader.getUInt8(i + 6) / 255;
+        defaultG = reader.getUInt8(i + 7) / 255;
+        defaultB = reader.getUInt8(i + 8) / 255;
+        alpha = reader.getUInt8(i + 9) / 255;
+      }
+    }
+    reader.skip(80);
+
+    // Get the number of triangular facets, and initialize
+    // normals and vertices with the size of facets.
+    index = 0;
+    facets = reader.readUInt32();
+    normals = new Float32Array(facets * 3 * 3);
+    vertices = new Float32Array(facets * 3 * 3);
+
+    // iterate triangular facets
+    for (i = 0; i < facets; i++) {
+      // Send current progress
+      if (i % 100 == 0) {
+        workerFacadeMessage({
+          type: "progress",
+          data: Math.round((i/facets) * 100)
+        });
+      }
+      // Get color information from attribute bytes 
+      if (hasColors) {
+        color = reader.getUInt16(reader.getCurrIndex() + 48);
+        if ((color & 0x8000) === 0) { // facet has its own unique color
+          colorR = (color & 0x1F) / 31;
+          colorG = ((color >> 5) & 0x1F) / 31;
+          colorB = ((color >> 10) & 0x1F) / 31;
+        } else {
+          colorR = defaultR;
+          colorG = defaultG;
+          colorB = defaultB;
+        }
+      }
+      // Read normal vector
+      normalX = reader.readFloat32();
+      normalY = reader.readFloat32();
+      normalZ = reader.readFloat32();
+      // Get vertices for each coordinate
+      for (j = 0; j < 3; j++) {
+        // Add vertex vector
+        vertexX = reader.readFloat32();
+        vertexY = reader.readFloat32();
+        vertexZ = reader.readFloat32();
+        vertices[index]     = vertexX;
+        vertices[index + 1] = vertexY;
+        vertices[index + 2] = vertexZ;
+        // Add normal vector
+        normals[index]      = normalX;
+        normals[index + 1]  = normalY;
+        normals[index + 2]  = normalZ;
+        // Get bounding box
+        maxX = Math.max(maxX, vertexX);
+        maxY = Math.max(maxY, vertexY);
+        maxZ = Math.max(maxZ, vertexZ);
+        minX = Math.min(minX, vertexX);
+        minY = Math.min(minY, vertexY);
+        minZ = Math.min(minZ, vertexZ);
+        // Aggregate vertex points
+        avgX += vertexX;
+        avgY += vertexY;
+        avgZ += vertexZ;
+        // Set color if exists
+        if (hasColors) {
+          colors[index]     = colorR;
+          colors[index + 1] = colorG;
+          colors[index + 2] = colorB;
+        }
+        index += 3;
+      }
+      // Skip the attribute byte count
+      reader.readUInt16();
+    }
+  };
+
+  // Parse ASCII stl file
+  parseASCIISTL = function() {
+    var figures, data;
+    var index, i, j;
+
+    // To parse the ASCII STL file, we need to read the data itself.
+    // STL file is written as below. We need to remove the structures
+    // and extract numbers only.
+    //  - ASCII STL File Structure:
+    //      solid name
+    //      facet normal ni nj nk
+    //          outer loop
+    //              vertex v1x v1y v1z
+    //              vertex v2x v2y v2z
+    //              vertex v3x v3y v3z
+    //          endloop
+    //      endfacet
+    //      endsolid name
+
+    data = rawText.replace(/\r/g, "\n");                      // make linebreak
+    data = data.replace(/(\s)+\1/g, "\n");                    // remove first whitespaces of each line
+    data = data.replace(/(solid|endsolid)[^.\n]+(\n?)/g, ""); // remove first and last lines
+    data = data.replace(/\n/g, " ");                          // remove linebreaks
+    data = data.replace(/facet normal /g, "");                // remove 'facet normal'
+    data = data.replace(/outer loop /g, "");                  // remove 'outer loop'
+    data = data.replace(/vertex /g, "");                      // remove 'vertex'
+    data = data.replace(/endloop /g, "");                     // remove 'endloop'
+    data = data.replace(/endfacet(\s?)/g, "");                // remove 'endfacet'
+
+    figures = data.split(" ");
+    facets = (figures.length - 1) / 12;
+    index = 0;
+
+    normals = new Float32Array(facets * 3 * 3);
+    vertices = new Float32Array(facets * 3 * 3);
+    vertexCount = 0;
+
+    for (i = 0; i < facets; i++) {
+      // Send current progress
+      if (i % 100 == 0) {
+        workerFacadeMessage({
+          type: "progress",
+          data: Math.round((i/facets) * 100)
+        });
+      }
+      // Get normal vector
+      normalX = figures[i*12];
+      normalY = figures[i*12 + 1];
+      normalZ = figures[i*12 + 2];
+      for (j = 1; j <= 3; j++) {
+        // Add vertex vector
+        vertexX = figures[i*12 + j*3];
+        vertexY = figures[i*12 + j*3 + 1];
+        vertexZ = figures[i*12 + j*3 + 2];
+        vertices[index]     = vertexX;
+        vertices[index + 1] = vertexY;
+        vertices[index + 2] = vertexZ;
+        // Add normal vector
+        normals[index]      = normalX;
+        normals[index + 1]  = normalY;
+        normals[index + 2]  = normalZ;
+        // Get bounding box
+        maxX = Math.max(maxX, vertexX);
+        maxY = Math.max(maxY, vertexY);
+        maxZ = Math.max(maxZ, vertexZ);
+        minX = Math.min(minX, vertexX);
+        minY = Math.min(minY, vertexY);
+        minZ = Math.min(minZ, vertexZ);
+        // Aggregate vertex points
+        avgX += vertexX;
+        avgY += vertexY;
+        avgZ += vertexZ;
+        // Increase index
+        index += 3;
+      }
+    }
+
+    // Send parsing result 
+    workerFacadeMessage({
+      type: "convert",
+      data: data
+    });
+  };
+
+  // Check STL File type and parse it.
+  if (checkSTLType(reader)) parseBinarySTL();
+  else parseASCIISTL();
+    
+  // Get the densest point of object (most promising center point of object)
+  avgX = avgX / (facets * 3);
+  avgY = avgY / (facets * 3);
+  avgZ = avgZ / (facets * 3);
+
+  var calibrate = (5 < Math.abs((maxX + minX) / 2) && Math.round(Math.abs(avgX)) != 0);
+
+  // Sometimes objects are placed far from the center of x-axis
+  // If object is far from the center of x-axis, shift the position
+  if (calibrate) {
+    // Report calibration
+    workerFacadeMessage({
+      type: "message",
+      data: "Calibrating object position (X-Delta: " + Math.round(avgX) + 
+            ", Y-Delta: " + Math.round(avgY) + ")"
+    });
+    // Shift all points to center of screen
+    for (i = 0; i < vertices.length/3; i++) {
+      vertices[i*3]   = vertices[i*3] - avgX;
+      vertices[i*3+1] = vertices[i*3+1] - avgY;
+      vertices[i*3+2] = vertices[i*3+2] - avgZ;
+    }
+  } 
+
+  // Send acquired bounding box 
+  workerFacadeMessage({
+    type: "data",
+    prop: "bounds",
+    data: {
+      max: {x: (calibrate ? maxX - avgX : maxX), y: (calibrate ? maxY - avgY : maxY), z: (calibrate ? maxZ - avgZ : maxZ)},
+      min: {x: (calibrate ? minX - avgX : minX), y: (calibrate ? minY - avgY : minY), z: (calibrate ? minZ - avgZ : minZ)}
+    } 
+  });
+
+  // Send acquired center 
+  workerFacadeMessage({
+    type: "data",
+    prop: "center",
+    data: [avgX, avgY, avgZ]
+  });
+
+  // Send parsing result 
+  workerFacadeMessage({
+    type: "done",
+    data: {
+      hasColors: hasColors,
+      vertices: vertices,
+      normals: normals,
+      colors: colors,
+      alpha: alpha
+    }
+  });
+};
+
+if (typeof(window) === "undefined") {
+  onmessage = MadeleineLoader;
+  workerFacadeMessage = postMessage;
+} else {
+  workerFacadeMessage = WorkerFacade.add("../src/lib/MadeleineLoader.js", MadeleineLoader);
+}
+
+// Source: http://threejs.org/examples/js/loaders/STLLoader.js 
+// In case DataView is not supported from the browser, create it.
+if (typeof DataView === 'undefined') {
+  DataView = function(buffer, byteOffset, byteLength){
+    this.buffer = buffer;
+    this.byteOffset = byteOffset || 0;
+    this.byteLength = byteLength || buffer.byteLength || buffer.length;
+    this._isString = typeof buffer === "string";
+  }
+  DataView.prototype = {
+    _getCharCodes:function(buffer,start,length){
+      start = start || 0;
+      length = length || buffer.length;
+      var end = start + length;
+      var codes = [];
+      for (var i = start; i < end; i++) {
+        codes.push(buffer.charCodeAt(i) & 0xff);
+      }
+      return codes;
+    },
+    _getBytes: function (length, byteOffset, littleEndian) {
+      var result;
+      // Handle the lack of endianness
+      if (littleEndian === undefined) {
+        littleEndian = this._littleEndian;
+      }
+      // Handle the lack of byteOffset
+      if (byteOffset === undefined) {
+        byteOffset = this.byteOffset;
+      } else {
+        byteOffset = this.byteOffset + byteOffset;
+      }
+      if (length === undefined) {
+        length = this.byteLength - byteOffset;
+      }
+      // Error Checking
+      if (typeof byteOffset !== 'number') {
+        throw new TypeError('DataView byteOffset is not a number');
+      }
+      if (length < 0 || byteOffset + length > this.byteLength) {
+        throw new Error('DataView length or (byteOffset+length) value is out of bounds');
+      }
+      if (this.isString){
+        result = this._getCharCodes(this.buffer, byteOffset, byteOffset + length);
+      } else {
+        result = this.buffer.slice(byteOffset, byteOffset + length);
+      }
+      if (!littleEndian && length > 1) {
+        if (!(result instanceof Array)) {
+          result = Array.prototype.slice.call(result);
+        }
+        result.reverse();
+      }
+      return result;
+    },
+    // Compatibility functions on a String Buffer
+    getFloat64: function (byteOffset, littleEndian) {
+      var b = this._getBytes(8, byteOffset, littleEndian),
+        sign = 1 - (2 * (b[7] >> 7)),
+        exponent = ((((b[7] << 1) & 0xff) << 3) | (b[6] >> 4)) - ((1 << 10) - 1),
+        // Binary operators such as | and << operate on 32 bit values, using + and Math.pow(2) instead
+        mantissa = ((b[6] & 0x0f) * Math.pow(2, 48)) + (b[5] * Math.pow(2, 40)) + (b[4] * Math.pow(2, 32)) +
+                   (b[3] * Math.pow(2, 24)) + (b[2] * Math.pow(2, 16)) + (b[1] * Math.pow(2, 8)) + b[0];
+      if (exponent === 1024) {
+        if (mantissa !== 0) return NaN;
+        else return sign * Infinity;
+      }
+      if (exponent === -1023) { // Denormalized
+        return sign * mantissa * Math.pow(2, -1022 - 52);
+      }
+      return sign * (1 + mantissa * Math.pow(2, -52)) * Math.pow(2, exponent);
+    },
+    getFloat32: function (byteOffset, littleEndian) {
+      var b = this._getBytes(4, byteOffset, littleEndian),
+        sign = 1 - (2 * (b[3] >> 7)),
+        exponent = (((b[3] << 1) & 0xff) | (b[2] >> 7)) - 127,
+        mantissa = ((b[2] & 0x7f) << 16) | (b[1] << 8) | b[0];
+      if (exponent === 128) {
+        if (mantissa !== 0) return NaN;
+        else return sign * Infinity;
+      }
+      if (exponent === -127) { // Denormalized
+        return sign * mantissa * Math.pow(2, -126 - 23);
+      }
+      return sign * (1 + mantissa * Math.pow(2, -23)) * Math.pow(2, exponent);
+    },
+    getInt32: function (byteOffset, littleEndian) {
+      var b = this._getBytes(4, byteOffset, littleEndian);
+      return (b[3] << 24) | (b[2] << 16) | (b[1] << 8) | b[0];
+    },
+    getUint32: function (byteOffset, littleEndian) {
+      return this.getInt32(byteOffset, littleEndian) >>> 0;
+    },
+    getInt16: function (byteOffset, littleEndian) {
+      return (this.getUint16(byteOffset, littleEndian) << 16) >> 16;
+    },
+    getUint16: function (byteOffset, littleEndian) {
+      var b = this._getBytes(2, byteOffset, littleEndian);
+      return (b[1] << 8) | b[0];
+    },
+    getInt8: function (byteOffset) {
+      return (this.getUint8(byteOffset) << 24) >> 24;
+    },
+    getUint8: function (byteOffset) {
+      return this._getBytes(1, byteOffset)[0];
+    }
+  };
+}
+
+// Custom Data Reader.
+// Caution: No protection of accessing index over its size limit.
+DataReader = function(binary) {
+  this.idx = 0; // in bytes
+  this.data = binary;
+  this.buffer = null;
+  this.reader = new DataView(binary); // binary = arrayBuffer
+  this.littleEndian = true;
+
+  // Helper functions
+  this.skip         = function(idx) { this.idx += idx };
+  this.reset        = function() { this.idx = 0 };
+  this.getLength    = function() { return this.data.byteLength };
+  this.getCurrIndex = function() { return this.idx };
+
+  // Simply get the data at specified index.
+  this.getInt8      = function() { return this.reader.getInt8(arguments[0], 1 < arguments.length ? arguments[1] : this.littleEndian) };
+  this.getInt16     = function() { return this.reader.getInt16(arguments[0], 1 < arguments.length ? arguments[1] : this.littleEndian) };
+  this.getInt32     = function() { return this.reader.getInt32(arguments[0], 1 < arguments.length ? arguments[1] : this.littleEndian) };
+  this.getUInt8     = function() { return this.reader.getUint8(arguments[0], 1 < arguments.length ? arguments[1] : this.littleEndian) };
+  this.getUInt16    = function() { return this.reader.getUint16(arguments[0], 1 < arguments.length ? arguments[1] : this.littleEndian) };
+  this.getUInt32    = function() { return this.reader.getUint32(arguments[0], 1 < arguments.length ? arguments[1] : this.littleEndian) };
+  this.getFloat32   = function() { return this.reader.getFloat32(arguments[0], 1 < arguments.length ? arguments[1] : this.littleEndian) };
+  this.getFloat64   = function() { return this.reader.getFloat64(arguments[0], 1 < arguments.length ? arguments[1] : this.littleEndian) };
+
+  // Read the data from the current index.
+  // After reading the data, the index moves as much the data read.
+  this.readInt8 = function() { 
+    this.buffer = this.reader.getInt8(this.idx, 0 < arguments.length ? arguments[0] : this.littleEndian);
+    this.idx += 1; return this.buffer;
+  };
+  this.readInt16 = function() { 
+    this.buffer = this.reader.getInt16(this.idx, 0 < arguments.length ? arguments[0] : this.littleEndian);
+    this.idx += 2; return this.buffer;
+  };
+  this.readInt32 = function() { 
+    this.buffer = this.reader.getInt32(this.idx, 0 < arguments.length ? arguments[0] : this.littleEndian);
+    this.idx += 4; return this.buffer;
+  };
+  this.readUInt8 = function() { 
+    this.buffer = this.reader.getUint8(this.idx, 0 < arguments.length ? arguments[0] : this.littleEndian);
+    this.idx += 1; return this.buffer;
+  };
+  this.readUInt16 = function() { 
+    this.buffer = this.reader.getUint16(this.idx, 0 < arguments.length ? arguments[0] : this.littleEndian);
+    this.idx += 2; return this.buffer;
+  };
+  this.readUInt32 = function() { 
+    this.buffer = this.reader.getUint32(this.idx, 0 < arguments.length ? arguments[0] : this.littleEndian);
+    this.idx += 4; return this.buffer;
+  };
+  this.readFloat32 = function() { 
+    this.buffer = this.reader.getFloat32(this.idx, 0 < arguments.length ? arguments[0] : this.littleEndian);
+    this.idx += 4; return this.buffer;
+  };
+  this.readFloat64 = function() { 
+    this.buffer = this.reader.getFloat64(this.idx, 0 < arguments.length ? arguments[0] : this.littleEndian);
+    this.idx += 8; return this.buffer;
+  };
+};
--- a/src/lib/detector.js
+++ b/src/lib/detector.js
@ -0,0 +1,59 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+Detector = {
+
+	canvas: !! window.CanvasRenderingContext2D,
+	webgl: ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )(),
+	workers: !! window.Worker,
+	fileapi: window.File && window.FileReader && window.FileList && window.Blob,
+
+	getWebGLErrorMessage: function () {
+
+		var element = document.createElement( 'div' );
+		element.id = 'webgl-error-message';
+		element.style.fontFamily = 'monospace';
+		element.style.fontSize = '13px';
+		element.style.fontWeight = 'normal';
+		element.style.textAlign = 'center';
+		element.style.background = '#fff';
+		element.style.color = '#000';
+		element.style.padding = '1.5em';
+		element.style.width = '400px';
+		element.style.margin = '5em auto 0';
+
+		if ( ! this.webgl ) {
+
+			element.innerHTML = window.WebGLRenderingContext ? [
+				'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br />',
+				'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
+			].join( '\n' ) : [
+				'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br/>',
+				'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
+			].join( '\n' );
+
+		}
+
+		return element;
+
+	},
+
+	addGetWebGLMessage: function ( parameters ) {
+
+		var parent, id, element;
+
+		parameters = parameters || {};
+
+		parent = parameters.parent !== undefined ? parameters.parent : document.body;
+		id = parameters.id !== undefined ? parameters.id : 'oldie';
+
+		element = Detector.getWebGLErrorMessage();
+		element.id = id;
+
+		parent.appendChild( element );
+
+	}
+
+};
--- a/src/lib/stats.js
+++ b/src/lib/stats.js
@ -0,0 +1,7 @@
+// stats.js r8 - http://github.com/mrdoob/stats.js
+var Stats=function(){var h,a,n=0,o=0,i=Date.now(),u=i,p=i,l=0,q=1E3,r=0,e,j,f,b=[[16,16,48],[0,255,255]],m=0,s=1E3,t=0,d,k,g,c=[[16,48,16],[0,255,0]];h=document.createElement("div");h.style.cursor="pointer";h.style.width="80px";h.style.opacity="0.9";h.style.zIndex="10001";h.addEventListener("mousedown",function(a){a.preventDefault();n=(n+1)%2;n==0?(e.style.display="block",d.style.display="none"):(e.style.display="none",d.style.display="block")},!1);e=document.createElement("div");e.style.textAlign=
+"left";e.style.lineHeight="1.2em";e.style.backgroundColor="rgb("+Math.floor(b[0][0]/2)+","+Math.floor(b[0][1]/2)+","+Math.floor(b[0][2]/2)+")";e.style.padding="0 0 3px 3px";h.appendChild(e);j=document.createElement("div");j.style.fontFamily="Helvetica, Arial, sans-serif";j.style.fontSize="9px";j.style.color="rgb("+b[1][0]+","+b[1][1]+","+b[1][2]+")";j.style.fontWeight="bold";j.innerHTML="FPS";e.appendChild(j);f=document.createElement("div");f.style.position="relative";f.style.width="74px";f.style.height=
+"30px";f.style.backgroundColor="rgb("+b[1][0]+","+b[1][1]+","+b[1][2]+")";for(e.appendChild(f);f.children.length<74;)a=document.createElement("span"),a.style.width="1px",a.style.height="30px",a.style.cssFloat="left",a.style.backgroundColor="rgb("+b[0][0]+","+b[0][1]+","+b[0][2]+")",f.appendChild(a);d=document.createElement("div");d.style.textAlign="left";d.style.lineHeight="1.2em";d.style.backgroundColor="rgb("+Math.floor(c[0][0]/2)+","+Math.floor(c[0][1]/2)+","+Math.floor(c[0][2]/2)+")";d.style.padding=
+"0 0 3px 3px";d.style.display="none";h.appendChild(d);k=document.createElement("div");k.style.fontFamily="Helvetica, Arial, sans-serif";k.style.fontSize="9px";k.style.color="rgb("+c[1][0]+","+c[1][1]+","+c[1][2]+")";k.style.fontWeight="bold";k.innerHTML="MS";d.appendChild(k);g=document.createElement("div");g.style.position="relative";g.style.width="74px";g.style.height="30px";g.style.backgroundColor="rgb("+c[1][0]+","+c[1][1]+","+c[1][2]+")";for(d.appendChild(g);g.children.length<74;)a=document.createElement("span"),
+a.style.width="1px",a.style.height=Math.random()*30+"px",a.style.cssFloat="left",a.style.backgroundColor="rgb("+c[0][0]+","+c[0][1]+","+c[0][2]+")",g.appendChild(a);return{domElement:h,update:function(){i=Date.now();m=i-u;s=Math.min(s,m);t=Math.max(t,m);k.textContent=m+" MS ("+s+"-"+t+")";var a=Math.min(30,30-m/200*30);g.appendChild(g.firstChild).style.height=a+"px";u=i;o++;if(i>p+1E3)l=Math.round(o*1E3/(i-p)),q=Math.min(q,l),r=Math.max(r,l),j.textContent=l+" FPS ("+q+"-"+r+")",a=Math.min(30,30-l/
+100*30),f.appendChild(f.firstChild).style.height=a+"px",p=i,o=0}}};
--- a/src/lib/three.min.js
+++ b/src/lib/three.min.js