update the ts format in gui

Author: LinkunGao

package-lock.json

@@ -45,7 +45,7 @@
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "@types/dat.gui": "^0.7.7",
+    "@types/dat.gui": "^0.7.9",
     "@types/three": "^0.140.0",
     "copper3d_plugin_heart_k": "^1.0.14",
     "copper3d_plugin_nrrd": "^1.3.0",

package.json

@@ -396,7 +396,7 @@ export function getWholeSlices(
       //   // : (slicesX[index].visible = true);
       // }
     });
-  gui.add(controls, "enabled").name("controls");
+  gui.add(controls as any, "enabled").name("controls");
 }
 
 export function addBoxHelper(

src/Loader/copperNrrdLoader.ts

@@ -240,7 +240,7 @@ export default class baseRenderer {
 
       modelChildrenArray.forEach((item) => {
         const ctrl = (this.visualiseFolder as GUI)
-          .add(item, "visible")
+          .add(item as any, "visible")
           .name(item.name)
           .onChange(() => {
             this.currentScene.updateModelChildrenVisualisation(item.mesh);
@@ -261,8 +261,8 @@ export default class baseRenderer {
           });
         }
 
-        this.cameraFolder?.add(this.currentScene.camera, "near");
-        this.cameraFolder?.add(this.currentScene.camera, "far");
+        this.cameraFolder?.add(this.currentScene.camera as any, "near");
+        this.cameraFolder?.add(this.currentScene.camera as any, "far");
         const subCameraFolders = this.cameraFolder?.__folders;
         for (let key in subCameraFolders) {
           if (Object.prototype.hasOwnProperty.call(subCameraFolders, key)) {
@@ -271,13 +271,13 @@ export default class baseRenderer {
           }
         }
         const position = this.cameraFolder?.addFolder("position") as GUI;
-        position.add(this.currentScene.camera.position, "x");
-        position.add(this.currentScene.camera.position, "y");
-        position.add(this.currentScene.camera.position, "z");
+        position.add(this.currentScene.camera.position as any, "x");
+        position.add(this.currentScene.camera.position as any, "y");
+        position.add(this.currentScene.camera.position as any, "z");
         const up = this.cameraFolder?.addFolder("up") as GUI;
-        up.add(this.currentScene.camera.up, "x");
-        up.add(this.currentScene.camera.up, "y");
-        up.add(this.currentScene.camera.up, "z");
+        up.add(this.currentScene.camera.up as any, "x");
+        up.add(this.currentScene.camera.up as any, "y");
+        up.add(this.currentScene.camera.up as any, "z");
       }
       count += 1;
     }, 3000);

src/Renderer/baseRenderer.ts

@@ -204,7 +204,12 @@ export default class commonScene {
       });
 
       const finishLoad = (copperVolume: copperVolumeType) => {
-        if (gui) gui.add(this, "depthStep").min(0.01).max(1).step(0.01);
+        if (gui)
+          gui
+            .add(this as any, "depthStep")
+            .min(0.01)
+            .max(1)
+            .step(0.01);
         const texture2d = createTexture2D_Array(
           copperVolume,
           depth,
@@ -275,7 +280,16 @@ export default class commonScene {
     objLoader.load(
       url,
       (obj) => {
+        obj.traverse((child) => {
+          if ((child as THREE.Mesh).isMesh) {
+            (child as THREE.Mesh).material = new THREE.MeshStandardMaterial({
+              side: THREE.DoubleSide,
+              color: 0xfff000,
+            });
+          }
+        });
         this.scene.add(obj);
+        !!callback && callback(obj);
       }, // called when loading is in progresses
       (xhr: any) => {
         console.log((xhr.loaded / xhr.total) * 100 + "% loaded");

src/Scene/commonSceneMethod.ts

@@ -8,6 +8,7 @@ import { pickModelDefault } from "../Utils/raycaster";
 import { copperNrrdLoader, optsType } from "../Loader/copperNrrdLoader";
 import { copperVtkLoader, copperMultipleVtk } from "../Loader/copperVtkLoader";
 import { createTexture2D_Array, createTexture2D_Zip } from "../Utils/texture2d";
+import { objLoader } from "../Loader/copperOBJLoader";
 import baseScene from "./baseScene";
 import { GUI } from "dat.gui";
 import { copperDicomLoader } from "../Loader/copperDicomLoader";
@@ -95,6 +96,52 @@ export default class copperScene extends baseScene {
       }
     );
   }
+  // loadOBJ(url: string, callback?: (mesh: THREE.Group) => void) {
+  //   objLoader.load(
+  //     url,
+  //     (obj) => {
+  //       obj.traverse((child) => {
+  //         if ((child as THREE.Mesh).isMesh) {
+  //           // (child as THREE.Mesh).material = new THREE.MeshStandardMaterial({
+  //           //   side: THREE.DoubleSide,
+  //           //   color: 0xffffff,
+  //           // });
+  //           // ((child as THREE.Mesh).material as THREE.MeshPhongMaterial).color =
+  //           //   new THREE.Color(0xffffff);
+  //         }
+  //       });
+  //       const box = new THREE.Box3().setFromObject(obj);
+  //       const size = box.getSize(new THREE.Vector3()).length();
+  //       const center = box.getCenter(new THREE.Vector3());
+
+  //       this.controls.maxDistance = size * 10;
+  //       obj.position.x += obj.position.x - center.x;
+  //       obj.position.y += obj.position.y - center.y;
+  //       obj.position.z += obj.position.z - center.z;
+
+  //       if (!this.cameraPositionFlag) {
+  //         this.camera.position.copy(center);
+  //         this.camera.position.x += size / 2.0;
+  //         this.camera.position.y += size / 5.0;
+  //         this.camera.position.z += size / 2.0;
+  //         this.camera.lookAt(center);
+  //         this.viewPoint = this.setViewPoint(
+  //           this.camera as THREE.PerspectiveCamera,
+  //           [center.x, center.y, center.z]
+  //         );
+  //       }
+  //       this.scene.add(obj);
+  //       !!callback && callback(obj);
+  //     }, // called when loading is in progresses
+  //     (xhr: any) => {
+  //       console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
+  //     },
+  //     // called when loading has errors
+  //     (error: any) => {
+  //       console.log("An error happened");
+  //     }
+  //   );
+  // }
 
   loadVtk(url: string) {
     copperVtkLoader(url, this.scene, this.content);

src/Scene/copperScene.ts

@@ -64,7 +64,7 @@ export function createTexture2D_Array(
   texture.needsUpdate = true;
   if (gui) {
     gui
-      .add(copperVolume, "windowWidth")
+      .add(copperVolume as any, "windowWidth")
       .min(1)
       .max(copperVolume.windowWidth * 2)
       .step(1)
@@ -73,7 +73,7 @@ export function createTexture2D_Array(
         updateTexture(copperVolume);
       });
     gui
-      .add(copperVolume, "windowCenter")
+      .add(copperVolume as any, "windowCenter")
       .min(1)
       .max(copperVolume.windowCenter * 2)
       .step(1)