View on GitHub

Madeleine.js

Pure javaScript 3D Model Viewer (.STL Format)

Download this project as a .zip file Download this project as a tar.gz file

Madeleine.js

Madeleine.js is a 3D Model parser & renderer for STL files (ASCII and binary both).

Madeleine.js uses Three.js as its 3D Engine, and was inspired by the demo code of tonylukasavage.

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

DEMO

Ajax loading

Light
Lime
Toxic
Lego
Cobalt
Soft
Rose
Dark

File upload

Download source or clone the 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.

<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 (Madeleine's sister) to get ready for file upload. She will take care of taking files, parsing, rendering and showing them.

<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.

<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. 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?

My name is Junho Jin