Version 1.4.0: Add meshObject.

derpylz · Jan 11, 2022 · 5883e31 · 5883e31
1 parent 879da63
commit 5883e31
Show file tree

Hide file tree

Showing 10 changed files with 444 additions and 81 deletions.
diff --git a/dist/babyplots.js b/dist/babyplots.js
diff --git a/dist/babyplots.js.map b/dist/babyplots.js.map
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babyplots",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Easy interactive 3d plots.",
   "main": "build/babyplots.js",
   "scripts": {

diff --git a/src/babyplots.d.ts b/src/babyplots.d.ts
@@ -135,6 +135,13 @@ export interface LegendData {
     legendTitleFontSize?: number;
     legendTitleFontColor?: string;
 }
+export declare class CustomLoadingScreen implements ILoadingScreen {
+    loadingUIText: string;
+    loadingUIBackgroundColor: string;
+    constructor(loadingUIText: string);
+    displayLoadingUI(): void;
+    hideLoadingUI(): void;
+}
 export declare abstract class Plot {
     protected _scene: Scene;
     allLoaded: boolean;
@@ -178,6 +185,7 @@ export declare function matrixMax(matrix: number[][]): number;
 export declare function matrixMin(matrix: number[][]): number;
 export declare function getUniqueVals(source: string[]): string[];
 import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
+import { ILoadingScreen } from "@babylonjs/core/Loading/loadingScreen";
 export declare const PLOTTYPES: {
     pointCloud: string[];
     shapeCloud: string[];
@@ -251,6 +259,7 @@ export declare class Plots {
         dim: number[];
     }, options: {}): this;
     addPlot(coordinates: number[][], plotType: string, colorBy: string, colorVar: string[] | number[], options?: {}): Plots;
+    addMeshObject(meshString: string, options: {}): Plots;
     addMeshStream(rootUrl: string, filePrefix: string, fileSuffix: string, fileIteratorStart: number, fileIteratorEnd: number, frameDelay: number, options: {}): Plots;
     private _updateLegend;
     private _drawStandaloneShapeLegend;

diff --git a/src/babyplots.ts b/src/babyplots.ts
@@ -175,6 +175,18 @@ export interface LegendData {
     legendTitleFontColor?: string;
 }
 
+
+export class CustomLoadingScreen implements ILoadingScreen {
+    //optional, but needed due to interface definitions
+    public loadingUIBackgroundColor: string
+    constructor(public loadingUIText: string) { }
+    public displayLoadingUI() {
+    }
+
+    public hideLoadingUI() {
+    }
+}
+
 export abstract class Plot {
     protected _scene: Scene;
 
@@ -207,7 +219,7 @@ export abstract class Plot {
         this.zScale = zScale;
     }
 
-    goToFrame(n: number): void {}
+    goToFrame(n: number): void { }
     update(): boolean { return false }
     resetAnimation(): void { }
     setLooping(looping: boolean): void { }
@@ -219,7 +231,7 @@ export abstract class CoordinatePlot extends Plot {
     protected _groups: string[];
     protected _groupNames: string[];
     protected _size: number = 1;
-    
+
     pickable: boolean = true;
     selection: number[]; // contains indices of cells in selection cube
     dpInfo: string[];
@@ -306,10 +318,12 @@ import { PointCloud } from "./plotTypes/PointCloud";
 import { Surface } from "./plotTypes/Surface";
 import { HeatMap } from "./plotTypes/HeatMap";
 import { MeshStream } from "./plotTypes/MeshStream";
+import { MeshObject } from "./plotTypes/MeshObject";
 import { BoundingBox } from "@babylonjs/core/Culling/boundingBox";
 import { styleText } from "./utils/styleText";
 import { buttonSVGs, legendSVGs } from "./utils/SVGs";
 import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
+import { ILoadingScreen } from "@babylonjs/core/Loading/loadingScreen";
 
 export const PLOTTYPES = {
     'pointCloud': ['coordinates', 'colorBy', 'colorVar'],
@@ -441,10 +455,14 @@ export class Plots {
         this.camera.wheelPrecision = 50;
         this._upAxis = opts.upAxis;
         this._updateCameraUpVector();
-        
+
         // background color
         this.scene.clearColor = Color4.FromHexString(opts.backgroundColor);
 
+        // Loading screen
+        var loadingScreen = new CustomLoadingScreen("Loading");
+        this._engine.loadingScreen = loadingScreen;
+
         // Axis scales
         this._xScale = opts.xScale;
         this._yScale = opts.yScale;
@@ -473,7 +491,7 @@ export class Plots {
         let styleElem = document.createElement("style");
         styleElem.appendChild(document.createTextNode(styleText));
         document.getElementsByTagName('head')[0].appendChild(styleElem);
-        
+
         // create ui elements
         let buttonBar = document.createElement("div");
         buttonBar.id = "buttonBar_" + this._uniqID;
@@ -619,6 +637,15 @@ export class Plots {
                         channelOpacities: plot["channelOpacities"]
                     }
                 )
+            } else if (plot["plotType"] === "meshObject") {
+                this.addMeshObject(
+                    plot["meshString"],
+                    {
+                        meshScaling: plot["meshScaling"],
+                        meshRotation: plot["meshRotation"],
+                        meshOffset: plot["meshOffset"]
+                    }
+                )
             } else if (plot["plotType"] === "meshStream") {
                 this.addMeshStream(
                     plot["rootUrl"],
@@ -1017,7 +1044,7 @@ export class Plots {
         if (!this._hasAnim) {
             this._resetAnimation();
         }
-        
+
     }
 
     private _startRecording() {
@@ -1744,6 +1771,59 @@ export class Plots {
         return this
     }
 
+    /**
+     * 
+     * @param meshString A glTF object string
+     * @param options An object with general and plot type specific options.
+     * 
+     * Find a list of possible options [here](https://bp.bleb.li/documentation/js#addMeshStream).
+     */
+    addMeshObject(
+        meshString: string,
+        options: {}
+    ): Plots {
+        // default options
+        let opts = {
+            meshScaling: [0, 0, 0],
+            meshRotation: [0, 0, 0],
+            meshOffset: [0, 0, 0]
+        }
+        // apply user options
+        Object.assign(opts, options);
+        // prepare object for download as json button
+        this._downloadObj["plots"].push({
+            plotType: "meshObject",
+            meshString: meshString,
+            meshScaling: opts.meshScaling,
+            meshRotation: opts.meshRotation,
+            meshOffset: opts.meshOffset
+        });
+
+        let legendData: LegendData = {
+            showLegend: false,
+            discrete: false,
+            breaks: [],
+            colorScale: "",
+            inverted: false,
+            position: undefined
+        };
+
+        let plot = new MeshObject(
+            this.scene,
+            meshString,
+            legendData,
+            this._xScale,
+            this._yScale,
+            this._zScale,
+            opts.meshScaling,
+            opts.meshRotation,
+            opts.meshOffset
+        );
+
+        this.plots.push(plot);
+        return this
+    }
+
     /**
      * Streams meshes from a url and displays them sequentially.
      * 
@@ -1800,7 +1880,6 @@ export class Plots {
 
         let plot = new MeshStream(
             this.scene,
-            this.camera,
             rootUrl,
             filePrefix,
             fileSuffix,
@@ -1831,7 +1910,7 @@ export class Plots {
         // replayBtn.innerHTML = buttonSVGs.replay;
         // replayBtn.onclick = this._resetAnimation.bind(this);
         // let loopBtn = document.createElement("div");
-        
+
         return this;
     }
 

diff --git a/src/plotTypes/MeshObject.d.ts b/src/plotTypes/MeshObject.d.ts
@@ -0,0 +1,11 @@
+import { Vector3 } from "@babylonjs/core/Maths/math";
+import { Scene } from "@babylonjs/core/scene";
+import { LegendData, Plot } from "../babyplots";
+import "@babylonjs/loaders/glTF";
+export declare class MeshObject extends Plot {
+    worldextends: {
+        min: Vector3;
+        max: Vector3;
+    };
+    constructor(scene: Scene, meshString: string, legendData: LegendData, xScale?: number, yScale?: number, zScale?: number, scaling?: number[], rotation?: number[], offset?: number[], name?: string);
+}
diff --git a/src/plotTypes/MeshObject.ts b/src/plotTypes/MeshObject.ts
@@ -0,0 +1,72 @@
+/**
+ * Babyplots - Easy, fast, interactive 3D visualizations
+ *
+ * Copyright (c) 2020, Nils Jonathan Trost. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * 
+ */
+
+
+
+import { Axis, Space, Vector3 } from "@babylonjs/core/Maths/math";
+import { Scene } from "@babylonjs/core/scene";
+import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
+
+import { LegendData, Plot } from "../babyplots";
+
+import "@babylonjs/loaders/glTF";
+
+export class MeshObject extends Plot {
+
+
+    worldextends: { min: Vector3; max: Vector3}
+
+    constructor(
+        scene: Scene,
+        meshString: string,
+        legendData: LegendData,
+        xScale: number = 1,
+        yScale: number = 1,
+        zScale: number = 1,
+        scaling: number[] = [],
+        rotation: number[] = [],
+        offset: number[] = [],
+        name: string = "mesh object"
+    ) {
+        super(name, "meshObject", scene, legendData, xScale, yScale, zScale);
+        SceneLoader.ImportMesh("", "", "data:" + meshString, scene, (meshes, _, __) => {
+            let rootMesh = meshes[0]
+            if (scaling.length === 3) {
+                rootMesh.scaling = new Vector3(
+                    scaling[0],
+                    scaling[1],
+                    scaling[2]
+                );
+            }
+            if (rotation.length === 3) {
+                rootMesh.rotationQuaternion = null;
+                rootMesh.rotate(Axis.X, rotation[0], Space.LOCAL);
+                rootMesh.rotate(Axis.Y, rotation[1], Space.LOCAL);
+                rootMesh.rotate(Axis.Z, rotation[2], Space.LOCAL);
+            }
+            if (offset.length === 3) {
+                meshes[0].position = new Vector3(
+                    offset[0],
+                    offset[1],
+                    offset[2]
+                );
+            }
+        });
+    }
+}
diff --git a/src/plotTypes/MeshStream.d.ts b/src/plotTypes/MeshStream.d.ts
@@ -1,4 +1,3 @@
-import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
 import { AssetContainer } from "@babylonjs/core/assetContainer";
 import { Scene } from "@babylonjs/core/scene";
 import { LegendData, Plot } from "../babyplots";
@@ -9,7 +8,6 @@ export declare class MeshStream extends Plot {
     private _filenames;
     private _prevTime;
     private _containers;
-    private _camera;
     private _rotation;
     private _offset;
     private _clearCoat;
@@ -21,7 +19,7 @@ export declare class MeshStream extends Plot {
         min: Vector3;
         max: Vector3;
     };
-    constructor(scene: Scene, camera: ArcRotateCamera, rootUrl: string, filePrefix: string, fileSuffix: string, fileIteratorStart: number, fileIteratorEnd: number, legendData: LegendData, xScale?: number, yScale?: number, zScale?: number, frameDelay?: number, rotation?: number[], offset?: number[], clearCoat?: boolean, clearCoatIntensity?: number, name?: string);
+    constructor(scene: Scene, rootUrl: string, filePrefix: string, fileSuffix: string, fileIteratorStart: number, fileIteratorEnd: number, legendData: LegendData, xScale?: number, yScale?: number, zScale?: number, frameDelay?: number, rotation?: number[], offset?: number[], clearCoat?: boolean, clearCoatIntensity?: number, name?: string);
     _createMeshStream(): Promise<void>;
     _loadMesh(filename: string): Promise<AssetContainer>;
     goToFrame(n: number): void;

diff --git a/src/plotTypes/MeshStream.ts b/src/plotTypes/MeshStream.ts
@@ -17,7 +17,6 @@
  * 
  */
 
-import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
 import { AssetContainer } from "@babylonjs/core/assetContainer";
 import { Scene } from "@babylonjs/core/scene";
 import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
@@ -33,7 +32,6 @@ export class MeshStream extends Plot {
     private _filenames: string[] = [];
     private _prevTime: number = performance.now();
     private _containers: AssetContainer[] = [];
-    private _camera: ArcRotateCamera;
     private _rotation: number[];
     private _offset: number[];
     private _clearCoat: boolean;
@@ -46,7 +44,6 @@ export class MeshStream extends Plot {
 
     constructor(
         scene: Scene,
-        camera: ArcRotateCamera,
         rootUrl: string,
         filePrefix: string,
         fileSuffix: string,
@@ -64,7 +61,6 @@ export class MeshStream extends Plot {
         name: string = "mesh stream"
     ) {
         super(name, "meshStream", scene, legendData, xScale, yScale, zScale);
-        this._camera = camera;
         this._rootUrl = rootUrl;
         this.frameDelay = frameDelay;
         this._rotation = rotation;
@@ -164,7 +160,3 @@ export class MeshStream extends Plot {
         return true;
     }
 }
-
-function _sleep(ms: number) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}