move line preview to slice

src/interface/index.js

@@ -84,19 +84,19 @@ class Interface extends React.Component {
 
     const geometry = mesh.geometry.clone();
     mesh.updateMatrix();
-    geometry.applyMatrix(new THREE.Matrix4().makeTranslation(centerY, 0, centerX).multiply(mesh.matrix));
 
-    const { gcode } = await sliceGeometry(settings, geometry, null, true, (process) => {
+    const matrix = new THREE.Matrix4().makeTranslation(centerY, 0, centerX).multiply(mesh.matrix);
+    const { gcode, linePreview } = await sliceGeometry(settings, geometry, matrix, true, true, (process) => {
       console.log('process: ', process);
     });
 
+    // can't disable control so remove it
     control.dispose();
     scene.remove(control, mesh);
 
-    const line = createGcodeGeometry(gcode);
+    linePreview.position.x = -centerY;
-    line.position.x = -centerY;
+    linePreview.position.z = -centerX;
-    line.position.z = -centerX;
+    scene.add(linePreview);
-    scene.add(line);
 
     render();
     this.setState({ sliced: true });

src/interface/utils.js

@@ -2,8 +2,6 @@ import * as THREE from 'three';
 import 'three/examples/js/controls/EditorControls';
 import 'three/examples/js/controls/TransformControls';
 
-const MAX_SPEED = 100 * 60;
-
 export function placeOnGround(mesh) {
   const boundingBox = new THREE.Box3();
   const vertices = mesh.geometry.vertices.map(vertex => vertex.clone().applyMatrix4(mesh.matrix));
@@ -85,37 +83,3 @@ export function createScene(canvas, props, state) {
 
   return { control, editorControls, scene, mesh, camera, renderer, render };
 }
-
-export function createGcodeGeometry(gcode) {
-  const geometry = new THREE.Geometry();
-
-  let lastPoint
-  for (let i = 0; i < gcode.length; i ++) {
-    const { G, F, X, Y, Z } = gcode[i];
-
-    if (X || Y || Z) {
-      const point = new THREE.Vector3(Y, Z, X);
-
-      let color;
-      if (G === 0) {
-        color = new THREE.Color(0x00ff00);
-      } else if (G === 1) {
-        color = new THREE.Color().setHSL(F / MAX_SPEED, 0.5, 0.5);
-      }
-
-      if (G === 1) {
-        if (lastPoint) geometry.vertices.push(lastPoint);
-        geometry.vertices.push(new THREE.Vector3(Y, Z, X));
-        geometry.colors.push(color);
-        geometry.colors.push(color);
-      }
-
-      lastPoint = point;
-    }
-  }
-
-  const material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
-  const line = new THREE.LineSegments(geometry, material);
-
-  return line;
-}

src/slicer.js

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import slice from './sliceActions/slice.js';
 import SlicerWorker from './slicer.worker.js';
 
-export function sliceMesh(settings, mesh, sync = false, onProgress) {
+export function sliceMesh(settings, mesh, sync = false, constructLinePreview = false, onProgress) {
   if (!mesh || !mesh.isMesh) {
     throw new Error('Provided mesh is not intance of THREE.Mesh');
   }
@@ -12,7 +12,7 @@ export function sliceMesh(settings, mesh, sync = false, onProgress) {
   return sliceGeometry(settings, geometry, matrix, sync, onProgress);
 }
 
-export function sliceGeometry(settings, geometry, matrix, sync = false, onProgress) {
+export async function sliceGeometry(settings, geometry, matrix, sync = false, constructLinePreview = false, onProgress) {
   if (!geometry) {
     throw new Error('Missing required geometry argument');
   } else if (geometry.isBufferGeometry) {
@@ -31,11 +31,17 @@ export function sliceGeometry(settings, geometry, matrix, sync = false, onProgre
     geometry.applyMatrix(matrix);
   }
 
+  let gcode;
   if (sync) {
-    return sliceSync(settings, geometry, onProgress);
+    gcode = sliceSync(settings, geometry, onProgress);
   } else {
-    return sliceAsync(settings, geometry, onProgress);
+    gcode = await sliceAsync(settings, geometry, onProgress);
   }
+
+  if (constructLinePreview) gcode.linePreview = createGcodeGeometry(gcode.gcode);
+
+  gcode.gcode = gcodeToString(gcode.gcode);
+  return gcode;
 }
 
 function sliceSync(settings, geometry, onProgress) {
@@ -81,3 +87,57 @@ function sliceAsync(settings, geometry, onProgress) {
     });
   });
 }
+
+function gcodeToString(gcode) {
+  const currentValues = {};
+  return gcode.reduce((string, command) => {
+    let first = true;
+    for (const action in command) {
+      const value = command[action];
+      const currentValue = currentValues[action];
+      if (first) {
+        string = action + value;
+        first = false;
+      } else if (currentValue !== value) {
+        string += ` ${action}${value}`;
+        currentValues[action] = value;
+      }
+    }
+    string += '\n';
+  }, '');
+}
+
+const MAX_SPEED = 100 * 60;
+function createGcodeGeometry(gcode) {
+  const geometry = new THREE.Geometry();
+
+  let lastPoint
+  for (let i = 0; i < gcode.length; i ++) {
+    const { G, F, X, Y, Z } = gcode[i];
+
+    if (X || Y || Z) {
+      const point = new THREE.Vector3(Y, Z, X);
+
+      let color;
+      if (G === 0) {
+        color = new THREE.Color(0x00ff00);
+      } else if (G === 1) {
+        color = new THREE.Color().setHSL(F / MAX_SPEED, 0.5, 0.5);
+      }
+
+      if (G === 1) {
+        if (lastPoint) geometry.vertices.push(lastPoint);
+        geometry.vertices.push(new THREE.Vector3(Y, Z, X));
+        geometry.colors.push(color);
+        geometry.colors.push(color);
+      }
+
+      lastPoint = point;
+    }
+  }
+
+  const material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
+  const line = new THREE.LineSegments(geometry, material);
+
+  return line;
+}