@qy_better_lib/hooks 0.2.12 → 0.2.14

package/lib/use-three/index.mjs

@@ -1,10 +1,9 @@
 import { onMounted, onBeforeUnmount } from "vue";
 import { Box3, Vector3, AxesHelper, OrthographicCamera, PerspectiveCamera, PCFSoftShadowMap, SpotLight, PointLight, DirectionalLight, AmbientLight, WebGLRenderer, Vector2, Raycaster, Cache, BoxHelper, Object3D, Scene, Color } from "three";
 import { VRButton } from "three/examples/jsm/webxr/VRButton";
-import { CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer.js";
+import { CSS2DObject, CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer";
 import { on, off } from "@qy_better_lib/core";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
-import { CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
@@ -17,7 +16,7 @@ import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPa
 import { SSAOPass } from "three/examples/jsm/postprocessing/SSAOPass";
 import { FilmPass } from "three/examples/jsm/postprocessing/FilmPass";
 import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader";
-import { GrayscaleShader } from "three/examples/jsm/shaders/GrayscaleShader";
+import { LuminosityShader } from "three/examples/jsm/shaders/LuminosityShader";
 class ObjectToolTip {
   /**
    * 关联的3D对象
@@ -732,82 +731,15 @@ function use_loader(current_three) {
       model: null
     };
     use_draco_loader(loader);
-    loader.load(
-      url,
-      (gltf) => {
-        loadingState.loaded = true;
-        loadingState.progress = 1;
-        loadingState.model = gltf.scene;
-        current_three.scene?.add(gltf.scene);
-      },
-      (xhr) => {
-        if (xhr.total) {
-          loadingState.progress = xhr.loaded / xhr.total;
-          options?.onProgress?.(loadingState.progress);
-        }
-      },
-      (error) => {
-        loadingState.error = error;
-        options?.onError?.(error);
-      }
-    );
-    return loadingState;
-  }
-  function load_obj_model(url, mtlUrl, options) {
-    const loadingState = {
-      progress: 0,
-      loaded: false,
-      error: null,
-      model: null
-    };
-    if (mtlUrl) {
-      const mtlLoader = new MTLLoader();
-      mtlLoader.load(
-        mtlUrl,
-        (materials) => {
-          materials.preload();
-          const objLoader = new OBJLoader();
-          objLoader.setMaterials(materials);
-          objLoader.load(
-            url,
-            (object) => {
-              loadingState.loaded = true;
-              loadingState.progress = 1;
-              loadingState.model = object;
-              current_three.scene?.add(object);
-            },
-            (xhr) => {
-              if (xhr.total) {
-                loadingState.progress = xhr.loaded / xhr.total;
-                options?.onProgress?.(loadingState.progress);
-              }
-            },
-            (error) => {
-              loadingState.error = error;
-              options?.onError?.(error);
-            }
-          );
-        },
-        (xhr) => {
-          if (xhr.total) {
-            loadingState.progress = xhr.loaded / xhr.total * 0.5;
-            options?.onProgress?.(loadingState.progress);
-          }
-        },
-        (error) => {
-          loadingState.error = error;
-          options?.onError?.(error);
-        }
-      );
-    } else {
-      const objLoader = new OBJLoader();
-      objLoader.load(
+    return new Promise((resolve, reject) => {
+      loader.load(
         url,
-        (object) => {
+        (gltf) => {
           loadingState.loaded = true;
           loadingState.progress = 1;
-          loadingState.model = object;
-          current_three.scene?.add(object);
+          loadingState.model = gltf.scene;
+          current_three.scene?.add(gltf.scene);
+          resolve(loadingState);
         },
         (xhr) => {
           if (xhr.total) {
@@ -818,15 +750,103 @@ function use_loader(current_three) {
         (error) => {
           loadingState.error = error;
           options?.onError?.(error);
+          resolve(loadingState);
         }
       );
+    });
+  }
+  function load_obj_model(url, mtlUrl, options) {
+    const loadingState = {
+      progress: 0,
+      loaded: false,
+      error: null,
+      model: null
+    };
+    return new Promise((resolve, reject) => {
+      if (mtlUrl) {
+        const mtlLoader = new MTLLoader();
+        mtlLoader.load(
+          mtlUrl,
+          (materials) => {
+            materials.preload();
+            const objLoader = new OBJLoader();
+            objLoader.setMaterials(materials);
+            objLoader.load(
+              url,
+              (object) => {
+                loadingState.loaded = true;
+                loadingState.progress = 1;
+                loadingState.model = object;
+                current_three.scene?.add(object);
+                resolve(loadingState);
+              },
+              (xhr) => {
+                if (xhr.total) {
+                  loadingState.progress = xhr.loaded / xhr.total;
+                  options?.onProgress?.(loadingState.progress);
+                }
+              },
+              (error) => {
+                loadingState.error = error;
+                options?.onError?.(error);
+                resolve(loadingState);
+              }
+            );
+          },
+          (xhr) => {
+            if (xhr.total) {
+              loadingState.progress = xhr.loaded / xhr.total * 0.5;
+              options?.onProgress?.(loadingState.progress);
+            }
+          },
+          (error) => {
+            loadingState.error = error;
+            options?.onError?.(error);
+            reject(error);
+          }
+        );
+      } else {
+        const objLoader = new OBJLoader();
+        objLoader.load(
+          url,
+          (object) => {
+            loadingState.loaded = true;
+            loadingState.progress = 1;
+            loadingState.model = object;
+            current_three.scene?.add(object);
+            resolve(loadingState);
+          },
+          (xhr) => {
+            if (xhr.total) {
+              loadingState.progress = xhr.loaded / xhr.total;
+              options?.onProgress?.(loadingState.progress);
+            }
+          },
+          (error) => {
+            loadingState.error = error;
+            options?.onError?.(error);
+            resolve(loadingState);
+          }
+        );
+      }
+    });
+  }
+  function load_models(models) {
+    const promises = [];
+    for (const model of models) {
+      if (model.type === "gltf") {
+        promises.push(load_gltf_model(model.url, model.options));
+      } else if (model.type === "obj") {
+        promises.push(load_obj_model(model.url, model.mtlUrl, model.options));
+      }
     }
-    return loadingState;
+    return Promise.all(promises);
   }
   return {
     use_draco_loader,
     load_gltf_model,
-    load_obj_model
+    load_obj_model,
+    load_models
   };
 }
 function use_resources(current_three) {
@@ -1073,7 +1093,7 @@ function use_effect_composer(current_three) {
       console.error("Composer is not initialized");
       return null;
     }
-    const grayscale_pass = new ShaderPass(GrayscaleShader);
+    const grayscale_pass = new ShaderPass(LuminosityShader);
     grayscale_pass.renderToScreen = true;
     composer.addPass(grayscale_pass);
     return grayscale_pass;
@@ -1129,7 +1149,7 @@ function use_three(options) {
   const { add_default_lighting, add_ambient_light, add_directional_light, add_point_light, add_spot_light, enable_shadow } = use_lighting(current_three);
   const { init_renderer, init_css2_renderer, set_rendering_status, set_target_fps, render, resize, set_container } = use_renderer(current_three);
   const { get_select_object, enable_object_drag, disable_object_drag, enable_touch_support } = use_interaction(current_three);
-  const { load_gltf_model, load_obj_model, use_draco_loader } = use_loader(current_three);
+  const { load_gltf_model, load_obj_model, load_models, use_draco_loader } = use_loader(current_three);
   const { clear_resources } = use_resources(current_three);
   const { enable_effect, enable_fxaa, enable_unreal_bloom, enable_outline, set_out_line } = use_effect_composer(current_three);
   function create_box_helper(color = "#00ffff") {
@@ -1204,6 +1224,7 @@ function use_three(options) {
     set_target_fps,
     load_gltf_model,
     load_obj_model,
+    load_models,
     enable_object_drag,
     disable_object_drag,
     enable_touch_support,

package/lib/use-three/interface.d.ts

@@ -1,8 +1,8 @@
 import { ThreeTarget } from '../shared/type';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
-import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
-import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
-import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
+import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';
+import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';
 import { BoxHelper, Object3D } from 'three';
 import { ObjectToolTip, ToolTipOptions } from './toolTip';
 import { OutLineOptions } from './type';
@@ -70,23 +70,23 @@ export interface UseThree {
      * 加载GLTF模型
      * @param url 模型URL
      * @param options 加载选项
-     * @returns 加载状态对象
+     * @returns Promise<any> 加载完成的Promise，解析为加载状态对象
      */
     load_gltf_model: (url: string, options?: {
         onProgress?: (progress: number) => void;
         onError?: (error: any) => void;
-    }) => any;
+    }) => Promise<any>;
     /**
      * 加载OBJ模型
      * @param url 模型URL
      * @param mtlUrl 材质URL
      * @param options 加载选项
-     * @returns 加载状态对象
+     * @returns Promise<any> 加载完成的Promise，解析为加载状态对象
      */
     load_obj_model: (url: string, mtlUrl?: string, options?: {
         onProgress?: (progress: number) => void;
         onError?: (error: any) => void;
-    }) => any;
+    }) => Promise<any>;
     /**
      * 启用对象拖拽
      * @param object 要拖拽的对象
@@ -201,4 +201,18 @@ export interface UseThree {
      * @param out_line_options 配置
      */
     set_out_line: (outline_pass: OutlinePass, objects: Object3D[], out_line_options?: OutLineOptions) => void;
