Merge pull request #178 from LinkunGao/release/v1.13.14

Release/v1.13.14

Author: LinkunGao

docs/source/conf.py

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

docs/source/release/release.md

@@ -1410,3 +1410,8 @@ const resetMainAreaSize = (factor: number) => {
       }
       ```
     - We can in getCopperVolume() function to update the volume windowWidth and windowCenter
+
+## Release v1.13.14
+
+- re-add the export gltf function.
+- use these version to develop the nrrd tools app.

package-lock.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.13",
+  "version": "1.13.14",
   "main": "dist/bundle.umd.js",
   "moudle": "dist/bundle.esm.js",
   "types": "dist/types/index.d.ts",

package.json

@@ -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,6 +24,7 @@ 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;
@@ -56,6 +57,14 @@ 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/Renderer/baseRenderer.ts

@@ -151,11 +151,21 @@ export default class copperScene extends baseScene {
     ) => {
       let { vtkmaterial } = copperMultipleVtk(model.opts);
       let geometry = geometries[0];
+      const position = geometry.attributes.position;
       geometries.forEach((child, index) => {
         if (index === 0) {
           geometry = child;
           geometry.morphAttributes.position = [];
         } else {
+          // if (index == 1) {
+          //   geometry.morphAttributes.position.push(position);
+          // }
+          // if (index == 6) {
+          //   geometry.morphAttributes.position.push(child.attributes.position);
+          // }
+          // if (index == 7) {
+          //   geometry.morphAttributes.position.push(position);
+          // }
           geometry.morphAttributes.position.push(child.attributes.position);
         }
       });
@@ -171,6 +181,7 @@ export default class copperScene extends baseScene {
       let j = 0;
       let tracks = [];
       let duration = geometries.length - 1;
+      // let duration = 5;
       for (let i = 0; i < duration; i++) {
         const track = new THREE.KeyframeTrack(
           `${mesh.name}.morphTargetInfluences[${i}]`,

src/Scene/copperScene.ts

@@ -0,0 +1,56 @@
+import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter";
+import { optionsGltfExporterType } from "../types/types";
+
+export default class ExportGltf {
+  private gltfExporter: GLTFExporter = new GLTFExporter();
+  private options: optionsGltfExporterType = {
+    trs: false,
+    onlyVisible: true,
+    truncateDrawRange: true,
+    binary: false,
+    maxTextureSize: 40960000000,
+    animations: [],
+  };
+  private link: HTMLAnchorElement;
+
+  constructor(opts: optionsGltfExporterType) {
+    Object.assign(this.options, opts);
+    this.link = document.createElement("a");
+    this.link.style.display = "none";
+    document.body.appendChild(this.link);
+  }
+
+  export(input: any) {
+    const name: string = input.name ? input.name : "export";
+    this.gltfExporter.parse(
+      input,
+      (result) => {
+        if (result instanceof ArrayBuffer) {
+          this.saveArrayBuffer(result, name + ".glb");
+        } else {
+          const output = JSON.stringify(result, null, 2);
+          this.saveString(output, name + ".gltf");
+        }
+      },
+      function (error) {
+        console.log("An error happened during parsing", error);
+      },
+      this.options
+    );
+  }
+
+  save(blob: Blob, fileName: string) {
+    this.link.href = URL.createObjectURL(blob);
+    this.link.download = fileName;
+    this.link.click();
+  }
+  saveString(text: string, fileName: string) {
+    this.save(new Blob([text], { type: "text/plain" }), fileName);
+  }
+  saveArrayBuffer(buffer: ArrayBuffer, fileName: string) {
+    this.save(
+      new Blob([buffer], { type: "application/octet-stream" }),
+      fileName
+    );
+  }
+}

src/Utils/gltfExporter.ts

@@ -36,10 +36,10 @@ import {
 
 import "./css/style.css";
 
-export const REVISION = "v1.13.13";
+export const REVISION = "v1.13.14";
 
 console.log(
-  "%cCopper3D Visualisation %cBeta:v1.13.13",
+  "%cCopper3D Visualisation %cBeta:v1.13.14",
   "padding: 3px;color:white; background:#023047",
   "padding: 3px;color:white; background:#f50a25"
 );