Merge pull request #177 from LinkunGao/release/v1.13.13

Release/v1.13.13

docs/source/conf.py

@@ -22,7 +22,7 @@
 author = 'LinkunGao'
 
 # The full version, including alpha/beta/rc tags
-release = 'v1.13.12'
+release = 'v1.13.13'
 
 
 # -- General configuration ---------------------------------------------------

docs/source/release/release.md

@@ -1334,3 +1334,79 @@ const resetMainAreaSize = (factor: number) => {
   ## Release v1.13.12
 
   - Fixed gui repeat issue
+
+  ## Release v1.13.13 - version for Nuxt - heart app
+
+  - removed Gltf exporter, because it cannot be build in Nuxt app.
+  - Update the vtkloader
+
+    - modified the opts, now we can customise the material `wireframe`, `color`, `transparent`, and `opacity`.
+      ```ts
+      scene?.loadVtks([
+        {
+          name: "heart_inner",
+          urls,
+          opts: { wireframe: true, color: "#cccccc" },
+        },
+        {
+          name: "heart_outer",
+          urls: urls_1,
+          opts: {
+            wireframe: false,
+            color: "rgb(214, 211, 212)",
+            transparent: true,
+            opacity: 0.5,
+          },
+        },
+      ]);
+      ```
+      - types
+      ```ts
+      interface IOptVTKLoader {
+        wireframe?: boolean;
+        color?: string | number;
+        transparent?: boolean;
+        opacity?: number;
+      }
+      ```
+
+  - Update the dicom loader
+    - we can use `getMesh`, `getCopperVolume` in copperSence.loadDicom() opts.
+      ```ts
+      scene.loadDicom(urls, {
+        gui,
+        getMesh(mesh) {
+          console.log(mesh);
+        },
+        getCopperVolume(copperVolume, updateTexture) {
+          copperVolume.windowWidth = 424;
+          copperVolume.windowCenter = 236;
+          updateTexture(copperVolume);
+        },
+        setAnimation(currentValue, depth, depthStep, copperVolume) {
+          currentValue += depthStep;
+          if (currentValue > depth) {
+            currentValue = 0;
+          }
+          return currentValue;
+        },
+      });
+      ```
+      - optsType:
+      ```ts
+      interface dicomLoaderOptsType {
+        gui?: GUI;
+        getMesh?: (mesh: THREE.Mesh) => void;
+        getCopperVolume?: (
+          copperVolume: copperVolumeType,
+          updateTexture: Function
+        ) => void;
+        setAnimation?: (
+          currentValue: number,
+          depth: number,
+          depthStep: number,
+          copperVolume: copperVolumeType
+        ) => number;
+      }
+      ```
+    - We can in getCopperVolume() function to update the volume windowWidth and windowCenter

package.json

@@ -1,7 +1,7 @@
 {
   "name": "copper3d_visualisation",
   "description": "A 3d visualisation package base on threejs provides multiple scenes and Nrrd image load funtion.",
-  "version": "1.13.12",
+  "version": "1.13.13",
   "main": "dist/bundle.umd.js",
   "moudle": "dist/bundle.esm.js",
   "types": "dist/types/index.d.ts",

src/Loader/copperVtkLoader.ts

@@ -1,21 +1,28 @@
 import { VTKLoader } from "three/examples/jsm/loaders/VTKLoader.js";
 import * as THREE from "three";
+import { IOptVTKLoader } from "../types/types";
 
 const vtkLoader = new VTKLoader();
 
-const vtkmaterial = new THREE.MeshStandardMaterial({
+const materialConfig = {
   wireframe: false,
   side: THREE.DoubleSide,
   color: 0xfff000,
-});
+};
+
 export function copperVtkLoader(
   url: string,
   scene: THREE.Scene,
-  content: THREE.Group
+  content: THREE.Group,
+  opts?: IOptVTKLoader
 ) {
   vtkLoader.load(url, function (geometry) {
     geometry.center();
     geometry.computeVertexNormals();
+    const vtkmaterial = new THREE.MeshStandardMaterial(materialConfig);
+    if (opts) {
+      configOpts(vtkmaterial, opts);
+    }
 
     const mesh = new THREE.Mesh(geometry, vtkmaterial);
     mesh.scale.multiplyScalar(0.1);
@@ -25,6 +32,28 @@ export function copperVtkLoader(
   });
 }
 
-export function copperMultipleVtk() {
+export function copperMultipleVtk(opts?: IOptVTKLoader) {
+  const vtkmaterial = new THREE.MeshStandardMaterial(materialConfig);
+  if (opts) {
+    configOpts(vtkmaterial, opts);
+  }
   return { vtkLoader, vtkmaterial };
 }
+
+function configOpts(
+  vtkmaterial: THREE.MeshStandardMaterial,
+  opts: IOptVTKLoader
+) {
+  if (opts.wireframe) {
+    vtkmaterial.wireframe = opts.wireframe;
+  }
+  if (opts.color) {
+    vtkmaterial.color.set(opts.color);
+  }
+  if (opts.transparent) {
+    vtkmaterial.transparent = opts.transparent;
+  }
+  if (opts.opacity) {
+    vtkmaterial.opacity = opts.opacity;
+  }
+}

src/Renderer/baseRenderer.ts

@@ -5,7 +5,7 @@ import { environments, environmentType } from "../lib/environment/index";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
 import Stats from "three/examples/jsm/libs/stats.module";
 import { GUI, GUIController } from "dat.gui";
-import ExportGltf from "../Utils/gltfExporter";
+
 import { optType, stateType, modelVisualisationDataType } from "../types/types";
 
 export default class baseRenderer {
@@ -24,7 +24,6 @@ export default class baseRenderer {
   private visualiseFolder: GUI | null;
   private visualCtrls: Array<GUIController> = [];
   private cameraFolder: GUI | null;
-  private exporter: ExportGltf | null = null;
 
   constructor(container: HTMLDivElement, options?: optType) {
     this.container = container;
@@ -57,14 +56,6 @@ export default class baseRenderer {
       directColor: 0xffffff,
       bgColor1: "#5454ad",
       bgColor2: "#18e5a7",
-      exportGltf: () => {
-        if (!this.exporter) {
-          this.exporter = new ExportGltf({
-            animations: this.currentScene.exportContent.animations,
-          });
-        }
-        this.exporter.export(this.currentScene.exportContent);
-      },
     };
     this.visualiseFolder = null;
     this.cameraFolder = null;

src/Scene/commonSceneMethod.ts

@@ -195,14 +195,21 @@ export default class commonScene {
 
       const finishLoad = (copperVolume: copperVolumeType) => {
         if (gui) gui.add(this, "depthStep").min(0.01).max(1).step(0.01);
-        const texture2dMesh = createTexture2D_Array(
+        const texture2d = createTexture2D_Array(
           copperVolume,
           depth,
           this.scene as THREE.Scene,
           gui
         );
 
-        let value = (texture2dMesh.material as any).uniforms["depth"].value;
+        if (opts?.getMesh) {
+          opts.getMesh(texture2d.mesh);
+        }
+        if (opts?.getCopperVolume) {
+          opts.getCopperVolume(texture2d.copperVolume, texture2d.updateTexture);
+        }
+
+        let value = (texture2d.mesh.material as any).uniforms["depth"].value;
 
         const render_texture2d = () => {
           // if (value > depth) {
@@ -211,8 +218,16 @@ export default class commonScene {
           // eval(
           //   "value += this.depthStep;if (value > depth) {value = 0;}"
           // );
+
+          // console.log(copperVolume);
+
           if (opts?.setAnimation) {
-            value = opts.setAnimation(value, depth, this.depthStep);
+            value = opts.setAnimation(
+              value,
+              depth,
+              this.depthStep,
+              copperVolume
+            );
           } else {
             value += this.depthStep;
             if (value > depth || value < 0.0) {
@@ -222,7 +237,7 @@ export default class commonScene {
             }
           }
 
-          (texture2dMesh.material as any).uniforms["depth"].value = value;
+          (texture2d.mesh.material as any).uniforms["depth"].value = value;
         };
         this.addPreRenderCallbackFunction(render_texture2d);
       };

src/Scene/copperScene.ts

@@ -98,7 +98,8 @@ export default class copperScene extends baseScene {
 
   loadVtks(models: Array<vtkModels>) {
     let count = 0;
-    const { vtkLoader, vtkmaterial } = copperMultipleVtk();
+    let { vtkLoader } = copperMultipleVtk();
+
     const group = new THREE.Group();
 
     const finishInterval = setInterval(() => {
@@ -148,6 +149,7 @@ export default class copperScene extends baseScene {
       geometries: Array<THREE.BufferGeometry>,
       model: vtkModels
     ) => {
+      let { vtkmaterial } = copperMultipleVtk(model.opts);
       let geometry = geometries[0];
       geometries.forEach((child, index) => {
         if (index === 0) {