three-base 2.0.87 → 2.0.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-base",
-  "version": "2.0.87",
+  "version": "2.0.89",
   "description": "three 3d three-base",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -18,7 +18,7 @@
   "module": "index.js",
   "types": "",
   "files": [
-    "/**/*.ts",
+    "/**/*.d.ts",
     "/**/*.js",
     "/**/*.tsx",
     "/**/*.css",

package/threeLoader.d.ts

@@ -23,8 +23,8 @@ declare class ThreeLoader extends EventDispatcher {
     gltfLoader: GLTFLoader;
     usdzLoader: USDZLoader;
     setFlipYIsFalse<T extends Material | Material[]>(material: T): void;
-    /** 加载模型支持glb,fbx,stl,obj */
-    loadModel(url: string, filename?: string): any;
+    /** 加载模型支持glb,gltf,fbx,stl,obj,usdz,dae,zip */
+    loadModel(url: string | File | Array<File>, filename?: string): any;
     onload: boolean;
 }
 declare const threeLoader: ThreeLoader;

package/threeLoader.js

@@ -25,6 +25,7 @@ import axios from "axios";
 import dracoDecoderWASM from "./lib/draco/draco_decoder.wasm?url";
 import threeUtils from "./threeUtils";
 import { generateUUID } from "three/src/math/MathUtils";
+import { isString } from "lodash";
 // 加载器
 class ThreeLoader extends EventDispatcher {
     constructor() {
@@ -178,21 +179,65 @@ class ThreeLoader extends EventDispatcher {
             });
         }
     }
