158 lines
9.3 KiB
HTML
158 lines
9.3 KiB
HTML
<!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 & 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"><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">></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"src/lib/stats.js"</span><span class="nt">></script></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"src/lib/detector.js"</span><span class="nt">></script></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"src/lib/three.min.js"</span><span class="nt">></script></span>
|
|
<span class="nt"><script </span><span class="na">src=</span><span class="s">"src/Madeleine.js"</span><span class="nt">></script></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"><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">></span>
|
|
<span class="nt"><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">></span>
|
|
<span class="nt"></form></span>
|
|
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"target"</span><span class="nt">></div></span>
|
|
|
|
<span class="nt"><script></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"></script></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"><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">></div></span>
|
|
|
|
<span class="nt"><script></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"></script></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>
|