Add tunnelColor

andrewisen-tikab · Oct 10, 2023 · e9273e2 · e9273e2
1 parent 2ed72a8
commit e9273e2
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/example/Viewer.ts b/example/Viewer.ts
@@ -14,7 +14,7 @@ CameraControls.install({ THREE });
 
 export type JSONParams = Pick<
     AbstractTunnel3D,
-    'tunnelHeight' | 'tunnelRoofHeight' | 'tunnelWidth'
+    'tunnelHeight' | 'tunnelRoofHeight' | 'tunnelWidth' | 'tunnelColorHEX'
 >;
 
 export default class Viewer {
@@ -142,28 +142,40 @@ export default class Viewer {
             .onChange((value: number) => {
                 this.tunnelControls.setTunnelParams({ tunnelLength: value });
             })
+            .listen()
             .disable();
 
         tunnelFolder
             .add(this._tunnel, 'tunnelWidth', 1, 100)
             .name('Width [W] (m)')
             .onChange((value: number) => {
                 this.tunnelControls.setTunnelParams({ tunnelWidth: value });
-            });
+            })
+            .listen();
 
         tunnelFolder
             .add(this._tunnel, 'tunnelHeight', 1, 20)
             .name('Height [H] (m)')
             .onChange((value: number) => {
                 this.tunnelControls.setTunnelParams({ tunnelHeight: value });
-            });
+            })
+            .listen();
 
         tunnelFolder
             .add(this._tunnel, 'tunnelRoofHeight', 1, 10)
             .name('Roof [f] (m)')
             .onChange((value: number) => {
                 this.tunnelControls.setTunnelParams({ tunnelRoofHeight: value });
-            });
+            })
+            .listen();
+
+        tunnelFolder
+            .addColor(this._tunnel, 'tunnelColorHEX')
+            .name('Color')
+            .onChange((value: number) => {
+                this.tunnelControls.setTunnelParams({ tunnelColorHEX: value });
+            })
+            .listen();
 
         const groutFolder = this._gui.addFolder('Grout');
         const groutParams = {
@@ -255,20 +267,26 @@ export default class Viewer {
     }
 
     public toJSON(): JSONParams {
-        const { tunnelHeight, tunnelRoofHeight, tunnelWidth } = this._tunnel;
+        const { tunnelHeight, tunnelRoofHeight, tunnelWidth, tunnelColorHEX } = this._tunnel;
 
         const object: JSONParams = {
             tunnelHeight,
             tunnelRoofHeight,
             tunnelWidth,
+            tunnelColorHEX,
         };
 
         return object;
     }
 
     public fromJSON(json: JSONParams): void {
-        const { tunnelHeight, tunnelRoofHeight, tunnelWidth } = json;
-        this.tunnelControls.setTunnelParams({ tunnelHeight, tunnelRoofHeight, tunnelWidth });
+        const { tunnelHeight, tunnelRoofHeight, tunnelWidth, tunnelColorHEX } = json;
+        this.tunnelControls.setTunnelParams({
+            tunnelHeight,
+            tunnelRoofHeight,
+            tunnelWidth,
+            tunnelColorHEX,
+        });
     }
 
     private _save(): void {

diff --git a/src/Tunnel3D.tsx b/src/Tunnel3D.tsx
@@ -9,6 +9,8 @@ export default class Tunnel3D extends THREE.Object3D implements AbstractTunnel3D
     public tunnelHeight: number = 10;
     public tunnelRoofHeight: number = 3;
 
+    public tunnelColorHEX: number = 0x808080;
+
     public groutGroup: THREE.Group;
 
     constructor(params?: Partial<AbstractTunnel3DParams>) {
@@ -23,7 +25,7 @@ export default class Tunnel3D extends THREE.Object3D implements AbstractTunnel3D
     private _build() {
         const tunnelShape = new THREE.Shape();
 
-        const { tunnelWidth, tunnelHeight, tunnelLength, tunnelRoofHeight } = this;
+        const { tunnelWidth, tunnelHeight, tunnelLength, tunnelRoofHeight, tunnelColorHEX } = this;
 
         // Define the semi-major and semi-minor axes of the elliptical roof
         const semiMajorAxis = tunnelWidth / 2;
@@ -55,7 +57,7 @@ export default class Tunnel3D extends THREE.Object3D implements AbstractTunnel3D
         const tunnelGeometry = new THREE.ExtrudeGeometry(tunnelShape, extrudeSettings);
         const tunnelMaterial = new THREE.MeshBasicMaterial({
             // grey
-            color: 0x808080,
+            color: tunnelColorHEX,
         });
         const tunnel = new THREE.Mesh(tunnelGeometry, tunnelMaterial);
 

diff --git a/src/core/index.ts b/src/core/index.ts
@@ -9,12 +9,19 @@ export type AbstractTunnel3D = {
     tunnelHeight: number;
     tunnelRoofHeight: number;
 
+    /**
+     * Color as hexadecimal.
+     *
+     * E.g. 0xff0000 for red.
+     */
+    tunnelColorHEX: number;
+
     update(): void;
 };
 
 export type AbstractTunnel3DParams = Pick<
     AbstractTunnel3D,
-    'tunnelLength' | 'tunnelWidth' | 'tunnelHeight' | 'tunnelRoofHeight'
+    'tunnelLength' | 'tunnelWidth' | 'tunnelHeight' | 'tunnelRoofHeight' | 'tunnelColorHEX'
 >;
 
 export type AbstractGrout3D = {