three-base 2.0.83 → 2.0.85

package/threeLoader.ts

@@ -1,16 +1,27 @@
 /*
- * @Author: xiaosihan 
- * @Date: 2022-04-07 16:42:26 
+ * @Author: xiaosihan
+ * @Date: 2022-04-07 16:42:26
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-02-07 11:11:48
  */
 
-import { BoxGeometry, CanvasTexture, DefaultLoadingManager, EventDispatcher, Material, Mesh, MeshLambertMaterial, MeshStandardMaterial, Object3D, RepeatWrapping, SRGBColorSpace, Texture, TextureLoader, VideoTexture } from "three";
+import {
+  CanvasTexture,
+  DefaultLoadingManager,
+  EventDispatcher,
+  Material,
+  Mesh,
+  MeshStandardMaterial,
+  RepeatWrapping,
+  Texture,
+  TextureLoader,
+  VideoTexture,
+} from "three";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
-import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
 import { USDZLoader } from "three/examples/jsm/loaders/USDZLoader";
 
@@ -18,211 +29,390 @@ import { USDZLoader } from "three/examples/jsm/loaders/USDZLoader";
 // import { IFCLoader } from 'web-ifc-three';
 // import { IFCSPACE } from 'web-ifc';
 
-
 // 引入静态资源
 //@ts-ignore
 import dracoWasmWrapperJS from "./lib/draco/draco_wasm_wrapper.js?url";
 //@ts-ignore
 import dracoDecoderJS from "./lib/draco/draco_decoder.js?url";
 //@ts-ignore
+import axios from "axios";
 import dracoDecoderWASM from "./lib/draco/draco_decoder.wasm?url";
