add draw range slider

This commit is contained in:
casperlamboo 2017-11-12 11:28:32 +01:00
parent a5547ac070
commit b6f94f6edb
2 changed files with 29 additions and 8 deletions

View File

@ -124,6 +124,12 @@ class Interface extends React.Component {
render(); render();
}; };
updateDrawRange = (event) => {
const { gcode, render } = this.state;
gcode.linePreview.geometry.setDrawRange(0, event.target.value);
render();
};
componentWillUnmount() { componentWillUnmount() {
if (this.state.editorControls) this.state.editorControls.dispose(); if (this.state.editorControls) this.state.editorControls.dispose();
if (this.state.control) this.state.control.dispose(); if (this.state.control) this.state.control.dispose();
@ -147,6 +153,16 @@ class Interface extends React.Component {
<button onClick={() => this.setState({ controlMode: 'rotate' })}>Rotate</button> <button onClick={() => this.setState({ controlMode: 'rotate' })}>Rotate</button>
<button onClick={() => this.setState({ controlMode: 'scale' })}>Scale</button> <button onClick={() => this.setState({ controlMode: 'scale' })}>Scale</button>
</div>} </div>}
{sliced && <div className={classes.controlBar}>
<input
type="range"
step="2"
min="1"
max={gcode.linePreview.geometry.getAttribute('position').count}
defaultValue={gcode.linePreview.geometry.getAttribute('position').count}
onChange={this.updateDrawRange}
/>
</div>}
{!sliced && <div className={classes.sliceBar}> {!sliced && <div className={classes.sliceBar}>
<button onClick={this.slice}>Slice</button> <button onClick={this.slice}>Slice</button>
</div>} </div>}

View File

@ -110,15 +110,16 @@ function gcodeToString(gcode) {
const MAX_SPEED = 100 * 60; const MAX_SPEED = 100 * 60;
function createGcodeGeometry(gcode) { function createGcodeGeometry(gcode) {
const geometry = new THREE.Geometry(); const geometry = new THREE.BufferGeometry();
const positions = [];
const colors = [];
let lastPoint let lastPoint
for (let i = 0; i < gcode.length; i ++) { for (let i = 0; i < gcode.length; i ++) {
const { G, F, X, Y, Z } = gcode[i]; const { G, F, X, Y, Z } = gcode[i];
if (X || Y || Z) { if (X || Y || Z) {
const point = new THREE.Vector3(Y, Z, X);
let color; let color;
if (G === 0) { if (G === 0) {
color = new THREE.Color(0x00ff00); color = new THREE.Color(0x00ff00);
@ -127,16 +128,20 @@ function createGcodeGeometry(gcode) {
} }
if (G === 1) { if (G === 1) {
if (lastPoint) geometry.vertices.push(lastPoint); if (lastPoint) positions.push(lastPoint[0], lastPoint[1], lastPoint[2]);
geometry.vertices.push(new THREE.Vector3(Y, Z, X)); positions.push(Y, Z, X);
geometry.colors.push(color);
geometry.colors.push(color); colors.push(color.r, color.g, color.b);
colors.push(color.r, color.g, color.b);
} }
lastPoint = point; lastPoint = [Y, Z, X];
} }
} }
geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
const material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors }); const material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
const line = new THREE.LineSegments(geometry, material); const line = new THREE.LineSegments(geometry, material);