Scene/build volume refactor

[remcoder]

This PR improves the build volume as follows:

• a small grid option was added to optionally render a grid with squares of 1mm
• the small grid can be toggled on or off
• all build volume options now render separately from the gcode rendering, making such changes instantaneous
• turning the build volume completely off has been fixed

Under the surface some non-trivial changes were needed. To separate the rendering of the build volume from the gcode rendering, parts of the create/dispose 'lifecycle', were rewritten as some camera/control logic and the use of groups in the scene:

• the initScene method no longer initializes the buildVolume. The build volume is created once in the constructor and after that it handles itself via getters/setters.
• the build volume and gcode are now better organized in separate groups in the scene.
• all objects in the scene are now consistently positioned off of the threejs origin. Before they were centered via offsetting by x/2 and z/2. The new scheme is more consistent and obvious in hindsight. Only the camera and the controls are targeted at the center of the build plate. As a result there is no recentering anymore when the build volume changes size and model stays fixed.

improvements considered for this PR:

• use a scene manager instead of the build volume accessing and modifying the scene - can be done as part of Toggle travel lines w/o rerendering the extrusion #282
• fix the position of the bounded box
• fallback when no build volume is defined. like an implicit build volume that isn't rendered but only used for positioning stuff on the scene. The bounding box can help us here. moved to Prevent error from undefined build volume #299

[github-actions]

Visit the preview URL for this PR (updated for commit 217edde):

https://gcode-preview--pr297-feature-scene-refact-vrjeg6o6.web.app

_{(expires Sat, 26 Jul 2025 19:59:16 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 59bd114ae4847b32c2bba0b68620b9069a3e3531}

[Copilot]

Pull Request Overview

This PR refactors how the build volume is handled and rendered in the scene by separating it from the G-code rendering. Key changes include:

• Refactoring the build volume construction to use getters/setters and a dedicated lifecycle in both WebGLPreview and BuildVolume.
• Adjustments to helper classes (Grid, LineBox) and updates to tests, demos, and configuration to support a new small grid option.
• Minor updates to dependencies and UI elements to improve consistency across the codebase.

Reviewed Changes

Copilot reviewed 10 out of 11 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/webgl-preview.ts	Refactored buildVolume property and scene initialization to use a new BuildVolume pattern
src/helpers/line-box.ts	Simplified geometry creation and clarified material initialization in the LineBox helper
src/helpers/grid.ts	Updated grid generation logic to use non-centered coordinates and a rotated grid
src/dev-gui.ts	Removed unused whitespace to streamline the dev GUI controls
src/build-volume.ts	Refactored BuildVolume to use getters/setters, improved disposal, and added smallGrid support
src/tests/build-volume.ts	Updated tests to reflect the new BuildVolume API and scene dependency requirements
package.json	Upgraded the three dependency from 0.176.0 to 0.177.0
demo/js/default-settings.js	Enhanced default settings to include the smallGrid property
demo/js/app.js	Adjusted buildVolume update logic in watchers to handle the new smallGrid property
demo/index.html	Added draggable="false" to the thumbnail and inserted UI controls for small grid toggling

Comments suppressed due to low confidence (2)

src/build-volume.ts:11

• The public 'color' property was removed in favor of using internal gridColor and smallGridColor, but the tests still refer to the 'color' property. Update tests and documentation to reflect these API changes.

  private _x: number;

src/helpers/grid.ts:12

• The grid helper now generates grid lines using coordinates starting at 0 rather than centering them. Verify that this change aligns with the intended scene positioning to maintain consistency with other scene objects.

    for (let z = 0; z <= sizeZ; z += stepZ) {

[Copilot]

The controls target is set using properties of this._buildVolume without a prior null check. Consider adding a safeguard to ensure _buildVolume is defined to avoid potential runtime errors.

Suggested change

	this.controls.target.set(this._buildVolume.x / 2, 0, -this._buildVolume.y / 2);
	if (this._buildVolume) {
	this.controls.target.set(this._buildVolume.x / 2, 0, -this._buildVolume.y / 2);
	} else {
	console.error('Build volume is not defined. Unable to set controls target.');
	}

[Copilot]

[nitpick] The buildVolume update logic is split across multiple watchEffect callbacks. Consolidating the conditions into a single cohesive block may improve readability and reduce the risk of inconsistent state updates.

[remcoder]

this is actually to separate out different sets of changes due to side effects (like kicking of an animation)

[sophiedeziel]

<3