three-base 2.0.65 → 2.0.67

package/threeLoader.js

@@ -1,174 +1,189 @@
-/*
- * @Author: xiaosihan
- * @Date: 2022-04-07 16:42:26
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-02-07 11:11:48
- */
-import { CanvasTexture, DefaultLoadingManager, EventDispatcher, Object3D, RepeatWrapping, TextureLoader, VideoTexture } from "three";
-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";
-// 引入静态资源
-//@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 dracoDecoderWASM from "./lib/draco/draco_decoder.wasm?url";
-import { get } from "lodash";
-// 加载器
-class ThreeLoader extends EventDispatcher {
-    constructor() {
-        super();
-        DefaultLoadingManager.onStart = () => {
-            this.onload = false;
-        };
-        // 有资源加载完成时通知渲染器
-        DefaultLoadingManager.onProgress = (url, loaded, total) => {
-            if (loaded < total) {
-                this.dispatchEvent({ type: "loadding" });
-            }
-            else if (loaded === total) {
-                this.dispatchEvent({ type: "onLoad" });
-            }
-        };
-        DefaultLoadingManager.onLoad = () => {
-            this.onload = true;
-        };
-    }
-    // 各向异性
-    anisotropy = 16;
-    // 设置各向异性 由渲染器来调用并设置
-    setAnisotropy(v) {
-        this.anisotropy = v;
-    }
-    ;
-    // 纹理对向缓存
-    textureMap = new Map();
-    // 纹理加载器
-    textureLoader = new TextureLoader();
-    // 获取地址对应的单例纹理对象
-    getTexture(src) {
-        if (src instanceof HTMLCanvasElement) {
-            const canvasTexture = new CanvasTexture(src);
-            canvasTexture.wrapS = canvasTexture.wrapT = RepeatWrapping;
-            canvasTexture.anisotropy = this.anisotropy;
-            // canvasTexture.colorSpace = SRGBColorSpace;
-            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;
-                document.addEventListener("pointerup", () => {
-                    videoDom.pause();
-                    videoDom.play();
-                });
-                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;
-        return 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, responseType) {
-                //@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();
-    /** 加载模型支持glb,fbx,stl,obj */
-    async loadModel(url, filename = "") {
-        // 获取后缀
-        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 (["usdz"].includes(suffix)) {
-            await threeLoader.usdzLoader.loadAsync(url).then(res => {
-                Object3d = res; // usdz 目前还不支持骨骼动画
-                Object3d.animations = res.animations;
-                Object3d.traverse(obj => {
-                    const mesh = obj;
-                    if (mesh.isMesh) {
-                        mesh.material.transparent = true;
-                    }
-                });
-            }).catch(() => {
-                console.error(`${url},加载失败`);
-            });
-        }
-        else {
-            if (suffix) {
-                console.error(`${suffix},不支持的格式`);
-            }
-            else {
-                console.error(`${url},不支持的格式,请尝试使用 suffix 参数来指定一下格式`);
-            }
-        }
-        return Object3d;
-    }
-    // 是否加载完成
-    onload = true;
-}
-const threeLoader = new ThreeLoader();
-export default threeLoader;
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-04-07 16:42:26
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-02-07 11:11:48
+ */
+import { CanvasTexture, DefaultLoadingManager, EventDispatcher, Mesh, MeshStandardMaterial, Object3D, RepeatWrapping, TextureLoader, VideoTexture } from "three";
+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";
+// import { IFCLoader } from 'web-ifc-three/dist/IFCLoader';
+// 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 dracoDecoderWASM from "./lib/draco/draco_decoder.wasm?url";
+import { get } from "lodash";
+// 加载器
+class ThreeLoader extends EventDispatcher {
+    constructor() {
+        super();
+        DefaultLoadingManager.onStart = () => {
+            this.onload = false;
+        };
+        // 有资源加载完成时通知渲染器
+        DefaultLoadingManager.onProgress = (url, loaded, total) => {
+            if (loaded < total) {
+                this.dispatchEvent({ type: "loadding" });
+            }
+            else if (loaded === total) {
+                this.dispatchEvent({ type: "onLoad" });
+            }
+        };
+        DefaultLoadingManager.onLoad = () => {
+            this.onload = true;
+        };
+    }
+    // 各向异性
+    anisotropy = 16;
+    // 设置各向异性 由渲染器来调用并设置
+    setAnisotropy(v) {
+        this.anisotropy = v;
+    }
+    ;
+    // 纹理对向缓存
+    textureMap = new Map();
+    // 纹理加载器
+    textureLoader = new TextureLoader();
+    // 获取地址对应的单例纹理对象
+    getTexture(src) {
+        if (src instanceof HTMLCanvasElement) {
+            const canvasTexture = new CanvasTexture(src);
+            canvasTexture.wrapS = canvasTexture.wrapT = RepeatWrapping;
+            canvasTexture.anisotropy = this.anisotropy;
+            // canvasTexture.colorSpace = SRGBColorSpace;
+            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;
+                document.addEventListener("pointerup", () => {
+                    videoDom.pause();
+                    videoDom.play();
+                });
+                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;
+        return 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, responseType) {
+                //@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();
+    /** 加载模型支持glb,fbx,stl,obj */
+    async loadModel(url, filename = "") {
+        // 获取后缀
+        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;
+                    if (mesh.isMesh) {
+                        mesh.material.transparent = true;
+                    }
+                });
+            }).catch(() => {
+                console.error(`${url},加载失败`);
+            });
+        }
+        else {
+            if (suffix) {
+                console.error(`${suffix},不支持的格式`);
+            }
+            else {
+                console.error(`${url},不支持的格式,请尝试使用 suffix 参数来指定一下格式`);
+            }
+        }
+        return Object3d;
+    }
+    // 是否加载完成
+    onload = true;
+}
+const threeLoader = new ThreeLoader();
+export default threeLoader;

