mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-07-01 00:31:21 +02: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