@tonybfox/threejs-tools 1.0.2 → 1.0.3

package/dist/{chunk-WMHEIUXE.mjs → chunk-IEE7DQOU.mjs}

@@ -64,6 +64,7 @@ var DualCameraControls = class extends CameraControls {
     const initialCamera = initialMode === "orthographic" ? orthographicCamera : perspectiveCamera;
     super(initialCamera, domElement);
     this.updateClock = new THREE.Clock();
+    this.externalCamera = null;
     const initialTarget = toVector3(
       options.initialTarget,
       [0, 0, 0],
@@ -99,9 +100,10 @@ var DualCameraControls = class extends CameraControls {
    * Switch to the perspective camera while keeping the current framing.
    */
   switchToPerspective(enableTransition = false) {
-    if (this.activeMode === "perspective") {
+    if (this.activeMode === "perspective" && !this.externalCamera) {
       return;
     }
+    this.externalCamera = null;
     const target = this.getTarget(tempVec3A);
     const position = this.getPosition(tempVec3B);
     const aspect = resolveAspect(this.renderer, this.domElementRef);
@@ -133,9 +135,10 @@ var DualCameraControls = class extends CameraControls {
    * Switch to the orthographic camera while keeping the current framing.
    */
   switchToOrthographic(enableTransition = false) {
-    if (this.activeMode === "orthographic") {
+    if (this.activeMode === "orthographic" && !this.externalCamera) {
       return;
     }
+    this.externalCamera = null;
     const target = this.getTarget(tempVec3A);
     const position = this.getPosition(tempVec3B);
     const aspect = resolveAspect(this.renderer, this.domElementRef);
@@ -173,6 +176,92 @@ var DualCameraControls = class extends CameraControls {
       this.switchToPerspective(enableTransition);
     }
   }
+  /**
+   * Returns true if currently using an external camera.
+   */
+  get isUsingExternalCamera() {
+    return this.externalCamera !== null;
+  }
+  /**
+   * Sets an external camera to use with the controls.
+   * This allows using a camera created outside of DualCameraControls.
+   * Call `clearExternalCamera()` to return to the internal cameras.
+   */
+  setCamera(camera, target, enableTransition = false) {
+    const previousCamera = this.camera;
+    this.externalCamera = camera;
+    const aspect = resolveAspect(this.renderer, this.domElementRef);
+    if (camera.type === "PerspectiveCamera") {
+      ;
+      camera.aspect = aspect;
+      camera.updateProjectionMatrix();
+    } else if (camera.type === "OrthographicCamera") {
+      const ortho = camera;
+      const currentHeight = (ortho.top - ortho.bottom) * 0.5;
+      const newHalfWidth = currentHeight * aspect;
+      ortho.left = -newHalfWidth;
+      ortho.right = newHalfWidth;
+      ortho.updateProjectionMatrix();
+    }
+    this.camera = camera;
+    const mode = camera.type === "PerspectiveCamera" ? "perspective" : "orthographic";
+    this.activeMode = mode;
+    this.updateInputBindingsForMode(mode);
+    const targetVec = toVector3(target, [0, 0, 0], tempVec3A);
+    void this.setLookAt(
+      camera.position.x,
+      camera.position.y,
+      camera.position.z,
+      targetVec.x,
+      targetVec.y,
+      targetVec.z,
+      enableTransition
+    );
+    this.dispatchEvent({
+      type: "externalcamerachange",
+      camera,
+      previousCamera
+    });
+  }
+  /**
+   * Clears the external camera and returns to using the internal cameras.
+   * Will switch to the camera matching the current mode.
+   */
+  clearExternalCamera(enableTransition = false) {
+    if (!this.externalCamera) {
+      return;
+    }
+    const target = this.getTarget(tempVec3A);
+    const position = this.getPosition(tempVec3B);
+    this.externalCamera = null;
+    const internalCamera = this.activeMode === "orthographic" ? this.orthographicCamera : this.perspectiveCamera;
+    internalCamera.position.copy(position);
+    internalCamera.quaternion.copy(this.camera.quaternion);
+    internalCamera.up.copy(this.camera.up);
+    const aspect = resolveAspect(this.renderer, this.domElementRef);
+    if (this.activeMode === "orthographic") {
+      this.updateOrthographicFrustum(position, target, aspect);
+    } else {
+      this.perspectiveCamera.aspect = aspect;
+      this.perspectiveCamera.updateProjectionMatrix();
+    }
+    this.camera = internalCamera;
+    void this.setLookAt(
+      position.x,
+      position.y,
+      position.z,
+      target.x,
+      target.y,
+      target.z,
+      enableTransition
+    );
+    this.dispatchEvent({
+      type: "modechange",
+      mode: this.activeMode,
+      previousMode: this.activeMode,
+      camera: internalCamera
+    });
+  }
   /**
    * Update camera projection parameters when the viewport size changes.
    */
@@ -266,4 +355,4 @@ function resolveAspect(renderer, domElement) {
 export {
   DualCameraControls
 };
-//# sourceMappingURL=chunk-WMHEIUXE.mjs.map
+//# sourceMappingURL=chunk-IEE7DQOU.mjs.map

package/dist/chunk-IEE7DQOU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/camera/src/DualCameraControls.ts"],"sourcesContent":["import * as THREE from 'three'\nimport CameraControls from 'camera-controls'\n\ntype Vector3Tuple = [number, number, number]\ntype Vector3Like = THREE.Vector3 | Vector3Tuple\n\nexport type CameraMode = 'perspective' | 'orthographic'\n\nexport interface PerspectiveCameraConfig {\n  fov?: number\n  near?: number\n  far?: number\n  position?: Vector3Like\n  zoom?: number\n}\n\nexport interface OrthographicCameraConfig {\n  size?: number\n  near?: number\n  far?: number\n  position?: Vector3Like\n  zoom?: number\n}\n\nexport interface DualCameraControlsOptions {\n  domElement?: HTMLElement\n  initialMode?: CameraMode\n  initialTarget?: Vector3Like\n  perspective?: PerspectiveCameraConfig\n  orthographic?: OrthographicCameraConfig\n}\n\nexport interface ModeChangedEvent {\n  type: 'modechange'\n  mode: CameraMode\n  previousMode: CameraMode\n  camera: THREE.PerspectiveCamera | THREE.OrthographicCamera\n}\n\nexport interface ExternalCameraChangedEvent {\n  type: 'externalcamerachange'\n  camera: THREE.PerspectiveCamera | THREE.OrthographicCamera\n  previousCamera: THREE.PerspectiveCamera | THREE.OrthographicCamera\n}\n\nlet controlsInstalled = false\n\nconst tempVec3A = new THREE.Vector3()\nconst tempVec3B = new THREE.Vector3()\nconst tempVec2 = new THREE.Vector2()\n\nfunction ensureCameraControlsInstalled() {\n  if (!controlsInstalled) {\n    CameraControls.install({ THREE })\n    controlsInstalled = true\n  }\n}\n\nfunction toVector3(\n  value: Vector3Like | undefined,\n  fallback: Vector3Tuple,\n  target: THREE.Vector3\n) {\n  if (!value) {\n    target.set(fallback[0], fallback[1], fallback[2])\n    return target\n  }\n\n  if (Array.isArray(value)) {\n    target.set(value[0], value[1], value[2])\n    return target\n  }\n\n  target.copy(value)\n  return target\n}\n\n/**\n * Camera controls that manage both perspective and orthographic cameras while\n * extending {@link CameraControls}. Provides helpers to toggle between the\n * camera types and keep the framing consistent.\n */\nexport class DualCameraControls extends CameraControls {\n  readonly perspectiveCamera: THREE.PerspectiveCamera\n  readonly orthographicCamera: THREE.OrthographicCamera\n\n  private readonly renderer: THREE.WebGLRenderer\n  private readonly domElementRef: HTMLElement\n  private activeMode: CameraMode\n  private readonly minOrthoHalfHeight: number\n  private readonly updateClock = new THREE.Clock()\n  private externalCamera:\n    | THREE.PerspectiveCamera\n    | THREE.OrthographicCamera\n    | null = null\n\n  constructor(\n    renderer: THREE.WebGLRenderer,\n    options: DualCameraControlsOptions = {}\n  ) {\n    ensureCameraControlsInstalled()\n\n    const { domElement = renderer.domElement } = options\n    const aspect = resolveAspect(renderer, domElement)\n\n    const perspectiveConfig = options.perspective ?? {}\n    const orthographicConfig = options.orthographic ?? {}\n\n    const perspectiveCamera = new THREE.PerspectiveCamera(\n      perspectiveConfig.fov ?? 60,\n      aspect,\n      perspectiveConfig.near ?? 0.1,\n      perspectiveConfig.far ?? 2000\n    )\n\n    perspectiveCamera.position.copy(\n      toVector3(perspectiveConfig.position, [12, 12, 12], new THREE.Vector3())\n    )\n\n    if (perspectiveConfig.zoom !== undefined) {\n      perspectiveCamera.zoom = perspectiveConfig.zoom\n      perspectiveCamera.updateProjectionMatrix()\n    }\n\n    const orthoHalfHeight = Math.max(orthographicConfig.size ?? 20, 0.001) * 0.5\n    const orthoHalfWidth = orthoHalfHeight * aspect\n\n    const orthographicCamera = new THREE.OrthographicCamera(\n      -orthoHalfWidth,\n      orthoHalfWidth,\n      orthoHalfHeight,\n      -orthoHalfHeight,\n      orthographicConfig.near ?? 0.1,\n      orthographicConfig.far ?? 2000\n    )\n\n    orthographicCamera.position.copy(\n      toVector3(orthographicConfig.position, [12, 12, 12], new THREE.Vector3())\n    )\n\n    if (orthographicConfig.zoom !== undefined) {\n      orthographicCamera.zoom = orthographicConfig.zoom\n      orthographicCamera.updateProjectionMatrix()\n    }\n\n    const initialMode = options.initialMode ?? 'perspective'\n    const initialCamera =\n      initialMode === 'orthographic' ? orthographicCamera : perspectiveCamera\n\n    super(initialCamera, domElement)\n\n    const initialTarget = toVector3(\n      options.initialTarget,\n      [0, 0, 0],\n      new THREE.Vector3()\n    )\n    void this.setLookAt(\n      initialCamera.position.x,\n      initialCamera.position.y,\n      initialCamera.position.z,\n      initialTarget.x,\n      initialTarget.y,\n      initialTarget.z,\n      false\n    )\n\n    this.renderer = renderer\n    this.domElementRef = domElement\n    this.perspectiveCamera = perspectiveCamera\n    this.orthographicCamera = orthographicCamera\n    this.activeMode = initialMode\n    this.minOrthoHalfHeight = orthoHalfHeight\n\n    this.updateInputBindingsForMode(initialMode)\n  }\n\n  get mode(): CameraMode {\n    return this.activeMode\n  }\n\n  /**\n   * Returns the currently active camera instance.\n   */\n  get activeCamera(): THREE.PerspectiveCamera | THREE.OrthographicCamera {\n    return this.camera\n  }\n\n  /**\n   * Switch to the perspective camera while keeping the current framing.\n   */\n  switchToPerspective(enableTransition = false) {\n    if (this.activeMode === 'perspective' && !this.externalCamera) {\n      return\n    }\n\n    // Clear external camera if set\n    this.externalCamera = null\n\n    const target = this.getTarget(tempVec3A)\n    const position = this.getPosition(tempVec3B)\n\n    const aspect = resolveAspect(this.renderer, this.domElementRef)\n    this.perspectiveCamera.aspect = aspect\n    this.perspectiveCamera.position.copy(position)\n    this.perspectiveCamera.quaternion.copy(this.camera.quaternion)\n    this.perspectiveCamera.up.copy(this.camera.up)\n    this.perspectiveCamera.updateProjectionMatrix()\n\n    this.camera = this.perspectiveCamera\n    this.activeMode = 'perspective'\n    this.updateInputBindingsForMode('perspective')\n\n    void this.setLookAt(\n      position.x,\n      position.y,\n      position.z,\n      target.x,\n      target.y,\n      target.z,\n      enableTransition\n    )\n\n    this.dispatchEvent({\n      type: 'modechange',\n      mode: this.activeMode,\n      previousMode: 'orthographic',\n      camera: this.perspectiveCamera,\n    } satisfies ModeChangedEvent)\n  }\n\n  /**\n   * Switch to the orthographic camera while keeping the current framing.\n   */\n  switchToOrthographic(enableTransition = false) {\n    if (this.activeMode === 'orthographic' && !this.externalCamera) {\n      return\n    }\n\n    // Clear external camera if set\n    this.externalCamera = null\n\n    const target = this.getTarget(tempVec3A)\n    const position = this.getPosition(tempVec3B)\n\n    const aspect = resolveAspect(this.renderer, this.domElementRef)\n    this.updateOrthographicFrustum(position, target, aspect)\n\n    this.orthographicCamera.position.copy(position)\n    this.orthographicCamera.quaternion.copy(this.camera.quaternion)\n    this.orthographicCamera.up.copy(this.camera.up)\n    this.orthographicCamera.updateProjectionMatrix()\n\n    this.camera = this.orthographicCamera\n    this.activeMode = 'orthographic'\n    this.updateInputBindingsForMode('orthographic')\n\n    void this.setLookAt(\n      position.x,\n      position.y,\n      position.z,\n      target.x,\n      target.y,\n      target.z,\n      enableTransition\n    )\n\n    this.dispatchEvent({\n      type: 'modechange',\n      mode: this.activeMode,\n      previousMode: 'perspective',\n      camera: this.orthographicCamera,\n    } satisfies ModeChangedEvent)\n  }\n\n  /**\n   * Toggles between perspective and orthographic camera modes.\n   */\n  toggleCameraMode(enableTransition = false) {\n    if (this.activeMode === 'perspective') {\n      this.switchToOrthographic(enableTransition)\n    } else {\n      this.switchToPerspective(enableTransition)\n    }\n  }\n\n  /**\n   * Returns true if currently using an external camera.\n   */\n  get isUsingExternalCamera(): boolean {\n    return this.externalCamera !== null\n  }\n\n  /**\n   * Sets an external camera to use with the controls.\n   * This allows using a camera created outside of DualCameraControls.\n   * Call `clearExternalCamera()` to return to the internal cameras.\n   */\n  setCamera(\n    camera: THREE.PerspectiveCamera | THREE.OrthographicCamera,\n    target?: Vector3Like,\n    enableTransition = false\n  ) {\n    const previousCamera = this.camera\n    this.externalCamera = camera\n\n    // Update aspect/frustum for the external camera\n    const aspect = resolveAspect(this.renderer, this.domElementRef)\n    if (camera.type === 'PerspectiveCamera') {\n      ;(camera as THREE.PerspectiveCamera).aspect = aspect\n      camera.updateProjectionMatrix()\n    } else if (camera.type === 'OrthographicCamera') {\n      // Maintain the camera's existing frustum proportions but update aspect\n      const ortho = camera as THREE.OrthographicCamera\n      const currentHeight = (ortho.top - ortho.bottom) * 0.5\n      const newHalfWidth = currentHeight * aspect\n      ortho.left = -newHalfWidth\n      ortho.right = newHalfWidth\n      ortho.updateProjectionMatrix()\n    }\n\n    this.camera = camera\n    const mode: CameraMode =\n      camera.type === 'PerspectiveCamera' ? 'perspective' : 'orthographic'\n    this.activeMode = mode\n    this.updateInputBindingsForMode(mode)\n\n    // Set up the camera position and target in the controls\n    const targetVec = toVector3(target, [0, 0, 0], tempVec3A)\n    void this.setLookAt(\n      camera.position.x,\n      camera.position.y,\n      camera.position.z,\n      targetVec.x,\n      targetVec.y,\n      targetVec.z,\n      enableTransition\n    )\n\n    this.dispatchEvent({\n      type: 'externalcamerachange',\n      camera,\n      previousCamera,\n    } satisfies ExternalCameraChangedEvent)\n  }\n\n  /**\n   * Clears the external camera and returns to using the internal cameras.\n   * Will switch to the camera matching the current mode.\n   */\n  clearExternalCamera(enableTransition = false) {\n    if (!this.externalCamera) {\n      return\n    }\n\n    const target = this.getTarget(tempVec3A)\n    const position = this.getPosition(tempVec3B)\n\n    this.externalCamera = null\n\n    // Return to the internal camera matching the current mode\n    const internalCamera =\n      this.activeMode === 'orthographic'\n        ? this.orthographicCamera\n        : this.perspectiveCamera\n\n    internalCamera.position.copy(position)\n    internalCamera.quaternion.copy(this.camera.quaternion)\n    internalCamera.up.copy(this.camera.up)\n\n    const aspect = resolveAspect(this.renderer, this.domElementRef)\n    if (this.activeMode === 'orthographic') {\n      this.updateOrthographicFrustum(position, target, aspect)\n    } else {\n      this.perspectiveCamera.aspect = aspect\n      this.perspectiveCamera.updateProjectionMatrix()\n    }\n\n    this.camera = internalCamera\n\n    void this.setLookAt(\n      position.x,\n      position.y,\n      position.z,\n      target.x,\n      target.y,\n      target.z,\n      enableTransition\n    )\n\n    this.dispatchEvent({\n      type: 'modechange',\n      mode: this.activeMode,\n      previousMode: this.activeMode,\n      camera: internalCamera,\n    } satisfies ModeChangedEvent)\n  }\n\n  /**\n   * Update camera projection parameters when the viewport size changes.\n   */\n  handleResize(width: number, height: number) {\n    const aspect = height === 0 ? 1 : width / height\n\n    this.perspectiveCamera.aspect = aspect\n    this.perspectiveCamera.updateProjectionMatrix()\n\n    const target = this.getTarget(tempVec3A)\n    const position = this.getPosition(tempVec3B)\n    this.updateOrthographicFrustum(position, target, aspect)\n\n    if (this.activeMode === 'orthographic') {\n      this.camera = this.orthographicCamera\n      void this.setLookAt(\n        position.x,\n        position.y,\n        position.z,\n        target.x,\n        target.y,\n        target.z,\n        false\n      )\n    }\n  }\n\n  /**\n   * Moves the camera to a new position and target.\n   */\n  moveCamera(\n    position: Vector3Like,\n    target: Vector3Like,\n    enableTransition = true\n  ) {\n    toVector3(position, [0, 0, 0], tempVec3A)\n    toVector3(target, [0, 0, 0], tempVec3B)\n\n    return this.setLookAt(\n      tempVec3A.x,\n      tempVec3A.y,\n      tempVec3A.z,\n      tempVec3B.x,\n      tempVec3B.y,\n      tempVec3B.z,\n      enableTransition\n    )\n  }\n\n  /**\n   * Updates the controls using an internally managed clock.\n   * Useful when you don't want to pass delta time each frame.\n   */\n  updateDelta(): ReturnType<CameraControls['update']> {\n    const delta = this.updateClock.getDelta()\n    return super.update(delta)\n  }\n\n  private updateInputBindingsForMode(mode: CameraMode) {\n    const { ACTION } = CameraControls\n\n    if (mode === 'orthographic') {\n      this.mouseButtons.left = ACTION.TRUCK\n      this.mouseButtons.right = ACTION.ROTATE\n      this.mouseButtons.wheel = ACTION.ZOOM\n      this.touches.one = ACTION.TOUCH_TRUCK\n      this.touches.two = ACTION.TOUCH_ZOOM_TRUCK\n    } else {\n      this.mouseButtons.left = ACTION.ROTATE\n      this.mouseButtons.right = ACTION.TRUCK\n      this.mouseButtons.wheel = ACTION.DOLLY\n      this.touches.one = ACTION.TOUCH_ROTATE\n      this.touches.two = ACTION.TOUCH_DOLLY_TRUCK\n    }\n  }\n\n  private updateOrthographicFrustum(\n    position: THREE.Vector3,\n    target: THREE.Vector3,\n    aspect: number\n  ) {\n    const distance = Math.max(position.distanceTo(target), 0.001)\n    const fov = this.perspectiveCamera.fov\n    const halfHeight = Math.max(\n      distance * Math.tan(THREE.MathUtils.degToRad(fov * 0.5)),\n      this.minOrthoHalfHeight\n    )\n    const halfWidth = halfHeight * aspect\n\n    this.orthographicCamera.left = -halfWidth\n    this.orthographicCamera.right = halfWidth\n    this.orthographicCamera.top = halfHeight\n    this.orthographicCamera.bottom = -halfHeight\n    this.orthographicCamera.updateProjectionMatrix()\n  }\n}\n\nfunction resolveAspect(\n  renderer: THREE.WebGLRenderer,\n  domElement: HTMLElement\n): number {\n  const size = renderer.getSize(tempVec2)\n  if (size.y > 0) {\n    return size.x / size.y\n  }\n\n  const { clientWidth, clientHeight } = domElement\n  if (clientHeight > 0) {\n    return clientWidth / clientHeight\n  }\n\n  return 1\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-L4VIIJZD.mjs → chunk-WZ6IGBSE.mjs}

@@ -3,6 +3,7 @@ import * as THREE from "three";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
+import { USDLoader } from "three/examples/jsm/loaders/USDLoader.js";
 var AssetLoader = class extends THREE.EventDispatcher {
   constructor() {
     super();
@@ -15,6 +16,7 @@ var AssetLoader = class extends THREE.EventDispatcher {
     this.gltfLoader = new GLTFLoader();
     this.fbxLoader = new FBXLoader();
     this.objLoader = new OBJLoader();
+    this.usdLoader = new USDLoader();
   }
   /**
    * Create a placeholder cube with shader effect
@@ -32,7 +34,9 @@ var AssetLoader = class extends THREE.EventDispatcher {
         opacity: { value: opacity },
         fillProgress: { value: 0 },
         time: { value: 0 },
-        isError: { value: 0 }
+        isError: { value: 0 },
+        yMin: { value: -height / 2 },
+        yMax: { value: height / 2 }
       },
       vertexShader: `
         varying vec3 vPosition;
@@ -47,15 +51,17 @@ var AssetLoader = class extends THREE.EventDispatcher {
         uniform float fillProgress;
         uniform float time;
         uniform float isError;
+        uniform float yMin;
+        uniform float yMax;
         varying vec3 vPosition;
         
         void main() {
-          float normalizedY = (vPosition.y + 1.0) / 2.0; // Normalize from -1,1 to 0,1
+          float normalizedY = (vPosition.y - yMin) / (yMax - yMin); // Normalize based on actual geometry bounds
           float alpha = opacity;
           
           // Create fill-up effect
           if (normalizedY > fillProgress) {
-            alpha *= 0.3; // Reduce opacity for unfilled parts
+            alpha *= 0.1; // Reduce opacity for unfilled parts
           }
           
           // Error state effects
@@ -181,7 +187,7 @@ var AssetLoader = class extends THREE.EventDispatcher {
       lowResUrl,
       enableCaching = true,
       placeholderColor = 5227511,
-      placeholderOpacity = 0.8,
+      placeholderOpacity = 0.4,
       errorColor = 16729156,
       errorOpacity = 0.5
     } = options;
@@ -242,14 +248,17 @@ var AssetLoader = class extends THREE.EventDispatcher {
   loadModel(type, url, isLowRes) {
     return new Promise((resolve, reject) => {
       const onProgress = (event) => {
-        const percentage = event.loaded / event.total * 100;
+        let percentage = -1;
+        if (event.lengthComputable && event.total > 0 && event.loaded <= event.total) {
+          percentage = event.loaded / event.total * 100;
+        }
         this.dispatchEvent({
           type: "progress",
           loaded: event.loaded,
           total: event.total,
           percentage
         });
-        if (!isLowRes) {
+        if (!isLowRes && percentage >= 0) {
           this.updatePlaceholder(percentage / 100);
         }
       };
@@ -291,6 +300,18 @@ var AssetLoader = class extends THREE.EventDispatcher {
             onError
           );
           break;
+        case "usd":
+        case "usdz":
+          this.usdLoader.load(
+            url,
+            (usd) => {
+              this.positionAssetAtBottomCenter(usd);
+              resolve(usd);
+            },
+            onProgress,
+            onError
+          );
+          break;
         default:
           reject(new Error(`Unsupported asset type: ${type}`));
       }
@@ -337,4 +358,4 @@ var AssetLoader = class extends THREE.EventDispatcher {
 export {
   AssetLoader
 };
-//# sourceMappingURL=chunk-L4VIIJZD.mjs.map
+//# sourceMappingURL=chunk-WZ6IGBSE.mjs.map

package/dist/chunk-WZ6IGBSE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../packages/asset-loader/src/AssetLoader.ts"],"sourcesContent":["import * as THREE from 'three'\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'\nimport { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'\nimport { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'\nimport { USDLoader } from 'three/examples/jsm/loaders/USDLoader.js'\n\n// Event types for asset loading\ninterface AssetLoaderEventMap {\n  progress: { loaded: number; total: number; percentage: number }\n  loaded: { asset: THREE.Object3D }\n  error: { error: Error }\n  placeholderCreated: { placeholder: THREE.Object3D }\n  lowResLoaded: { lowRes: THREE.Object3D }\n}\n\nexport type AssetType = 'gltf' | 'fbx' | 'obj' | 'usd' | 'usdz'\n\nexport interface AssetLoaderOptions {\n  type: AssetType\n  url: string\n  size?: [number, number, number] // Optional size for placeholder\n  lowResUrl?: string // Optional low-res model URL\n  enableCaching?: boolean\n  placeholderColor?: number\n  placeholderOpacity?: number\n  errorColor?: number // Color to use when loading fails\n  errorOpacity?: number // Opacity to use when loading fails\n}\n\nexport class AssetLoader extends THREE.EventDispatcher<AssetLoaderEventMap> {\n  private cache: Map<string, THREE.Object3D> = new Map()\n  private gltfLoader: GLTFLoader\n  private fbxLoader: FBXLoader\n  private objLoader: OBJLoader\n  private usdLoader: USDLoader\n  private placeholder: THREE.Object3D | null = null\n  private loadedAsset: THREE.Object3D | null = null\n  private lowResAsset: THREE.Object3D | null = null\n  private errorColor: number = 0xff4444\n  private errorOpacity: number = 0.5\n\n  constructor() {\n    super()\n    this.gltfLoader = new GLTFLoader()\n    this.fbxLoader = new FBXLoader()\n    this.objLoader = new OBJLoader()\n    this.usdLoader = new USDLoader()\n  }\n\n  /**\n   * Create a placeholder cube with shader effect\n   */\n  private createPlaceholder(\n    size: [number, number, number],\n    color: number = 0x4fc3f7,\n    opacity: number = 0.3\n  ): THREE.Object3D {\n    const [width, height, depth] = size\n    const geometry = new THREE.BoxGeometry(width, height, depth)\n\n    // Custom shader material with fill-up effect\n    const material = new THREE.ShaderMaterial({\n      side: THREE.DoubleSide,\n      depthWrite: false,\n      blending: THREE.AdditiveBlending,\n      transparent: true,\n      uniforms: {\n        color: { value: new THREE.Color(color) },\n        opacity: { value: opacity },\n        fillProgress: { value: 0.0 },\n        time: { value: 0.0 },\n        isError: { value: 0.0 },\n        yMin: { value: -height / 2 },\n        yMax: { value: height / 2 },\n      },\n      vertexShader: `\n        varying vec3 vPosition;\n        void main() {\n          vPosition = position;\n          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n        }\n      `,\n      fragmentShader: `\n        uniform vec3 color;\n        uniform float opacity;\n        uniform float fillProgress;\n        uniform float time;\n        uniform float isError;\n        uniform float yMin;\n        uniform float yMax;\n        varying vec3 vPosition;\n        \n        void main() {\n          float normalizedY = (vPosition.y - yMin) / (yMax - yMin); // Normalize based on actual geometry bounds\n          float alpha = opacity;\n          \n          // Create fill-up effect\n          if (normalizedY > fillProgress) {\n            alpha *= 0.1; // Reduce opacity for unfilled parts\n          }\n          \n          // Error state effects\n          if (isError > 0.5) {\n            // Add pulsing effect for error state\n            float pulse = 0.5 + 0.5 * sin(time * 4.0);\n            alpha *= (0.3 + 0.4 * pulse);\n            \n            // Add error pattern\n            float stripe = sin(vPosition.y * 20.0 + time * 2.0);\n            alpha *= (0.7 + 0.3 * step(0.0, stripe));\n          }\n          \n          // Add edge glow\n          vec3 viewDirection = normalize(cameraPosition - vPosition);\n          float edgeIntensity = pow(1.0 - abs(dot(viewDirection, normalize(vPosition))), 2.0);\n          \n          vec3 finalColor = color + edgeIntensity * 0.5;\n          gl_FragColor = vec4(finalColor, alpha);\n        }\n      `,\n    })\n\n    const mesh = new THREE.Mesh(geometry, material)\n    this.positionAssetAtBottomCenter(mesh)\n    return mesh\n  }\n\n  /**\n   * Update placeholder fill progress based on loading progress\n   */\n  private updatePlaceholder(progress: number) {\n    if (this.placeholder && this.placeholder instanceof THREE.Mesh) {\n      const material = this.placeholder.material as THREE.ShaderMaterial\n      if (material.uniforms && material.uniforms.fillProgress) {\n        material.uniforms.fillProgress.value = progress\n      }\n    }\n  }\n\n  /**\n   * Set placeholder to error state with configurable color and opacity\n   */\n  private setPlaceholderError() {\n    if (this.placeholder && this.placeholder instanceof THREE.Mesh) {\n      const material = this.placeholder.material as THREE.ShaderMaterial\n      if (material.uniforms) {\n        // Change to error color\n        if (material.uniforms.color) {\n          material.uniforms.color.value = new THREE.Color(this.errorColor)\n        }\n        // Set error opacity\n        if (material.uniforms.opacity) {\n          material.uniforms.opacity.value = this.errorOpacity\n        }\n        // Set fill progress to indicate failure\n        if (material.uniforms.fillProgress) {\n          material.uniforms.fillProgress.value = 0.0\n        }\n        // Enable error state\n        if (material.uniforms.isError) {\n          material.uniforms.isError.value = 1.0\n        }\n      }\n    }\n  }\n\n  /**\n   * Update placeholder animation time (call this in your render loop)\n   */\n  public updatePlaceholderAnimation(deltaTime: number) {\n    if (this.placeholder && this.placeholder instanceof THREE.Mesh) {\n      const material = this.placeholder.material as THREE.ShaderMaterial\n      if (material.uniforms && material.uniforms.time) {\n        material.uniforms.time.value += deltaTime\n      }\n    }\n  }\n\n  /**\n   * Reposition an asset so that its bottom-center sits at the local origin.\n   */\n  private positionAssetAtBottomCenter(object: THREE.Object3D) {\n    object.updateMatrixWorld(true)\n\n    const boundingBox = new THREE.Box3().setFromObject(object)\n    if (boundingBox.isEmpty()) {\n      return\n    }\n\n    const center = boundingBox.getCenter(new THREE.Vector3())\n    const bottomCenter = new THREE.Vector3(\n      center.x,\n      boundingBox.min.y + 0.01,\n      center.z\n    )\n\n    if (\n      !Number.isFinite(bottomCenter.x) ||\n      !Number.isFinite(bottomCenter.y) ||\n      !Number.isFinite(bottomCenter.z)\n    ) {\n      return\n    }\n\n    object.position.sub(bottomCenter)\n    object.userData.bottomCenterOffset = bottomCenter\n    object.updateMatrixWorld(true)\n  }\n\n  private ensureBottomCenterOffset(\n    object: THREE.Object3D\n  ): THREE.Vector3 | null {\n    const offset = object.userData.bottomCenterOffset\n    if (offset instanceof THREE.Vector3) {\n      return offset\n    }\n\n    if (offset && typeof offset === 'object') {\n      const {\n        x = 0,\n        y = 0,\n        z = 0,\n      } = offset as Partial<Record<'x' | 'y' | 'z', number>>\n      const normalized = new THREE.Vector3(x ?? 0, y ?? 0, z ?? 0)\n      object.userData.bottomCenterOffset = normalized\n      return normalized\n    }\n\n    return null\n  }\n\n  private normalizeBottomCenterData(object: THREE.Object3D): boolean {\n    const hasOffset = this.ensureBottomCenterOffset(object) !== null\n    object.children.forEach((child) => this.normalizeBottomCenterData(child))\n    return hasOffset\n  }\n\n  /**\n   * Load an asset with the specified options\n   */\n  async load(options: AssetLoaderOptions): Promise<THREE.Object3D> {\n    const {\n      type,\n      url,\n      size,\n      lowResUrl,\n      enableCaching = true,\n      placeholderColor = 0x4fc3f7,\n      placeholderOpacity = 0.4,\n      errorColor = 0xff4444,\n      errorOpacity = 0.5,\n    } = options\n\n    // Check cache first\n    if (enableCaching && this.cache.has(url)) {\n      const cachedClone = this.cache.get(url)!.clone(true)\n      const hasOffset = this.normalizeBottomCenterData(cachedClone)\n\n      if (!hasOffset) {\n        this.positionAssetAtBottomCenter(cachedClone)\n      } else {\n        cachedClone.updateMatrixWorld(true)\n      }\n\n      this.loadedAsset = cachedClone\n      this.dispatchEvent({ type: 'loaded', asset: cachedClone })\n      return cachedClone\n    }\n\n    // Store error styling options\n    this.errorColor = errorColor\n    this.errorOpacity = errorOpacity\n\n    // Create placeholder if size is provided\n    if (size) {\n      this.placeholder = this.createPlaceholder(\n        size,\n        placeholderColor,\n        placeholderOpacity\n      )\n      this.dispatchEvent({\n        type: 'placeholderCreated',\n        placeholder: this.placeholder,\n      })\n    }\n\n    try {\n      // Load low-res model first if provided\n      if (lowResUrl) {\n        const lowRes = await this.loadModel(type, lowResUrl, true)\n        this.lowResAsset = lowRes\n        this.dispatchEvent({ type: 'lowResLoaded', lowRes })\n      }\n\n      // Load main asset\n      const asset = await this.loadModel(type, url, false)\n      this.loadedAsset = asset\n\n      // Cache if enabled\n      if (enableCaching) {\n        const cacheEntry = asset.clone(true)\n        const hasOffset = this.normalizeBottomCenterData(cacheEntry)\n        if (!hasOffset) {\n          this.positionAssetAtBottomCenter(cacheEntry)\n        } else {\n          cacheEntry.updateMatrixWorld(true)\n        }\n        this.cache.set(url, cacheEntry)\n      }\n\n      this.dispatchEvent({ type: 'loaded', asset })\n      return asset\n    } catch (error) {\n      // Set placeholder to error state\n      this.setPlaceholderError()\n      this.dispatchEvent({ type: 'error', error: error as Error })\n      throw error\n    }\n  }\n\n  /**\n   * Load a model based on type\n   */\n  private loadModel(\n    type: AssetType,\n    url: string,\n    isLowRes: boolean\n  ): Promise<THREE.Object3D> {\n    return new Promise((resolve, reject) => {\n      const onProgress = (event: ProgressEvent) => {\n        // Handle cases where loaded > total (compressed content mismatch)\n        // or total is 0 (unknown content length)\n        let percentage = -1 // Default to indeterminate\n\n        // Only calculate percentage if lengthComputable is true AND loaded <= total\n        // This prevents false 100% when server reports compressed size\n        if (\n          event.lengthComputable &&\n          event.total > 0 &&\n          event.loaded <= event.total\n        ) {\n          percentage = (event.loaded / event.total) * 100\n        }\n\n        this.dispatchEvent({\n          type: 'progress',\n          loaded: event.loaded,\n          total: event.total,\n          percentage,\n        })\n\n        // Update placeholder fill only with valid percentage\n        if (!isLowRes && percentage >= 0) {\n          this.updatePlaceholder(percentage / 100)\n        }\n      }\n\n      const onError = (error: unknown) => {\n        reject(error)\n      }\n\n      switch (type) {\n        case 'gltf':\n          this.gltfLoader.load(\n            url,\n            (gltf) => {\n              const scene = gltf.scene\n              this.positionAssetAtBottomCenter(scene)\n              resolve(scene)\n            },\n            onProgress,\n            onError\n          )\n          break\n\n        case 'fbx':\n          this.fbxLoader.load(\n            url,\n            (fbx) => {\n              this.positionAssetAtBottomCenter(fbx)\n              resolve(fbx)\n            },\n            onProgress,\n            onError\n          )\n          break\n\n        case 'obj':\n          this.objLoader.load(\n            url,\n            (obj) => {\n              this.positionAssetAtBottomCenter(obj)\n              resolve(obj)\n            },\n            onProgress,\n            onError\n          )\n          break\n\n        case 'usd':\n        case 'usdz':\n          this.usdLoader.load(\n            url,\n            (usd) => {\n              this.positionAssetAtBottomCenter(usd)\n              resolve(usd)\n            },\n            onProgress,\n            onError\n          )\n          break\n\n        default:\n          reject(new Error(`Unsupported asset type: ${type}`))\n      }\n    })\n  }\n\n  /**\n   * Get the placeholder object\n   */\n  getPlaceholder(): THREE.Object3D | null {\n    return this.placeholder\n  }\n\n  /**\n   * Get the loaded asset\n   */\n  getAsset(): THREE.Object3D | null {\n    return this.loadedAsset\n  }\n\n  /**\n   * Get the low-res asset\n   */\n  getLowResAsset(): THREE.Object3D | null {\n    return this.lowResAsset\n  }\n\n  /**\n   * Clear the cache\n   */\n  clearCache() {\n    this.cache.clear()\n  }\n\n  /**\n   * Remove an item from cache\n   */\n  removeFromCache(url: string) {\n    this.cache.delete(url)\n  }\n\n  /**\n   * Get cache size\n   */\n  getCacheSize(): number {\n    return this.cache.size\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/index.cjs

@@ -51,6 +51,7 @@ var THREE = __toESM(require("three"));
 var import_GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader.js");
 var import_FBXLoader = require("three/examples/jsm/loaders/FBXLoader.js");
 var import_OBJLoader = require("three/examples/jsm/loaders/OBJLoader.js");
+var import_USDLoader = require("three/examples/jsm/loaders/USDLoader.js");
 var AssetLoader = class extends THREE.EventDispatcher {
   constructor() {
     super();
@@ -63,6 +64,7 @@ var AssetLoader = class extends THREE.EventDispatcher {
     this.gltfLoader = new import_GLTFLoader.GLTFLoader();
     this.fbxLoader = new import_FBXLoader.FBXLoader();
     this.objLoader = new import_OBJLoader.OBJLoader();
+    this.usdLoader = new import_USDLoader.USDLoader();
   }
   /**
    * Create a placeholder cube with shader effect
@@ -80,7 +82,9 @@ var AssetLoader = class extends THREE.EventDispatcher {
         opacity: { value: opacity },
         fillProgress: { value: 0 },
         time: { value: 0 },
-        isError: { value: 0 }
+        isError: { value: 0 },
+        yMin: { value: -height / 2 },
+        yMax: { value: height / 2 }
       },
       vertexShader: `
         varying vec3 vPosition;
@@ -95,15 +99,17 @@ var AssetLoader = class extends THREE.EventDispatcher {
         uniform float fillProgress;
         uniform float time;
         uniform float isError;
+        uniform float yMin;
+        uniform float yMax;
         varying vec3 vPosition;
         
         void main() {
-          float normalizedY = (vPosition.y + 1.0) / 2.0; // Normalize from -1,1 to 0,1
+          float normalizedY = (vPosition.y - yMin) / (yMax - yMin); // Normalize based on actual geometry bounds
           float alpha = opacity;
           
           // Create fill-up effect
           if (normalizedY > fillProgress) {
-            alpha *= 0.3; // Reduce opacity for unfilled parts
+            alpha *= 0.1; // Reduce opacity for unfilled parts
           }
           
           // Error state effects
@@ -229,7 +235,7 @@ var AssetLoader = class extends THREE.EventDispatcher {
       lowResUrl,
       enableCaching = true,
       placeholderColor = 5227511,
-      placeholderOpacity = 0.8,
+      placeholderOpacity = 0.4,
       errorColor = 16729156,
       errorOpacity = 0.5
     } = options;
@@ -290,14 +296,17 @@ var AssetLoader = class extends THREE.EventDispatcher {
   loadModel(type, url, isLowRes) {
     return new Promise((resolve, reject) => {
       const onProgress = (event) => {
-        const percentage = event.loaded / event.total * 100;
+        let percentage = -1;
+        if (event.lengthComputable && event.total > 0 && event.loaded <= event.total) {
+          percentage = event.loaded / event.total * 100;
+        }
         this.dispatchEvent({
           type: "progress",
           loaded: event.loaded,
           total: event.total,
           percentage
         });
-        if (!isLowRes) {
+        if (!isLowRes && percentage >= 0) {
           this.updatePlaceholder(percentage / 100);
         }
       };
@@ -339,6 +348,18 @@ var AssetLoader = class extends THREE.EventDispatcher {
             onError
           );
           break;
+        case "usd":
+        case "usdz":
+          this.usdLoader.load(
+            url,
+            (usd) => {
+              this.positionAssetAtBottomCenter(usd);
+              resolve(usd);
+            },
+            onProgress,
+            onError
+          );
+          break;
         default:
           reject(new Error(`Unsupported asset type: ${type}`));
       }
@@ -448,6 +469,7 @@ var DualCameraControls = class extends import_camera_controls.default {
     const initialCamera = initialMode === "orthographic" ? orthographicCamera : perspectiveCamera;
     super(initialCamera, domElement);
     this.updateClock = new THREE2.Clock();
+    this.externalCamera = null;
     const initialTarget = toVector3(
       options.initialTarget,
       [0, 0, 0],
@@ -483,9 +505,10 @@ var DualCameraControls = class extends import_camera_controls.default {
    * Switch to the perspective camera while keeping the current framing.
    */
   switchToPerspective(enableTransition = false) {
-    if (this.activeMode === "perspective") {
+    if (this.activeMode === "perspective" && !this.externalCamera) {
       return;
     }
+    this.externalCamera = null;
     const target = this.getTarget(tempVec3A);
     const position = this.getPosition(tempVec3B);
     const aspect = resolveAspect(this.renderer, this.domElementRef);
@@ -517,9 +540,10 @@ var DualCameraControls = class extends import_camera_controls.default {
    * Switch to the orthographic camera while keeping the current framing.
    */
   switchToOrthographic(enableTransition = false) {
-    if (this.activeMode === "orthographic") {
+    if (this.activeMode === "orthographic" && !this.externalCamera) {
       return;
     }
+    this.externalCamera = null;
     const target = this.getTarget(tempVec3A);
     const position = this.getPosition(tempVec3B);
     const aspect = resolveAspect(this.renderer, this.domElementRef);
@@ -557,6 +581,92 @@ var DualCameraControls = class extends import_camera_controls.default {
       this.switchToPerspective(enableTransition);
     }
   }
+  /**
+   * Returns true if currently using an external camera.
+   */
+  get isUsingExternalCamera() {
+    return this.externalCamera !== null;
+  }
+  /**
+   * Sets an external camera to use with the controls.
+   * This allows using a camera created outside of DualCameraControls.
+   * Call `clearExternalCamera()` to return to the internal cameras.
+   */
+  setCamera(camera, target, enableTransition = false) {
+    const previousCamera = this.camera;
+    this.externalCamera = camera;
+    const aspect = resolveAspect(this.renderer, this.domElementRef);
+    if (camera.type === "PerspectiveCamera") {
+      ;
+      camera.aspect = aspect;
+      camera.updateProjectionMatrix();
+    } else if (camera.type === "OrthographicCamera") {
+      const ortho = camera;
+      const currentHeight = (ortho.top - ortho.bottom) * 0.5;
+      const newHalfWidth = currentHeight * aspect;
+      ortho.left = -newHalfWidth;
+      ortho.right = newHalfWidth;
+      ortho.updateProjectionMatrix();
+    }
+    this.camera = camera;
+    const mode = camera.type === "PerspectiveCamera" ? "perspective" : "orthographic";
+    this.activeMode = mode;
+    this.updateInputBindingsForMode(mode);
+    const targetVec = toVector3(target, [0, 0, 0], tempVec3A);
+    void this.setLookAt(
+      camera.position.x,
+      camera.position.y,
+      camera.position.z,
+      targetVec.x,
+      targetVec.y,
+      targetVec.z,
+      enableTransition
+    );
+    this.dispatchEvent({
+      type: "externalcamerachange",
+      camera,
+      previousCamera
+    });
+  }
+  /**
+   * Clears the external camera and returns to using the internal cameras.
+   * Will switch to the camera matching the current mode.
+   */
+  clearExternalCamera(enableTransition = false) {
+    if (!this.externalCamera) {
+      return;
+    }
+    const target = this.getTarget(tempVec3A);
+    const position = this.getPosition(tempVec3B);
+    this.externalCamera = null;
+    const internalCamera = this.activeMode === "orthographic" ? this.orthographicCamera : this.perspectiveCamera;
+    internalCamera.position.copy(position);
+    internalCamera.quaternion.copy(this.camera.quaternion);
+    internalCamera.up.copy(this.camera.up);
+    const aspect = resolveAspect(this.renderer, this.domElementRef);
+    if (this.activeMode === "orthographic") {
+      this.updateOrthographicFrustum(position, target, aspect);
+    } else {
+      this.perspectiveCamera.aspect = aspect;
+      this.perspectiveCamera.updateProjectionMatrix();
+    }
+    this.camera = internalCamera;
+    void this.setLookAt(
+      position.x,
+      position.y,
+      position.z,
+      target.x,
+      target.y,
+      target.z,
+      enableTransition
+    );
+    this.dispatchEvent({
+      type: "modechange",
+      mode: this.activeMode,
+      previousMode: this.activeMode,
+      camera: internalCamera
+    });
+  }
   /**
    * Update camera projection parameters when the viewport size changes.
    */