@littlecarlito/blorktools 0.50.4 → 0.51.0

package/src/asset_debugger/util/scene/background-manager.js

@@ -0,0 +1,284 @@
+/**
+ * Background Image Utilities
+ * 
+ * Handles loading and setting up background images for the Asset Debugger
+ */
+
+import * as THREE from 'three';
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
+import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js';
+import { getState, updateState } from '../state/scene-state.js';
+
+// Track loaded textures to avoid duplicates
+const textureCache = new Map();
+
+/**
+ * Sets up a background image in the scene
+ * @param {File} backgroundFile - The background image file (HDR, EXR, JPEG, PNG, WebP, or TIFF)
+ * @returns {Promise<THREE.Texture|null>} - Resolves with the texture when the background is set up
+ */
+export function setupBackgroundImage(backgroundFile) {
+    return new Promise((resolve, reject) => {
+        if (!backgroundFile) {
+            console.warn('No background file provided');
+            resolve(null);
+            return;
+        }
+
+        const state = getState();
+        const scene = state.scene;
+
+        if (!scene) {
+            console.error('Scene not available for background setup');
+            reject(new Error('Scene not available'));
+            return;
+        }
+
+        // Check if we've already loaded this texture
+        const cachedTexture = textureCache.get(backgroundFile.name);
+        if (cachedTexture) {
+            applyBackgroundTexture(cachedTexture, backgroundFile);
+            resolve(cachedTexture);
+            return;
+        }
+
+        // Choose the appropriate loader based on file extension
+        const fileExtension = backgroundFile.name.split('.').pop().toLowerCase();
+        
+        try {
+            if (fileExtension === 'hdr') {
+                loadHDRBackground(backgroundFile, resolve, reject);
+            } else if (fileExtension === 'exr') {
+                loadEXRBackground(backgroundFile, resolve, reject);
+            } else if (['jpg', 'jpeg', 'png', 'webp', 'tiff'].includes(fileExtension)) {
+                loadStandardBackground(backgroundFile, resolve, reject);
+            } else {
+                console.error('Unsupported background image format:', fileExtension);
+                reject(new Error(`Unsupported background image format: ${fileExtension}`));
+            }
+        } catch (error) {
+            console.error('Error setting up background:', error);
+            reject(error);
+        }
+    });
+}
+
+/**
+ * Loads an HDR file as background
+ * @param {File} file - The HDR file
+ * @param {Function} resolve - Promise resolve function
+ * @param {Function} reject - Promise reject function
+ */
+function loadHDRBackground(file, resolve, reject) {
+    const reader = new FileReader();
+    reader.onload = function(event) {
+        const loader = new RGBELoader();
+        loader.load(
+            event.target.result,
+            (texture) => {
+                texture.mapping = THREE.EquirectangularReflectionMapping;
+                applyBackgroundTexture(texture, file);
+                textureCache.set(file.name, texture);
+                resolve(texture);
+            },
+            undefined,
+            (error) => {
+                console.error('Error loading HDR background:', error);
+                reject(error);
+            }
+        );
+    };
+    reader.onerror = function(event) {
+        console.error('Error reading file:', event);
+        reject(new Error('Error reading file'));
+    };
+    reader.readAsDataURL(file);
+}
+
+/**
+ * Loads an EXR file as background
+ * @param {File} file - The EXR file
+ * @param {Function} resolve - Promise resolve function
+ * @param {Function} reject - Promise reject function
+ */
+function loadEXRBackground(file, resolve, reject) {
+    const reader = new FileReader();
+    reader.onload = function(event) {
+        const loader = new EXRLoader();
+        loader.load(
+            event.target.result,
+            (texture) => {
+                texture.mapping = THREE.EquirectangularReflectionMapping;
+                applyBackgroundTexture(texture, file);
+                textureCache.set(file.name, texture);
+                resolve(texture);
+            },
+            undefined,
+            (error) => {
+                console.error('Error loading EXR background:', error);
+                reject(error);
+            }
+        );
+    };
+    reader.onerror = function(event) {
+        console.error('Error reading file:', event);
+        reject(new Error('Error reading file'));
+    };
+    reader.readAsDataURL(file);
+}
+
+/**
+ * Loads a standard image format (JPEG, PNG, WebP, TIFF) as background
+ * @param {File} file - The image file
+ * @param {Function} resolve - Promise resolve function
+ * @param {Function} reject - Promise reject function
+ */
+function loadStandardBackground(file, resolve, reject) {
+    const reader = new FileReader();
+    reader.onload = function(event) {
+        const loader = new THREE.TextureLoader();
+        loader.load(
+            event.target.result,
+            (texture) => {
+                // For standard images, we'll now use equirectangular mapping
+                // to create a 360° background, just like HDR/EXR files
+                texture.mapping = THREE.EquirectangularReflectionMapping;
+                
+                // Apply the texture to the background
+                applyBackgroundTexture(texture, file);
+                textureCache.set(file.name, texture);
+                resolve(texture);
+            },
+            undefined,
+            (error) => {
+                console.error('Error loading standard background:', error);
+                reject(error);
+            }
+        );
+    };
+    reader.onerror = function(event) {
+        console.error('Error reading file:', event);
+        reject(new Error('Error reading file'));
+    };
+    reader.readAsDataURL(file);
+}
+
+/**
+ * Applies the background texture to the scene
+ * @param {THREE.Texture} texture - The texture to apply as background
+ * @param {File} file - The original file
+ */
+function applyBackgroundTexture(texture, file) {
+    const state = getState();
+    
+    if (!state.scene) {
+        console.error('Scene not available for background texture application');
+        return;
+    }
+    
+    console.debug('Adding background texture to state');
+    
+    // Store the file and texture in state for reference
+    updateState({
+        backgroundFile: file,
+        backgroundTexture: texture
+    });
+    
+    // DO NOT automatically set the scene background
+    // This allows the UI radio button selection to control visibility instead
+    
+    // Dispatch an event to notify UI components
+    const event = new CustomEvent('background-updated', { 
+        detail: { texture, file }
+    });
+    document.dispatchEvent(event);
+    
+    // Call into world panel to update metadata, but don't change the radio selection
+    import('../../panels/world-panel/world-panel.js').then(worldPanelModule => {
+        if (worldPanelModule.updateBackgroundInfo) {
+            // Get metadata to display in the UI
+            const metadata = {
+                fileName: file.name,
+                type: file.type || file.name.split('.').pop().toUpperCase(),
+                dimensions: { 
+                    width: texture.image?.width || 0, 
+                    height: texture.image?.height || 0 
+                },
+                fileSizeBytes: file.size
+            };
+            
+            // Update the background info panel with this data
+            worldPanelModule.updateBackgroundInfo(metadata, false);
+            
+            // Make sure the "None" radio is still selected
+            const noneRadio = document.querySelector('input[name="bg-option"][value="none"]');
+            if (noneRadio) {
+                noneRadio.checked = true;
+                
+                // If there's a current option in world panel, also update it
+                if (typeof worldPanelModule.setCurrentBackgroundOption === 'function') {
+                    worldPanelModule.setCurrentBackgroundOption('none');
+                }
+            }
+        }
+    }).catch(error => {
+        console.warn('Could not update world panel with background info:', error);
+    });
+    
+    console.debug('Background texture added to state successfully');
+}
+
+/**
+ * Toggles the visibility of the background image 
+ * @param {boolean} visible - Whether the background should be visible
+ */
+export function toggleBackgroundVisibility(visible) {
+    const state = getState();
+    
+    if (!state.scene) {
+        console.error('Scene not available for background visibility toggle');
+        return;
+    }
+    
+    // Get the current background texture from state
+    const backgroundTexture = state.backgroundTexture;
+    const scene = state.scene;
+    
+    if (visible) {
+        // Show the background - apply the texture if available
+        if (backgroundTexture) {
+            console.debug('Showing background texture');
+            
+            // For all textures, set the scene background directly
+            scene.background = backgroundTexture;
+            console.debug('Restored background texture');
+            
+            // Dispatch event to notify UI components
+            const event = new CustomEvent('background-visibility-changed', { 
+                detail: { visible: true, texture: backgroundTexture } 
+            });
+            document.dispatchEvent(event);
+        } else if (state.backgroundFile) {
+            // If we have a background file but no texture, try to load it
+            console.debug('No texture but have file, reloading background:', 
+                state.backgroundFile.name);
+            setupBackgroundImage(state.backgroundFile);
+        }
+    } else {
+        // Hide the background
+        
+        // Save and hide any background
+        if (scene.background) {
+            if (!scene.userData) scene.userData = {};
+            scene.userData.savedBackground = scene.background;
+            scene.background = null;
+            console.debug('Background hidden');
+        }
+        
+        // Dispatch event to notify UI components
+        const event = new CustomEvent('background-visibility-changed', { 
+            detail: { visible: false } 
+        });
+        document.dispatchEvent(event);
+    }
+} 

