three-base 2.0.137 → 2.0.142

package/threeLoader.ts

@@ -0,0 +1,525 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-04-07 16:42:26
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2025-01-15 20:34:19
+ */
+import { CanvasTexture, DefaultLoadingManager, EventDispatcher, LinearFilter, LinearMipmapLinearFilter, Mesh, MeshStandardMaterial, Object3D, RepeatWrapping, SRGBColorSpace, Texture, TextureLoader, VideoTexture, Material } from "three";
+import { MathUtils } from "three";
+const { generateUUID } = MathUtils;
+import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
+import GLTFDracoLoader from "./GLTFDracoLoader";
+import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
+import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
+import { USDZLoader } from "three/examples/jsm/loaders/USDZLoader";
+//  引入静态资源
+import axios, { type AxiosResponse } from "axios";
+import JSZip from "jszip";
+import { isArray, isEmpty, isNull, isString, isUndefined } from "lodash";
+import { PLYLoader, TGALoader } from "three/examples/jsm/Addons";
+import threeUtils from "./threeUtils";
+import type { ThreeLoaderEventMap } from "./EventMap";
+
+DefaultLoadingManager.addHandler(/tga$/, new TGALoader());
+
+// 加载器
+class ThreeLoader extends EventDispatcher<ThreeLoaderEventMap> {
+    constructor() {
+        super();
+        DefaultLoadingManager.onStart = () => {
+            this.onload = false;
+        };
+        // 资源加载进度
+        DefaultLoadingManager.onProgress = (url: string, loaded: number, total: number) => {
+            if (loaded < total) {
+                this.dispatchEvent({ type: "loadding" });
+            }
+            else if (loaded === total) {
+                this.dispatchEvent({ type: "onLoad" });
+            }
+        };
+        DefaultLoadingManager.onLoad = () => {
+            this.onload = true;
+        };
+        // 资源替换
+        DefaultLoadingManager.setURLModifier((url: string) => {
+            //全路径匹配资源
+            if (this._blobs[url]) {
+                return this._blobs[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) => this.getFilename(key) === this.getFilename(filename)) || "";
+                new_url = this._blobs[blobKey] || url;
+            }
+            return new_url;
+        });
+    }
+    // 从url 中提取文件名
+    getFilename(url: string): string {
+        // 移除URL的查询字符串和哈希部分
+        const path = url.split("?")[0].split("#")[0];
+        // 使用lastIndexOf和substring从路径中提取文件名
+        const filename = path.substring(path.lastIndexOf("/") + 1);
+        return filename;
+    }
+    uuid: string = generateUUID();
+    // 各向异性
+    anisotropy: number = 16;
+    // 设置各向异性 由渲染器来调用并设置
+    setAnisotropy(v: number): void {
+        this.anisotropy = v;
+    }
+    // 纹理对向缓存
+    textureMap: Map<string, Texture> = new Map();
+    // 纹理加载器
+    textureLoader: TextureLoader = new TextureLoader();
+    // 获取地址对应的单例纹理对象
+    getTexture(src: string | HTMLCanvasElement): Texture {
+        if (src instanceof HTMLCanvasElement) {
+            const canvasTexture = new CanvasTexture(src);
+            canvasTexture.wrapS = canvasTexture.wrapT = RepeatWrapping;
+            canvasTexture.anisotropy = this.anisotropy;
+            canvasTexture.colorSpace = SRGBColorSpace;
+            // 三线性 + 各向异性：贴图缩小时自动选 mip 层级，根治地面/路面等高频重复贴图的摩尔纹（零运行时成本）
+            canvasTexture.generateMipmaps = true;
+            canvasTexture.minFilter = LinearMipmapLinearFilter;
+            canvasTexture.magFilter = LinearFilter;
+            return canvasTexture;
+        }
+        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);
+        }
+        texture.wrapS = texture.wrapT = RepeatWrapping;
+        texture.anisotropy = this.anisotropy;
+        texture.colorSpace = SRGBColorSpace;
+        // 三线性 + 各向异性：贴图缩小时自动选 mip 层级并沿视角方向保留细节，
+        // 根治地面 / 路面 / UV 等高频重复贴图缩小时的摩尔纹（GPU 原生能力，运行时几乎零成本）。
+        // 这是摩尔纹的"正确"解法，比 SSAA 暴力全屏超采样省几个数量级的填充量。
+        texture.generateMipmaps = true;
+        texture.minFilter = LinearMipmapLinearFilter;
+        texture.magFilter = LinearFilter;
+        return texture;
+    }
+    // 资源列表
+    _blobs: {
+        [key: string]: string;
+    } = {};
+    // fbx模型加载器
+    fbxLoader: FBXLoader = new FBXLoader();
+    //obj 加载器
+    objLoader: OBJLoader = new OBJLoader();
+    // stl 加载器
+    stlLoader: STLLoader = new STLLoader();
+    //ply加载器
+    plyLoader: PLYLoader = new PLYLoader();
+    // 材质加载器
+    mtlLoader: MTLLoader = new MTLLoader();
+    // gltf 加载器（内置 draco 解码器，无需外部 draco 依赖）
+    gltfLoader: GLTFDracoLoader = new GLTFDracoLoader();
+    //usdz加载器
+    usdzLoader: USDZLoader = new USDZLoader();
+    //把贴图的 flipy 设置为 fasle
+    setFlipYIsFalse<T extends Material | Material[]>(material: T): void {
+        if (material instanceof Array) {
+            material.map((m) => this.setFlipYIsFalse(m));
+        }
+        else {
+            const m = material as Material;
+            const parame = [
+                "map",
+                "lightMap",
+                "aoMap",
+                "emissiveMap",
+                "bumpMap",
+                "normalMap",
+                "displacementMap",
+                "alphaMap",
+                "envMap",
+            ] as const;
+            parame.map((param) => {
+                const t = m[param as keyof Material];
+                if (t && t instanceof Texture) {
+                    t.flipY = false;
+                }
+            });
+        }
+    }
+    /** 加载模型支持glb,gltf,fbx,stl,obj,usdz,dae,zip */
+    async loadModel(url: string | File | Array<File>, filename: string = ""): Promise<Object3D | undefined> {
+        if ((isString(url) || isArray(url)) &&
+            isEmpty(url) &&
+            isUndefined(url) &&
+            isNull(url)) {
+            throw new Error(`loadModel:无效的参数 url=${url}`);
+        }
+        // 本次需要销毁的bloburl,加载完成后就去销毁本次的文件
+        const revokeObjectfile: string[] = [];
+        // 获取模型文件的后缀
+        const suffix = await (async (): Promise<string> => {
+            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 = [
+                    "zip",
+                    "obj",
+                    "glb",
+                    "gltf",
+                    "fbx",
+                    "dae",
+                    "stl",
+                    "ply",
+                    "usdz",
+                ];
+                for (let file of url) {
+                    suffix = threeUtils.getSuffix(file.name);
+                    if (suffixs.includes(suffix)) {
+                        break;
+                    }
+                }
+                return threeUtils.getSuffix(filename || suffix);
+            }
+            return "";
+        })();
+        //获取模型文件的地址
+        const modelurl = await (async (): Promise<string> => {
+            if (isString(url)) {
+                // 如果是 / 开头的路径，补全为完整 URL（兼容 Vite base: "./" 的情况）
+                if (url.startsWith("/") && typeof location !== "undefined") {
+                    return location.origin + 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 = [
+                    "zip",
+                    "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;
+            }
+            return "";
+        })();
+        switch (suffix) {
+            case "zip":
+                const JSZip = (await import("jszip")).default;
+                let arrayBuffer: ArrayBuffer | File = isString(url)
+                    ? await axios
+                        .get(url, {
+                        responseType: "arraybuffer",
+                    })
+                        .then((res: AxiosResponse<ArrayBuffer>) => res.data)
+                    : url instanceof File
+                        ? url
+                        : url[0];
+                return await JSZip.loadAsync(arrayBuffer).then(async (zip: JSZip) => {
+                    for (let filename in zip.files) {
+                        if (!zip.files[filename].dir) {
+                            // 不读文件夹
+                            await zip
+                                .file(filename)
+                                .async("blob")
+                                .then((blob: Blob) => {
+                                var blobURL = URL.createObjectURL(blob);
+                                this._blobs[filename] = blobURL;
+                                revokeObjectfile.push(filename);
+                            });
+                        }
+                    }
+                    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);
+                    }
+                    //如果有obj就加载obj模型
+                    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((child: Object3D) => {
+                            if (child instanceof Mesh) {
+                                const mesh = child as Mesh;
+                                // 如果obj没有材质就给默认的材质
+                                if (!objLoader.materials) {
+                                    mesh.material = new MeshStandardMaterial({
+                                        metalness: 0.5,
+                                        roughness: 0.5,
+                                    });
+                                }
+                                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);
+                    }
+                    //如果有ply文件就加载ply文件
+                    let ply = Object.keys(zip.files).find((filename) => /\.ply$/.test(filename));
+                    if (ply) {
+                        return await this.loadModel(ply);
+                    }
+                    //如果有zip文件就加载zip文件
+                    let zipFile = Object.keys(zip.files).find((filename) => /\.zip$/.test(filename));
+                    if (zipFile) {
+                        return await this.loadModel(zipFile);
+                    }
+                    if ([obj, gltf, dae, fbx, usdz, stl, ply].every((v) => !v)) {
+                        throw new Error(`${url}压缩包里没有obj.glb.gltf.dae.fbx.usde.stl,ply模型文件`);
+                    }
+                });
+            case "fbx":
+                return await threeLoader.fbxLoader
+                    .loadAsync(modelurl)
+                    .then((res) => {
+                    revokeObjectfile.map((filename) => {
+                        URL.revokeObjectURL(this._blobs[filename]);
+                        delete this._blobs[filename];
+                    });
+                    return res;
+                })
+                    .catch(() => {
+                        console.error(`${url},加载失败`);
+                        return undefined;
+                    });
+            case "gltf":
+            case "glb":
+                return await threeLoader.gltfLoader
+                    .loadAsync(modelurl)
+                    .then((res) => {
+                    revokeObjectfile.map((filename) => {
+                        URL.revokeObjectURL(this._blobs[filename]);
+                        delete this._blobs[filename];
+                    });
+                    res.scene.animations = res.animations;
+                    return res.scene;
+                })
+                    .catch((err) => {
+                        // 打印详细错误信息，方便调试
+                        console.error(`${url},加载失败`, err);
+                        return undefined;
+                    });
+            case "stl":
+                return await threeLoader.stlLoader
+                    .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,
+                    }));
+                })
+                    .catch(() => {
+                        console.error(`${url},加载失败`);
+                        return undefined;
+                    });
+            case "ply":
+                return await threeLoader.plyLoader
+                    .loadAsync(modelurl)
+                    .then(async (geometry) => {
+                    revokeObjectfile.map((filename) => {
+                        URL.revokeObjectURL(this._blobs[filename]);
+                        delete this._blobs[filename];
+                    });
+                    // 没有法线就创建法线
+                    if (!geometry.getAttribute("normal")) {
+                        geometry.computeVertexNormals();
+                    }
+                    //是否需要绕x轴旋转
+                    const plyNeedRotationX = await new Promise(async (resolve) => {
+                        // 读取文件内容
+                        const res = await axios.get(modelurl);
+                        // if (res.match(/\b(Blender|binary_little_endian)\b/)) {
+                        //   resolve(true);
+                        // } else {
+                        //   resolve(false);
+                        // }
+                    });
+                    const plyMesh = new Mesh(geometry, new MeshStandardMaterial({
+                        metalness: 0.5,
+                        roughness: 0.5,
+                        vertexColors: Boolean(geometry.getAttribute("color")),
+                    }));
+                    if (plyNeedRotationX) {
+                        plyMesh.rotation.x = -Math.PI / 2;
+                    }
+                    return plyMesh;
+                })
+                    .catch(() => {
+                        console.error(`${url},加载失败`);
+                        return undefined;
+                    });
+            case "usdz":
+                return await threeLoader.usdzLoader
+                    .loadAsync(modelurl)
+                    .then((res) => {
+                    revokeObjectfile.map((filename) => {
+                        URL.revokeObjectURL(this._blobs[filename]);
+                        delete this._blobs[filename];
+                    });
+                    res.traverse((child: Object3D) => {
+                        if (child instanceof Mesh) {
+                            const mesh = child as Mesh;
+                            if (Array.isArray(mesh.material)) {
+                                mesh.material.forEach((mat) => {
+                                    mat.transparent = true;
+                                });
+                            } else {
+                                mesh.material.transparent = true;
+                            }
+                        }
+                    });
+                    return res;
+                })
+                    .catch((err) => {
+                        console.error(`${url},加载失败`, err);
+                        return undefined;
+                    });
+            case "obj":
+                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((child: Object3D) => {
+                    if (child instanceof Mesh) {
+                        const mesh = child as Mesh;
+                        // 如果obj没有材质就给默认的材质
+                        if (!this.objLoader.materials) {
+                            mesh.material = new MeshStandardMaterial({
+                                metalness: 0.5,
+                                roughness: 0.5,
+                            });
+                        }
+                        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;
+            default:
+                revokeObjectfile.map((filename) => {
+                    URL.revokeObjectURL(this._blobs[filename]);
+                    delete this._blobs[filename];
+                });
+                if (suffix) {
+                    console.warn(`${suffix},不支持的格式`);
+                }
+                else {
+                    console.warn(`${url},不支持的格式,请尝试使用 suffix 参数来指定一下格式`);
+                }
+        }
+    }
+    // 是否加载完成
+    onload: boolean = true;
+}
+const threeLoader = new ThreeLoader();
+
+(window as unknown as Record<string, unknown>).threeLoader = threeLoader;
+
+export default threeLoader;