package/threeLoader.ts

@@ -5,7 +5,7 @@
  * @Last Modified time: 2023-02-07 11:11:48
  */
 
-import { CanvasTexture, DefaultLoadingManager, EventDispatcher, Material, Mesh, MeshLambertMaterial, Object3D, RepeatWrapping, SRGBColorSpace, Texture, TextureLoader, VideoTexture } from "three";
+import { BoxGeometry, CanvasTexture, DefaultLoadingManager, EventDispatcher, Material, Mesh, MeshLambertMaterial, MeshStandardMaterial, Object3D, RepeatWrapping, SRGBColorSpace, Texture, TextureLoader, VideoTexture } from "three";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
@@ -14,6 +14,10 @@ import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
 import { USDZLoader } from "three/examples/jsm/loaders/USDZLoader";
 
+// import { IFCLoader } from 'web-ifc-three/dist/IFCLoader';
+// import { IFCLoader } from 'web-ifc-three';
+// import { IFCSPACE } from 'web-ifc';
+
 
 // 引入静态资源
 //@ts-ignore
@@ -172,6 +176,18 @@ class ThreeLoader extends EventDispatcher {
             }).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 目前还不支持骨骼动画

package/threeUtils.d.ts

@@ -1,47 +1,47 @@
-import { Box3, BufferGeometry, Clock, EventDispatcher, 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): void;
-    exportUsdz(): void;
-    getVolume(geometry: BufferGeometry): number;
-    signedVolumeOfTriangle(p1: Vector3, p2: Vector3, p3: Vector3): number;
-    dipose(object3d: Object3D): void;
-}
-declare const threeUtils: ThreeUtils;
-export default threeUtils;
+import { Box3, BufferGeometry, Clock, EventDispatcher, 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): void;
+    exportUsdz(): void;
+    getVolume(geometry: BufferGeometry): number;
+    signedVolumeOfTriangle(p1: Vector3, p2: Vector3, p3: Vector3): number;
+    dipose(object3d: Object3D): void;
+}
+declare const threeUtils: ThreeUtils;
+export default threeUtils;