bucciafico-lib 1.0.6 → 1.0.8

package/src/objects/SkinModel.js

@@ -3,6 +3,7 @@ import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUti
 import { applySkinUVs } from '../utils/SkinUtils.js';
 import { createVoxelLayer } from '../utils/Voxelizer.js';
 import { createGlowMaterial } from '../materials/GlowMaterial.js';
+import {disposeObjectTree} from "../utils/ThreeUtils.js";
 
 /**
  * Represents the Minecraft Character Model (Steve/Alex).
@@ -16,6 +17,8 @@ export class SkinModel {
         this.bodyMeshes = [];
         this.defaultPositions = {};
         this.blackMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
+
+        this.LAYERS_COUNT = 20;
     }
 
     /**
@@ -59,15 +62,30 @@ export class SkinModel {
             this.bodyMeshes.push(voxelMesh);
         }
 
-        // 3. Glow Mesh (Copy of geometry for shader)
+        // 3. Glow Meshes (Multi-Layer Shells)
         const glowParts = [innerGeo.clone()];
         if (voxelGeo) glowParts.push(voxelGeo.clone());
-        const glowGeo = BufferGeometryUtils.mergeGeometries(glowParts, false);
-        const glowMat = createGlowMaterial(size.h);
-        const glowMesh = new THREE.Mesh(glowGeo, glowMat);
-        glowMesh.userData.glowMat = glowMat;
-        this.glowMeshes.push(glowMesh);
-        meshGroup.add(glowMesh);
+        const baseGlowGeo = BufferGeometryUtils.mergeGeometries(glowParts, false);
+
+        const partLayers = [];
+
+        for (let i = 0; i < this.LAYERS_COUNT; i++) {
+            const glowMat = createGlowMaterial(size.h);
+
+            glowMat.uniforms.thickness.value = 0;
+            glowMat.uniforms.opacity.value = 0;
+
+            const layerMesh = new THREE.Mesh(baseGlowGeo, glowMat);
+
+            layerMesh.userData.layerIndex = i;
+            layerMesh.userData.isGlow = true;
+            layerMesh.userData.glowMat = glowMat;
+
+            meshGroup.add(layerMesh);
+            partLayers.push(layerMesh);
+        }
+
+        this.glowMeshes.push(partLayers);
 
         pivotGroup.add(meshGroup);
         return pivotGroup;
@@ -79,7 +97,24 @@ export class SkinModel {
      * @param {boolean} isSlim - True for Alex model (3px arms), False for Steve (4px arms).
      */
     build(texture, isSlim = false) {
-        this.playerGroup.clear();
+        let capeBackup = null;
+        if (this.parts.cape) {
+            const mesh = this.parts.cape.children.find(c => c.isMesh);
+            if (mesh && mesh.material.map) {
+                capeBackup = {
+                    texture: mesh.material.map,
+                    position: this.parts.cape.position.clone(),
+                    rotation: this.parts.cape.rotation.clone(),
+                    scale: this.parts.cape.scale.clone()
+                };
+            }
+        }
+
+        if (this.playerGroup.children.length > 0) {
+            disposeObjectTree(this.playerGroup);
+            this.playerGroup.clear();
+        }
+
         this.parts = {};
         this.glowMeshes = [];
         this.bodyMeshes = [];
@@ -102,13 +137,132 @@ export class SkinModel {
             this.parts[name] = part;
             this.playerGroup.add(part);
         }
+
+        if (capeBackup) {
+            this.setCape(capeBackup.texture);
+
+            if (this.parts.cape) {
+                this.parts.cape.position.copy(capeBackup.position);
+                this.parts.cape.rotation.copy(capeBackup.rotation);
+                this.parts.cape.scale.copy(capeBackup.scale);
+            }
+        }
+    }
+
+    /**
+     * Adds or updates the Cape mesh.
+     * @param {THREE.Texture} texture
+     */
+    setCape(texture) {
+        if (this.parts.cape) {
+            if (this.parts.cape.userData.glowLayers) {
+                const layersToRemove = this.parts.cape.userData.glowLayers;
+                this.glowMeshes = this.glowMeshes.filter(layers => layers !== layersToRemove);
+            }
+
+            this.playerGroup.remove(this.parts.cape);
+            disposeObjectTree(this.parts.cape);
+            delete this.parts.cape;
+        }
+
+        if (!texture) return;
+
+        const size = { w: 10, h: 16, d: 1 };
+        const pivotPos = new THREE.Vector3(0, 0, -3);
+        const meshOffset = new THREE.Vector3(0, -8, 0.6);
+
+        const pivotGroup = new THREE.Group();
+        pivotGroup.position.copy(pivotPos);
+        pivotGroup.name = 'cape';
+        pivotGroup.rotation.x = 0.2;
+
+        this.defaultPositions['cape'] = pivotPos.clone();
+
+        const geo = new THREE.BoxGeometry(size.w, size.h, size.d);
+        applySkinUVs(geo, 0, 0, 10, 16, 1, 64, 32);
+
+        const mat = new THREE.MeshStandardMaterial({
+            map: texture,
+            side: THREE.DoubleSide,
+            transparent: true,
+            alphaTest: 0.5
+        });
+
+        const mainMesh = new THREE.Mesh(geo, mat);
+        mainMesh.position.copy(meshOffset);
+        mainMesh.rotation.y = Math.PI;
+        mainMesh.userData.originalMat = mat;
+
+        pivotGroup.add(mainMesh);
+        this.bodyMeshes.push(mainMesh);
+
+        const capeLayers = [];
+        const shellGeo = geo.clone();
+
+        for (let i = 0; i < this.LAYERS_COUNT; i++) {
+            const glowMat = createGlowMaterial(size.h);
+
+            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.position.copy(meshOffset);
+            layerMesh.rotation.y = Math.PI;
+
+            layerMesh.userData.layerIndex = i;
+            layerMesh.userData.isGlow = true;
+            layerMesh.userData.glowMat = glowMat;
+
+            pivotGroup.add(layerMesh);
+            capeLayers.push(layerMesh);
+        }
+
+        this.glowMeshes.push(capeLayers);
+        pivotGroup.userData.glowLayers = capeLayers;
+
+        this.playerGroup.add(pivotGroup);
+        this.parts['cape'] = pivotGroup;
     }
 
     getGroup() { return this.playerGroup; }
 
