@qy_better_lib/hooks 0.2.9 → 0.2.11

package/lib/use-three/index.mjs

@@ -0,0 +1,1233 @@
+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.js";
+import { CSS2DObject, CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer.js";
+import { on, off } from "@qy_better_lib/core";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";
+import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
+import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
+import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
+import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
+import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
+import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
+import { SSAOPass } from "three/examples/jsm/postprocessing/SSAOPass.js";
+import { FilmPass } from "three/examples/jsm/postprocessing/FilmPass.js";
+import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader.js";
+import { GrayscaleShader } from "three/examples/jsm/shaders/GrayscaleShader.js";
+class ObjectToolTip {
+  /**
+   * 关联的3D对象
+   */
+  obj = void 0;
+  /**
+   * 工具提示元素
+   */
+  container = null;
+  /**
+   * CSS2D对象，用于在3D场景中渲染HTML元素
+   */
+  css2Object;
+  /**
+   * 事件回调
+   */
+  events;
+  /**
+   * 是否显示
+   */
+  isVisible = false;
+  /**
+   * 提示框内容
+   */
+  content = "";
+  /**
+   * 创建3D对象工具提示
+   * @param obj 3D对象
+   * @param options 配置选项
+   */
+  create(obj, options) {
+    this.obj = obj;
+    this.events = {
+      onClose: options?.onClose
+    };
+    if (this.isVisible) return;
+    const id = this.obj.uuid;
+    this.container = document.createElement("div");
+    this.container.id = id;
+    this.container.className = `object-3d-tip ${options?.className || ""}`.trim();
+    const closeBtn = document.createElement("div");
+    closeBtn.className = "object-3d-tip-close";
+    closeBtn.innerHTML = `
+<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+  <path d="M10.5858 12L6.34315 16.2426L7.75736 17.6568L12 13.4142L16.2426 17.6568L17.6569 16.2426L13.4142 12L17.6569 7.75732L16.2426 6.3431L12 10.5857L7.75736 6.3431L6.34315 7.75732L10.5858 12Z" fill-rule="evenodd" fill="currentColor">
+  </path>
+</svg>`;
+    closeBtn.addEventListener("click", () => {
+      this.remove();
+      this.events?.onClose?.();
+    });
+    if (options?.content) {
+      this.content = options.content;
+      const contentElement = document.createElement("div");
+      contentElement.className = "object-3d-tip-content";
+      contentElement.innerHTML = this.content;
+      this.container.appendChild(contentElement);
+    }
+    this.container.appendChild(closeBtn);
+    this.css2Object = new CSS2DObject(this.container);
+    const box3 = new Box3().setFromObject(this.obj);
+    const boxSize = box3.getSize(new Vector3());
+    const position = new Vector3(
+      options?.offset?.x || 0,
+      options?.offset?.y || boxSize.y / this.obj.scale.y + 5 / this.obj.scale.y,
+      options?.offset?.z || 0
+    );
+    this.css2Object.position.copy(position);
+    this.obj.add(this.css2Object);
+    this.isVisible = true;
+  }
+  /**
+   * 更新提示框内容
+   * @param content 新的内容
+   */
+  updateContent(content) {
+    if (!this.container) return;
+    this.content = content;
+    let contentElement = this.container.querySelector(".object-3d-tip-content");
+    if (!contentElement) {
+      contentElement = document.createElement("div");
+      contentElement.className = "object-3d-tip-content";
+      this.container.insertBefore(contentElement, this.container.firstChild);
+    }
+    contentElement.innerHTML = content;
+  }
+  /**
+   * 更新提示框位置
+   * @param position 新的位置
+   */
+  updatePosition(position) {
+    if (!this.css2Object) return;
+    this.css2Object.position.copy(position);
+  }
+  /**
+   * 显示提示框
+   */
+  show() {
+    if (!this.container) return;
+    this.container.style.display = "block";
+    this.isVisible = true;
+  }
+  /**
+   * 隐藏提示框
+   */
+  hide() {
+    if (!this.container) return;
+    this.container.style.display = "none";
+    this.isVisible = false;
+  }
+  /**
+   * 移除提示框
+   */
+  remove() {
+    this.clear();
+    this.obj = void 0;
+    this.isVisible = false;
+    this.css2Object = void 0;
+    this.events = void 0;
+    this.content = "";
+  }
+  /**
+   * 清理资源
+   */
+  clear() {
+    if (this.obj && this.css2Object) {
+      this.obj.remove(this.css2Object);
+    }
+    if (this.container && this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+      this.container = null;
+    }
+  }
+  /**
+   * 检查提示框是否可见
+   * @returns 是否可见
+   */
+  isShowing() {
+    return this.isVisible;
+  }
+  /**
+   * 获取提示框内容
+   * @returns 提示框内容
+   */
+  getContent() {
+    return this.content;
+  }
+}
+function safe_execute(fn, default_value) {
+  try {
+    return fn();
+  } catch (error) {
+    console.error("Three.js error:", error);
+    return default_value;
+  }
+}
+const three_utils = {
+  /**
+   * 计算对象边界盒
+   * @param object 3D对象
+   * @returns 边界盒对象
+   */
+  compute_bounding_box: (object) => {
+    return safe_execute(() => {
+      const box = new Box3().setFromObject(object);
+      return box;
+    }, null);
+  },
+  /**
+   * 计算对象中心点
+   * @param object 3D对象
+   * @returns 中心点坐标
+   */
+  compute_center: (object) => {
+    return safe_execute(() => {
+      const box = new Box3().setFromObject(object);
+      const center = new Vector3();
+      box.getCenter(center);
+      return center;
+    }, new Vector3());
+  },
+  /**
+   * 生成网格辅助线
+   * @param size 网格大小
+   * @param divisions 网格细分
+   * @returns 网格辅助线对象
+   */
+  create_grid_helper: (size = 100, divisions = 10) => {
+    return safe_execute(() => {
+      const { GridHelper } = require("three");
+      const grid_helper = new GridHelper(size, divisions);
+      return grid_helper;
+    }, null);
+  },
+  /**
+   * 创建坐标轴辅助器
+   * @param size 坐标轴大小
+   * @returns 坐标轴辅助器对象
+   */
+  create_axes_helper: (size = 50) => {
+    return safe_execute(() => {
+      const { AxesHelper: AxesHelper2 } = require("three");
+      const axes_helper = new AxesHelper2(size);
+      return axes_helper;
+    }, null);
+  },
+  /**
+   * 创建立方体
+   * @param size 立方体大小
+   * @param material 材质
+   * @returns 立方体对象
+   */
+  create_box: (size = 1, material) => {
+    return safe_execute(() => {
+      const { BoxGeometry, Mesh, MeshStandardMaterial } = require("three");
+      const geometry = new BoxGeometry(size, size, size);
+      const mat = material || new MeshStandardMaterial({ color: 65280 });
+      const box = new Mesh(geometry, mat);
+      return box;
+    }, null);
+  },
+  /**
+   * 创建球体
+   * @param radius 球体半径
+   * @param material 材质
+   * @returns 球体对象
+   */
+  create_sphere: (radius = 1, material) => {
+    return safe_execute(() => {
+      const { SphereGeometry, Mesh, MeshStandardMaterial } = require("three");
+      const geometry = new SphereGeometry(radius, 32, 32);
+      const mat = material || new MeshStandardMaterial({ color: 16711680 });
+      const sphere = new Mesh(geometry, mat);
+      return sphere;
+    }, null);
+  },
+  /**
+   * 创建圆柱体
+   * @param radius_top 顶部半径
+   * @param radius_bottom 底部半径
+   * @param height 高度
+   * @param material 材质
+   * @returns 圆柱体对象
+   */
+  create_cylinder: (radius_top = 1, radius_bottom = 1, height = 2, material) => {
+    return safe_execute(() => {
+      const { CylinderGeometry, Mesh, MeshStandardMaterial } = require("three");
+      const geometry = new CylinderGeometry(radius_top, radius_bottom, height, 32);
+      const mat = material || new MeshStandardMaterial({ color: 255 });
+      const cylinder = new Mesh(geometry, mat);
+      return cylinder;
+    }, null);
+  },
+  /**
+   * 屏幕坐标转世界坐标
+   * @param x 屏幕X坐标
+   * @param y 屏幕Y坐标
+   * @param camera 相机
+   * @returns 世界坐标
+   */
+  screen_to_world: (x, y, camera) => {
+    return safe_execute(() => {
+      const { Vector3: Vector32 } = require("three");
+      const vector = new Vector32();
+      vector.set(
+        x / window.innerWidth * 2 - 1,
+        -(y / window.innerHeight) * 2 + 1,
+        0.5
+      );
+      vector.unproject(camera);
+      const dir = vector.sub(camera.position).normalize();
+      const distance = -camera.position.z / dir.z;
+      const pos = camera.position.clone().add(dir.multiplyScalar(distance));
+      return pos;
+    }, new Vector3());
+  },
+  /**
+   * 世界坐标转屏幕坐标
+   * @param position 世界坐标
+   * @param camera 相机
+   * @returns 屏幕坐标
+   */
+  world_to_screen: (position, camera) => {
+    return safe_execute(() => {
+      const vector = position.clone();
+      vector.project(camera);
+      const x = (vector.x + 1) / 2 * window.innerWidth;
+      const y = -(vector.y - 1) / 2 * window.innerHeight;
+      return { x, y };
+    }, { x: 0, y: 0 });
+  },
+  /**
+   * 平滑动画函数
+   * @param start 起始值
+   * @param end 结束值
+   * @param duration 动画时长
+   * @param callback 每帧回调
+   * @param ease 缓动函数
+   */
+  animate: (start, end, duration, callback, ease) => {
+    const start_time = performance.now();
+    const ease_fn = ease || ((t) => t);
+    function animate_frame(current_time) {
+      const elapsed = current_time - start_time;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased_progress = ease_fn(progress);
+      const value = start + (end - start) * eased_progress;
+      callback(value);
+      if (progress < 1) {
+        requestAnimationFrame(animate_frame);
+      }
+    }
+    requestAnimationFrame(animate_frame);
+  },
+  /**
+   * 缓动函数集合
+   */
+  easing: {
+    linear: (t) => t,
+    ease_in_quad: (t) => t * t,
+    ease_out_quad: (t) => t * (2 - t),
+    ease_in_out_quad: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
+    ease_in_cubic: (t) => t * t * t,
+    ease_out_cubic: (t) => --t * t * t + 1,
+    ease_in_out_cubic: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
+  }
+};
+const camera_presets = {
+  front: { x: 50, y: 0, z: 0 },
+  back: { x: -50, y: 0, z: 0 },
+  top: { x: 0, y: 50, z: 0 },
+  bottom: { x: 0, y: -50, z: 0 },
+  left: { x: 0, y: 0, z: 50 },
+  right: { x: 0, y: 0, z: -50 }
+};
+function use_camera(current_three) {
+  function create_perspective_camera(options) {
+    current_three.camera && current_three.scene?.remove(current_three.camera);
+    current_three.camera = new PerspectiveCamera(
+      options.camera_option?.fov,
+      (current_three.container?.clientWidth || window.innerWidth) / (current_three.container?.clientHeight || window.innerHeight),
+      options.camera_option?.near,
+      options.camera_option?.far
+    );
+    const { x, y, z } = options.camera_option.position;
+    current_three.camera.position.set(x, y, z);
+    current_three.scene?.add(current_three.camera);
+  }
+  function create_orthographic_camera(options) {
+    const width = current_three.container?.clientWidth || window.innerWidth;
+    const height = current_three.container?.clientHeight || window.innerHeight;
+    const orthoOptions = options || {
+      left: -width / 2,
+      right: width / 2,
+      top: height / 2,
+      bottom: -height / 2,
+      near: 0.1,
+      far: 800,
+      position: { x: 0, y: 0, z: 50 }
+    };
+    current_three.camera && current_three.scene?.remove(current_three.camera);
+    current_three.camera = new OrthographicCamera(
+      orthoOptions.left,
+      orthoOptions.right,
+      orthoOptions.top,
+      orthoOptions.bottom,
+      orthoOptions.near,
+      orthoOptions.far
+    );
+    const { x, y, z } = orthoOptions.position;
+    current_three.camera.position.set(x, y, z);
+    current_three.scene?.add(current_three.camera);
+  }
+  function set_camera_preset(preset) {
+    const position = camera_presets[preset];
+    if (position) {
+      current_three.camera?.position.set(position.x, position.y, position.z);
+      current_three.camera?.lookAt(0, 0, 0);
+      current_three.controls?.update();
+    }
+  }
+  function orbit_controls() {
+    current_three.controls = new OrbitControls(
+      current_three.camera,
+      current_three.renderer?.domElement
+    );
+    current_three.controls.enableDamping = true;
+    current_three.controls.saveState();
+  }
+  function axes_helper(size = 50) {
+    current_three.axesHelper = new AxesHelper(size);
+    current_three.scene?.add(current_three.axesHelper);
+  }
+  function reset_camera(options) {
+    const { x, y, z } = options.camera_option.position;
+    current_three.camera?.position.set(x, y, z);
+    current_three.controls?.reset();
+  }
+  return {
+    create_perspective_camera,
+    create_orthographic_camera,
+    set_camera_preset,
+    orbit_controls,
+    axes_helper,
+    reset_camera
+  };
+}
+function use_lighting(current_three) {
+  function add_default_lighting() {
+    add_ambient_light({ color: 16777215, intensity: 0.5 });
+    add_directional_light({
+      color: 16777215,
+      intensity: 0.8,
+      position: { x: 10, y: 10, z: 5 }
+    });
+  }
+  function add_ambient_light(options) {
+    const { color = 16777215, intensity = 0.5 } = options || {};
+    const ambientLight = new AmbientLight(color, intensity);
+    current_three.scene?.add(ambientLight);
+    return ambientLight;
+  }
+  function add_directional_light(options) {
+    const { color = 16777215, intensity = 1, position = { x: 0, y: 1, z: 0 } } = options || {};
+    const directionalLight = new DirectionalLight(color, intensity);
+    directionalLight.position.set(position.x, position.y, position.z);
+    current_three.scene?.add(directionalLight);
+    return directionalLight;
+  }
+  function add_point_light(options) {
+    const { color = 16777215, intensity = 1, position = { x: 0, y: 0, z: 0 } } = options || {};
+    const pointLight = new PointLight(color, intensity);
+    pointLight.position.set(position.x, position.y, position.z);
+    current_three.scene?.add(pointLight);
+    return pointLight;
+  }
+  function add_spot_light(options) {
+    const { color = 16777215, intensity = 1, position = { x: 0, y: 10, z: 0 } } = options || {};
+    const spotLight = new SpotLight(color, intensity);
+    spotLight.position.set(position.x, position.y, position.z);
+    spotLight.target.position.set(0, 0, 0);
+    current_three.scene?.add(spotLight);
+    current_three.scene?.add(spotLight.target);
+    return spotLight;
+  }
+  function enable_shadow() {
+    current_three.renderer.shadowMap.enabled = true;
+    current_three.renderer.shadowMap.type = PCFSoftShadowMap;
+  }
+  return {
+    add_default_lighting,
+    add_ambient_light,
+    add_directional_light,
+    add_point_light,
+    add_spot_light,
+    enable_shadow
+  };
+}
+function use_renderer(current_three) {
+  let is_rendering = true;
+  let last_render_time = 0;
+  let target_fps = 60;
+  let frame_interval = 1e3 / target_fps;
+  let animation_frame_id;
+  function init_renderer(options) {
+    current_three.renderer = new WebGLRenderer({
+      // 抗锯齿
+      antialias: true,
+      // GPU加速
+      powerPreference: options.gpu ? "high-performance" : "default",
+      alpha: true,
+      // 对数深度缓冲区 (加载外部模型去除闪烁适用)
+      logarithmicDepthBuffer: true
+    });
+    current_three.renderer.setPixelRatio(window.devicePixelRatio || 1);
+    current_three.renderer.setSize(
+      current_three.container?.clientWidth || window.innerWidth,
+      current_three.container?.clientHeight || window.innerHeight
+    );
+    current_three.container?.appendChild(current_three.renderer.domElement);
+  }
+  function init_css2_renderer() {
+    current_three.css2Renderer = new CSS2DRenderer();
+    current_three.css2Renderer.setSize(
+      current_three.container?.clientWidth || window.innerWidth,
+      current_three.container?.clientHeight || window.innerHeight
+    );
+    current_three.css2Renderer.domElement.style.pointerEvents = "none";
+    current_three.css2Renderer.domElement.style.position = "absolute";
+    current_three.css2Renderer.domElement.style.top = "0px";
+    current_three.css2Renderer.domElement.style.zIndex = "1000";
+    const parent = current_three.container || document.body;
+    parent.appendChild(current_three.css2Renderer.domElement);
+  }
+  function set_rendering_status(status) {
+    is_rendering = status;
+    if (status) {
+      animation_frame_id = requestAnimationFrame((timestamp) => render_loop(timestamp));
+    }
+  }
+  function set_target_fps(fps) {
+    target_fps = fps;
+    frame_interval = 1e3 / target_fps;
+  }
+  function render_loop(timestamp, render_action) {
+    if (!is_rendering) return;
+    if (timestamp - last_render_time >= frame_interval) {
+      last_render_time = timestamp;
+      try {
+        if (current_three.scene && current_three.camera && current_three.renderer) {
+          render_action && render_action();
+          current_three.css2Renderer?.render(current_three.scene, current_three.camera);
+          current_three.renderer.render(current_three.scene, current_three.camera);
+        }
+      } catch (error) {
+        console.error("Three.js render error:", error);
+      }
+    }
+    if (!current_three.renderer?.xr.enabled) {
+      animation_frame_id = requestAnimationFrame((timestamp2) => render_loop(timestamp2, render_action));
+    }
+  }
+  function render(render_action) {
+    if (current_three.renderer?.xr.enabled) {
+      current_three.renderer.setAnimationLoop(() => {
+        if (is_rendering) {
+          render_action && render_action();
+          current_three.css2Renderer?.render(current_three.scene, current_three.camera);
+          current_three.renderer?.render(current_three.scene, current_three.camera);
+        }
+      });
+    } else {
+      is_rendering = true;
+      animation_frame_id = requestAnimationFrame((timestamp) => render_loop(timestamp, render_action));
+    }
+  }
+  function resize() {
+    const width = current_three.container?.clientWidth || window.innerWidth;
+    const heigth = current_three.container?.clientHeight || window.innerHeight;
+    current_three.camera.aspect = width / heigth;
+    current_three.camera.updateProjectionMatrix();
+    current_three.renderer?.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    current_three.renderer?.setSize(width, heigth);
+    current_three.css2Renderer?.setSize(width, heigth);
+  }
+  function set_container(container) {
+    if (current_three.container && current_three.renderer) {
+      try {
+        current_three.container.removeChild(current_three.renderer.domElement);
+      } catch (e) {
+      }
+    }
+    if (current_three.container && current_three.css2Renderer) {
+      try {
+        current_three.container.removeChild(current_three.css2Renderer.domElement);
+      } catch (e) {
+      }
+    }
+    current_three.container = container;
+    if (current_three.renderer) {
+      container.appendChild(current_three.renderer.domElement);
+    }
+    if (current_three.css2Renderer) {
+      container.appendChild(current_three.css2Renderer.domElement);
+    }
+    resize();
+  }
+  function cancel_animation() {
+    cancelAnimationFrame(animation_frame_id);
+  }
+  function get_rendering_status() {
+    return is_rendering;
+  }
+  return {
+    init_renderer,
+    init_css2_renderer,
+    set_rendering_status,
+    set_target_fps,
+    render,
+    resize,
+    set_container,
+    cancel_animation,
+    get_rendering_status
+  };
+}
+function use_interaction(current_three) {
+  const drag_state = {
+    is_dragging: false,
+    dragged_object: null,
+    drag_start: new Vector2(),
+    object_initial_position: new Vector3(),
+    drag_callbacks: {
+      onDragStart: () => {
+      },
+      onDragEnd: () => {
+      },
+      onDrag: (position) => {
+      }
+    },
+    mouse_down_handler: (e) => on_mouse_down(e),
+    mouse_move_handler: (e) => on_mouse_move(e),
+    mouse_up_handler: (e) => on_mouse_up()
+  };
+  function get_select_object(e) {
+    const dom_element = current_three.renderer?.domElement;
+    const rect = dom_element.getBoundingClientRect();
+    const x = (e.clientX - rect.left) / rect.width * 2 - 1;
+    const y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+    const raycaster = new Raycaster();
+    raycaster.setFromCamera(new Vector2(x, y), current_three.camera);
+    const intersects = raycaster.intersectObjects(current_three.scene.children);
+    if (intersects.length > 0) {
+      return intersects[0].object;
+    } else {
+      return null;
+    }
+  }
+  function enable_object_drag(object, options) {
+    drag_state.drag_callbacks = {
+      onDragStart: options?.onDragStart || (() => {
+      }),
+      onDragEnd: options?.onDragEnd || (() => {
+      }),
+      onDrag: options?.onDrag || (() => {
+      })
+    };
+    drag_state.dragged_object = object;
+    const dom_element = current_three.renderer?.domElement;
+    if (dom_element) {
+      dom_element.addEventListener("mousedown", drag_state.mouse_down_handler);
+      dom_element.addEventListener("mousemove", drag_state.mouse_move_handler);
+      dom_element.addEventListener("mouseup", drag_state.mouse_up_handler);
+      dom_element.addEventListener("mouseleave", drag_state.mouse_up_handler);
+    }
+  }
+  function disable_object_drag() {
+    const dom_element = current_three.renderer?.domElement;
+    if (dom_element) {
+      dom_element.removeEventListener("mousedown", drag_state.mouse_down_handler);
+      dom_element.removeEventListener("mousemove", drag_state.mouse_move_handler);
+      dom_element.removeEventListener("mouseup", drag_state.mouse_up_handler);
+      dom_element.removeEventListener("mouseleave", drag_state.mouse_up_handler);
+    }
+    drag_state.is_dragging = false;
+    drag_state.dragged_object = null;
+  }
+  function on_mouse_down(e) {
+    if (!drag_state.dragged_object || !current_three.camera || !current_three.scene) return;
+    const dom_element = current_three.renderer?.domElement;
+    if (!dom_element) return;
+    const rect = dom_element.getBoundingClientRect();
+    drag_state.drag_start.x = (e.clientX - rect.left) / rect.width * 2 - 1;
+    drag_state.drag_start.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+    const raycaster = new Raycaster();
+    raycaster.setFromCamera(drag_state.drag_start, current_three.camera);
+    const intersects = raycaster.intersectObjects([drag_state.dragged_object]);
+    if (intersects.length > 0) {
+      drag_state.is_dragging = true;
+      drag_state.object_initial_position.copy(drag_state.dragged_object.position);
+      drag_state.drag_callbacks.onDragStart();
+    }
+  }
+  function on_mouse_move(e) {
+    if (!drag_state.is_dragging || !drag_state.dragged_object || !current_three.camera) return;
+    const dom_element = current_three.renderer?.domElement;
+    if (!dom_element) return;
+    const rect = dom_element.getBoundingClientRect();
+    const mouse_x = (e.clientX - rect.left) / rect.width * 2 - 1;
+    const mouse_y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+    const offset_x = mouse_x - drag_state.drag_start.x;
+    const offset_y = mouse_y - drag_state.drag_start.y;
+    drag_state.dragged_object.position.x = drag_state.object_initial_position.x + offset_x * 10;
+    drag_state.dragged_object.position.y = drag_state.object_initial_position.y - offset_y * 10;
+    drag_state.drag_callbacks.onDrag({
+      x: drag_state.dragged_object.position.x,
+      y: drag_state.dragged_object.position.y,
+      z: drag_state.dragged_object.position.z
+    });
+  }
+  function on_mouse_up(e) {
+    if (drag_state.is_dragging) {
+      drag_state.is_dragging = false;
+      drag_state.drag_callbacks.onDragEnd();
+    }
+  }
+  function enable_touch_support() {
+    const dom_element = current_three.renderer?.domElement;
+    if (!dom_element) return;
+    dom_element.style.touchAction = "none";
+    if (current_three.controls) ;
+  }
+  return {
+    get_select_object,
+    enable_object_drag,
+    disable_object_drag,
+    enable_touch_support
+  };
+}
+function use_loader(current_three) {
+  function use_draco_loader(gltfLoader) {
+    const dracoLoader = new DRACOLoader();
+    dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf");
+    dracoLoader.setDecoderConfig({ type: "wasm" });
+    gltfLoader.setDRACOLoader(dracoLoader);
+  }
+  function load_gltf_model(url, options) {
+    const loader = new GLTFLoader();
+    const loadingState = {
+      progress: 0,
+      loaded: false,
+      error: null,
+      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(
+        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);
+        }
+      );
+    }
+    return loadingState;
+  }
+  return {
+    use_draco_loader,
+    load_gltf_model,
+    load_obj_model
+  };
+}
+function use_resources(current_three) {
+  function clear_resources() {
+    if (current_three.scene) {
+      while (current_three.scene.children.length > 0) {
+        remove_object(current_three.scene.children[0]);
+      }
+      current_three.scene.background = null;
+      current_three.scene.environment?.dispose();
+      current_three.scene.clear();
+      current_three.scene = void 0;
+    }
+    current_three.camera?.remove();
+    current_three.camera && (current_three.camera = void 0);
+    current_three.container && (current_three.container = void 0);
+    current_three.controls?.dispose?.();
+    current_three.controls && (current_three.controls = void 0);
+    if (current_three.css2Renderer) {
+      current_three.css2Renderer.domElement.remove();
+      current_three.css2Renderer = void 0;
+    }
+    clear_renderer();
+    Cache.clear();
+  }
+  function clear_renderer() {
+    if (current_three.renderer) {
+      current_three.renderer.renderLists?.dispose();
+      current_three.renderer.dispose();
+      current_three.renderer.forceContextLoss();
+      try {
+        current_three.renderer.domElement.remove();
+      } catch (e) {
+      }
+      current_three.renderer = void 0;
+    }
+  }
+  function remove_object(object) {
+    if (!object) return;
+    if (object.children && object.children.length > 0) {
+      for (let i = object.children.length - 1; i >= 0; i--) {
+        remove_object(object.children[i]);
+      }
+    }
+    if ("geometry" in object && object.geometry) {
+      const geometry = object.geometry;
+      geometry.dispose?.();
+    }
+    if ("material" in object && object.material) {
+      if (Array.isArray(object.material)) {
+        object.material.forEach((material) => {
+          material.dispose?.();
+          if (material.map) material.map.dispose?.();
+          if (material.normalMap) material.normalMap.dispose?.();
+          if (material.specularMap) material.specularMap.dispose?.();
+          if (material.aoMap) material.aoMap.dispose?.();
+        });
+      } else {
+        const material = object.material;
+        material.dispose?.();
+        if (material.map) material.map.dispose?.();
+        if (material.normalMap) material.normalMap.dispose?.();
+        if (material.specularMap) material.specularMap.dispose?.();
+        if (material.aoMap) material.aoMap.dispose?.();
+      }
+    }
+    if ("texture" in object && object.texture) {
+      const texture = object.texture;
+      texture.dispose?.();
+    }
+    object.clear?.();
+    object.dispose?.();
+    object.parent?.remove(object);
+    object = null;
+  }
+  return {
+    clear_resources,
+    clear_renderer,
+    remove_object
+  };
+}
+function use_box_helper(current_three, color = "#00ffff") {
+  const helper = new BoxHelper(new Object3D(), color);
+  function add_to_scene(scene) {
+    scene.add(helper);
+  }
+  function set_box_frame(obj) {
+    helper.setFromObject(obj);
+    set_visible(true);
+  }
+  function set_visible(visible) {
+    helper.visible = visible;
+  }
+  function destroy() {
+    if (helper.parent !== null) {
+      helper.parent.remove(helper);
+    }
+  }
+  return {
+    helper,
+    add_to_scene,
+    set_box_frame,
+    set_visible,
+    destroy
+  };
+}
+function use_effect_composer(current_three) {
+  const composers = [];
+  function get_container_size() {
+    return {
+      width: current_three.container?.scrollWidth || window.innerWidth,
+      height: current_three.container?.scrollHeight || window.innerHeight
+    };
+  }
+  function enable_effect(use_ssao = true, ssao_options) {
+    if (!current_three.renderer) {
+      console.error("Renderer is not initialized");
+      return null;
+    }
+    const composer = new EffectComposer(current_three.renderer);
+    const render_pass = new RenderPass(current_three.scene, current_three.camera);
+    composer.addPass(render_pass);
+    if (use_ssao && current_three.scene && current_three.camera) {
+      const ssao_pass = new SSAOPass(
+        current_three.scene,
+        current_three.camera,
+        get_container_size().width,
+        get_container_size().height
+      );
+      ssao_pass.kernelRadius = ssao_options?.kernel_radius || 0.5;
+      ssao_pass.minDistance = ssao_options?.min_distance || 1e-3;
+      ssao_pass.maxDistance = ssao_options?.max_distance || 0.025;
+      composer.addPass(ssao_pass);
+    }
+    composers.push(composer);
+    return composer;
+  }
+  function enable_fxaa(composer) {
+    if (!composer || !current_three.renderer) {
+      console.error("Composer or renderer is not initialized");
+      return;
+    }
+    const { width, height } = get_container_size();
+    const fxaa_pass = new ShaderPass(FXAAShader);
+    fxaa_pass.uniforms["resolution"].value.set(
+      1 / (width * current_three.renderer.getPixelRatio()),
+      1 / (height * current_three.renderer.getPixelRatio())
+    );
+    fxaa_pass.renderToScreen = true;
+    composer.addPass(fxaa_pass);
+  }
+  function enable_unreal_bloom(composer, strength = 0.4, radius = 1.5, threshold = 0.2) {
+    if (!composer) {
+      console.error("Composer is not initialized");
+      return null;
+    }
+    const { width, height } = get_container_size();
+    const bloom_pass = new UnrealBloomPass(
+      new Vector2(width, height),
+      strength,
+      // 强度：光晕扩散程度
+      radius,
+      // 半径：光晕范围
+      threshold
+      // 阈值：亮度达到多少时触发光晕
+    );
+    composer.addPass(bloom_pass);
+    return bloom_pass;
+  }
+  function enable_outline(composer) {
+    if (!composer || !current_three.scene || !current_three.camera) {
+      console.error("Composer, scene or camera is not initialized");
+      return null;
+    }
+    const { width, height } = get_container_size();
+    const outline_pass = new OutlinePass(
+      new Vector2(width, height),
+      current_three.scene,
+      current_three.camera
+    );
+    composer.addPass(outline_pass);
+    return outline_pass;
+  }
+  function set_out_line(outline_pass, objects, out_line_options = {}) {
+    if (!outline_pass) {
+      console.error("OutlinePass is not initialized");
+      return;
+    }
+    const default_options = {
+      pulse_period: 5,
+      // 脉冲周期（0为不闪烁）,数值越大，闪烁越慢
+      visible_edge_color: "#f44d0b",
+      // 可见边缘颜色
+      hidden_edge_color: "#000",
+      // 阴影颜色
+      use_pattern_texture: false,
+      // 使用纹理覆盖
+      edge_strength: 3,
+      // 轮廓强度
+      edge_glow: 0.5,
+      // 边缘辉光
+      edge_thickness: 3
+      // 轮廓厚度
+    };
+    const options = { ...default_options, ...out_line_options };
+    Object.keys(options).forEach((key) => {
+      if (!["visible_edge_color", "hidden_edge_color"].includes(key)) {
+        outline_pass[key] = options[key];
+      }
+    });
+    if (options.visible_edge_color) {
+      outline_pass.visibleEdgeColor.set(options.visible_edge_color);
+    }
+    if (options.hidden_edge_color) {
+      outline_pass.hiddenEdgeColor.set(options.hidden_edge_color);
+    }
+    outline_pass.selectedObjects = objects;
+  }
+  function enable_film_effect(composer, options = {}) {
+    if (!composer) {
+      console.error("Composer is not initialized");
+      return null;
+    }
+    const default_options = {
+      noise_intensity: 0.025,
+      grayscale: false
+    };
+    const { noise_intensity, grayscale } = {
+      ...default_options,
+      ...options
+    };
+    const film_pass = new FilmPass(
+      noise_intensity,
+      // 颗粒强度
+      grayscale
+      // 灰度模式
+    );
+    film_pass.renderToScreen = true;
+    composer.addPass(film_pass);
+    return film_pass;
+  }
+  function enable_grayscale(composer) {
+    if (!composer) {
+      console.error("Composer is not initialized");
+      return null;
+    }
+    const grayscale_pass = new ShaderPass(GrayscaleShader);
+    grayscale_pass.renderToScreen = true;
+    composer.addPass(grayscale_pass);
+    return grayscale_pass;
+  }
+  function update_all_composers_size() {
+    const { width, height } = get_container_size();
+    composers.forEach((composer) => {
+      if (composer) {
+        composer.setSize(width, height);
+      }
+    });
+  }
+  function clear_composers() {
+    composers.forEach((composer) => {
+      if (composer) {
+        composer.dispose();
+      }
+    });
+    composers.length = 0;
+  }
+  return {
+    enable_effect,
+    enable_fxaa,
+    enable_unreal_bloom,
+    enable_outline,
+    set_out_line,
+    enable_film_effect,
+    enable_grayscale,
+    update_all_composers_size,
+    clear_composers
+  };
+}
+const defaultThreeOption = {
+  scenebgcolor: "#000",
+  scenebg: void 0,
+  camera_option: {
+    position: { x: 50, y: 50, z: 0 },
+    fov: 50,
+    near: 0.1,
+    far: 800
+  },
+  camera_type: "perspective",
+  css2_render: false,
+  controls: true,
+  axes_helper: false,
+  default_lighting: true
+};
+function use_three(options) {
+  let current_three = {};
+  options = { ...defaultThreeOption, ...options };
+  let vr_dom = void 0;
+  const { create_perspective_camera, create_orthographic_camera, set_camera_preset, orbit_controls, axes_helper, reset_camera } = use_camera(current_three);
+  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 { 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") {
+    return use_box_helper(current_three, color);
+  }
+  onMounted(() => {
+    on(window, "resize", resize);
+  });
+  onBeforeUnmount(() => {
+    off(window, "resize", resize);
+    clear_resources();
+  });
+  function init_three() {
+    try {
+      current_three.scene = new Scene();
+      const { scenebgcolor, scenebg } = options;
+      scenebgcolor && (current_three.scene.background = new Color(scenebgcolor));
+      scenebg && (current_three.scene.background = scenebg);
+      init_renderer(options);
+      options.css2_render && init_css2_renderer();
+      if (options.camera_type === "orthographic") {
+        create_orthographic_camera();
+      } else {
+        create_perspective_camera(options);
+      }
+      options.default_lighting && add_default_lighting();
+      options.controls && orbit_controls();
+      options.axes_helper && axes_helper();
+    } catch (error) {
+      console.error("Three.js initialization error:", error);
+    }
+  }
+  function reset() {
+    reset_camera(options);
+  }
+  function enabled_vr() {
+    if (current_three.renderer) {
+      vr_dom = VRButton.createButton(current_three.renderer);
+      if (vr_dom) {
+        document.body.appendChild(vr_dom);
+      }
+      current_three.renderer.xr.enabled = true;
+    }
+  }
+  function disabled_vr() {
+    if (current_three.renderer) {
+      vr_dom?.remove();
+      current_three.renderer.xr.enabled = false;
+    }
+  }
+  function create_tool_tip(obj, options2) {
+    const tool_tip = new ObjectToolTip();
+    tool_tip.create(obj, options2);
+    return tool_tip;
+  }
+  function create_tool_tip_instance() {
+    return new ObjectToolTip();
+  }
+  return {
+    instance: current_three,
+    init_three,
+    set_container,
+    create_perspective_camera: () => create_perspective_camera(options),
+    create_orthographic_camera,
+    set_camera_preset,
+    add_default_lighting,
+    add_ambient_light,
+    add_directional_light,
+    add_point_light,
+    add_spot_light,
+    set_rendering_status,
+    set_target_fps,
+    load_gltf_model,
+    load_obj_model,
+    enable_object_drag,
+    disable_object_drag,
+    enable_touch_support,
+    utils: three_utils,
+    dispose_three: clear_resources,
+    render,
+    get_select_object,
+    enabled_vr,
+    disabled_vr,
+    use_draco_loader,
+    reset,
+    resize,
+    enable_shadow,
+    create_tool_tip,
+    create_tool_tip_instance,
+    // 边界框辅助
+    create_box_helper,
+    // 后期处理
+    enable_effect,
+    enable_fxaa,
+    enable_unreal_bloom,
+    enable_outline,
+    set_out_line
+  };
+}
+export {
+  use_three
+};