Add grout array

andrewisen-tikab · Oct 10, 2023 · f340997 · f340997
1 parent 87b6818
commit f340997
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 17 deletions.
diff --git a/example/Viewer.ts b/example/Viewer.ts
@@ -50,7 +50,9 @@ export default class Viewer {
 
     private _tunnel!: Tunnel3D;
 
-    private _grout!: Grout3D;
+    private _grout1!: Grout3D;
+
+    private _grout2!: Grout3D;
 
     public static get Instance() {
         return this._instance || (this._instance = new this());
@@ -96,7 +98,9 @@ export default class Viewer {
         this.tunnelControls = new TunnelControls();
         this.tunnelControls.attach(this._tunnel);
 
-        this._grout = this.tunnelControls.addGrout();
+        this._grout1 = this.tunnelControls.addGrout();
+        this._grout2 = this.tunnelControls.addGrout();
+        this.tunnelControls.update();
 
         const size = 200;
         const divisions = 200;
@@ -180,31 +184,60 @@ export default class Viewer {
             .listen();
 
         const groutFolder = this._gui.addFolder('Grout');
-        const groutParams = {
+        const grout1Folder = groutFolder.addFolder('#1');
+        const grout2Folder = groutFolder.addFolder('#2');
+
+        const grout1Params = {
+            visible: true,
+            angle: 5,
+            holeLength: 10,
+        };
+        const grout2Params = {
             visible: true,
             angle: 5,
             holeLength: 10,
         };
 
-        groutFolder
-            .add(groutParams, 'visible')
+        grout1Folder
+            .add(grout1Params, 'visible')
             .name('Visible')
             .onChange((value: boolean) => {
-                if (this._grout == null) return;
-                this._grout.visible = value;
+                if (this._grout1 == null) return;
+                this._grout1.visible = value;
+            });
+        grout1Folder
+            .add(grout1Params, 'angle', 1, 20, 1)
+            .name('Angle [α] (degrees)')
+            .onChange((value: number) => {
+                this.tunnelControls.setGroutParams(0, { angle: value * THREE.MathUtils.DEG2RAD });
             });
-        groutFolder
-            .add(groutParams, 'angle', 1, 20, 1)
+
+        grout1Folder
+            .add(grout1Params, 'holeLength', 1, 90)
+            .name('Hole Length [L] (m)')
+            .onChange((value: number) => {
+                this.tunnelControls.setGroutParams(0, { holeLength: value });
+            });
+        grout2Folder
+            .add(grout2Params, 'visible')
+            .name('Visible')
+            .onChange((value: boolean) => {
+                if (this._grout1 == null) return;
+                this._grout2.visible = value;
+            });
+
+        grout2Folder
+            .add(grout2Params, 'angle', 1, 20, 1)
             .name('Angle [α] (degrees)')
             .onChange((value: number) => {
-                this.tunnelControls.setGroutParams({ angle: value * THREE.MathUtils.DEG2RAD });
+                this.tunnelControls.setGroutParams(1, { angle: value * THREE.MathUtils.DEG2RAD });
             });
 
-        groutFolder
-            .add(groutParams, 'holeLength', 1, 90)
+        grout2Folder
+            .add(grout2Params, 'holeLength', 1, 90)
             .name('Hole Length [L] (m)')
             .onChange((value: number) => {
-                this.tunnelControls.setGroutParams({ holeLength: value });
+                this.tunnelControls.setGroutParams(1, { holeLength: value });
             });
 
         const params = {

diff --git a/src/Grout3D.tsx b/src/Grout3D.tsx
@@ -7,6 +7,8 @@ import Tunnel3D from './Tunnel3D';
 export default class Grout3D extends THREE.Object3D implements AbstractGrout3D {
     public isGrout3D: boolean = true;
 
+    public order: number = -1;
+
     public screenLength: number = 1;
 
     public angle: number = 5 * THREE.MathUtils.DEG2RAD;
@@ -63,6 +65,7 @@ export default class Grout3D extends THREE.Object3D implements AbstractGrout3D {
         const cylinder = new THREE.Mesh(geometry, material);
         cylinder.rotateX(Math.PI / 2);
         cylinder.position.set(0, 0, holeLength / 2);
+        cylinder.renderOrder = 2;
         this.add(cylinder);
 
         const { tunnelHeight, tunnelRoofHeight } = this._tunnel;

diff --git a/src/controls/TunnelControls.ts b/src/controls/TunnelControls.ts
@@ -6,17 +6,22 @@ import { EventDispatcher } from './EventDispatcher';
 export default class TunnelControls extends EventDispatcher {
     private _tunnel: Tunnel3D | null = null;
     private _grout: Grout3D | null = null;
+    private _grouts: Grout3D[] = [];
 
     constructor() {
         super();
     }
 
     attach(tunnel: Tunnel3D) {
         this._tunnel = tunnel;
+        // TODO: Move grouts to tunnel
+        this._grouts = [];
     }
 
     detach() {
         this._tunnel = null;
+        // TODO: Move grouts to tunnel
+        this._grouts = [];
     }
 
     getTunnel() {
@@ -35,15 +40,34 @@ export default class TunnelControls extends EventDispatcher {
 
     addGrout() {
         if (this._tunnel == null) throw new Error('Tunnel is not attached.');
+
         const grout = new Grout3D(this._tunnel);
+        grout.order = this._grouts.length;
+        this._grouts.push(grout);
+
         this._grout = grout;
         this._tunnel.groutGroup.add(grout);
         return grout;
     }
 
-    setGroutParams(params: Partial<AbstractGrout3DParams>) {
-        if (this._grout == null) return;
-        Object.assign(this._grout, params);
-        this._grout.update();
+    setGroutParams(index: number, params: Partial<AbstractGrout3DParams>) {
+        const grout = this._grouts[index];
+        if (grout == null) throw new Error('Grout is not found.');
+        Object.assign(grout, params);
+        this._updateGrouts();
+    }
+
+    public update() {
+        if (this._tunnel != null) this._tunnel.update();
+        this._updateGrouts();
+    }
+    private _updateGrouts() {
+        this._grouts[0].update();
+        for (let i = 1; i < this._grouts.length; i++) {
+            const previousGrout = this._grouts[i - 1];
+            const currentGrout = this._grouts[i];
+            currentGrout.update();
+            currentGrout.position.z = previousGrout.holeLength;
+        }
     }
 }