bucciafico-lib 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bucciafico-lib",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Modular 3D rendering engine for Minecraft skins based on Three.js",
   "type": "module",
   "main": "./index.js",

package/src/core/SkinViewer.js

@@ -3,6 +3,8 @@ import { CameraManager } from '../managers/CameraManager.js';
 import { SceneSetup } from '../objects/SceneSetup.js';
 import { SkinModel } from '../objects/SkinModel.js';
 import { detectSlimSkin } from '../utils/SkinUtils.js';
+import {disposeObjectTree} from "../utils/ThreeUtils.js";
+import {EventManager} from "../managers/EventManager.js";
 
 /**
  * Core 3D Viewer class.
@@ -30,6 +32,9 @@ export class SkinViewer {
             ...config
         };
 
+        this.skinData = null;
+        this.capeData = null;
+
         /** @type {Map<string, Object>} Registered plugins. */
         this.plugins = new Map();
 
@@ -39,6 +44,12 @@ export class SkinViewer {
         this.isVisible = true;
         this.needsRender = true;
 
+        this.events = new EventManager();
+
+        this.on = this.events.on.bind(this.events);
+        this.off = this.events.off.bind(this.events);
+        this.emit = this.events.emit.bind(this.events);
+
         // --- 1. RENDERER SETUP ---
         this.renderer = new THREE.WebGLRenderer({
             antialias: true,
@@ -88,6 +99,7 @@ export class SkinViewer {
 
         // --- 3. START LOOP ---
         this.animate = this.animate.bind(this);
+        this.emit('viewer:ready', this);
         this.animate();
     }
 
@@ -130,8 +142,13 @@ export class SkinViewer {
      * @returns {Promise<boolean>} isSlim
      */
     loadSkin(imageUrl) {
+        this.emit('skin:loading', imageUrl);
+
         return new Promise((resolve, reject) => {
-            new THREE.TextureLoader().load(imageUrl, (texture) => {
+            const loader = new THREE.TextureLoader();
+            loader.setCrossOrigin('anonymous');
+
+            loader.load(imageUrl, (texture) => {
                 texture.magFilter = THREE.NearestFilter;
                 texture.colorSpace = THREE.SRGBColorSpace;
 
@@ -145,9 +162,20 @@ export class SkinViewer {
                 this.skinModel.setPose(currentPose);
                 this.skinData = { type: 'url', value: imageUrl };
 
+                const fxPlugin = this.getPlugin('EffectsPlugin');
+                if (fxPlugin) {
+                    fxPlugin.forceUpdate();
+                }
+
                 this.requestRender();
+
+                this.emit('skin:loaded', { isSlim, texture });
+
                 resolve(isSlim);
-            }, undefined, reject);
+            }, undefined, (err) => {
+                this.emit('skin:error', err);
+                reject(err);
+            });
         });
     }
 
@@ -161,6 +189,96 @@ export class SkinViewer {
         });
     }
 
+    /**
+     * Loads a cape from URL.
+     * @param {string} imageUrl
+     */
+    loadCape(imageUrl) {
+        return new Promise((resolve, reject) => {
+            const loader = new THREE.TextureLoader();
+            loader.setCrossOrigin('anonymous');
+
+            loader.load(
+                imageUrl,
+                (texture) => {
+                    texture.magFilter = THREE.NearestFilter;
+                    texture.colorSpace = THREE.SRGBColorSpace;
+
+                    texture.needsUpdate = true;
+
+                    this.skinModel.setCape(texture);
+
+                    const fxPlugin = this.getPlugin('EffectsPlugin');
+                    if (fxPlugin) {
+                        fxPlugin.forceUpdate();
+                    }
+
+                    this.capeData = { type: 'url', value: imageUrl };
+
+                    this.requestRender();
+                    this.emit('cape:loaded', imageUrl);
+                    resolve();
+                },
+                undefined,
+                (err) => {
+                    console.error("Error loading cape texture:", err);
+                    reject(err);
+                }
+            );
+        });
+    }
+
+
+    /**
+     * Loads a cape by username using capes.dev API.
+     * Supports Official, Optifine, LabyMod, etc.
+     * @param {string} username
+     */
+    async loadCapeByUsername(username) {
+        this.emit('cape:loading', username);
+
+        try {
+            const response = await fetch(`https://api.capes.dev/load/${username}`);
+
+            if (!response.ok) {
+                throw new Error(`User not found in capes.dev (Status: ${response.status})`);
+            }
+
+            const data = await response.json();
+            let capeUrl = null;
+
+            if (data.minecraft?.exists && data.minecraft?.imageUrl) {
+                capeUrl = data.minecraft.imageUrl;
+            } else if (data.optifine?.exists && data.optifine?.imageUrl) {
+                capeUrl = data.optifine.imageUrl;
+            } else if (data.labymod?.exists && data.labymod?.imageUrl) {
+                capeUrl = data.labymod.imageUrl;
+            } else if (data.tlauncher?.exists && data.tlauncher?.imageUrl) {
+                capeUrl = data.tlauncher.imageUrl;
+            }
+
+            if (capeUrl) {
+                await this.loadCape(capeUrl);
+                this.capeData = { type: 'username', value: username };
+                return true;
+            } else {
+                this.resetCape();
+                return false;
+            }
+
+        } catch (e) {
+            this.emit('cape:error', e);
+            return false;
+        }
+    }
+
+    resetCape() {
+        this.skinModel.setCape(null);
+        this.capeData = null;
+        this.requestRender();
+        this.emit('cape:removed');
+    }
+
     setPose(poseData) {
         // Record history if Editor is present
         const editor = this.getPlugin('EditorPlugin');
@@ -170,6 +288,15 @@ export class SkinViewer {
         this.requestRender();
     }
 
+    /**
+     * Updates lighting intensity.
+     * @param {Object} config - { global, main, fill }
+     */
+    setEnvironment(config) {
+        this.sceneSetup.setLightConfig(config);
+        this.requestRender();
+    }
+
     /**
      * Handles window resize. Should be called by the implementation layer.
      */
@@ -215,19 +342,37 @@ export class SkinViewer {
     }
 
     dispose() {
+        this.emit('viewer:dispose');
         this.isDisposed = true;
         this.observer.disconnect();
 
-        if (this.container && this.renderer.domElement) {
-            this.container.removeChild(this.renderer.domElement);
-        }
-
-        this.renderer.dispose();
-
-        // Dispose all plugins
         this.plugins.forEach(p => {
             if (p.dispose) p.dispose();
         });
         this.plugins.clear();
+
+        if (this.skinModel) {
+            this.skinModel.dispose();
+        }
+
+        disposeObjectTree(this.scene);
+        disposeObjectTree(this.overlayScene);
+
+        if (this.cameraManager) {
+            this.cameraManager.controls.dispose();
+        }
+
+        if (this.renderer) {
+            this.renderer.dispose();
+            this.renderer.forceContextLoss();
+
+            if (this.container && this.renderer.domElement) {
+                this.container.removeChild(this.renderer.domElement);
+            }
+            this.renderer.domElement = null;
+            this.renderer = null;
+        }
+
+        this.events.dispose();
     }
 }

package/src/managers/EventManager.js

@@ -0,0 +1,74 @@
+/**
+ * Custom Event Emitter implementation.
+ * Handles Pub/Sub architecture to decouple Core from Plugins and UI.
+ */
+export class EventManager {
+    constructor() {
+        /** @type {Map<string, Set<Function>>} */
+        this.listeners = new Map();
+    }
+
+    /**
+     * Subscribe to an event.
+     * @param {string} event - Event name (e.g. 'skin:loaded').
+     * @param {Function} callback - Function to execute.
+     * @returns {Function} Unsubscribe function for convenience.
+     */
+    on(event, callback) {
+        if (!this.listeners.has(event)) {
+            this.listeners.set(event, new Set());
+        }
+        this.listeners.get(event).add(callback);
+
+        // Return unsubscribe function pattern
+        return () => this.off(event, callback);
+    }
+
+    /**
+     * Unsubscribe from an event.
+     * @param {string} event
+     * @param {Function} callback
+     */
+    off(event, callback) {
+        if (this.listeners.has(event)) {
+            this.listeners.get(event).delete(callback);
+        }
+    }
+
+    /**
+     * Subscribe to an event only once.
+     * @param {string} event
+     * @param {Function} callback
+     */
+    once(event, callback) {
+        const wrapper = (...args) => {
+            callback(...args);
+            this.off(event, wrapper);
+        };
+        this.on(event, wrapper);
+    }
+
+    /**
+     * Emit an event with optional data.
+     * @param {string} event
+     * @param {*} [data]
+     */
+    emit(event, data) {
+        if (this.listeners.has(event)) {
+            this.listeners.get(event).forEach(cb => {
+                try {
+                    cb(data);
+                } catch (e) {
+                    console.error(`Error in listener for event "${event}":`, e);
+                }
+            });
+        }
+    }
+
+    /**
+     * Clears all listeners. Used for disposal.
+     */
+    dispose() {
+        this.listeners.clear();
+    }
+}

package/src/managers/PostProcessingManager.js

@@ -12,10 +12,18 @@ import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
 export class PostProcessingManager {
     constructor(renderer, scene, camera, width, height) {
         this.scene = scene;
+        this.renderer = renderer;
+
+        this.INTERNAL_HEIGHT = 1080;
+
+        const ratio = width / height;
+        const virtualW = this.INTERNAL_HEIGHT * ratio;
+        const virtualH = this.INTERNAL_HEIGHT;
 
         // 1. BLOOM COMPOSER (Renders glow map)
         this.bloomComposer = new EffectComposer(renderer);
         this.bloomComposer.renderToScreen = false;
+        this.bloomComposer.setSize(virtualW, virtualH);
         this.bloomComposer.addPass(new RenderPass(scene, camera));
 
         this.bloomPass = new UnrealBloomPass(new THREE.Vector2(width, height), 1.5, 0.4, 0.85);
@@ -23,6 +31,7 @@ export class PostProcessingManager {
 
         // 2. FINAL COMPOSER
         this.finalComposer = new EffectComposer(renderer);
+        this.finalComposer.setSize(width, height);
         this.finalComposer.addPass(new RenderPass(scene, camera));
 
         // 3. OUTLINE PASS (Selection highlight)
@@ -82,9 +91,14 @@ export class PostProcessingManager {
     }
 
     resize(width, height) {
-        this.bloomComposer.setSize(width, height);
+        const ratio = width / height;
+
+        const virtualH = this.INTERNAL_HEIGHT;
+        const virtualW = virtualH * ratio;
+
+        this.bloomComposer.setSize(virtualW, virtualH);
         this.finalComposer.setSize(width, height);
-        this.bloomPass.resolution.set(width, height);
+        this.bloomPass.resolution.set(virtualW, virtualH);
         this.outlinePass.setSize(width, height);
     }
 
@@ -117,4 +131,28 @@ export class PostProcessingManager {
         this.bloomPass.radius = Number(rad);
         this.bloomPass.threshold = Number(thr);
     }
+
+    dispose() {
+        if (this.bloomComposer) {
+            this.bloomComposer.renderTarget1.dispose();
+            this.bloomComposer.renderTarget2.dispose();
+        }
+
+        if (this.finalComposer) {
+            this.finalComposer.renderTarget1.dispose();
+            this.finalComposer.renderTarget2.dispose();
+        }
+
+        if (this.bloomPass) {
+            this.bloomPass.dispose();
+        }
+
+        if (this.outlinePass) {
+            this.outlinePass.dispose();
+        }
+
+        if (this.mixPass && this.mixPass.material) {
+            this.mixPass.material.dispose();
+        }
+    }
 }

package/src/objects/SceneSetup.js

@@ -7,19 +7,32 @@ export class SceneSetup {
     constructor(scene) {
         this.scene = scene;
         this.gridHelper = null;
+
+        this.ambientLight = null;
+        this.hemiLight = null;
+        this.dirLightMain = null;
+        this.dirLightFill = null;
+
         this.initLights();
         this.initHelpers();
     }
 
     initLights() {
-        this.scene.add(new THREE.AmbientLight(0xffffff, 0.8));
-        this.scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 0.5));
-        const dl = new THREE.DirectionalLight(0xffffff, 0.8);
-        dl.position.set(10, 20, 10);
-        this.scene.add(dl);
-        const fl = new THREE.DirectionalLight(0xffffff, 0.4);
-        fl.position.set(0, 0, 20);
-        this.scene.add(fl);
+        // 1. Global Illumination
+        this.ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
+        this.scene.add(this.ambientLight);
+
+        this.hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.5);
+        this.scene.add(this.hemiLight);
+
+        // 2. Directional Lights (Shadows & Definition)
+        this.dirLightMain = new THREE.DirectionalLight(0xffffff, 0.8);
+        this.dirLightMain.position.set(10, 20, 10);
+        this.scene.add(this.dirLightMain);
+
+        this.dirLightFill = new THREE.DirectionalLight(0xffffff, 0.4);
+        this.dirLightFill.position.set(0, 0, 20);
+        this.scene.add(this.dirLightFill);
     }
 
     initHelpers() {
@@ -29,4 +42,32 @@ export class SceneSetup {
     }
 
     setGridVisible(vis) { if(this.gridHelper) this.gridHelper.visible = vis; }
+
+    /**
+     * Updates the intensity of scene lights.
+     * @param {Object} config
+     * @param {number} [config.global] - Intensity of Ambient/Hemi lights (0.0 - 2.0)
+     * @param {number} [config.main] - Intensity of Main Directional Light (0.0 - 2.0)
+     * @param {number} [config.fill] - Intensity of Fill Light (0.0 - 2.0)
+     */
+    setLightConfig(config) {
+        if (config.global !== undefined) {
+            this.ambientLight.intensity = config.global;
+            this.hemiLight.intensity = config.global * 0.6;
+        }
+        if (config.main !== undefined) {
+            this.dirLightMain.intensity = config.main;
+        }
+        if (config.fill !== undefined) {
+            this.dirLightFill.intensity = config.fill;
+        }
+    }
+
+    getLightConfig() {
+        return {
+            global: this.ambientLight.intensity,
+            main: this.dirLightMain.intensity,
+            fill: this.dirLightFill.intensity
+        };
+    }
 }