mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-11-22 13:37:58 +01:00
remove example
This commit is contained in:
casperlamboo
parent
dcd3dc1614
commit
6768810fd6
@ -1,128 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { PRECISION } from '../src/constants.js';
|
|
||||||
|
|
||||||
export default class SlicerViewer extends React.Component {
|
|
||||||
state = {
|
|
||||||
layer: 0,
|
|
||||||
render: {
|
|
||||||
renderIntersectionPoints: false,
|
|
||||||
renderShape1: false,
|
|
||||||
renderShape2: true,
|
|
||||||
renderOuterLine: true,
|
|
||||||
renderInnerLine: true,
|
|
||||||
renderFill: true
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
changeSlider = (event) => {
|
|
||||||
this.setState({
|
|
||||||
layer: parseInt(event.target.value)
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
onControl = (event) => {
|
|
||||||
const section = event.target.value;
|
|
||||||
this.setState({
|
|
||||||
render: {
|
|
||||||
...this.state.render,
|
|
||||||
[section]: !this.state.render[section]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { layer, render } = this.state;
|
|
||||||
const { layerIntersectionPoints, settings, layerShapes, slices } = this.props;
|
|
||||||
|
|
||||||
const numLayers = settings.dimensionsZ / settings.layerHeight;
|
|
||||||
|
|
||||||
const intersectionPoints = layerIntersectionPoints[layer + 1];
|
|
||||||
const shape = layerShapes[layer];
|
|
||||||
const slice = slices[layer];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<svg viewBox={`-20 -20 ${settings.dimensionsX + 40} ${settings.dimensionsX + 40}`}>
|
|
||||||
<rect
|
|
||||||
width={settings.dimensionsX}
|
|
||||||
height={settings.dimensionsY}
|
|
||||||
fill="lightGrey"
|
|
||||||
/>
|
|
||||||
{render.renderIntersectionPoints && intersectionPoints.map(({ x, y }, i) => (
|
|
||||||
<circle key={i} cx={x} cy={y} r="0.3"/>
|
|
||||||
))}
|
|
||||||
{render.renderShape1 && shape && shape.closedShapes.map((closedShape, i) => (
|
|
||||||
<polygon
|
|
||||||
key={i}
|
|
||||||
points={closedShape.map(({ x, y }) => `${x} ${y}`).join(' ')}
|
|
||||||
fill="rgba(255, 0, 0, 0.5)"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
{slice && slice.parts.map((slicePart, i) => (
|
|
||||||
<g key={i}>
|
|
||||||
{render.renderShape2 && <ClipperShapeSVG
|
|
||||||
shape={slicePart.shape}
|
|
||||||
scale={PRECISION}
|
|
||||||
color="rgba(0, 0, 0, 0.5)"
|
|
||||||
fill
|
|
||||||
/>}
|
|
||||||
{render.renderOuterLine && <ClipperShapeSVG
|
|
||||||
shape={slicePart.outerLine}
|
|
||||||
scale={1.0}
|
|
||||||
color="blue"
|
|
||||||
strokeWidth={settings.nozzleDiameter * 0.9}
|
|
||||||
/>}
|
|
||||||
{render.renderInnerLine && slicePart.innerLines.map((innerLine, i) => (
|
|
||||||
<ClipperShapeSVG
|
|
||||||
key={i}
|
|
||||||
shape={innerLine}
|
|
||||||
scale={1.0}
|
|
||||||
color="red"
|
|
||||||
strokeWidth={settings.nozzleDiameter * 0.9}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
{render.renderFill && <ClipperShapeSVG
|
|
||||||
shape={slicePart.fill}
|
|
||||||
scale={1.0}
|
|
||||||
color="yellow"
|
|
||||||
strokeWidth={settings.nozzleDiameter * 0.9}
|
|
||||||
/>}
|
|
||||||
</g>
|
|
||||||
))}
|
|
||||||
</svg>
|
|
||||||
<div id="controls">
|
|
||||||
<input onChange={this.changeSlider} value={layer} type="range" min="0" max={numLayers} />
|
|
||||||
<p>Layer: {layer}</p>
|
|
||||||
<p><label><input type="checkbox" value="renderIntersectionPoints" onChange={this.onControl} checked={render.renderIntersectionPoints} />Render Intersection Points</label></p>
|
|
||||||
<p><label><input type="checkbox" value="renderShape1" onChange={this.onControl} checked={render.renderShape1} />Render Shape 1</label></p>
|
|
||||||
<p><label><input type="checkbox" value="renderShape2" onChange={this.onControl} checked={render.renderShape2} />Render Shape 2</label></p>
|
|
||||||
<p><label><input type="checkbox" value="renderOuterLine" onChange={this.onControl} checked={render.renderOuterLine} />Render Out Line</label></p>
|
|
||||||
<p><label><input type="checkbox" value="renderInnerLine" onChange={this.onControl} checked={render.renderInnerLine} />Render Inner Lines</label></p>
|
|
||||||
<p><label><input type="checkbox" value="renderFill" onChange={this.onControl} checked={render.renderFill} />Render Fill</label></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class ClipperShapeSVG extends React.Component {
|
|
||||||
render() {
|
|
||||||
const { shape, color = 'black', strokeWidth, scale, fill } = this.props;
|
|
||||||
|
|
||||||
const data = shape.paths.map(path => {
|
|
||||||
const pathData = path.map(({ X, Y }, i) => `${i === 0 ? 'M' : 'L '}${X * scale} ${Y * scale}`);
|
|
||||||
if (shape.closed) pathData.push('Z');
|
|
||||||
return pathData.join(' ');
|
|
||||||
}).join(' ');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<path
|
|
||||||
d={data}
|
|
||||||
strokeWidth={typeof strokeWidth === 'number' ? strokeWidth : 1.0}
|
|
||||||
vectorEffect={typeof strokeWidth === 'number' ? 'none' : 'non-scaling-stroke'}
|
|
||||||
fill={fill ? color : 'none'}
|
|
||||||
stroke={!fill ? color : 'none'}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
import calculateLayersIntersections from 'src/sliceActions/calculateLayersIntersections.js';
|
|
||||||
import createLines from 'src/sliceActions/createLines.js';
|
|
||||||
import generateInfills from 'src/sliceActions/generateInfills.js';
|
|
||||||
import generateInnerLines from 'src/sliceActions/generateInnerLines.js';
|
|
||||||
import generateSupport from 'src/sliceActions/generateSupport.js';
|
|
||||||
import intersectionsToShapes from 'src/sliceActions/intersectionsToShapes.js';
|
|
||||||
import addBrim from 'src/sliceActions/addBrim.js';
|
|
||||||
import optimizePaths from 'src/sliceActions/optimizePaths.js';
|
|
||||||
import shapesToSlices from 'src/sliceActions/shapesToSlices.js';
|
|
||||||
import slicesToGCode from 'src/sliceActions/slicesToGCode.js';
|
|
||||||
import applyPrecision from 'src/sliceActions/applyPrecision.js';
|
|
||||||
import removePrecision from 'src/sliceActions/removePrecision.js';
|
|
||||||
|
|
||||||
export default function generateRawData(geometry, settings) {
|
|
||||||
const rawData = {};
|
|
||||||
|
|
||||||
const lines = createLines(geometry, settings);
|
|
||||||
|
|
||||||
const {
|
|
||||||
layerIntersectionIndexes,
|
|
||||||
layerIntersectionPoints
|
|
||||||
} = calculateLayersIntersections(lines, settings);
|
|
||||||
|
|
||||||
rawData.layerIntersectionPoints = layerIntersectionPoints
|
|
||||||
.map(intersectionPoints => intersectionPoints.map(intersectionPoint => intersectionPoint.clone()));
|
|
||||||
|
|
||||||
const layerShapes = intersectionsToShapes(layerIntersectionIndexes, layerIntersectionPoints, lines, settings);
|
|
||||||
|
|
||||||
rawData.layerShapes = layerShapes
|
|
||||||
.map(({ closedShapes, openShapes }) => ({
|
|
||||||
closedShapes: closedShapes.map(closedShape => closedShape.map(vector => vector.clone())),
|
|
||||||
openShapes: openShapes.map(openShape => openShape.map(vector => vector.clone()))
|
|
||||||
}));
|
|
||||||
|
|
||||||
|
|
||||||
applyPrecision(layerShapes);
|
|
||||||
|
|
||||||
const slices = shapesToSlices(layerShapes, settings);
|
|
||||||
|
|
||||||
generateInnerLines(slices, settings);
|
|
||||||
generateInfills(slices, settings);
|
|
||||||
generateSupport(slices, settings);
|
|
||||||
addBrim(slices, settings);
|
|
||||||
optimizePaths(slices, settings);
|
|
||||||
removePrecision(slices);
|
|
||||||
|
|
||||||
rawData.slices = slices;
|
|
||||||
|
|
||||||
const gcode = slicesToGCode(slices, settings);
|
|
||||||
|
|
||||||
rawData.gcode = gcode;
|
|
||||||
|
|
||||||
return rawData;
|
|
||||||
}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<!DOCTYPE>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Doodle3D Slicer</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<p><a href="./viewer.html">Viewer</a></p>
|
|
||||||
<p><a href="./save.html">Save</a></p>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container, svg {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg, #controls {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=range] {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1,19 +0,0 @@
|
|||||||
<!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('./save.js');
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import * as THREE from 'three';
|
|
||||||
import { defaultSettings, sliceGeometry } from 'src/index.js';
|
|
||||||
import fileSaver from 'file-saver';
|
|
||||||
|
|
||||||
const settings = {
|
|
||||||
...defaultSettings.base,
|
|
||||||
...defaultSettings.material.pla,
|
|
||||||
...defaultSettings.printer.ultimaker2go,
|
|
||||||
...defaultSettings.quality.high
|
|
||||||
};
|
|
||||||
|
|
||||||
const jsonLoader = new THREE.JSONLoader();
|
|
||||||
jsonLoader.load('models/airplane.json', async geometry => {
|
|
||||||
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / -2));
|
|
||||||
geometry.applyMatrix(new THREE.Matrix4().setPosition(new THREE.Vector3(50, -0.0, 50)));
|
|
||||||
geometry.computeFaceNormals();
|
|
||||||
|
|
||||||
const onProgress = ({ progress: { done, total, action } }) => {
|
|
||||||
const percentage = `${(done / total * 100).toFixed()}%`
|
|
||||||
document.write(`<p>${action}, ${percentage}</p>`);
|
|
||||||
};
|
|
||||||
|
|
||||||
const gcode = await sliceGeometry(settings, geometry, null, false, onProgress);
|
|
||||||
|
|
||||||
const file = new File([gcode], 'gcode.gcode', { type: 'text/plain' });
|
|
||||||
fileSaver.saveAs(file);
|
|
||||||
});
|
|
||||||
55582
example/stl/Airplane.stl
55582
example/stl/Airplane.stl
File diff suppressed because it is too large
Load Diff
94222
example/stl/Rocket.stl
94222
example/stl/Rocket.stl
File diff suppressed because it is too large
Load Diff
Binary file not shown.
36906
example/stl/traktor.stl
36906
example/stl/traktor.stl
File diff suppressed because it is too large
Load Diff
@ -1,29 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
import 'three.js';
|
|
||||||
import 'three.js/loaders/STLLoader';
|
|
||||||
import React from 'react';
|
|
||||||
import ReactDOM, { render } from 'react-dom';
|
|
||||||
import * as SLICER from 'src/index.js';
|
|
||||||
import generateRawData from './generateRawData.js';
|
|
||||||
import SlicerViewer from './SlicerViewer.js';
|
|
||||||
|
|
||||||
const settings = new SLICER.Settings({
|
|
||||||
...SLICER.printerSettings['ultimaker2go'],
|
|
||||||
...SLICER.userSettings
|
|
||||||
});
|
|
||||||
|
|
||||||
const stlLoader = new THREE.STLLoader();
|
|
||||||
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().setPosition(new THREE.Vector3(50, -0.1, 50)));
|
|
||||||
// geometry.applyMatrix(new THREE.Matrix4().scale(0.8));
|
|
||||||
geometry.mergeVertices();
|
|
||||||
geometry.computeFaceNormals();
|
|
||||||
|
|
||||||
const rawData = generateRawData(geometry, settings);
|
|
||||||
|
|
||||||
render(
|
|
||||||
<SlicerViewer
|
|
||||||
layerIntersectionPoints={rawData.layerIntersectionPoints}
|
|
||||||
layerShapes={rawData.layerShapes}
|
|
||||||
slices={rawData.slices}
|
|
||||||
settings={settings}
|
|
||||||
/>,
|
|
||||||
document.getElementById('container')
|
|
||||||
);
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue
Block a user