package/threeUtils.d.ts

@@ -1,52 +1,53 @@
-import { Box3, BufferGeometry, Clock, EventDispatcher, Material, Object3D, Vector3 } from "three";
-declare class ThreeUtils extends EventDispatcher {
-    constructor();
-    isProd: boolean;
-    isDev: boolean;
-    _timeTemp: number;
-    _accumulate: number;
-    _box3: Box3;
-    _size: Vector3;
-    _center: Vector3;
-    _clock: Clock;
-    requestAnimationFrame(): void;
-    private _keepZoomDoms;
-    /**
-     *计算需要保持比例的元素
-     */
-    private _computerDomZoom;
-    /**
-     * dom元素保持比例
-     */
-    keepZoom(dom: HTMLElement | null, width?: number, height?: number): void;
-    workList: Array<() => void>;
-    clock: Clock;
-    /**
-     * @param {() => void} [callback]
-     * @param {boolean} [first=true] 需要优先执行
-     */
-    addWork(work?: () => void, first?: boolean): void;
-    /**
-     *判断一个元素是否在页面上
-     */
-    inDocument(dom: ParentNode | null): boolean;
-    getCenter(object3d: Object3D | BufferGeometry): Vector3;
-    getSize(object3d: Object3D | BufferGeometry): Vector3;
-    alignBottom(object3d: Object3D | BufferGeometry, y?: number): void;
-    centerObject3D(object3d: Object3D | BufferGeometry): void;
-    center(object3d: Object3D | BufferGeometry): void;
-    scaleTo(object3d: Object3D | BufferGeometry, size?: number, key?: Array<"x" | "y" | "z">): void;
-    applyAllTranstion(object3d: Object3D): void;
-    exportGLB(input: Object3D, fileName?: string, maxTextureSize?: number): void;
-    exportUsdz(): void;
-    getVolume(geometry: BufferGeometry): number;
-    signedVolumeOfTriangle(p1: Vector3, p2: Vector3, p3: Vector3): number;
-    dipose(object3d: Object3D): void;
-    getSuffix(filename: string): string;
-    getFilename(url: string): string;
-    fileToBloburl(file: File): Promise<string>;
-    toMeshBasicMaterial<P extends Material | Material[]>(material: P): P;
-    toMeshLambertMaterial<P extends Material | Material[]>(material: P): P;
-}
-declare const threeUtils: ThreeUtils;
-export default threeUtils;
+import { Box3, BufferGeometry, Clock, EventDispatcher, Material, Object3D, Vector3 } from "three";
+import type { ThreeUtilsEventTypeMap } from "./EventMap";
+declare class ThreeUtils extends EventDispatcher<ThreeUtilsEventTypeMap> {
+    constructor();
+    isProd: boolean;
+    isDev: boolean;
+    _timeTemp: number;
+    _accumulate: number;
+    _box3: Box3;
+    _size: Vector3;
+    _center: Vector3;
+    _clock: Clock;
+    requestAnimationFrame(): void;
+    private _keepZoomDoms;
+    /**
+     *计算需要保持比例的元素
+     */
+    private _computerDomZoom;
+    /**
+     * dom元素保持比例
+     */
+    keepZoom(dom: HTMLElement | null, width?: number, height?: number): void;
+    workList: Array<() => void>;
+    clock: Clock;
+    /**
+     * @param {() => void} [callback]
+     * @param {boolean} [first=true] 需要优先执行
+     */
+    addWork(work?: () => void, first?: boolean): void;
+    /**
+     *判断一个元素是否在页面上
+     */
+    inDocument(dom: ParentNode | null): boolean;
+    getCenter(object3d: Object3D | BufferGeometry): Vector3;
+    getSize(object3d: Object3D | BufferGeometry): Vector3;
+    alignBottom(object3d: Object3D | BufferGeometry, y?: number): void;
+    centerObject3D(object3d: Object3D | BufferGeometry): void;
+    center(object3d: Object3D | BufferGeometry): void;
+    scaleTo(object3d: Object3D | BufferGeometry, size?: number, key?: Array<"x" | "y" | "z">): void;
+    applyAllTranstion(object3d: Object3D): void;
+    exportGLB(input: Object3D, fileName?: string, maxTextureSize?: number): void;
+    exportUsdz(): void;
+    getVolume(geometry: BufferGeometry): number;
+    signedVolumeOfTriangle(p1: Vector3, p2: Vector3, p3: Vector3): number;
+    dipose(object3d: Object3D): void;
+    getSuffix(filename: string): string;
+    getFilename(url: string): string;
+    fileToBloburl(file: File): Promise<string>;
+    toMeshBasicMaterial<P extends Material | Material[]>(material: P): P;
+    toMeshLambertMaterial<P extends Material | Material[]>(material: P): P;
+}
+declare const threeUtils: ThreeUtils;
+export default threeUtils;