package/src/asset_debugger/util/scene/camera-controller.js

@@ -0,0 +1,243 @@
+/**
+ * Asset Debugger - Camera Controls Module
+ * 
+ * This module handles camera controls for the Asset Debugger.
+ * It provides functions to initialize, configure, and check the status of camera controls.
+ * This is the single source of truth for OrbitControls in the application.
+ */
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { getState, updateState } from '../state/scene-state';
+
+// Store a reference to the controls instance
+let controlsInstance = null;
+let previousState = { target: new THREE.Vector3(), position: new THREE.Vector3() };
+let isInitialized = false;
+
+/**
+ * Initialize camera controls
+ * @param {THREE.Camera} camera - The camera to control
+ * @param {HTMLElement} domElement - The DOM element for control events
+ * @returns {OrbitControls} The initialized controls
+ */
+export function initControls(camera, domElement) {
+    console.log('Controls: initControls called');
+    
+    // Prevent multiple initializations - but only if we actually have a valid instance
+    if (isInitialized && controlsInstance && !controlsInstance._disposed) {
+        console.warn('Controls already initialized, returning existing instance');
+        return controlsInstance;
+    }
+    
+    // Reset flags in case of stale state
+    isInitialized = false;
+    controlsInstance = null;
+    
+    if (!camera) {
+        throw new Error('Camera is required to initialize controls');
+    }
+    
+    if (!domElement) {
+        throw new Error('DOM element is required to initialize controls');
+    }
+
+    // TODO If works refactor to function
+    // Prevent standard right click behavior
+    let controlsActive = false;
+    let isDragging = false;
+    // Set state when orbit controls are engaged
+    document.addEventListener('mousedown', function(e) {
+        if (e.button === 2) { // Right mouse button
+            controlsActive = true;
+            isDragging = true;
+        }
+    });
+    document.addEventListener('mouseup', function(e) {
+        if (e.button === 2) {
+            isDragging = false;
+            // Keep controlsActive true briefly to prevent context menu
+            setTimeout(() => controlsActive = false, 50);
+        }
+    });
+    document.addEventListener('contextmenu', function(e) {
+        if (controlsActive || isDragging) {
+            e.preventDefault();
+            return false;
+        }
+    });
+
+    
+    const controls = new OrbitControls(camera, domElement);
+    
+    // Configure controls
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    controls.screenSpacePanning = true;
+    controls.minDistance = 0.5;
+    controls.maxDistance = 50;
+    controls.maxPolarAngle = Math.PI;
+    
+    // Track mouse state to prevent inertia interruption
+    let isMouseDown = false;
+    
+    // Store the previous camera state on mouse down
+    domElement.addEventListener('mousedown', () => {
+        isMouseDown = true;
+        previousState.target.copy(controls.target);
+        previousState.position.copy(camera.position);
+    });
+    
+    // Handle movement continuation on mouse up
+    domElement.addEventListener('mouseup', () => {
+        isMouseDown = false;
+    });
+    
+    // Store controls in local reference first
+    controlsInstance = controls;
+    isInitialized = true;
+    
+    // Store in state
+    console.log('Controls: Storing controls in state');
+    updateState('controls', controls);
+    
+    console.log('Controls initialized successfully');
+    return controls;
+}
+
+/**
+ * Get the OrbitControls instance
+ * This allows other modules to access the controls without importing OrbitControls directly
+ * @returns {OrbitControls|null} The controls instance or null if not initialized
+ */
+export function getControls() {
+    return controlsInstance;
+}
+
+/**
+ * Create controls for the scene
+ * Function signature matches what's used in scene.js
+ * @param {THREE.Camera} camera - The camera to control
+ * @param {HTMLElement} domElement - The DOM element for control events
+ * @returns {OrbitControls} The initialized controls
+ */
+export function createControls(camera, domElement) {
+    console.log('Controls: createControls called');
+    return initControls(camera, domElement);
+}
+
+/**
+ * Check if controls are initialized and ready
+ * @returns {boolean} True if controls are ready, false otherwise
+ */
+export function areControlsReady() {
+    return isInitialized && !!controlsInstance;
+}
+
+/**
+ * Reset controls to default position
+ */
+export function resetControls() {
+    const controls = getControls();
+    if (!controls) {
+        console.warn('Cannot reset controls: not initialized');
+        return;
+    }
+    
+    controls.reset();
+}
+
+/**
+ * Force recreation of controls - use when controls are not working properly
+ * @param {THREE.Camera} camera - The camera to control
+ * @param {HTMLElement} domElement - The DOM element for control events
+ * @returns {OrbitControls} The new controls instance
+ */
+export function recreateControls(camera, domElement) {
+    console.log('Controls: Forcibly recreating controls');
+    
+    // Clean up existing controls
+    disposeControls();
+    
+    // Reset flags
+    isInitialized = false;
+    controlsInstance = null;
+    
+    // Create new controls
+    return initControls(camera, domElement);
+}
+
+/**
+ * Dispose controls properly to prevent memory leaks
+ */
+export function disposeControls() {
+    const controls = getControls();
+    if (!controls) {
+        return;
+    }
+    
+    console.log('Controls: Disposing controls');
+    
+    // Remove from state
+    updateState('controls', null);
+    
+    // Dispose and remove the controls
+    controls.dispose();
+    controlsInstance = null;
+    isInitialized = false;
+}
+
+/**
+ * Update control settings
+ * @param {Object} settings - Control settings to update
+ */
+export function updateControlSettings(settings = {}) {
+    const controls = getControls();
+    if (!controls) {
+        console.warn('Cannot update control settings: not initialized');
+        return;
+    }
+    
+    // Apply settings if provided
+    if (settings.enableDamping !== undefined) controls.enableDamping = settings.enableDamping;
+    if (settings.dampingFactor !== undefined) controls.dampingFactor = settings.dampingFactor;
+    if (settings.enableZoom !== undefined) controls.enableZoom = settings.enableZoom;
+    if (settings.enableRotate !== undefined) controls.enableRotate = settings.enableRotate;
+    if (settings.enablePan !== undefined) controls.enablePan = settings.enablePan;
+    if (settings.minDistance !== undefined) controls.minDistance = settings.minDistance;
+    if (settings.maxDistance !== undefined) controls.maxDistance = settings.maxDistance;
+}
+
+/**
+ * Update the controls in the animation loop
+ * Allows animation code to just call this instead of checking for controls
+ */
+export function updateControls() {
+    const controls = getControls();
+    if (!controls) {
+        return;
+    }
+    
+    // Always update controls if they exist, no need for extra checks
+    // This ensures smooth camera movement regardless of interaction state
+    controls.update();
+}
+
+/**
+ * Set the target for the controls
+ * @param {THREE.Vector3} position - The target position
+ */
+export function setControlsTarget(position) {
+    const controls = getControls();
+    if (!controls) {
+        console.warn('Cannot set controls target: not initialized');
+        return;
+    }
+    
+    if (!position) {
+        console.warn('Cannot set controls target: position is required');
+        return;
+    }
+    
+    controls.target.copy(position);
+    controls.update();
+}