-    /** 加载模型支持glb,fbx,stl,obj */
+    /** 加载模型支持glb,gltf,fbx,stl,obj,usdz,dae,zip */
     async loadModel(url, filename = "") {
-        // 获取后缀
-        const suffix = threeUtils.getSuffix(filename || url);
+        // 本次需要销毁的bloburl,加载完成后就去销毁本次的文件
+        const revokeObjectfile = [];
+        // 获取模型文件的后缀
+        const suffix = await (async () => {
+            if (isString(url)) {
+                return threeUtils.getSuffix(filename || url);
+            }
+            else if (url instanceof File) {
+                return threeUtils.getSuffix(filename || url.name);
+            }
+            else if (url instanceof Array) {
+                let suffix = "";
+                const suffixs = ["obj", "glb", "gltf", "fbx", "dae", "stl", "usdz"];
+                for (let file of url) {
+                    suffix = threeUtils.getSuffix(file.name);
+                    if (suffixs.includes(suffix)) {
+                        break;
+                    }
+                }
+                return threeUtils.getSuffix(filename || suffix);
+            }
+        })();
+        //获取模型文件的地址
+        const modelurl = await (async () => {
+            if (isString(url)) {
+                return url;
+            }
+            else if (url instanceof File) {
+                const bloburl = await threeUtils.fileToBloburl(url);
+                this._blobs[url.name] = bloburl;
+                revokeObjectfile.push(url.name);
+                return bloburl;
+            }
+            else if (url instanceof Array) {
+                let modelurl = "";
+                const suffixs = ["obj", "glb", "gltf", "fbx", "dae", "stl", "usdz"];
+                for (let file of url) {
+                    const bloburl = await threeUtils.fileToBloburl(file);
+                    this._blobs[file.name] = bloburl;
+                    revokeObjectfile.push(file.name);
+                    if (suffixs.includes(threeUtils.getSuffix(file.name))) {
+                        modelurl = file.name;
+                    }
+                }
+                return modelurl;
+            }
+        })();
         switch (suffix) {
             case "zip":
                 const JSZip = (await import("jszip")).default;
-                const arrayBuffer = await axios
-                    .get(url, {
-                    responseType: "arraybuffer",
-                })
-                    .then((res) => res.data)
-                    .catch((err) => {
-                    throw new Error(`${url} 加载失败`);
-                });
+                let arrayBuffer = isString(url)
+                    ? await axios
+                        .get(url, {
+                        responseType: "arraybuffer",
+                    })
+                        .then((res) => res.data)
+                    : url;
                 return await JSZip.loadAsync(arrayBuffer).then(async (zip) => {
                     for (let filename in zip.files) {
                         if (!zip.files[filename].dir) {
@@ -203,6 +248,7 @@ class ThreeLoader extends EventDispatcher {
                                 .then((blob) => {
                                 var blobURL = URL.createObjectURL(blob);
                                 this._blobs[filename] = blobURL;
+                                revokeObjectfile.push(filename);
                             });
                         }
                     }
@@ -221,6 +267,10 @@ class ThreeLoader extends EventDispatcher {
                     let obj = Object.keys(zip.files).find((filename) => /\.obj$/.test(filename));
                     if (obj) {
                         const objObject3d = await objLoader.loadAsync(obj);
+                        revokeObjectfile.map((filename) => {
+                            URL.revokeObjectURL(this._blobs[filename]);
+                            delete this._blobs[filename];
+                        });
                         objObject3d.traverse((obj) => {
                             const mesh = obj;
                             if (mesh.isMesh) {
@@ -274,8 +324,12 @@ class ThreeLoader extends EventDispatcher {
                 });
             case "fbx":
                 return await threeLoader.fbxLoader
-                    .loadAsync(url)
+                    .loadAsync(modelurl)
                     .then((res) => {
+                    revokeObjectfile.map((filename) => {
+                        URL.revokeObjectURL(this._blobs[filename]);
+                        delete this._blobs[filename];
+                    });
                     return res;
                 })
                     .catch(() => {
@@ -284,8 +338,12 @@ class ThreeLoader extends EventDispatcher {
             case "gltf":
             case "glb":
                 return await threeLoader.gltfLoader
-                    .loadAsync(url)
+                    .loadAsync(modelurl)
                     .then((res) => {
+                    revokeObjectfile.map((filename) => {
+                        URL.revokeObjectURL(this._blobs[filename]);
+                        delete this._blobs[filename];
+                    });
                     res.scene.animations = res.animations;
                     return res.scene;
                 })
@@ -294,8 +352,12 @@ class ThreeLoader extends EventDispatcher {
                 });
             case "stl":
                 return await threeLoader.stlLoader
-                    .loadAsync(url)
+                    .loadAsync(modelurl)
                     .then((geometry) => {
+                    revokeObjectfile.map((filename) => {
+                        URL.revokeObjectURL(this._blobs[filename]);
+                        delete this._blobs[filename];
+                    });
                     return new Mesh(geometry, new MeshStandardMaterial({
                         metalness: 0.5,
                         roughness: 0.5,
@@ -306,8 +368,12 @@ class ThreeLoader extends EventDispatcher {
                 });
             case "usdz":
                 return await threeLoader.usdzLoader
-                    .loadAsync(url)
+                    .loadAsync(modelurl)
                     .then((res) => {
+                    revokeObjectfile.map((filename) => {
+                        URL.revokeObjectURL(this._blobs[filename]);
+                        delete this._blobs[filename];
+                    });
                     res.traverse((obj) => {
                         const mesh = obj;
                         if (mesh.isMesh) {
@@ -320,7 +386,18 @@ class ThreeLoader extends EventDispatcher {
                     console.log(`${url},加载失败`, err);
                 });
             case "obj":
-                const objObject3d = await this.objLoader.loadAsync(url);
+                let objLoader = new OBJLoader();
+                // 如果有mtl文件就加载mtl文件
+                let mtl = revokeObjectfile.find((filename) => /\.mtl$/.test(filename));
+                if (mtl) {
+                    const materials = await this.mtlLoader.loadAsync(mtl);
+                    objLoader.setMaterials(materials);
+                }
+                const objObject3d = await objLoader.loadAsync(modelurl);
+                revokeObjectfile.map((filename) => {
+                    URL.revokeObjectURL(this._blobs[filename]);
+                    delete this._blobs[filename];
+                });
                 objObject3d.traverse((obj) => {
                     const mesh = obj;
                     if (mesh.isMesh) {
@@ -343,6 +420,10 @@ class ThreeLoader extends EventDispatcher {
                 });
                 return objObject3d;
             default:
+                revokeObjectfile.map((filename) => {
+                    URL.revokeObjectURL(this._blobs[filename]);
+                    delete this._blobs[filename];
+                });
                 if (suffix) {
                     console.log(`${suffix},不支持的格式`);
                 }

package/threeUtils.d.ts

@@ -44,6 +44,7 @@ declare class ThreeUtils extends EventDispatcher {
     dipose(object3d: Object3D): void;
     getSuffix(filename: string): string;
     getFilename(url: string): string;
+    fileToBloburl(file: File): Promise<string>;
 }
 declare const threeUtils: ThreeUtils;
 export default threeUtils;

package/threeUtils.js

@@ -262,7 +262,7 @@ class ThreeUtils extends EventDispatcher {
     }
     // 获取文件名的后缀
     getSuffix(filename) {
-        const match = filename.match(/\.([^\.]+)$/);
+        const match = filename.match(/([^\.]+)$/);
         return match ? match[1].toLowerCase() : "";
     }
     // 从url 中提取文件名
@@ -273,6 +273,22 @@ class ThreeUtils extends EventDispatcher {
         const filename = path.substring(path.lastIndexOf("/") + 1);
         return filename;
     }
+    //文件转blob
+    fileToBloburl(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = function (event) {
+                const arrayBuffer = event.target.result;
+                const blob = new Blob([arrayBuffer]);
+                const bloburl = URL.createObjectURL(blob);
+                resolve(bloburl);
+            };
+            reader.onerror = function (error) {
+                throw new Error(`文件转blbo 失败,${file.name}`);
+            };
+            reader.readAsArrayBuffer(file);
+        });
+    }
 }
 const threeUtils = new ThreeUtils();
 export default threeUtils;

package/ApngTexture.ts

@@ -1,91 +0,0 @@
-
-
-import parseAPNG, { APNG } from "apng-js";
-import Player from "apng-js/types/library/player";
-import axios from "axios";
-import { CanvasTexture } from "three";
-import threeUtils from "./threeUtils";
-
-
-export default class ApngTexture extends CanvasTexture {
-
-    constructor(url: string) {
-        super(document.createElement("canvas"));
-        this.loadApng(url);
-    }
-    // 获取时间戳
-    static TimeTemp = performance.now();
-
-    // 上一次更新时间
-    preUpdate = 0;
-
-    player?: Player;
-
-    // apng 对象
-    apng?: APNG;
-
-    // 更新纹理
-    onUpdate = () => {
-
-        if (this.preUpdate === ApngTexture.TimeTemp) {
-            return;
-        }
-
-        this.preUpdate = ApngTexture.TimeTemp;
-
-        if (this.player) {
-            this.player.renderNextFrame();
-        }
-    };
-
-    // 获取当前帧id
-    getUuid() {
-
-        if (this.apng) {
-
-            let currentTime = ApngTexture.TimeTemp % this.apng.playTime;
-
-            let i = 0;
-            while (this.apng.frames[i] && currentTime > this.apng.frames[i].delay) {
-                currentTime -= this.apng.frames[i].delay;
-                i++;
-            }
-
-            return this.apng.frames[i].delay;
-
-        } else {
-
-            return "";
-
-        }
-
-    }
-
-    // 加载apng图片
-    async loadApng(url: string) {
-
-        const res = await axios.get(url, { method: "post", responseType: "blob" });
-
-        const blob = new Blob([res.data]);
-
-        const reader = new FileReader();
-
-        await new Promise<void>((resolve) => {
-            reader.onload = () => resolve();
-            reader.readAsArrayBuffer(blob);
-        });
-
-        const apng = (parseAPNG(reader.result as ArrayBuffer) as APNG);
-
-        this.dispose();
-        this.image.width = apng.width;
-        this.image.height = apng.height;
-        this.player = await apng.getPlayer(this.image.getContext("2d")!);
-    }
-
-}
-
-// 定时更新时间戳
-threeUtils.addEventListener("requestAnimationFrame", (e: any) => {
-    ApngTexture.TimeTemp = e.timeTemp;
-});

package/ApngTextureManage.ts

@@ -1,130 +0,0 @@
-
-
-import parseAPNG, { APNG } from "apng-js";
-import axios from "axios";
-import { isEmpty } from "lodash";
-import { MirroredRepeatWrapping, Texture, TextureLoader } from "three";
-import threeUtils from "./threeUtils";
-
-
-
-/**
- * apng 纹理管理对象
- */
-class apngTextureManage {
-
-    constructor() {
-
-        // 初始化定时更新时间戳
-        if (apngTextureManage.isInit) {
-            apngTextureManage.isInit = false;
-            threeUtils.addEventListener("requestAnimationFrame5000", (e: any) => {
-                apngTextureManage.TimeTemp = e.timeTemp;
-            });
-        }
-
-    }
-
-    static TextureLoader = new TextureLoader();
-
-    static isInit = true;
-
-    // 获取时间戳
-    static TimeTemp = performance.now();
-
-    // 每个动态纹理的播放总时长
-    playTimes = new Map();
-
-    // 保存所有的动态纹理
-    anpgTextList: { [key: string]: Texture[] } = {};
-
-    // 获取动态纹理 需要每帧都获取一下
-    getTexture(path: string) {
-        // 如果 没有这个纹理就返回空同时开始加载这个纹理
-        if (!this.anpgTextList[path]) {
-            this.anpgTextList[path] = [];
-
-            this.loadApng(path);
-
-            return null;
-
-        } else if (isEmpty(this.anpgTextList[path])) {
-
-            return null;
-
-        } else {
-
-            const playTime = this.playTimes.get(path);
-            let currentTime = apngTextureManage.TimeTemp % playTime;
-
-            let i = 0;
-            while (this.anpgTextList[path][i] && currentTime > Number(this.anpgTextList[path][i].name)) {
-                currentTime -= Number(this.anpgTextList[path][i].name);
-                i++;
-            }
-
-            this.anpgTextList[path][i].needsUpdate = true;
-
-            return this.anpgTextList[path][i];
-        }
-    }
-
-    // 加载apng图片
-    async loadApng(url: string) {
-
-        const res = await axios.get(url, { method: "post", responseType: "blob" });
-
-        const blob = new Blob([res.data]);
-
-        const reader = new FileReader();
-
-        await new Promise<void>((resolve) => {
-            reader.onload = () => resolve();
-            reader.readAsArrayBuffer(blob);
-        });
-
-        const apng = (parseAPNG(reader.result as ArrayBuffer) as APNG);
-
-        // 存储播放时长
-        this.playTimes.set(url, apng.playTime);
-
-        // for (let i = 0; i < apng.frames.length; i++) {
-        //     const frame = apng.frames[i];
-        //     frame.createImage();
-        //     await new Promise(resolve => frame.imageElement!.onload = resolve);
-        // }
-
-        for (let i = 0; i < apng.frames.length; i++) {
-            const frame = apng.frames[i];
-
-            var blobUrl = URL.createObjectURL(frame.imageData!);
-
-            const texture = apngTextureManage.TextureLoader.load(blobUrl);
-
-            texture.anisotropy = 16;
-
-            texture.wrapS = texture.wrapT = MirroredRepeatWrapping;
-
-            // export const RepeatWrapping: Wrapping;
-            // export const ClampToEdgeWrapping: Wrapping;
-            // export const MirroredRepeatWrapping: Wrapping;
-
-            // magFilter: TextureFilter;
-            // minFilter: TextureFilter;
-
-
-            texture.name = String(frame.delay);
-            texture.center.set(0.5, 0.5);
-            texture.repeat.set(apng.width / frame.width, apng.height / frame.height);
-            // texture.needsUpdate = true;
-            this.anpgTextList[url].push(texture);
-        }
-
-    }
-
-
-}
-
-const ApngTextureManage = new apngTextureManage();
-
-export default ApngTextureManage;

package/EventMesh.ts

@@ -1,79 +0,0 @@
-/*
- * @Author: xiaosihan 
- * @Date: 2022-03-20 12:55:37 
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-02-07 11:19:56
- */
-
-import { BoxGeometry, BufferGeometry, CylinderGeometry, DoubleSide, FrontSide, Material, Mesh, MeshBasicMaterial, MeshNormalMaterial } from "three";
-import threeUtils from "./threeUtils";
-
-// 碰撞的形状
-export enum CollisionShaere {
-  cube = "cube", // 正方体
-  cylinder = "cylinder" // 圆柱体
-}
-
-/**
- * 碰撞检测用的模型
- */
-export default class EventMesh extends Mesh<BufferGeometry, Material> {
-
-  constructor(type: CollisionShaere = CollisionShaere.cube) {
-    super();
-
-    this.material = EventMesh.material;
-
-    this.setType(type);
-
-    // 生产环境 不用渲染
-    if (threeUtils.isProd) {
-      this.material = new MeshBasicMaterial({
-        side: DoubleSide,
-        transparent: true,
-        opacity: 0.25,
-        alphaTest: 1
-      });
-    }
-  }
-
-  static type = CollisionShaere;
-
-  static material = new MeshNormalMaterial({
-    side: DoubleSide,
-    transparent: true,
-    opacity: 0.3,
-  });
-
-  renderOrder = 99;
-
-  // 正方体 网格模型
-  static cubeGeo = new BoxGeometry(1, 1, 1, 1, 1, 1);
-
-  // 圆柱体 网格模型
-  static cylinderGeo = new CylinderGeometry(1, 1, 1, 50, 1, false, 0, Math.PI * 2);
-
-  // 是否是碰撞检测专用的模型
-  isEventMesh = true;
-
-  setType(type: CollisionShaere) {
-
-    switch (type) {
-      case EventMesh.type.cube:
-        this.geometry = EventMesh.cubeGeo;
-        break;
-
-      case EventMesh.type.cylinder:
-        this.geometry = EventMesh.cylinderGeo;
-        break;
-
-      default:
-        break;
-    }
-
-    this.geometry.computeVertexNormals();
-
-
-  }
-
-}