-    updateBorderThickness(v) { const t = v * 0.05; this.glowMeshes.forEach(m => m.userData.glowMat.uniforms.thickness.value = t); }
-    updateGlowHeight(p) { this.glowMeshes.forEach(m => m.userData.glowMat.uniforms.gradientLimit.value = p); }
-    setGlowEffect(en) { this.glowMeshes.forEach(m => m.userData.glowMat.uniforms.opacity.value = en ? 1.0 : 0.0); }
+    /**
+     * Updates thickness creating a solid volume effect.
+     * @param {number} v - Base thickness value.
+     */
+    updateBorderThickness(v) {
+        const maxThickness = v * 0.05;
+
+        this.glowMeshes.forEach(layers => {
+            layers.forEach((mesh, i) => {
+                const progress = (i + 1) / this.LAYERS_COUNT;
+
+                mesh.userData.glowMat.uniforms.thickness.value = maxThickness * progress;
+            });
+        });
+    }
+
+    updateGlowHeight(p) {
+        this.glowMeshes.forEach(layers => {
+            layers.forEach(m => m.userData.glowMat.uniforms.gradientLimit.value = p);
+        });
+    }
+
+    setGlowEffect(en) {
+        this.glowMeshes.forEach(layers => {
+            layers.forEach((mesh, i) => {
+                if (!en) {
+                    mesh.userData.glowMat.uniforms.opacity.value = 0.0;
+                } else {
+                    mesh.userData.glowMat.uniforms.opacity.value = 1.0 / (this.LAYERS_COUNT * 0.6);
+                }
+            });
+        });
+    }
+
     darkenBody() { this.bodyMeshes.forEach(m => m.material = this.blackMaterial); }
     restoreBody() { this.bodyMeshes.forEach(m => m.material = m.userData.originalMat); }
 
@@ -117,8 +271,22 @@ export class SkinModel {
             part.rotation.set(0,0,0);
             if (this.defaultPositions[name]) part.position.copy(this.defaultPositions[name]);
         }
+
+        this.playerGroup.position.set(0, 0, 0);
+        this.playerGroup.rotation.set(0, 0, 0);
+        this.playerGroup.scale.set(1, 1, 1);
+
         if (!pose) return;
+
+        if (pose.root) {
+            if (pose.root.pos) this.playerGroup.position.fromArray(pose.root.pos);
+            if (pose.root.rot) this.playerGroup.rotation.fromArray(pose.root.rot);
+            if (pose.root.scl) this.playerGroup.scale.fromArray(pose.root.scl);
+        }
+
         for (const [name, data] of Object.entries(pose)) {
+            if (name === 'root') continue;
+
             if (this.parts[name]) {
                 if(data.rot) this.parts[name].rotation.set(...data.rot);
                 if(data.pos) this.parts[name].position.set(...data.pos);
@@ -129,9 +297,34 @@ export class SkinModel {
     getPose() {
         const pose = {};
         const f = (n) => parseFloat(n.toFixed(3));
+
         for (const [name, part] of Object.entries(this.parts)) {
-            pose[name] = { rot: [f(part.rotation.x), f(part.rotation.y), f(part.rotation.z)], pos: [f(part.position.x), f(part.position.y), f(part.position.z)] };
+            pose[name] = {
+                rot: [f(part.rotation.x), f(part.rotation.y), f(part.rotation.z)],
+                pos: [f(part.position.x), f(part.position.y), f(part.position.z)]
+            };
         }
+
+        pose.root = {
+            pos: [f(this.playerGroup.position.x), f(this.playerGroup.position.y), f(this.playerGroup.position.z)],
+            rot: [f(this.playerGroup.rotation.x), f(this.playerGroup.rotation.y), f(this.playerGroup.rotation.z)],
+            scl: [f(this.playerGroup.scale.x), f(this.playerGroup.scale.y), f(this.playerGroup.scale.z)]
+        };
+
         return pose;
     }
+
+    dispose() {
+        if (this.playerGroup) {
+            if (this.playerGroup.parent) {
+                this.playerGroup.parent.remove(this.playerGroup);
+            }
+            disposeObjectTree(this.playerGroup);
+        }
+
+        this.parts = {};
+        this.glowMeshes = [];
+        this.bodyMeshes = [];
+        this.playerGroup = null;
+    }
 }

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-BETA",
+                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);
     }
 }