bucciafico-lib 1.0.7 → 1.0.8

package/src/plugins/EditorPlugin.js

@@ -39,6 +39,13 @@ export class EditorPlugin {
             }
         });
 
+        this.transformControl.addEventListener('change', () => {
+            if (this.transformControl.object) {
+                this.viewer.emit('transform:change', this.transformControl.object);
+            }
+        });
+
+
         this.viewer.overlayScene.add(this.transformControl);
     }
 
@@ -126,7 +133,10 @@ export class EditorPlugin {
 
         this.raycaster.setFromCamera(this.mouse, this.viewer.cameraManager.camera);
 
-        let objectsToCheck = [...this.viewer.skinModel.getGroup().children];
+        let objectsToCheck = [];
+
+        const playerGroup = this.viewer.skinModel.getGroup();
+        if (playerGroup) objectsToCheck.push(playerGroup);
 
         const itemsPlugin = this.viewer.getPlugin('ItemsPlugin');
         if (itemsPlugin) {
@@ -136,20 +146,27 @@ export class EditorPlugin {
         const intersects = this.raycaster.intersectObjects(objectsToCheck, true);
 
         if (intersects.length > 0) {
-            let target = intersects[0].object;
+            let hitObject = intersects[0].object;
+            let logicalTarget = hitObject;
 
-            const skinGroup = this.viewer.skinModel.getGroup();
-            let temp = target;
-            while(temp) {
-                if (temp.parent === skinGroup) {
-                    target = temp;
+            while (logicalTarget.parent) {
+                if (logicalTarget.parent === playerGroup) {
+                    break;
+                }
+                if (logicalTarget.parent.type === 'Scene') {
+                    break;
+                }
+                if (logicalTarget === playerGroup) {
                     break;
                 }
-                temp = temp.parent;
+
+                logicalTarget = logicalTarget.parent;
             }
 
-            if (this.transformControl.object !== target) {
-                this.selectObject(target);
+            if (!logicalTarget) logicalTarget = hitObject;
+
+            if (this.transformControl.object !== logicalTarget) {
+                this.selectObject(logicalTarget);
             }
         } else {
             this.deselect();
@@ -164,7 +181,7 @@ export class EditorPlugin {
         if (fx) fx.setSelected(obj);
 
         // Callback support (can be injected)
-        if (this.viewer.onSelectionChanged) this.viewer.onSelectionChanged(obj);
+        this.viewer.emit('selection:change', obj);
     }
 
     deselect() {
@@ -173,7 +190,7 @@ export class EditorPlugin {
         const fx = this.viewer.getPlugin('EffectsPlugin');
         if (fx) fx.setSelected(null);
 
-        if (this.viewer.onSelectionChanged) this.viewer.onSelectionChanged(null);
+        this.viewer.emit('selection:cleared');
     }
 
     /**
@@ -207,7 +224,21 @@ export class EditorPlugin {
     }
 
     dispose() {
-        this.viewer.renderer.domElement.removeEventListener('pointerdown', this.onPointerDown);
-        this.transformControl.dispose();
+        if (this.viewer.renderer.domElement) {
+            this.viewer.renderer.domElement.removeEventListener('pointerdown', this.onPointerDown);
+            this.viewer.renderer.domElement.removeEventListener('pointermove', this.onPointerMove);
+        }
+
+        if (this.transformControl) {
+            this.transformControl.detach();
+            this.transformControl.object = undefined;
+
+            if (this.transformControl.parent) {
+                this.transformControl.parent.remove(this.transformControl);
+            }
+
+            this.transformControl.dispose();
+            this.transformControl = null;
+        }
     }
 }

package/src/plugins/EffectsPlugin.js

@@ -8,7 +8,13 @@ import { PostProcessingManager } from '../managers/PostProcessingManager.js';
 export class EffectsPlugin {
     constructor() {
         this.name = 'EffectsPlugin';
-        this.isEnabled = false;
+        this.state = {
+            enabled: false,
+            strength: 0,
+            radius: 0,
+            height: 0.5,
+            thickness: 4
+        };
     }
 
     init(viewer) {
@@ -26,15 +32,36 @@ export class EffectsPlugin {
      * @param {Object} config - { enabled, strength, radius, height, thickness }
      */
     updateConfig(config) {
-        this.isEnabled = config.enabled;
+        this.state = { ...this.state, ...config };
+
+        this._applyToScene();
+    }
+
+    /**
+     * Re-applies the current internal state to the 3D model.
+     * Useful when the model has been rebuilt (skin change).
+     */
+    forceUpdate() {
+        this._applyToScene();
+    }
+
+    /**
+     * Internal method to push state to shaders and composer.
+     */
+    _applyToScene() {
+        const config = this.state;
         const skin = this.viewer.skinModel;
 
-        // Update Shader Materials
         skin.setGlowEffect(config.enabled);
-        if (config.thickness !== undefined) skin.updateBorderThickness(config.thickness);
-        if (config.height !== undefined) skin.updateGlowHeight(config.height);
 
-        // Update Composer Pass
+        skin.updateBorderThickness(config.thickness);
+        skin.updateGlowHeight(config.height);
+
+        const itemsPlugin = this.viewer.getPlugin('ItemsPlugin');
+        if (itemsPlugin) {
+            itemsPlugin.updateAllGlow(config);
+        }
+
         this.composer.setBloom(config.enabled, config.strength, config.radius, 0.85);
     }
 
@@ -58,13 +85,11 @@ export class EffectsPlugin {
         const items = itemsPlugin ? itemsPlugin.items : [];
 
         this.composer.renderSelective(
-            // 1. Prepare Bloom pass (Hide non-glowing elements)
             () => {
                 skin.darkenBody();
                 this.viewer.sceneSetup.setGridVisible(false);
                 items.forEach(i => i.material = skin.blackMaterial);
             },
-            // 2. Restore Scene for main pass
             () => {
                 skin.restoreBody();
                 this.viewer.sceneSetup.setGridVisible(this.viewer.config.showGrid);
@@ -75,6 +100,13 @@ export class EffectsPlugin {
         );
     }
 
+    /**
+     * Returns the current configuration state.
+     */
+    getConfig() {
+        return { ...this.state };
+    }
+
     /**
      * Generates a transparent PNG screenshot.
      * Temporarily resizes renderer if width/height are provided.
@@ -132,18 +164,11 @@ export class EffectsPlugin {
         return dataUrl;
     }
 
-    getConfig() {
-        const skin = this.viewer.skinModel;
-        const glowMesh = skin.glowMeshes[0];
-
-        return {
-            enabled: this.isEnabled,
-            strength: this.composer.bloomPass.strength,
-            radius: this.composer.bloomPass.radius,
-
-            height: glowMesh ? glowMesh.userData.glowMat.uniforms.gradientLimit.value : 0.5,
-            thickness: glowMesh ? glowMesh.userData.glowMat.uniforms.thickness.value / 0.05 : 4
-        };
+    dispose() {
+        if (this.composer) {
+            this.composer.dispose();
+            this.composer = null;
+        }
     }
 
 }

package/src/plugins/IOPlugin.js

@@ -20,11 +20,11 @@ export class IOPlugin {
      * @param {boolean} options.pose - Include character pose.
      * @param {boolean} options.items - Include items.
      */
-    exportState(options = { skin: true, camera: true, effects: true, pose: true, items: true }) {
+    exportState(options = { skin: true, camera: true, effects: true, pose: true, items: true, env: true }) {
         const state = {
             meta: {
                 generator: "Bucciafico Studio",
-                version: "1.0.7",
+                version: "1.0.8",
                 timestamp: Date.now()
             },
             core: {}
@@ -32,6 +32,7 @@ export class IOPlugin {
 
         if (options.skin) {
             state.core.skin = this.viewer.skinData || null;
+            state.core.cape = this.viewer.capeData || null;
         }
 
         // 2. Camera & Config
@@ -44,12 +45,17 @@ export class IOPlugin {
             };
         }
 
-        // 3. Pose
+        // 3. Environment
+        if (options.env) {
+            state.environment = this.viewer.sceneSetup.getLightConfig();
+        }
+
+        // 4. Pose
         if (options.pose) {
             state.pose = this.viewer.skinModel.getPose();
         }
 
-        // 4. Effects
+        // 5. Effects
         if (options.effects) {
             const effectsPlugin = this.viewer.getPlugin('EffectsPlugin');
             if (effectsPlugin) {
@@ -59,7 +65,7 @@ export class IOPlugin {
             }
         }
 
-        // 5. Items
+        // 6. Items
         if (options.items) {
             const itemsPlugin = this.viewer.getPlugin('ItemsPlugin');
             if (itemsPlugin && itemsPlugin.items.length > 0) {
@@ -67,6 +73,7 @@ export class IOPlugin {
                     name: item.name,
                     uuid: item.uuid,
                     sourceUrl: item.userData.sourceUrl || null,
+                    parentId: item.userData.parentId || null,
                     transform: {
                         pos: item.position.toArray(),
                         rot: item.rotation.toArray(),
@@ -103,27 +110,42 @@ export class IOPlugin {
             this.viewer.cameraManager.loadSettingsJSON(data.core.camera);
         }
 
-        // 3. Skin (Async)
+        // 3. Environment
+        if (data.environment) {
+            this.viewer.setEnvironment(data.environment);
+        }
+
+        const loadPromises = [];
+
+        // 4. Skin/Cape (Async)
         if (data.core?.skin) {
             const skinInfo = data.core.skin;
-            try {
-                if (skinInfo.type === 'username') {
-                    await this.viewer.loadSkinByUsername(skinInfo.value);
-                } else if (skinInfo.value) {
-                    await this.viewer.loadSkin(skinInfo.value);
-                }
-            } catch (e) {
-                console.warn("Failed to load skin from import:", e);
+            if (skinInfo.type === 'username') {
+                loadPromises.push(this.viewer.loadSkinByUsername(skinInfo.value));
+            } else if (skinInfo.value) {
+                loadPromises.push(this.viewer.loadSkin(skinInfo.value));
+            }
+        }
+
+        if (data.core?.cape) {
+            const capeInfo = data.core.cape;
+            if (capeInfo.type === 'username') {
+                loadPromises.push(this.viewer.loadCapeByUsername(capeInfo.value));
+            } else if (capeInfo.value) {
+                loadPromises.push(this.viewer.loadCape(capeInfo.value));
             }
+        } else {
+            // Jeśli w JSON nie ma peleryny, a w viewerze jest, to ją czyścimy
+            this.viewer.resetCape();
         }
 
-        // 4. Effects
+        // 5. Effects
         if (data.effects?.backlight) {
             const fx = this.viewer.getPlugin('EffectsPlugin');
             if (fx) fx.updateConfig(data.effects.backlight);
         }
 
-        // 5. Items (Async & Complex)
+        // 6. Items (Async & Complex)
         const itemsPlugin = this.viewer.getPlugin('ItemsPlugin');
         if (itemsPlugin) {
             [...itemsPlugin.items].forEach(item => itemsPlugin.removeItem(item));
@@ -134,6 +156,11 @@ export class IOPlugin {
 
                     try {
                         const mesh = await itemsPlugin.addItem(itemData.sourceUrl, itemData.name);
+
+                        if (itemData.parentId) {
+                            itemsPlugin.attachItem(mesh, itemData.parentId);
+                        }
+
                         // Apply Transform
                         if (itemData.transform) {
                             mesh.position.fromArray(itemData.transform.pos);
@@ -148,9 +175,11 @@ export class IOPlugin {
             }
         }
 
-        // 6. Pose
+        // 7. Pose
         if (data.pose) {
             this.viewer.setPose(data.pose);
         }
+
+        await Promise.all(loadPromises);
     }
 }

package/src/plugins/ItemsPlugin.js

@@ -1,4 +1,7 @@
+import * as THREE from 'three';
 import { ItemFactory } from '../objects/ItemFactory.js';
+import {disposeObjectTree} from "../utils/ThreeUtils.js";
+import {createGlowMaterial} from "../materials/GlowMaterial.js";
 
 /**
  * Plugin responsible for managing 3D Items (Swords, Blocks).
@@ -8,12 +11,68 @@ export class ItemsPlugin {
         this.name = 'ItemsPlugin';
         /** @type {Array<THREE.Mesh>} List of current items on scene */
         this.items = [];
+
+        this.LAYERS_COUNT = 20;
     }
 
     init(viewer) {
         this.viewer = viewer;
     }
 
+    attachItem(itemMesh, partName) {
+        const editor = this.viewer.getPlugin('EditorPlugin');
+        if (editor) editor.saveHistory();
+
+        const skinModel = this.viewer.skinModel;
+
+        if (!partName) {
+            this.viewer.scene.attach(itemMesh);
+            itemMesh.userData.parentId = null;
+        }
+
+        else if (skinModel.parts[partName]) {
+            const targetGroup = skinModel.parts[partName];
+            targetGroup.attach(itemMesh);
+            itemMesh.userData.parentId = partName;
+        }
+
+        if (this.viewer.emit) this.viewer.emit('transform:change', itemMesh);
+    }
+
+    _addGlowShells(mesh) {
+        mesh.geometry.computeBoundingBox();
+        const size = new THREE.Vector3();
+        mesh.geometry.boundingBox.getSize(size);
+        const itemHeight = size.y || 1;
+
+        const glowLayers = [];
+
+        const glowGroup = new THREE.Group();
+        glowGroup.name = "GlowShells";
+
+        const shellGeo = mesh.geometry.clone();
+
+        for (let i = 0; i < this.LAYERS_COUNT; i++) {
+            const glowMat = createGlowMaterial(itemHeight);
+
+            glowMat.uniforms.thickness.value = 0;
+            glowMat.uniforms.opacity.value = 0;
+
+            glowMat.polygonOffset = true;
+            glowMat.polygonOffsetFactor = i * 0.1;
+
+            const layerMesh = new THREE.Mesh(shellGeo, glowMat);
+            layerMesh.userData.isGlowLayer = true;
+            layerMesh.userData.glowMat = glowMat;
+
+            glowLayers.push(layerMesh);
+            glowGroup.add(layerMesh);
+        }
+
+        mesh.add(glowGroup);
+        mesh.userData.glowLayers = glowLayers;
+    }
+
     /**
      * Creates and adds an item to the scene.
      * @param {string} url - Texture URL.
@@ -26,11 +85,22 @@ export class ItemsPlugin {
         return ItemFactory.createFromURL(url, name).then(mesh => {
             mesh.position.set(8, 8, 8);
             mesh.userData.sourceUrl = url;
+
+            this._addGlowShells(mesh);
+
+            const fx = this.viewer.getPlugin('EffectsPlugin');
+            if (fx) {
+                const config = fx.getConfig();
+                this.updateItemGlow(mesh, config);
+            }
+
             this.viewer.scene.add(mesh);
             this.items.push(mesh);
 
-            // Auto-select if editor is present
             if (editor) editor.selectObject(mesh);
+
+            if (this.viewer.emit) this.viewer.emit('items:added', mesh);
+
             return mesh;
         });
     }
@@ -42,7 +112,44 @@ export class ItemsPlugin {
         this.viewer.scene.remove(mesh);
         this.items = this.items.filter(i => i !== mesh);
 
+        disposeObjectTree(mesh);
+
         if (editor) editor.deselect();
+
+        if (this.viewer.emit) this.viewer.emit('items:removed', mesh);
+    }
+
+    // --- EFFECTS ---
+
+    updateAllGlow(config) {
+        this.items.forEach(item => {
+            this.updateItemGlow(item, config);
+        });
+    }
+
+    updateItemGlow(item, config) {
+        if (!item.userData.glowLayers) return;
+
+        const maxThickness = (config.thickness || 4) * 0.05;
+        const heightLimit = config.height !== undefined ? config.height : 0.5;
+        const enabled = config.enabled;
+
+        item.userData.glowLayers.forEach((layer, i) => {
+            const mat = layer.userData.glowMat;
+            if (!mat) return;
+
+            const progress = (i + 1) / this.LAYERS_COUNT;
+            mat.uniforms.thickness.value = maxThickness * progress;
+
+            mat.uniforms.gradientLimit.value = heightLimit;
+
+            if (!enabled) {
+                mat.uniforms.opacity.value = 0.0;
+            } else {
+                const baseOpacity = 1.2 / this.LAYERS_COUNT;
+                mat.uniforms.opacity.value = baseOpacity;
+            }
+        });
     }
 
     // --- SNAPSHOT HELPERS ---
@@ -51,6 +158,7 @@ export class ItemsPlugin {
         return this.items.map(item => ({
             name: item.name,
             uuid: item.uuid,
+            parentId: item.userData.parentId || null,
             pos: item.position.toArray(),
             rot: item.rotation.toArray(),
             scale: item.scale.toArray()
@@ -59,13 +167,24 @@ export class ItemsPlugin {
 
     restoreSnapshot(itemsState) {
         itemsState.forEach(state => {
-            // Try to find the item by UUID first, then Name
             const item = this.items.find(i => i.uuid === state.uuid || i.name === state.name);
             if (item) {
+                if (state.parentId !== item.userData.parentId) {
+                    this.attachItem(item, state.parentId);
+                }
+
                 item.position.fromArray(state.pos);
                 item.rotation.fromArray(state.rot);
                 item.scale.fromArray(state.scale);
             }
         });
     }
+
+    dispose() {
+        this.items.forEach(mesh => {
+            this.viewer.scene.remove(mesh);
+            disposeObjectTree(mesh);
+        });
+        this.items = [];
+    }
 }

package/src/utils/SkinUtils.js

@@ -1,33 +1,33 @@
 /**
  * Calculates UV coordinates for standard Minecraft skin layout.
  */
-export function getUV(x, y, w, h) {
-    const imgW = 64;
-    const imgH = 64;
-    return { u0: x/imgW, u1: (x+w)/imgW, v0: (imgH-y-h)/imgH, v1: (imgH-y)/imgH };
+export function getUV(x, y, w, h, imgW = 64, imgH = 64) {
+    return {
+        u0: x / imgW,
+        u1: (x + w) / imgW,
+        v0: (imgH - y - h) / imgH,
+        v1: (imgH - y) / imgH
+    };
 }
 
 /**
  * Maps UV coordinates to a box geometry (Cube mapping).
+ * @param {THREE.BufferGeometry} geometry
+ * @param {number} x - Texture X
+ * @param {number} y - Texture Y
+ * @param {number} w - Width
+ * @param {number} h - Height
+ * @param {number} d - Depth
+ * @param {number} [imgW=64] - Texture Width
+ * @param {number} [imgH=64] - Texture Height
  */
-export function applySkinUVs(geometry, x, y, w, h, d) {
+export function applySkinUVs(geometry, x, y, w, h, d, imgW = 64, imgH = 64) {
     const uvAttr = geometry.attributes.uv;
 
-    /**
-     * Helper to map a single face.
-     * @param {number} idx - Face index (0-5).
-     * @param {number} uX - Texture X.
-     * @param {number} uY - Texture Y.
-     * @param {number} uW - Texture Width.
-     * @param {number} uH - Texture Height.
-     * @param {boolean} flipX - Mirror horizontally.
-     * @param {boolean} flipY - Mirror vertically.
-     */
     const map = (idx, uX, uY, uW, uH, flipX = false, flipY = false) => {
-        const uv = getUV(uX, uY, uW, uH);
+        const uv = getUV(uX, uY, uW, uH, imgW, imgH);
         const i = idx * 4;
 
-        // Handle flipping
         const u0 = flipX ? uv.u1 : uv.u0;
         const u1 = flipX ? uv.u0 : uv.u1;
         const v0 = flipY ? uv.v1 : uv.v0;

package/src/utils/ThreeUtils.js

@@ -0,0 +1,27 @@
+/**
+ * Recursively disposes of a Three.js object and its children.
+ * Frees memory for Geometries, Materials, and Textures.
+ * @param {THREE.Object3D} object - The object to clean up.
+ */
+export function disposeObjectTree(object) {
+    if (!object) return;
+
+    object.traverse((child) => {
+        if (child.geometry) {
+            child.geometry.dispose();
+        }
+
+        if (child.material) {
+            const materials = Array.isArray(child.material) ? child.material : [child.material];
+
+            materials.forEach((mat) => {
+                for (const key in mat) {
+                    if (mat[key] && mat[key].isTexture) {
+                        mat[key].dispose();
+                    }
+                }
+                mat.dispose();
+            });
+        }
+    });
+}