Merge branch 'develop' into fix/demo-progressive-rendering

.github/FUNDING.yml

@@ -0,0 +1 @@
+ko_fi: remcoder

.github/workflows/firebase-hosting-merge.yml

@@ -6,6 +6,7 @@ name: Deploy to Firebase Hosting on merge
   push:
     branches:
       - develop
+      - v3.x
 jobs:
   build_and_deploy:
 

.github/workflows/firebase-hosting-pull-request.yml

@@ -5,7 +5,9 @@ name: Deploy to Firebase Hosting on PR
 
 on:
   pull_request:
-    branches: [ develop ]
+    branches:
+      - develop
+      - v3.x
 
 jobs:
   build_and_preview:

.github/workflows/run-tests.yml

@@ -5,9 +5,15 @@ name: Runs All Unit tests
 
 on:
   push:
-    branches: [develop, releases]
+    branches:
+      - develop
+      - releases
+      - v3.x
   pull_request:
-    branches: [develop, releases]
+    branches:
+      - develop
+      - releases
+      - v3.x
 
 jobs:
   build:

src/__tests__/build-volume.ts

@@ -0,0 +1,94 @@
+import { test, describe, expect, vi } from 'vitest';
+import { BuildVolume } from '../build-volume';
+import { AxesHelper } from 'three';
+import { Grid } from '../helpers/grid';
+import { LineBox } from '../helpers/line-box';
+
+describe('BuildVolume', () => {
+  test('it has a default color', () => {
+    const buildVolume = new BuildVolume();
+
+    expect(buildVolume.color).toEqual(0x888888);
+  });
+
+  test('it has size properties', () => {
+    const buildVolume = new BuildVolume(10, 20, 30);
+
+    expect(buildVolume.x).toEqual(10);
+    expect(buildVolume.y).toEqual(20);
+    expect(buildVolume.z).toEqual(30);
+  });
+
+  describe('.createAxes', () => {
+    test('it creates an AxesHelper', () => {
+      const buildVolume = new BuildVolume(10, 20, 30);
+
+      const axes = buildVolume.createAxes();
+
+      expect(axes).toBeDefined();
+      expect(axes).toBeInstanceOf(AxesHelper);
+    });
+
+    test('it scales the axes', () => {
+      const buildVolume = new BuildVolume(10, 20, 30);
+
+      const axes = buildVolume.createAxes();
+
+      expect(axes.scale).toEqual({ x: 1, y: 1, z: -1 });
+    });
+
+    test('it positions the axes', () => {
+      const buildVolume = new BuildVolume(10, 20, 30);
+
+      const axes = buildVolume.createAxes();
+
+      expect(axes.position).toEqual({ x: -5, y: 0, z: 10 });
+    });
+  });
+
+  describe('.createGrid', () => {
+    test('it creates a Grid', () => {
+      const buildVolume = new BuildVolume(10, 20, 30);
+
+      const grid = buildVolume.createGrid();
+
+      expect(grid).toBeDefined();
+      expect(grid).toBeInstanceOf(Grid);
+    });
+  });
+
+  describe('.createGroup', () => {
+    test('it creates a group for all the objects', () => {
+      const buildVolume = new BuildVolume(10, 20, 30);
+
+      const group = buildVolume.createGroup();
+
+      expect(group).toBeDefined();
+      expect(group.children.length).toEqual(3);
+
+      expect(group.children[0]).toBeInstanceOf(LineBox);
+      expect(group.children[1]).toBeInstanceOf(Grid);
+      expect(group.children[2]).toBeInstanceOf(AxesHelper);
+    });
+  });
+
+  describe('.dispose', () => {
+    test('it calls dispose on all disposables', () => {
+      const buildVolume = new BuildVolume(10, 20, 30);
+
+      const axes = buildVolume.createAxes();
+      const grid = buildVolume.createGrid();
+      const lineBox = buildVolume.createLineBox();
+
+      const axesSpy = vi.spyOn(axes, 'dispose');
+      const gridSpy = vi.spyOn(grid, 'dispose');
+      const lineBoxSpy = vi.spyOn(lineBox, 'dispose');
+
+      buildVolume.dispose();
+
+      expect(axesSpy).toHaveBeenCalled();
+      expect(gridSpy).toHaveBeenCalled();
+      expect(lineBoxSpy).toHaveBeenCalled();
+    });
+  });
+});

src/build-volume.ts

