@inweb/viewer-three 26.4.1 → 26.5.1

package/dist/viewer-three.module.js

@@ -1,12 +1,8 @@
-import { draggersRegistry, commandsRegistry, componentsRegistry, Options, CANVAS_EVENTS } from "@inweb/viewer-core";
+import { draggersRegistry, commandsRegistry, componentsRegistry, Loader, loadersRegistry, Options, CANVAS_EVENTS } from "@inweb/viewer-core";
 
 export * from "@inweb/viewer-core";
 
-import { Markup } from "@inweb/markup";
-
-export * from "@inweb/markup";
-
-import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Matrix4, Vector4, Raycaster, Controls, Clock, Box3, Sphere, MathUtils, Color, PMREMGenerator, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } from "three";
+import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Matrix4, Vector4, Raycaster, Controls, Clock, Box3, Sphere, MathUtils, Color, PMREMGenerator, AmbientLight, DirectionalLight, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, Scene, PerspectiveCamera, WebGLRenderer, LinearToneMapping } from "three";
 
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
 
@@ -16,6 +12,10 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 
 import { EventEmitter2 } from "@inweb/eventemitter2";
 
+import { Markup } from "@inweb/markup";
+
+export * from "@inweb/markup";
+
 class PlaneHelper extends Line {
     constructor(plane, size = 1, color = 16776960, offset = new Vector3) {
         const positions = [ 1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0 ];
@@ -1519,7 +1519,7 @@ function calcExplodeDepth(object, depth) {
     return res;
 }
 
-function explodeScene(scene, scale = 0, coeff = 4) {
+function explodeModel(scene, scale = 0, coeff = 4) {
     scale /= 100;
     if (!scene.explodeDepth) scene.explodeDepth = calcExplodeDepth(scene, 1);
     const maxDepth = scene.explodeDepth;
@@ -1542,7 +1542,7 @@ function explodeScene(scene, scale = 0, coeff = 4) {
 }
 
 function explode(viewer, index = 0) {
-    viewer.models.forEach((model => explodeScene(model.scene, index)));
+    viewer.models.forEach((model => explodeModel(model, index)));
     viewer.scene.updateMatrixWorld();
     viewer.update();
     viewer.emitEvent({
@@ -1947,24 +1947,33 @@ class BackgroundComponent {
         };
         this.viewer = viewer;
         this.backgroundColor = new Color(16777215);
-        const environment = new RoomEnvironment;
-        const pmremGenerator = new PMREMGenerator(this.viewer.renderer);
         this.viewer.renderer.setClearColor(this.backgroundColor);
         this.viewer.scene.background = this.backgroundColor;
-        this.viewer.scene.environment = pmremGenerator.fromScene(environment).texture;
         this.viewer.addEventListener("optionschange", this.syncOptions);
-        environment.dispose();
     }
     dispose() {
         this.viewer.removeEventListener("optionschange", this.syncOptions);
-        this.viewer.scene.environment = undefined;
         this.viewer.scene.background = undefined;
     }
 }
 
+class RoomEnvironmentComponent {
+    constructor(viewer) {
+        this.viewer = viewer;
+        const environment = new RoomEnvironment;
+        const pmremGenerator = new PMREMGenerator(this.viewer.renderer);
+        this.viewer.scene.environment = pmremGenerator.fromScene(environment).texture;
+        environment.dispose();
+    }
+    dispose() {
+        this.viewer.scene.environment = undefined;
+    }
+}
+
 class CameraComponent {
     constructor(viewer) {
         this.geometryEnd = () => {
+            const extentsCenter = this.viewer.extents.getCenter(new Vector3);
             const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere).radius * 2;
             const rendererSize = this.viewer.renderer.getSize(new Vector2);
             const aspect = rendererSize.x / rendererSize.y;
@@ -1991,6 +2000,7 @@ class CameraComponent {
                 camera.far = extentsSize * 100;
                 camera.updateProjectionMatrix();
             }
+            this.viewer.target.copy(extentsCenter);
             if (!sceneCamera) {
                 this.viewer.executeCommand("setDefaultViewPosition");
             }
@@ -2009,7 +2019,6 @@ class ExtentsComponent {
             const extents = new Box3;
             this.viewer.scene.traverseVisible((object => !object.children.length && extents.expandByObject(object)));
             this.viewer.extents.copy(extents);
-            this.viewer.target.copy(extents.getCenter(new Vector3));
         };
         this.viewer = viewer;
         this.viewer.addEventListener("databasechunk", this.syncExtents);
@@ -2029,6 +2038,38 @@ class ExtentsComponent {
     }
 }
 
+class LightComponent {
+    constructor(viewer) {
+        this.geometryEnd = () => {
+            this.ambientLight.removeFromParent();
+            this.directionalLight.removeFromParent();
+            if (this.viewer.extents.isEmpty()) return;
+            const extentsCenter = this.viewer.extents.getCenter(new Vector3);
+            const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere).radius * 2;
+            this.directionalLight.position.set(.5, 0, .866).multiplyScalar(extentsSize).add(extentsCenter);
+            this.directionalLight.target.position.copy(extentsCenter);
+            this.viewer.scene.add(this.ambientLight);
+            this.viewer.scene.add(this.directionalLight);
+        };
+        this.viewer = viewer;
+        this.ambientLight = new AmbientLight(16777215, 0);
+        this.viewer.scene.add(this.ambientLight);
+        this.directionalLight = new DirectionalLight(16777215, 1);
+        this.directionalLight.position.set(.5, 0, .866);
+        this.viewer.scene.add(this.directionalLight);
+        this.viewer.addEventListener("databasechunk", this.geometryEnd);
+        this.viewer.addEventListener("clear", this.geometryEnd);
+    }
+    dispose() {
+        this.ambientLight.removeFromParent();
+        this.ambientLight.dispose();
+        this.directionalLight.removeFromParent();
+        this.directionalLight.dispose();
+        this.viewer.removeEventListener("databasechunk", this.geometryEnd);
+        this.viewer.removeEventListener("clear", this.geometryEnd);
+    }
+}
+
 class RenderLoopComponent {
     constructor(viewer) {
         this.animate = (time = 0) => {
@@ -2189,6 +2230,10 @@ components.registerComponent("CameraComponent", (viewer => new CameraComponent(v
 
 components.registerComponent("BackgroundComponent", (viewer => new BackgroundComponent(viewer)));
 
+components.registerComponent("RoomEnvironmentComponent", (viewer => new RoomEnvironmentComponent(viewer)));
+
+components.registerComponent("LightComponent", (viewer => new LightComponent(viewer)));
+
 components.registerComponent("ResizeCanvasComponent", (viewer => new ResizeCanvasComponent(viewer)));
 
 components.registerComponent("RenderLoopComponent", (viewer => new RenderLoopComponent(viewer)));
@@ -2198,21 +2243,22 @@ components.registerComponent("SelectionComponent", (viewer => new SelectionCompo
 components.registerComponent("WCSHelperComponent", (viewer => new WCSHelperComponent(viewer)));
 
 class GLTFLoadingManager extends LoadingManager {
-    constructor(file, externalData = new Map, params = {}) {
+    constructor(file, params = {}) {
         super();
         this.path = "";
         this.resourcePath = "";
         this.fileURL = "";
         this.dataURLs = new Map;
         this.path = params.path || "";
+        const externalFiles = params.externalFiles || new Map;
         if (typeof file === "string") {
             this.fileURL = file;
             this.resourcePath = LoaderUtils.extractUrlBase(file);
         } else {
-            externalData.forEach(((value, key) => this.fileURL = value === file ? key : this.fileURL));
-            externalData.set(this.fileURL, file);
+            externalFiles.forEach(((value, key) => this.fileURL = value === file ? key : this.fileURL));
+            externalFiles.set(this.fileURL, file);
         }
-        externalData.forEach(((value, key) => {
+        externalFiles.forEach(((value, key) => {
             let dataURL;
             if (typeof value === "string") dataURL = value; else dataURL = URL.createObjectURL(new Blob([ value ]));
             this.dataURLs.set(key, dataURL);
@@ -2228,6 +2274,91 @@ class GLTFLoadingManager extends LoadingManager {
     }
 }
 
+class GLTFModelLoader extends Loader {
+    constructor(viewer) {
+        super();
+        this.viewer = viewer;
+    }
+    isSupport(model) {
+        return typeof model === "object" && typeof model.database === "string" && typeof model.downloadResource === "function" && /.gltf$/i.test(model.database);
+    }
+    async load(model) {
+        const url = `${model.httpClient.serverUrl}${model.path}/${model.database}`;
+        const manager = new GLTFLoadingManager(url);
+        const loader = new GLTFLoader(manager);
+        loader.setRequestHeader(model.httpClient.headers);
+        const progress = event => {
+            const {lengthComputable: lengthComputable, loaded: loaded, total: total} = event;
+            const progress = lengthComputable ? loaded / total : 1;
+            this.viewer.emitEvent({
+                type: "geometryprogress",
+                data: progress,
+                file: model.file,
+                model: model
+            });
+        };
+        const gltf = await loader.loadAsync(url, progress);
+        if (!this.viewer.scene) return this;
+        this.viewer.scene.add(gltf.scene);
+        this.viewer.models.push(gltf.scene);
+        this.viewer.syncOptions();
+        this.viewer.syncOverlay();
+        this.viewer.update();
+        this.viewer.emitEvent({
+            type: "databasechunk",
+            data: gltf.scene,
+            file: model.file,
+            model: model
+        });
+        return this;
+    }
+}
+
+class GLTFFileLoader extends Loader {
+    constructor(viewer) {
+        super();
+        this.viewer = viewer;
+    }
+    isSupport(file, format) {
+        return (typeof file === "string" || file instanceof globalThis.File || file instanceof ArrayBuffer) && /(gltf|glb)$/i.test(format);
+    }
+    async load(buffer, format, params) {
+        const manager = new GLTFLoadingManager(buffer, params);
+        const loader = new GLTFLoader(manager);
+        loader.setPath(manager.path);
+        loader.setCrossOrigin(params.crossOrigin || loader.crossOrigin);
+        loader.setWithCredentials(params.withCredentials || loader.withCredentials);
+        const progress = event => {
+            const {lengthComputable: lengthComputable, loaded: loaded, total: total} = event;
+            const progress = lengthComputable ? loaded / total : 1;
+            this.viewer.emitEvent({
+                type: "geometryprogress",
+                data: progress,
+                file: buffer
+            });
+        };
+        const gltf = await loader.loadAsync(manager.fileURL, progress);
+        if (!this.viewer.scene) return this;
+        this.viewer.scene.add(gltf.scene);
+        this.viewer.models.push(gltf.scene);
+        this.viewer.syncOptions();
+        this.viewer.syncOverlay();
+        this.viewer.update();
+        this.viewer.emitEvent({
+            type: "databasechunk",
+            data: gltf.scene,
+            file: buffer
+        });
+        return this;
+    }
+}
+
+const loaders = loadersRegistry("threejs");
+
+loaders.registerLoader("gltf", (viewer => new GLTFModelLoader(viewer)));
+
+loaders.registerLoader("gltf-file", (viewer => new GLTFFileLoader(viewer)));
+
 class Viewer extends EventEmitter2 {
     constructor(client) {
         super();
@@ -2236,6 +2367,7 @@ class Viewer extends EventEmitter2 {
         this.canvasEvents = CANVAS_EVENTS;
         this.canvaseventlistener = event => this.emit(event);
         this.models = [];
+        this.loaders = [];
         this.selected = [];
         this.extents = new Box3;
         this.target = new Vector3;
@@ -2361,97 +2493,80 @@ class Viewer extends EventEmitter2 {
     loadReferences(model) {
         return Promise.resolve(this);
     }
-    async open(file) {
+    async open(file, params = {}) {
         if (!this.renderer) return this;
-        this.cancel();
-        this.clear();
+        if (params.mode !== "a" && params.mode !== "append") {
+            this.cancel();
+            this.clear();
+        }
         this.emitEvent({
             type: "open",
-            file: file,
-            model: file
+            file: file
         });
-        let model = undefined;
-        if (file) {
-            const models = await file.getModels() || [];
-            model = models.find((model => model.default)) || models[0];
+        let model = file;
+        if (model && typeof model.getModels === "function") {
+            const models = await model.getModels();
+            model = models.find((model => model.default)) || models[0] || file;
         }
-        if (!model) throw new Error("No default model found");
-        const geometryType = model.database.split(".").pop();
-        if (geometryType !== "gltf") throw new Error(`Unknown geometry type: ${geometryType}`);
-        const url = `${model.httpClient.serverUrl}${model.path}/${model.database}`;
-        const params = {
-            requestHeader: model.httpClient.headers
-        };
-        await this.loadReferences(model);
-        await this.loadGltfFile(url, undefined, params);
-        return this;
-    }
-    cancel() {
+        if (!model) throw new Error(`Format not supported`);
+        let format = params.format;
+        if (!format && typeof model.type === "string") format = model.type.split(".").pop();
+        if (!format && typeof file === "string") format = file.split(".").pop();
+        if (!format && file instanceof globalThis.File) format = file.name.split(".").pop();
+        const loader = loaders.createLoader(this, model, format);
+        if (!loader) throw new Error(`Format not supported`);
+        this.loaders.push(loader);
         this.emitEvent({
-            type: "cancel"
-        });
-        return this;
-    }
-    openGltfFile(file, externalData = new Map, params = {}) {
-        if (!this.renderer) return Promise.resolve(this);
-        this.cancel();
-        this.clear();
-        this.emitEvent({
-            type: "open"
+            type: "geometrystart",
+            file: file,
+            model: model
         });
-        return this.loadGltfFile(file, externalData, params);
-    }
-    async loadGltfFile(file, externalData = new Map, params = {}) {
-        const manager = new GLTFLoadingManager(file, externalData, params);
         try {
-            this.emitEvent({
-                type: "geometrystart"
-            });
-            const loader = new GLTFLoader(manager);
-            loader.setPath(manager.path);
-            loader.setRequestHeader(params.requestHeader);
-            loader.setCrossOrigin(params.crossOrigin || loader.crossOrigin);
-            loader.setWithCredentials(params.withCredentials || loader.withCredentials);
-            const gltf = await loader.loadAsync(manager.fileURL, (event => {
-                const {lengthComputable: lengthComputable, loaded: loaded, total: total} = event;
-                const progress = lengthComputable ? loaded / total : 1;
-                this.emitEvent({
-                    type: "geometryprogress",
-                    data: progress
-                });
-            }));
-            if (!this.scene) return this;
-            if (!gltf.scene) throw new Error("No glTF scene found");
-            this.models.push(gltf);
-            this.scene.add(gltf.scene);
-            this.syncOptions();
-            this.syncOverlay();
-            this.update();
-            this.emitEvent({
-                type: "databasechunk"
-            });
-            this.emitEvent({
-                type: "geometryend",
-                data: gltf.scene
-            });
+            await this.loadReferences(model);
+            await loader.load(model, format, params);
         } catch (error) {
             this.emitEvent({
                 type: "geometryerror",
-                data: error
+                data: error,
+                file: file,
+                model: model
             });
             throw error;
-        } finally {
-            manager.dispose();
         }
+        this.emitEvent({
+            type: "geometryend",
+            file: file,
+            model: model
+        });
+        return this;
+    }
+    openGltfFile(file, externalFiles, params = {}) {
+        return this.open(file, {
+            ...params,
+            format: "gltf",
+            externalFiles: externalFiles
+        });
+    }
+    loadGltfFile(file, externalFiles, params = {}) {
+        return this.open(file, {
+            ...params,
+            format: "gltf",
+            externalFiles: externalFiles,
+            mode: "append"
+        });
+    }
+    cancel() {
+        this.loaders.forEach((loader => loader.cancel()));
+        this.emitEvent({
+            type: "cancel"
+        });
         return this;
     }
     clear() {
         if (!this.renderer) return this;
         function disposeMaterial(material) {
             const materials = Array.isArray(material) ? material : [ material ];
-            materials.forEach((material => {
-                material.dispose();
-            }));
+            materials.forEach((material => material.dispose()));
         }
         function disposeObject(object) {
             if (object.geometry) object.geometry.dispose();
@@ -2463,10 +2578,12 @@ class Viewer extends EventEmitter2 {
         this.clearSelected();
         this.helpers.traverse(disposeObject);
         this.helpers.clear();
-        this.models.forEach((gltf => gltf.scene.traverse(disposeObject)));
-        this.models.forEach((gltf => gltf.scene.removeFromParent()));
+        this.models.forEach((model => model.traverse(disposeObject)));
+        this.models.forEach((model => model.removeFromParent()));
         this.models = [];
         this.scene.clear();
+        this.loaders.forEach((loader => loader.dispose()));
+        this.loaders = [];
         this.syncOptions();
         this.syncOverlay();
         this.update(true);
@@ -2729,5 +2846,5 @@ class Viewer extends EventEmitter2 {
     }
 }
 
-export { Viewer, commands, components, draggers };
+export { GLTFLoadingManager, Viewer, commands, components, draggers, loaders };
 //# sourceMappingURL=viewer-three.module.js.map