Merge pull request #147 from remcoder/tube-line-width

Tube's diameter set by an Extrusion Width parameter

Author: sophiedeziel

demo/index.html

@@ -84,6 +84,16 @@ <h1>GCode Preview</h1>
             id="line-width"
           />
         </div>
+        <div class="controls">
+          <label>Tube width <output id="extrusion-width-value" ></output></label>&nbsp;<input
+            type="range"
+            min="0.05"
+            max="3.0"
+            value="0.6"
+            step="0.05"
+            id="extrusion-width"
+          />
+        </div>
         <div class="controls">
           <label for="single-layer-mode">Single layer mode</label
           ><input type="checkbox" id="single-layer-mode" />

demo/js/demo.js

@@ -16,6 +16,8 @@ const endLayer = document.getElementById('end-layer');
 const endLayerValue = document.getElementById('end-layer-value');
 const lineWidth = document.getElementById('line-width');
 const lineWidthValue = document.getElementById('line-width-value');
+const extrusionWidth = document.getElementById('extrusion-width');
+const extrusionWidthValue = document.getElementById('extrusion-width-value');
 const toggleSingleLayerMode = document.getElementById('single-layer-mode');
 const toggleExtrusion = document.getElementById('extrusion');
 const toggleRenderTubes = document.getElementById('render-tubes');
@@ -193,6 +195,12 @@ function initDemo() {
     preview.render();
   });
 
+  extrusionWidth.addEventListener('input', function () {
+    preview.extrusionWidth = +extrusionWidth.value;
+    extrusionWidthValue.innerText = extrusionWidth.value;
+    preview.render();
+  });
+
   toggleSingleLayerMode.addEventListener('click', function () {
     changeSingleLayerMode(!!toggleSingleLayerMode.checked);
     preview.render();

src/webgl-preview.ts

@@ -72,6 +72,7 @@ export type GCodePreviewOptions = {
   travelColor?: ColorRepresentation;
   toolColors?: Record<number, ColorRepresentation>;
   disableGradient?: boolean;
+  extrusionWidth?: number;
 };
 
 const target = {
@@ -93,6 +94,7 @@ export class WebGLPreview {
   renderExtrusion = true;
   renderTravel = false;
   renderTubes = false;
+  extrusionWidth = 0.6;
   lineWidth?: number;
   startLayer?: number;
   endLayer?: number;
@@ -140,6 +142,7 @@ export class WebGLPreview {
     this.renderTravel = opts.renderTravel ?? this.renderTravel;
     this.nonTravelmoves = opts.nonTravelMoves ?? this.nonTravelmoves;
     this.renderTubes = opts.renderTubes ?? this.renderTubes;
+    this.extrusionWidth = opts.extrusionWidth ?? this.extrusionWidth;
 
     if (opts.extrusionColor !== undefined) {
       this.extrusionColor = opts.extrusionColor;
@@ -626,7 +629,7 @@ export class WebGLPreview {
       const material = new MeshLambertMaterial({ color: color });
       this.disposables.push(material);
       const segments = Math.ceil(curve.getLength() * 2);
-      const geometry = new TubeGeometry(curve, segments, 0.3, 4, false);
+      const geometry = new TubeGeometry(curve, segments, this.extrusionWidth / 2, 4, false);
       this.disposables.push(geometry);
       const lineSegments = new Mesh(geometry, material);