add save example

This commit is contained in:
casperlamboo 2017-05-13 15:39:45 +02:00 committed by Simon Voordouw
parent 0bc84ed0a2
commit 85b2040ce9
7 changed files with 89 additions and 42 deletions

View File

@ -1,29 +1,11 @@
<!DOCTYPE> <!DOCTYPE>
<html> <html>
<head> <head>
<title>Doodle3D Slicer</title> <title>Doodle3D Slicer</title>
<style>
#gcode {
font-family: monospace;
}
</style>
<script type="text/javascript" src="../jspm_packages/system.js"></script>
<script type="text/javascript" src="../jspm.config.js"></script>
<link href="main.css" rel="stylesheet"/>
<script type="text/javascript">
System.import('example/app.js');
</script>
</head> </head>
<body> <body>
<p><a href="./viewer.html">Viewer</a></p>
<div id="container"></div> <p><a href="./save.html">Save</a></p>
</body> </body>
</html> </html>

19
example/save.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE>
<html>
<head>
<title>Doodle3D Slicer - Save</title>
<script type="text/javascript" src="../jspm_packages/system.js"></script>
<script type="text/javascript" src="../jspm.config.js"></script>
<script type="text/javascript">
System.import('example/save.js');
</script>
</head>
<body>
</body>
</html>

25
example/save.js Normal file
View File

@ -0,0 +1,25 @@
import 'three.js';
import 'three.js/loaders/STLLoader';
import { Settings, printerSettings, userSettings, Slicer } from 'src/index.js';
import { saveAs } from 'file-saver';
const settings = new Settings({
...printerSettings['ultimaker2go'],
...userSettings
});
const stlLoader = new THREE.STLLoader();
stlLoader.load('stl/traktor.stl', async (geometry) => {
geometry = new THREE.Geometry().fromBufferGeometry(geometry);
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / -2));
geometry.applyMatrix(new THREE.Matrix4().setPosition(new THREE.Vector3(50, -0.1, 50)));
geometry.mergeVertices();
geometry.computeFaceNormals();
const slicer = new Slicer().setGeometry(geometry);
const gcode = await slicer.slice(settings);
const file = new File([gcode], 'traktor.gcode', { type: 'text/plain' });
saveAs(file);
});

29
example/viewer.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE>
<html>
<head>
<title>Doodle3D Slicer - Viewer</title>
<style>
#gcode {
font-family: monospace;
}
</style>
<script type="text/javascript" src="../jspm_packages/system.js"></script>
<script type="text/javascript" src="../jspm.config.js"></script>
<link href="main.css" rel="stylesheet"/>
<script type="text/javascript">
System.import('example/viewer.js');
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>

View File

@ -12,8 +12,9 @@ const settings = new SLICER.Settings({
}); });
const stlLoader = new THREE.STLLoader(); const stlLoader = new THREE.STLLoader();
stlLoader.load('stl/Airplane.stl', (geometry) => { stlLoader.load('stl/Airplane.stl', (geometry) => {
geometry = new THREE.Geometry().fromBufferGeometry(geometry);
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / -2)); geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / -2));
geometry.applyMatrix(new THREE.Matrix4().setPosition(new THREE.Vector3(50, -0.1, 50))); geometry.applyMatrix(new THREE.Matrix4().setPosition(new THREE.Vector3(50, -0.1, 50)));
// geometry.applyMatrix(new THREE.Matrix4().scale(0.8)); // geometry.applyMatrix(new THREE.Matrix4().scale(0.8));
@ -22,24 +23,13 @@ stlLoader.load('stl/Airplane.stl', (geometry) => {
const rawData = generateRawData(geometry, settings); const rawData = generateRawData(geometry, settings);
render(<SlicerViewer render(
<SlicerViewer
layerIntersectionPoints={rawData.layerIntersectionPoints} layerIntersectionPoints={rawData.layerIntersectionPoints}
layerShapes={rawData.layerShapes} layerShapes={rawData.layerShapes}
slices={rawData.slices} slices={rawData.slices}
settings={settings.config} settings={settings.config}
/>, document.getElementById('container')); />,
document.getElementById('container')
);
}); });
// const geometry = new THREE.TorusGeometry(20, 10, 30, 30).clone();
// geometry.applyMatrix(new THREE.Matrix4().setPosition(new THREE.Vector3(60, 0, 60)));
// geometry.mergeVertices();
// geometry.computeFaceNormals();
//
// const rawData = generateRawData(geometry, settings);
//
// render(<SlicerViewer
// layerIntersectionPoints={rawData.layerIntersectionPoints}
// layerShapes={rawData.layerShapes}
// slices={rawData.slices}
// settings={settings.config}
// />, document.getElementById('container'));

View File

@ -19,7 +19,8 @@ SystemJS.config({
"https": "npm:jspm-nodelibs-https@0.2.0", "https": "npm:jspm-nodelibs-https@0.2.0",
"react-dom": "npm:react-dom@15.3.2", "react-dom": "npm:react-dom@15.3.2",
"babel-plugin-transform-react-jsx": "npm:babel-plugin-transform-react-jsx@6.8.0", "babel-plugin-transform-react-jsx": "npm:babel-plugin-transform-react-jsx@6.8.0",
"three.js/loaders/STLLoader": "github:mrdoob/three.js@r83/examples/js/loaders/STLLoader.js" "three.js/loaders/STLLoader": "github:mrdoob/three.js@r83/examples/js/loaders/STLLoader.js",
"file-saver": "npm:file-saver@1.3.3"
}, },
"packages": { "packages": {
"npm:babel-runtime@5.8.38": { "npm:babel-runtime@5.8.38": {

View File

@ -18,6 +18,7 @@
"core-js": "npm:core-js@^1.2.0", "core-js": "npm:core-js@^1.2.0",
"domain": "npm:jspm-nodelibs-domain@^0.2.0", "domain": "npm:jspm-nodelibs-domain@^0.2.0",
"https": "npm:jspm-nodelibs-https@^0.2.0", "https": "npm:jspm-nodelibs-https@^0.2.0",
"file-saver": "npm:file-saver@^1.3.3",
"plugin-babel": "npm:systemjs-plugin-babel@^0.0.12", "plugin-babel": "npm:systemjs-plugin-babel@^0.0.12",
"react": "npm:react@^15.3.2", "react": "npm:react@^15.3.2",
"react-dom": "npm:react-dom@^15.3.2", "react-dom": "npm:react-dom@^15.3.2",