+    /**
+     * 批量加载模型
+     * @param models 模型加载配置数组
+     * @returns Promise<any[]> 全部加载完成的Promise，解析为加载状态对象数组
+     */
+    load_models: (models: Array<{
+        type: 'gltf' | 'obj';
+        url: string;
+        mtlUrl?: string;
+        options?: {
+            onProgress?: (progress: number) => void;
+            onError?: (error: any) => void;
+        };
+    }>) => Promise<any[]>;
 }

package/lib/use-three/modules/loader.d.ts

@@ -10,19 +10,18 @@ export declare function use_loader(current_three: ThreeTarget): {
     load_gltf_model: (url: string, options?: {
         onProgress?: (progress: number) => void;
         onError?: (error: any) => void;
-    }) => {
-        progress: number;
-        loaded: boolean;
-        error: null;
-        model: any;
-    };
+    }) => Promise<any>;
     load_obj_model: (url: string, mtlUrl?: string, options?: {
         onProgress?: (progress: number) => void;
         onError?: (error: any) => void;
-    }) => {
-        progress: number;
-        loaded: boolean;
-        error: null;
-        model: any;
-    };
+    }) => Promise<any>;
+    load_models: (models: Array<{
+        type: "gltf" | "obj";
+        url: string;
+        mtlUrl?: string;
+        options?: {
+            onProgress?: (progress: number) => void;
+            onError?: (error: any) => void;
+        };
+    }>) => Promise<any[]>;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qy_better_lib/hooks",
   "private": false,
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "qy better lib hooks",
   "author": "luhuiming",
   "license": "MIT",