@@ -0,0 +1,59 @@
+import { Grid } from './helpers/grid';
+import { AxesHelper, Group, Vector3 } from 'three';
+import { LineBox } from './helpers/line-box';
+import { type Disposable } from './helpers/three-utils';
+
+export class BuildVolume {
+  x: number;
+  y: number;
+  z: number;
+  color: number;
+  private disposables: Disposable[] = [];
+
+  constructor(x: number, y: number, z: number, color: number = 0x888888) {
+    this.x = x;
+    this.y = y;
+    this.z = z;
+    this.color = color;
+  }
+
+  createAxes(): AxesHelper {
+    const axes = new AxesHelper(10);
+
+    const scale = new Vector3(1, 1, 1);
+    scale.z *= -1;
+
+    axes.scale.multiply(scale);
+    axes.position.setZ(this.y / 2);
+    axes.position.setX(-this.x / 2);
+
+    this.disposables.push(axes);
+
+    return axes;
+  }
+
+  createGrid(): Grid {
+    const grid = new Grid(this.x, 10, this.y, 10, this.color);
+    this.disposables.push(grid);
+    return grid;
+  }
+
+  createLineBox(): LineBox {
+    const lineBox = new LineBox(this.x, this.z, this.y, this.color);
+    this.disposables.push(lineBox);
+    return lineBox;
+  }
+
+  createGroup(): Group {
+    const group = new Group();
+    group.add(this.createLineBox());
+    group.add(this.createGrid());
+    group.add(this.createAxes());
+
+    return group;
+  }
+
+  dispose(): void {
+    this.disposables.forEach((disposable) => disposable.dispose());
+  }
+}

src/helpers/grid.ts

@@ -0,0 +1,88 @@
+import { BufferGeometry, Color, Float32BufferAttribute, LineBasicMaterial, LineSegments } from 'three';
+
+class Grid extends LineSegments {
+  constructor(
+    sizeX: number, // Size along the X axis
+    stepX: number, // Step distance along the X axis
+    sizeZ: number, // Size along the Z axis
+    stepZ: number, // Step distance along the Z axis
+    color: Color | string | number = 0x888888 // Single color for all grid lines
+  ) {
+    // Convert color input to a Color object
+    color = new Color(color);
+
+    // Calculate the number of steps along each axis
+    const xSteps = Math.round(sizeX / stepX);
+    const zSteps = Math.round(sizeZ / stepZ);
+
+    // Adjust sizes to center the grid
+    const halfSizeX = (xSteps * stepX) / 2;
+    const halfSizeZ = (zSteps * stepZ) / 2;
+
+    const vertices: number[] = [];
+    const colors: number[] = [];
+    let j = 0;
+
+    // Generate vertices and colors for lines parallel to the X-axis (moving along Z)
+    for (let z = -halfSizeZ; z <= halfSizeZ; z += stepZ) {
+      vertices.push(
+        -halfSizeX,
+        0,
+        z, // Start point (on the X-axis)
+        halfSizeX,
+        0,
+        z // End point (on the X-axis)
+      );
+
+      // Assign the same color to all lines
+      color.toArray(colors, j);
+      j += 3;
+      color.toArray(colors, j);
+      j += 3;
+    }
+
+    // Generate vertices and colors for lines parallel to the Z-axis (moving along X)
+    for (let x = -halfSizeX; x <= halfSizeX; x += stepX) {
+      vertices.push(
+        x,
+        0,
+        -halfSizeZ, // Start point (on the Z-axis)
+        x,
+        0,
+        halfSizeZ // End point (on the Z-axis)
+      );
+
+      // Assign the same color to all lines
+      color.toArray(colors, j);
+      j += 3;
+      color.toArray(colors, j);
+      j += 3;
+    }
+
+    // Create BufferGeometry and assign the vertices and colors
+    const geometry = new BufferGeometry();
+    geometry.setAttribute('position', new Float32BufferAttribute(vertices, 3));
+    geometry.setAttribute('color', new Float32BufferAttribute(colors, 3));
+
+    // Create material for the grid lines
+    const material = new LineBasicMaterial({ vertexColors: true, toneMapped: false });
+
+    // Call the parent class constructor with the geometry and material
+    super(geometry, material);
+  }
+
+  // Override the type property for clarity and identification
+  override readonly type = 'GridHelper';
+
+  // Add dispose method for resource management
+  dispose() {
+    this.geometry.dispose();
+    if (Array.isArray(this.material)) {
+      this.material.forEach((material) => material.dispose());
+    } else {
+      this.material.dispose();
+    }
+  }
+}
+
+export { Grid };