width-and-height-for-extrusions (#227)

Author: sophiedeziel

demo/js/presets.js

@@ -43,6 +43,7 @@ export const presets = {
     title: 'Vase mode',
     file: 'gcodes/vase.gcode',
     lineWidth: 0,
+    lineHeight: 0.4,
     renderExtrusion: true,
     renderTubes: true,
     extrusionColor: ['rgb(84,74,187)'],

src/__tests__/path.ts

@@ -1,4 +1,4 @@
-import { test, expect } from 'vitest';
+import { test, expect, describe } from 'vitest';
 import { Path, PathType } from '../path';
 import { ExtrusionGeometry } from '../extrusion-geometry';
 import { BufferGeometry } from 'three';
@@ -64,70 +64,96 @@ test('.path returns an array of Vector3', () => {
   expect(result[1]).toEqual({ x: 1, y: 2, z: 3 });
 });
 
-test('.geometry returns an ExtrusionGeometry from the path', () => {
-  const path = new Path(PathType.Travel, undefined, undefined, undefined);
+describe('.geometry', () => {
+  test('returns an ExtrusionGeometry from the path', () => {
+    const path = new Path(PathType.Travel, undefined, undefined, undefined);
 
-  path.addPoint(0, 0, 0);
-  path.addPoint(1, 2, 3);
+    path.addPoint(0, 0, 0);
+    path.addPoint(1, 2, 3);
 
-  const result = path.geometry() as ExtrusionGeometry;
+    const result = path.geometry() as ExtrusionGeometry;
 
-  expect(result).not.toBeNull();
-  expect(result).toBeInstanceOf(ExtrusionGeometry);
-  expect(result.parameters.points.length).toEqual(2);
-  expect(result.parameters.closed).toEqual(false);
-});
+    expect(result).not.toBeNull();
+    expect(result).toBeInstanceOf(ExtrusionGeometry);
+    expect(result.parameters.points.length).toEqual(2);
+    expect(result.parameters.closed).toEqual(false);
+  });
 
-test('.geometry returns an ExtrusionGeometry with the path extrusion width', () => {
-  const path = new Path(PathType.Travel, 9, undefined, undefined);
+  test('returns an ExtrusionGeometry with the path extrusion width', () => {
+    const path = new Path(PathType.Travel, 9, undefined, undefined);
 
-  path.addPoint(0, 0, 0);
-  path.addPoint(1, 2, 3);
+    path.addPoint(0, 0, 0);
+    path.addPoint(1, 2, 3);
 
-  const result = path.geometry() as ExtrusionGeometry;
+    const result = path.geometry() as ExtrusionGeometry;
 
-  expect(result.parameters.lineWidth).toEqual(9);
-});
+    expect(result.parameters.lineWidth).toEqual(9);
+  });
 
-test('.geometry returns an ExtrusionGeometry with the path line height', () => {
-  const path = new Path(PathType.Travel, undefined, 5, undefined);
+  test('returns an ExtrusionGeometry with the path line height', () => {
+    const path = new Path(PathType.Travel, undefined, 5, undefined);
 
-  path.addPoint(0, 0, 0);
-  path.addPoint(1, 2, 3);
+    path.addPoint(0, 0, 0);
+    path.addPoint(1, 2, 3);
 
-  const result = path.geometry() as ExtrusionGeometry;
+    const result = path.geometry() as ExtrusionGeometry;
 
-  expect(result.parameters.lineHeight).toEqual(5);
-});
+    expect(result.parameters.lineHeight).toEqual(5);
+  });
 
-test('.geometry returns an empty BufferGeometry if there are less than 3 vertices', () => {
-  const path = new Path(PathType.Travel, undefined, undefined, undefined);
+  test('returns an ExtrusionGeometry with the extrusionWidthOverride when passed', () => {
+    const path = new Path(PathType.Travel, 9, undefined, undefined);
 
-  const result = path.geometry();
+    path.addPoint(0, 0, 0);
+    path.addPoint(1, 2, 3);
 
-  expect(result).not.toBeNull();
-  expect(result).toBeInstanceOf(BufferGeometry);
-});
+    const result = path.geometry({ extrusionWidthOverride: 2 }) as ExtrusionGeometry;
 
-test('.line returns a BufferGeometry from the path', () => {
-  const path = new Path(PathType.Travel, undefined, undefined, undefined);
+    expect(result.parameters.lineWidth).toEqual(2);
+  });
 
-  path.addPoint(0, 0, 0);
-  path.addPoint(1, 2, 3);
+  test('returns an ExtrusionGeometry with the lineHeightOverride when passed', () => {
+    const path = new Path(PathType.Travel, undefined, 5, undefined);
 
-  const result = path.line();
+    path.addPoint(0, 0, 0);
+    path.addPoint(1, 2, 3);
 
-  expect(result).not.toBeNull();
-  const points = result.attributes['instanceStart'].array;
-  expect(points).toEqual(Float32Array.from([0, 0, 0, 1, 2, 3]));
+    const result = path.geometry({ lineHeightOverride: 7 }) as ExtrusionGeometry;
+
+    expect(result.parameters.lineHeight).toEqual(7);
+  });
+
+  test('returns an empty BufferGeometry if there are less than 3 vertices', () => {
+    const path = new Path(PathType.Travel, undefined, undefined, undefined);
+
+    const result = path.geometry();
+
+    expect(result).not.toBeNull();
+    expect(result).toBeInstanceOf(BufferGeometry);
+  });
 });
 
-test('.line returns a BufferGeometry when there are no vertices', () => {
-  const path = new Path(PathType.Travel, undefined, undefined, undefined);
+describe('.line', () => {
+  test('returns a BufferGeometry from the path', () => {
+    const path = new Path(PathType.Travel, undefined, undefined, undefined);
 
-  const result = path.line();
+    path.addPoint(0, 0, 0);
+    path.addPoint(1, 2, 3);
 
-  expect(result).not.toBeNull();
-  const points = result.attributes['instanceStart'].array;
-  expect(points.length).toEqual(0);
+    const result = path.line();
+
+    expect(result).not.toBeNull();
+    const points = result.attributes['instanceStart'].array;
+    expect(points).toEqual(Float32Array.from([0, 0, 0, 1, 2, 3]));
+  });
+
+  test('returns a BufferGeometry when there are no vertices', () => {
+    const path = new Path(PathType.Travel, undefined, undefined, undefined);
+
+    const result = path.line();
+
+    expect(result).not.toBeNull();
+    const points = result.attributes['instanceStart'].array;
+    expect(points.length).toEqual(0);
+  });
 });

src/path.ts

@@ -52,12 +52,17 @@ export class Path {
     return path;
   }
 
-  geometry(): BufferGeometry {
+  geometry(opts: { extrusionWidthOverride?: number; lineHeightOverride?: number } = {}): BufferGeometry {
     if (this._vertices.length < 3) {
       return new BufferGeometry();
     }
 
-    return new ExtrusionGeometry(this.path(), this.extrusionWidth, this.lineHeight, 4);
+    return new ExtrusionGeometry(
+      this.path(),
+      opts.extrusionWidthOverride ?? this.extrusionWidth,
+      opts.lineHeightOverride ?? this.lineHeight,
+      4
+    );
   }
 
   line(): LineSegmentsGeometry {

src/webgl-preview.ts

@@ -73,7 +73,7 @@ export class WebGLPreview {
   renderExtrusion = true;
   renderTravel = false;
   renderTubes = false;
-  extrusionWidth = 0.6;
+  extrusionWidth?: number;
   lineWidth?: number;
   lineHeight?: number;
   startLayer?: number;
@@ -135,7 +135,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;
+    this.extrusionWidth = opts.extrusionWidth;
     this.devMode = opts.devMode ?? this.devMode;
     this.stats = this.devMode ? new Stats() : undefined;
 
@@ -475,7 +475,9 @@ export class WebGLPreview {
         }
 
         this._geometries[color] ||= [];
-        this._geometries[color].push(path.geometry());
+        this._geometries[color].push(
+          path.geometry({ extrusionWidthOverride: this.extrusionWidth, lineHeightOverride: this.lineHeight })
+        );
       });
     }