@xviewer.js/core 1.0.0-alpha.55 → 1.0.0-alpha.57

package/dist/main.js

@@ -1106,10 +1106,14 @@ aLoader._texKeys = [
 ];
 
 class aEXRLoader extends aLoader {
-    load({ url, onLoad, onProgress, onError, texSettings }) {
-        const loader = new EXRLoader_js.EXRLoader(this.manager.loadingManager);
-        loader.setPath(this.manager.path);
-        loader.setResourcePath(this.manager.resourcePath);
+    load({ url, path, resourcePath, manager, texSettings, onLoad, onProgress, onError }) {
+        let loader = this._loader;
+        if (loader === undefined) {
+            loader = this._loader = new EXRLoader_js.EXRLoader();
+        }
+        loader.manager = manager;
+        loader.setPath(path);
+        loader.setResourcePath(resourcePath);
         loader.load(url, (tex)=>onLoad(Object.assign(tex, texSettings)), onProgress, onError);
     }
     constructor(...args){
@@ -1121,14 +1125,22 @@ class aEXRLoader extends aLoader {
 }
 
 class aFBXLoader extends aLoader {
-    load({ url, onLoad, onProgress, onError }) {
+    load({ url, buffer, path, resourcePath, manager, onLoad, onProgress, onError }) {
+        let loader = this._loader;
+        if (loader === undefined) {
+            loader = this._loader = new FBXLoader_js.FBXLoader();
+        }
+        loader.manager = manager;
+        loader.setPath(path);
+        loader.setResourcePath(resourcePath);
         const loadCallback = (node)=>{
             onLoad(aLoader._setUserData(node));
         };
-        const loader = new FBXLoader_js.FBXLoader(this.manager.loadingManager);
-        loader.setPath(this.manager.path);
-        loader.setResourcePath(this.manager.resourcePath);
-        loader.load(url, loadCallback, onProgress, onError);
+        if (buffer) {
+            loadCallback(loader.parse(buffer, path));
+        } else {
+            loader.load(url, loadCallback, onProgress, onError);
+        }
     }
     constructor(...args){
         super(...args);
@@ -1139,20 +1151,32 @@ class aFBXLoader extends aLoader {
 }
 
 class aGLTFLoader extends aLoader {
-    load({ url, onLoad, onProgress, onError }) {
+    load({ url, buffer, path, resourcePath, dracoPath, manager, onLoad, onProgress, onError }) {
+        let dracoLoader = this._dracoLoader;
+        if (dracoLoader === undefined) {
+            dracoLoader = this._dracoLoader = new DRACOLoader_js.DRACOLoader();
+        }
+        dracoLoader.manager = manager;
+        dracoLoader.setDecoderPath(dracoPath);
+        let loader = this._loader;
+        if (loader === undefined) {
+            loader = this._loader = new GLTFLoader_js.GLTFLoader();
+            loader.setDRACOLoader(dracoLoader);
+            loader.setMeshoptDecoder(meshopt_decoder_module_js.MeshoptDecoder);
+        }
+        loader.manager = manager;
+        loader.setPath(path);
+        loader.setResourcePath(resourcePath);
         const loadCallback = (gltf)=>{
             const node = gltf.scene;
-            if (gltf.animations) node.animations = gltf.animations;
+            node.animations.push(...gltf.animations);
             onLoad(aLoader._setUserData(node));
         };
-        let gltfLoader = new GLTFLoader_js.GLTFLoader(this.manager.loadingManager);
-        gltfLoader.setPath(this.manager.path);
-        gltfLoader.setResourcePath(this.manager.resourcePath);
-        let dracoLoader = new DRACOLoader_js.DRACOLoader(this.manager.loadingManager);
-        dracoLoader.setDecoderPath(this.manager.dracoPath);
-        gltfLoader.setDRACOLoader(dracoLoader);
-        gltfLoader.setMeshoptDecoder(meshopt_decoder_module_js.MeshoptDecoder);
-        gltfLoader.load(url, loadCallback, onProgress, onError);
+        if (buffer) {
+            loader.parse(buffer, resourcePath, loadCallback, onError);
+        } else {
+            loader.load(url, loadCallback, onProgress, onError);
+        }
     }
     constructor(...args){
         super(...args);
@@ -1164,14 +1188,18 @@ class aGLTFLoader extends aLoader {
 }
 
 class aHDRLoader extends aLoader {
-    load({ url, onLoad, onProgress, onError, texSettings }) {
-        texSettings = Object.assign({
+    load({ url, path, resourcePath, manager, texSettings, onLoad, onProgress, onError }) {
+        let loader = this._loader;
+        if (loader === undefined) {
+            loader = this._loader = new RGBELoader_js.RGBELoader();
+        }
+        loader.manager = manager;
+        loader.setPath(path);
+        loader.setResourcePath(resourcePath);
+        const settings = Object.assign({
             mapping: three.EquirectangularReflectionMapping
         }, texSettings);
-        const loader = new RGBELoader_js.RGBELoader(this.manager.loadingManager);
-        loader.setPath(this.manager.path);
-        loader.setResourcePath(this.manager.resourcePath);
-        loader.load(url, (tex)=>onLoad(Object.assign(tex, texSettings)), onProgress, onError);
+        loader.load(url, (tex)=>onLoad(Object.assign(tex, settings)), onProgress, onError);
     }
     constructor(...args){
         super(...args);
@@ -1182,10 +1210,14 @@ class aHDRLoader extends aLoader {
 }
 
 class aJSONLoader extends aLoader {
-    load({ url, onLoad, onProgress, onError }) {
-        const loader = new three.FileLoader(this.manager.loadingManager);
-        loader.setPath(this.manager.path);
-        loader.setResourcePath(this.manager.resourcePath);
+    load({ url, path, resourcePath, manager, onLoad, onProgress, onError }) {
+        let loader = this._loader;
+        if (loader === undefined) {
+            loader = this._loader = new three.FileLoader();
+        }
+        loader.manager = manager;
+        loader.setPath(path);
+        loader.setResourcePath(resourcePath);
         loader.load(url, (file)=>onLoad(JSON.parse(file)), onProgress, onError);
     }
     constructor(...args){
@@ -1197,14 +1229,18 @@ class aJSONLoader extends aLoader {
 }
 
 class aTextureLoader extends aLoader {
-    load({ url, onLoad, onProgress, onError, texSettings }) {
+    load({ url, path, resourcePath, manager, texSettings, onLoad, onProgress, onError }) {
+        let loader = this._loader;
+        if (loader === undefined) {
+            loader = this._loader = new three.TextureLoader();
+        }
+        loader.manager = manager;
+        loader.setPath(path);
+        loader.setResourcePath(resourcePath);
         const loadCallback = (tex)=>{
             tex.colorSpace = three.SRGBColorSpace;
             onLoad(Object.assign(tex, texSettings));
         };
-        const loader = new three.TextureLoader(this.manager.loadingManager);
-        loader.setPath(this.manager.path);
-        loader.setResourcePath(this.manager.resourcePath);
         loader.load(url, loadCallback, onProgress, onError);
     }
     constructor(...args){
@@ -2866,13 +2902,13 @@ class FreelookVirtualCamera extends VirtualCamera {
         this._touchID = -1;
         this._preLoc0 = new three.Vector2();
         this._preLoc1 = new three.Vector2();
-        this._spherical = new three.Spherical(2, Math.PI / 2);
+        this._spherical = new three.Spherical(4, Math.PI / 2);
         this._lookAt = new three.Vector3();
         this._tempSmoothing = 6;
         this._tempRotateSmoothing = 8;
         this._targetTheta = 0;
         this._targetPhi = 0;
-        this._targetSpringLength = 1;
+        this._targetSpringLength = 4;
         this._targetFov = this.fov;
         this._targetLookAt = new three.Vector3();
         this.forbidX = false;
@@ -4243,7 +4279,7 @@ class ResourceManager {
     static extension(path) {
         let str = path.split(".");
         if (str.length > 1) {
-            return str.pop();
+            return str.pop().toLowerCase();
         }
         return "";
     }
@@ -4255,15 +4291,6 @@ class ResourceManager {
         let str = path.split("/").pop();
         return ext ? str.replace("." + ext, "") : str;
     }
-    static _getTextureKey(url, settings) {
-        let keys = [
-            url
-        ];
-        for(let k in settings){
-            if (settings[k] !== undefined) keys.push(k + "=" + settings[k]);
-        }
-        return keys.join(",");
-    }
     static _splitTextureSettings(props) {
         let settings = {};
         for (let v of ResourceManager._texSettingKeys){
@@ -4278,55 +4305,43 @@ class ResourceManager {
         return settings;
     }
     destroy() {
-        this._caches.clear();
         this._loaders.clear();
     }
+    getLoader(ext) {
+        return this._loaders.get(ext);
+    }
     addLoader(Loader) {
         let loader = new Loader(this);
         for (let ext of loader.extension){
             this._loaders.set(ext, loader);
         }
     }
-    loadAsset({ url, ext, onProgress, ...props }) {
+    loadAsset({ url, buffer, ext, path, resourcePath, dracoPath, manager, onProgress, ...props }) {
         return new Promise((resolve, reject)=>{
-            const ext_ = ResourceManager.extension(url);
+            const sel = ext || url && ResourceManager.extension(url) || "";
             const texSettings = ResourceManager._splitTextureSettings(props);
-            const key = ResourceManager._getTextureKey(url, texSettings);
-            let result = this._caches.get(key);
-            if (result) {
-                resolve(result);
+            if (this._loaders.has(sel)) {
+                this._loaders.get(sel).load({
+                    url,
+                    buffer,
+                    texSettings,
+                    path,
+                    resourcePath,
+                    dracoPath,
+                    manager,
+                    onProgress,
+                    onLoad: resolve,
+                    onError: (e)=>{
+                        console.error(`${url} not exist`, e);
+                    }
+                });
             } else {
-                const onLoad = (file)=>{
-                    this._caches.set(key, file);
-                    resolve(file);
-                };
-                let sel = ext || ext_;
-                if (this._loaders.has(sel)) {
-                    this._loaders.get(sel).load({
-                        url,
-                        texSettings,
-                        onProgress,
-                        onLoad,
-                        onError: (e)=>{
-                            console.error(`${url} not exist`, e);
-                        }
-                    });
-                } else {
-                    reject("ResourceManager.loadAsset: missing loader for " + ext);
-                }
+                reject("ResourceManager.loadAsset: missing loader for " + url);
             }
         });
     }
-    constructor(props){
-        this.path = "";
-        this.resourcePath = "";
-        this.dracoPath = "";
-        this._caches = new Map();
+    constructor(){
         this._loaders = new Map();
-        this.path = props.path;
-        this.resourcePath = props.resourcePath;
-        this.dracoPath = props.dracoPath;
-        this.loadingManager = props.loadingManager;
     }
 }
 ResourceManager._texSettingKeys = [
@@ -4535,9 +4550,6 @@ class Viewer extends EventEmitter {
     static getMesh(node, name, group = false) {
         return Viewer._getObjectValue(node.userData.meshes, name, group);
     }
-    get instanceId() {
-        return this._instanceId;
-    }
     get root() {
         return this._root;
     }
@@ -4589,6 +4601,18 @@ class Viewer extends EventEmitter {
     set targetFrameRate(v) {
         this._targetFrameRate = Math.max(0.001, v);
     }
+    get instanceId() {
+        return this._instanceId;
+    }
+    get loadingManager() {
+        return this._loadingManager;
+    }
+    get resourceManager() {
+        return this._resourceManager;
+    }
+    get taskManager() {
+        return this._taskManager;
+    }
     destroy() {
         this.stop();
         this._renderer.dispose();
@@ -4713,7 +4737,10 @@ class Viewer extends EventEmitter {
         }
     }
     loadAsset(props) {
-        return this._resourceManager.loadAsset(props);
+        return this._resourceManager.loadAsset(Object.assign(Object.assign({}, this._defaultProps), props));
+    }
+    getLoader(ext) {
+        return this._resourceManager.getLoader(ext);
     }
     addLoader(Loader) {
         this._resourceManager.addLoader(Loader);
@@ -4758,6 +4785,9 @@ class Viewer extends EventEmitter {
     removeComponent(node, component) {
         return this._componentManager.removeComponent(node, component);
     }
+    addTask(task) {
+        this._taskManager.add(task);
+    }
     addNode(object, { args, debug, scale, position, rotation, layer, shadowArgs, makeDefault, component, parent = this._scene, ...props } = {}) {
         let node = null;
         let ins = getClassInstance(object, args);
@@ -4903,6 +4933,7 @@ class Viewer extends EventEmitter {
             factor: 1
         };
         this._orientation = exports.Orientation.AUTO;
+        this._defaultProps = {};
         this._running = false;
         this._rootRotated = false;
         this._time = 0;
@@ -4936,17 +4967,18 @@ class Viewer extends EventEmitter {
         this._renderer.shadowMap.enabled = !!shadows;
         this._renderer.shadowMap.type = typeof shadows === "boolean" ? three.PCFSoftShadowMap : shadows;
         this._renderer.info.autoReset = false;
-        const loadingManager = new three.LoadingManager(loader.onLoad, loader.onProgress, loader.onError);
-        this._resourceManager = new ResourceManager({
-            path,
-            resourcePath,
-            dracoPath,
-            loadingManager
-        });
+        this._resourceManager = new ResourceManager();
+        this._loadingManager = new three.LoadingManager(loader.onLoad, loader.onProgress, loader.onError);
         this._taskManager = new TaskManager(tasker.onComplete, tasker.onProgress, tasker.onError);
         this._componentManager = new ComponentManager(this);
         this._pluginManager = new PluginManager(this);
         this._tweenManager = new TweenManager();
+        this._defaultProps = {
+            path,
+            resourcePath,
+            dracoPath,
+            manager: this._loadingManager
+        };
         this._autoResize = autoResize;
         this._targetFrameRate = targetFrameRate;
         this._input = new DeviceInput(this);
@@ -5540,6 +5572,149 @@ class PerformanceMonitorPlugin extends Plugin {
     }
 }
 
+class DropFilePlugin extends Plugin {
+    install() {
+        document.addEventListener("dragover", this._onDrogOver);
+        document.addEventListener("drop", this._onDrop);
+    }
+    uninstall() {
+        document.removeEventListener("dragover", this._onDrogOver);
+        document.removeEventListener("drop", this._onDrop);
+    }
+    _loadItemList(items) {
+        getFilesFromItemList(items, (files, filesMap, dirs)=>{
+            this._loadFiles(files, filesMap, dirs);
+        });
+    }
+    _loadFiles(files, filesMap, dirs) {
+        if (files.length > 0) {
+            filesMap = filesMap || createFilesMap(files);
+            dirs = dirs || [];
+            this.viewer.loadingManager.setURLModifier((url)=>{
+                url = url.replace(/^(\.?\/)/, ''); // remove './'
+                const file = filesMap[url];
+                if (file) {
+                    console.log('Loading', url);
+                    return URL.createObjectURL(file);
+                }
+                return url;
+            });
+            for(let i = 0; i < files.length; i++){
+                this._loadFile(files[i], dirs[i]);
+            }
+        }
+    }
+    _loadFile(file, dir = "") {
+        const filename = file.name;
+        const ext = ResourceManager.extension(filename);
+        if (this._extensions.some((v)=>v === ext)) {
+            const reader = new FileReader();
+            reader.addEventListener("progress", (event)=>{
+                const size = '(' + Math.floor(event.total / 1000) + ' KB)';
+                const progress = Math.floor(event.loaded / event.total * 100) + '%';
+                console.log('Loading', filename, size, progress);
+            });
+            const loadCallback = (asset)=>{
+                asset.userData.ext = ext;
+                this._onLoad && this._onLoad(asset);
+            };
+            if ([
+                "fbx",
+                "gltf",
+                "glb"
+            ].some((v)=>v === ext)) {
+                reader.addEventListener("load", (event)=>{
+                    this.viewer.loadAsset({
+                        ext,
+                        buffer: event.target.result,
+                        resourcePath: dir
+                    }).then(loadCallback);
+                }, false);
+                reader.readAsArrayBuffer(file);
+            } else {
+                reader.addEventListener("load", (event)=>{
+                    this.viewer.loadAsset({
+                        ext,
+                        url: event.target.result
+                    }).then(loadCallback);
+                }, false);
+                reader.readAsDataURL(file);
+            }
+        }
+    }
+    constructor({ onLoad, extension = [
+        "glb",
+        "gltf",
+        "fbx",
+        "hdr"
+    ] } = {}){
+        super();
+        this._onDrogOver = (e)=>{
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "copy";
+        };
+        this._onDrop = (e)=>{
+            e.preventDefault();
+            if (e.dataTransfer.types[0] === "text/plain") return; // Outliner drop
+            if (e.dataTransfer.items) {
+                this._loadItemList(e.dataTransfer.items);
+            } else {
+                this._loadFiles(e.dataTransfer.files);
+            }
+        };
+        this._onLoad = onLoad;
+        this._extensions = Array.isArray(extension) ? extension : [
+            extension
+        ];
+    }
+}
+function createFilesMap(files) {
+    const map = {};
+    for(let i = 0; i < files.length; i++){
+        const file = files[i];
+        map[file.name] = file;
+    }
+    return map;
+}
+function getFilesFromItemList(items, onDone) {
+    let itemsCount = 0;
+    let itemsTotal = 0;
+    const dirs = [];
+    const files = [];
+    const filesMap = {};
+    function onEntryHandled() {
+        itemsCount++;
+        if (itemsCount === itemsTotal) {
+            onDone(files, filesMap, dirs);
+        }
+    }
+    function handleEntry(entry, dir = "") {
+        if (entry.isDirectory) {
+            const reader = entry.createReader();
+            reader.readEntries((entries)=>{
+                for(let i = 0; i < entries.length; i++){
+                    handleEntry(entries[i], dir + "/" + entry.name + "/");
+                }
+                onEntryHandled();
+            });
+        } else if (entry.isFile) {
+            entry.file((file)=>{
+                files.push(file);
+                filesMap[entry.fullPath.slice(1)] = file;
+                dirs.push(dir);
+                onEntryHandled();
+            });
+        }
+        itemsTotal++;
+    }
+    for(let i = 0; i < items.length; i++){
+        const item = items[i];
+        if (item.kind === 'file') {
+            handleEntry(item.webkitGetAsEntry());
+        }
+    }
+}
+
 exports.AnimationCurve = AnimationCurve;
 exports.Box = Box;
 exports.BoxProjectionPlugin = BoxProjectionPlugin;
@@ -5548,6 +5723,7 @@ exports.CinestationBrain = CinestationBrain;
 exports.Component = Component;
 exports.DebugPlugin = DebugPlugin;
 exports.DeviceInput = DeviceInput;
+exports.DropFilePlugin = DropFilePlugin;
 exports.Easing = Easing;
 exports.EnvironmentPlugin = EnvironmentPlugin;
 exports.EventEmitter = EventEmitter;
@@ -5570,6 +5746,7 @@ exports.Quat_quarticDamp = Quat_quarticDamp;
 exports.Quat_smoothDamp = Quat_smoothDamp;
 exports.Reflector = Reflector;
 exports.ReflectorMaterial = ReflectorMaterial;
+exports.ResourceManager = ResourceManager;
 exports.Sphere = Sphere;
 exports.SystemInfo = SystemInfo;
 exports.Tween = Tween;