Update Readme
This commit is contained in:
Mario Voigt
parent
d7a6382243
commit
a881bb1d62
126
README.md
126
README.md
|
|
@ -1,87 +1,73 @@
|
|||
# Madeleine.js
|
||||
# Madeleine.js for Gitea
|
||||
|
||||
Madeleine.js is a 3D Model parser & renderer for STL files (ASCII and binary both).
|
||||
Madeleine.js Integration for Gitea. Does not work for ASCII files (in conjunction with gitea). You can convert ASCII files to binary using admesh. Admesh is available for Windows and Linux.
|
||||
|
||||
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).
|
||||
# Example
|
||||
See https://gitea.fablabchemnitz.de/MarioVoigt/STL-Test/src/branch/master/Bunny-LowPoly.stl (https://www.thingiverse.com/thing:151081/files)
|
||||
|
||||
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!
|
||||
# HowTo Steps
|
||||
|
||||
## 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>
|
||||
```
|
||||
apt install admesh
|
||||
admesh ascii-file.stl --write-binary-stl binary.stl
|
||||
Gitea config
|
||||
```
|
||||
|
||||
### 1. Immediate File Upload
|
||||
```
|
||||
cd /opt/gitea/custom/templates/
|
||||
mkdir base/
|
||||
cd base/
|
||||
```
|
||||
|
||||
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>
|
||||
|
||||
```
|
||||
vim /opt/gitea/custom/templates/base/footer.tmpl
|
||||
```
|
||||
```
|
||||
<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
|
||||
function lS(src){
|
||||
return new Promise(function(resolve, reject) {
|
||||
let s = document.createElement('script')
|
||||
s.src = src
|
||||
s.addEventListener('load', () => {
|
||||
resolve()
|
||||
})
|
||||
document.body.appendChild(s)
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
```
|
||||
if($('.view-raw>a[href$=".stl" i]').length){
|
||||
$('body').append('<link href="/Madeleine.js/src/css/Madeleine.css" rel="stylesheet">');
|
||||
Promise.all([lS("/Madeleine.js/src/lib/stats.js"),lS("/Madeleine.js/src/lib/detector.js"), lS("/Madeleine.js/src/lib/three.min.js"), lS("/Madeleine.js/src/Madeleine.js")]).then(function() {
|
||||
$('.view-raw').attr('id', 'view-raw').attr('style', 'padding: 0;margin-bottom: -10px;');
|
||||
new Madeleine({
|
||||
target: 'view-raw',
|
||||
data: $('.view-raw>a[href$=".stl" i]').attr('href'),
|
||||
path: '/Madeleine.js/src'
|
||||
});
|
||||
};
|
||||
$('.view-raw>a[href$=".stl"]').remove()
|
||||
});
|
||||
}
|
||||
</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>
|
||||
```
|
||||
chown git:git footer.tmpl
|
||||
chmod 770 footer.tmpl
|
||||
```
|
||||
|
||||
## License
|
||||
```
|
||||
cd /opt/gitea/custom/
|
||||
mkdir public/
|
||||
cd public/
|
||||
git clone https://github.com/JinJunho/Madeleine.js.git Madeleine.js/
|
||||
chown -R git:git /opt/gitea/custom/public
|
||||
```
|
||||
|
||||
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!
|
||||
```
|
||||
service gitea restart
|
||||
```
|
||||
|
||||
## Who am I?
|
||||
|
||||
I'm [Junho Jin](http://plrg.kaist.ac.kr/jjh) :)
|
||||
## Source code comes from http://jinjunho.github.io/Madeleine.js/
|
||||
Loading…
Reference in New Issue