-import { get } from "lodash";
+import threeUtils from "./threeUtils";
 
 // 加载器
 class ThreeLoader extends EventDispatcher {
+  constructor() {
+    super();
 
-    constructor() {
-        super();
+    DefaultLoadingManager.onStart = () => {
+      this.onload = false;
+    };
 
-        DefaultLoadingManager.onStart = () => {
-            this.onload = false;
-        }
+    // 有资源加载完成时通知渲染器
+    DefaultLoadingManager.onProgress = (
+      url: string,
+      loaded: number,
+      total: number
+    ) => {
+      if (loaded < total) {
+        this.dispatchEvent({ type: "loadding" } as never);
+      } else if (loaded === total) {
+        this.dispatchEvent({ type: "onLoad" } as never);
+      }
+    };
 
-        // 有资源加载完成时通知渲染器
-        DefaultLoadingManager.onProgress = (url: string, loaded: number, total: number) => {
-            if (loaded < total) {
-                this.dispatchEvent({ type: "loadding" } as never);
-            } else if (loaded === total) {
-                this.dispatchEvent({ type: "onLoad" } as never);
-            }
-        }
+    DefaultLoadingManager.onLoad = () => {
+      this.onload = true;
+    };
 
-        DefaultLoadingManager.onLoad = () => {
-            this.onload = true;
-        }
+    // 资源替换
+    DefaultLoadingManager.setURLModifier((url) => {
+      const filename = url
+        .replace(`blob:${location.origin}/`, "")
+        .replace(/^\.\//, "");
+      let new_url = this._blobs[filename] || url;
+      //如果全匹配没有匹配到资源,就尝试文件名匹配
+      if (!this._blobs[filename]) {
+        const blobKey =
+          Object.keys(this._blobs).find((key) =>
+            new RegExp(`${key}$`).test(filename)
+          ) || "";
+        new_url = this._blobs[blobKey] || url;
+      }
+      return new_url;
+    });
+  }
+
+  // 各向异性
+  anisotropy = 16;
+
+  // 设置各向异性 由渲染器来调用并设置
+  setAnisotropy(v: number) {
+    this.anisotropy = v;
+  }
+
+  // 纹理对向缓存
+  textureMap = new Map() as Map<string, Texture>;
+
+  // 纹理加载器
+  textureLoader = new TextureLoader();
+
+  // 获取地址对应的单例纹理对象
+  getTexture(src: string | HTMLCanvasElement) {
+    if (src instanceof HTMLCanvasElement) {
+      const canvasTexture = new CanvasTexture(src);
+      canvasTexture.wrapS = canvasTexture.wrapT = RepeatWrapping;
+      canvasTexture.anisotropy = this.anisotropy;
+      // canvasTexture.colorSpace = SRGBColorSpace;
+
+      return canvasTexture;
     }
 
-    // 各向异性
-    anisotropy = 16;
-
-    // 设置各向异性 由渲染器来调用并设置
-    setAnisotropy(v: number) {
-        this.anisotropy = v;
-    };
+    let texture = this.textureMap.get(src);
+
+    if (!texture) {
+      if (/\.(mp4|mov)$/i.test(src)) {
+        const videoDom = document.createElement("video");
+        videoDom.autoplay = true;
+        videoDom.loop = true;
+        videoDom.muted = true;
+        videoDom.preload = "auto";
+        videoDom.playsInline = true;
+        videoDom.src = src;
+        videoDom.crossOrigin = "anonymous";
+        videoDom.play();
+        const firstOptoin = () => {
+          videoDom.pause();
+          videoDom.play();
+          document.removeEventListener("pointerup", firstOptoin);
+          document.removeEventListener("touchstart", firstOptoin);
+        };
+        document.addEventListener("pointerup", firstOptoin);
+        document.addEventListener("touchstart", firstOptoin);
+        texture = new VideoTexture(videoDom);
+      } else {
+        texture = this.textureLoader.load(src, (tex) => {
+          tex.image.crossOrigin = "anonymous";
+        });
+      }
+
+      this.textureMap.set(src, texture);
+    }
 
-    // 纹理对向缓存
-    textureMap = new Map() as Map<string, Texture>;
+    texture.wrapS = texture.wrapT = RepeatWrapping;
+    texture.anisotropy = this.anisotropy;
+    // texture.colorSpace = SRGBColorSpace;
 
-    // 纹理加载器
-    textureLoader = new TextureLoader();
+    return texture as Texture;
+  }
 
-    // 获取地址对应的单例纹理对象
-    getTexture(src: string | HTMLCanvasElement) {
+  // 资源列表
+  _blobs: { [key: string]: string } = {};
 
-        if (src instanceof HTMLCanvasElement) {
+  // fbx模型加载器
+  fbxLoader = new FBXLoader();
 
-            const canvasTexture = new CanvasTexture(src);
-            canvasTexture.wrapS = canvasTexture.wrapT = RepeatWrapping;
-            canvasTexture.anisotropy = this.anisotropy;
-            // canvasTexture.colorSpace = SRGBColorSpace;
+  //obj 加载器
+  objLoader = new OBJLoader();
 
-            return canvasTexture;
-        }
+  // stl 加载器
+  stlLoader = new STLLoader();
 
-        let texture = this.textureMap.get(src);
-
-        if (!texture) {
-            if (/\.(mp4|mov)$/i.test(src)) {
-                const videoDom = document.createElement("video");
-                videoDom.autoplay = true;
-                videoDom.loop = true;
-                videoDom.muted = true;
-                videoDom.preload = "auto";
-                videoDom.playsInline = true;
-                videoDom.src = src;
-                videoDom.crossOrigin = "anonymous";
-                videoDom.play();
-                const firstOptoin = () => {
-                    videoDom.pause();
-                    videoDom.play();
-                    document.removeEventListener("pointerup", firstOptoin);
-                    document.removeEventListener("touchstart", firstOptoin);
-                }
-                document.addEventListener("pointerup", firstOptoin);
-                document.addEventListener("touchstart", firstOptoin);
-                texture = new VideoTexture(videoDom);
-            } else {
+  // 材质加载器
+  mtlLoader = new MTLLoader();
 
-                texture = this.textureLoader.load(src, tex => {
-                    tex.image.crossOrigin = "anonymous";
+  // gltf 加载器
+  gltfLoader = (() => {
+    const loader = new GLTFLoader();
+    const dracoLoader = new (class ThreeBaseDRACOLoader extends DRACOLoader {
+      _loadLibrary(url: string, responseType: string) {
+        //@ts-ignore
+        let urlConf =
+          process.env.NODE_ENV === "development"
+            ? {
+                "draco_decoder.js": "draco_decoder.js",
+                "draco_wasm_wrapper.js": "draco_wasm_wrapper.js",
+                "draco_decoder.wasm": "draco_decoder.wasm",
+              }
+            : {
+                "draco_decoder.js": dracoWasmWrapperJS,
+                "draco_wasm_wrapper.js": dracoDecoderJS,
+                "draco_decoder.wasm": dracoDecoderWASM,
+              };
+        //@ts-ignore
+        return super._loadLibrary(urlConf[url], responseType);
+      }
+    })();
+    //@ts-ignore
+    dracoLoader.setDecoderPath(
+      process.env.NODE_ENV === "development"
+        ? "/node_modules/three/examples/jsm/libs/draco/"
+        : ""
+    );
+    loader.setDRACOLoader(dracoLoader);
+    return loader;
+  })();
+
+  //usdz加载器
+  usdzLoader = new USDZLoader();
+
+  //把贴图的 flipy 设置为 fasle
+  setFlipYIsFalse<T extends Material | Material[]>(material: T) {
+    if (material instanceof Array) {
+      material.map((m) => this.setFlipYIsFalse(m));
+    } else {
+      const m = material as MeshStandardMaterial;
+      const parame: Array<keyof MeshStandardMaterial> = [
+        "map",
+        "lightMap",
+        "aoMap",
+        "emissiveMap",
+        "bumpMap",
+        "normalMap",
+        "displacementMap",
+        "alphaMap",
+        "envMap",
+      ];
+      parame.map((param) => {
+        const t = m[param] as Texture | undefined;
+        if (t) {
+          t.flipY = false;
+        }
+      });
+    }
+  }
+
+  /** 加载模型支持glb,fbx,stl,obj */
+  async loadModel(url: string, filename: string = "") {
+    // 获取后缀
+    const suffix = threeUtils.getSuffix(filename || url);
+
+    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} 加载失败`);
+          });
+
+        return await JSZip.loadAsync(arrayBuffer).then(async (zip) => {
+          for (let filename in zip.files) {
+            if (!zip.files[filename].dir) {
+              // 不读文件夹
+              await zip
+                .file(filename)!
+                .async("blob")
+                .then((blob) => {
+                  var blobURL = URL.createObjectURL(blob);
+                  this._blobs[filename] = blobURL;
                 });
-
             }
-
-            this.textureMap.set(src, texture);
-        }
-
-        texture.wrapS = texture.wrapT = RepeatWrapping;
-        texture.anisotropy = this.anisotropy;
-        // texture.colorSpace = SRGBColorSpace;
-
-        return texture as Texture;
-    };
-
-    // fbx模型加载器
-    fbxLoader = new FBXLoader();
-
-    //obj 加载器
-    objLoader = new OBJLoader();
-
-    // stl 加载器
-    stlLoader = new STLLoader();
-
-    // 材质加载器
-    mtlLoader = new MTLLoader();
-
-    // gltf 加载器
-    gltfLoader = (() => {
-        const loader = new GLTFLoader();
-        const dracoLoader = new class ThreeBaseDRACOLoader extends DRACOLoader {
-
-            _loadLibrary(url: string, responseType: string) {
-                //@ts-ignore
-                let urlConf = (process.env.NODE_ENV === "development") ? {
-                    "draco_decoder.js": "draco_decoder.js",
-                    "draco_wasm_wrapper.js": "draco_wasm_wrapper.js",
-                    "draco_decoder.wasm": "draco_decoder.wasm"
-                } : {
-                    "draco_decoder.js": dracoWasmWrapperJS,
-                    "draco_wasm_wrapper.js": dracoDecoderJS,
-                    "draco_decoder.wasm": dracoDecoderWASM
+          }
+
+          let objLoader = new OBJLoader();
+
+          // 如果有mtl文件就加载mtl文件
+          let mtl = Object.keys(zip.files).find((filename) =>
+            /\.mtl$/.test(filename)
+          );
+          if (mtl) {
+            const materials = await this.mtlLoader.loadAsync(mtl);
+            objLoader.setMaterials(materials);
+          } else {
+            //@ts-ignore
+            objLoader.materials = null;
+          }
+
+          //如果有obj就加载obj模型
+          let obj = Object.keys(zip.files).find((filename) =>
+            /\.obj$/.test(filename)
+          );
+          if (obj) {
+            const objObject3d = await objLoader.loadAsync(obj);
+            objObject3d.traverse((obj) => {
+              const mesh = obj as Mesh;
+
+              if (mesh.isMesh) {
+                // 如果obj没有材质就给默认的材质
+                if (!objLoader.materials) {
+                  mesh.material = new MeshStandardMaterial({
+                    metalness: 0.5,
+                    roughness: 0.5,
+                  });
                 }
-                //@ts-ignore
-                return super._loadLibrary(urlConf[url], responseType);
-            }
 
-        }();
-        //@ts-ignore
-        dracoLoader.setDecoderPath((process.env.NODE_ENV === "development") ? '/node_modules/three/examples/jsm/libs/draco/' : '');
-        loader.setDRACOLoader(dracoLoader);
-        return loader;
-    })()
-
-    //usdz加载器
-    usdzLoader = new USDZLoader();
-
-    /** 加载模型支持glb,fbx,stl,obj */
-    async loadModel(url: string, filename: string = "") {
-
-        // 获取后缀
-        const suffix = (get((filename || url).match(/\.([^\.]+)$/), [1]) || "").toLowerCase();
-
-        let Object3d = new Object3D();
-
-        if (["fbx"].includes(suffix)) {
-            await threeLoader.fbxLoader.loadAsync(url).then(res => {
-                Object3d = res;
-            }).catch(() => {
-                console.error(`${url},加载失败`);
-            })
-        } else if (["gltf", "glb"].includes(suffix)) {
-            await threeLoader.gltfLoader.loadAsync(url).then(res => {
-                Object3d = res.scene;
-                Object3d.animations = res.animations;
-            }).catch(() => {
-                console.error(`${url},加载失败`);
-            })
-
-        } else if (["stl"].includes(suffix)) {
-            await threeLoader.stlLoader.loadAsync(url).then(geometry => {
-                Object3d = new Mesh(geometry, new MeshStandardMaterial({
-                    color: "#f1fbff",
-                    metalness: 0.79,
-                    roughness: 0.56,
-                    envMapIntensity: 0.4
-                }));
-            }).catch(() => {
-                console.error(`${url},加载失败`);
-            })
-        } else if (["usdz"].includes(suffix)) {
-            await threeLoader.usdzLoader.loadAsync(url).then(res => {
-                Object3d = res; // usdz 目前还不支持骨骼动画
-                Object3d.animations = res.animations;
-                Object3d.traverse(obj => {
-                    const mesh = (obj as Mesh);
-                    if (mesh.isMesh) {
-                        (mesh.material as Material).transparent = true;
-                    }
-                });
-            }).catch((err) => {
-                console.error(`${url},加载失败`, err);
-            })
+                const uv = mesh.geometry.getAttribute("uv");
+                if (uv) {
+                  for (let i = 0; i < uv.count; i++) {
+                    uv.setY(i, 1 - uv.getY(i));
+                  }
+                }
+                // obj只翻转uv不翻转贴图
+                this.setFlipYIsFalse(mesh.material);
+              }
+            });
+
+            return objObject3d;
+          }
+
+          //如果有gltf文件就加载gltf文件
+          let gltf = Object.keys(zip.files).find((filename) =>
+            /\.(gltf|glb)$/.test(filename)
+          );
+          if (gltf) {
+            return await this.loadModel(gltf);
+          }
+
+          //如果有dae文件就加载dae文件
+          let dae = Object.keys(zip.files).find((filename) =>
+            /\.dae$/.test(filename)
+          );
+          if (dae) {
+            return await this.loadModel(dae);
+          }
+          //如果有fbx文件就加载fbx文件
+          let fbx = Object.keys(zip.files).find((filename) =>
+            /\.fbx$/.test(filename)
+          );
+          if (fbx) {
+            return await this.loadModel(fbx);
+          }
+
+          //如果有usdz文件就加载usdz文件
+          let usdz = Object.keys(zip.files).find((filename) =>
+            /\.usdz$/.test(filename)
+          );
+          if (usdz) {
+            return await this.loadModel(usdz);
+          }
+
+          //如果有stl文件就加载stl文件
+          let stl = Object.keys(zip.files).find((filename) =>
+            /\.stl$/.test(filename)
+          );
+          if (stl) {
+            return await this.loadModel(stl);
+          }
+
+          if ([obj, gltf, dae, fbx, usdz, stl].every((v) => !v)) {
+            throw new Error(
+              `${url}压缩包里没有obj.glb.gltf.dae.fbx.usde.stl等模型文件`
+            );
+          }
+        });
+
+      case "fbx":
+        return await threeLoader.fbxLoader
+          .loadAsync(url)
+          .then((res) => {
+            return res;
+          })
+          .catch(() => {
+            console.log(`${url},加载失败`);
+          });
+
+      case "gltf":
+      case "glb":
+        return await threeLoader.gltfLoader
+          .loadAsync(url)
+          .then((res) => {
+            res.scene.animations = res.animations;
+            return res.scene;
+          })
+          .catch(() => {
+            console.log(`${url},加载失败`);
+          });
+
+      case "stl":
+        return await threeLoader.stlLoader
+          .loadAsync(url)
+          .then((geometry) => {
+            return new Mesh(
+              geometry,
+              new MeshStandardMaterial({
+                metalness: 0.5,
+                roughness: 0.5,
+              })
+            );
+          })
+          .catch(() => {
+            console.log(`${url},加载失败`);
+          });
+
+      case "usdz":
+        return await threeLoader.usdzLoader
+          .loadAsync(url)
+          .then((res) => {
+            res.traverse((obj) => {
+              const mesh = obj as Mesh;
+              if (mesh.isMesh) {
+                (mesh.material as Material).transparent = true;
+              }
+            });
+            return res;
+          })
+          .catch((err) => {
+            console.log(`${url},加载失败`, err);
+          });
+
+      default:
+        if (suffix) {
+          console.log(`${suffix},不支持的格式`);
         } else {
-            if (suffix) {
-                console.error(`${suffix},不支持的格式`);
-            } else {
-                console.error(`${url},不支持的格式,请尝试使用 suffix 参数来指定一下格式`);
-            }
+          console.log(
+            `${url},不支持的格式,请尝试使用 suffix 参数来指定一下格式`
+          );
         }
-
-        return Object3d;
     }
+  }
 
-    // 是否加载完成
-    onload = true;
-
+  // 是否加载完成
+  onload = true;
 }
 
 const threeLoader = new ThreeLoader();
 export default threeLoader;
-

package/threeUtils.d.ts

@@ -42,6 +42,8 @@ declare class ThreeUtils extends EventDispatcher {
     getVolume(geometry: BufferGeometry): number;
     signedVolumeOfTriangle(p1: Vector3, p2: Vector3, p3: Vector3): number;
     dipose(object3d: Object3D): void;
+    getSuffix(filename: string): string;
+    getFilename(url: string): string;
 }
 declare const threeUtils: ThreeUtils;
 export default threeUtils;