bucciafico-lib 1.0.6 → 1.0.8

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();
+            });
+        }
+    });
+}

package/src/utils/Voxelizer.js

@@ -1,58 +1,164 @@
 import * as THREE from 'three';
-import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+
+let cachedCanvas = null;
+let cachedCtx = null;
+
+function getImageData(image) {
+    if (!cachedCanvas) {
+        cachedCanvas = document.createElement('canvas');
+        cachedCanvas.width = 64;
+        cachedCanvas.height = 64;
+        cachedCtx = cachedCanvas.getContext('2d', { willReadFrequently: true });
+    }
+
+    cachedCtx.clearRect(0, 0, 64, 64);
+    cachedCtx.drawImage(image, 0, 0);
+    return cachedCtx.getImageData(0, 0, 64, 64).data;
+}
+
+const CUBE = {
+    vertices: [
+        // Right
+        0.5, -0.5, 0.5,   0.5, -0.5, -0.5,   0.5, 0.5, -0.5,   0.5, 0.5, 0.5,
+        // Left
+        -0.5, -0.5, 0.5,  -0.5, 0.5, 0.5,   -0.5, 0.5, -0.5,  -0.5, -0.5, -0.5,
+        // Top
+        -0.5, 0.5, 0.5,   0.5, 0.5, 0.5,    0.5, 0.5, -0.5,   -0.5, 0.5, -0.5,
+        // Bottom
+        -0.5, -0.5, 0.5,  -0.5, -0.5, -0.5,  0.5, -0.5, -0.5,  0.5, -0.5, 0.5,
+        // Front
+        -0.5, -0.5, 0.5,  0.5, -0.5, 0.5,    0.5, 0.5, 0.5,   -0.5, 0.5, 0.5,
+        // Back
+        -0.5, -0.5, -0.5, -0.5, 0.5, -0.5,   0.5, 0.5, -0.5,   0.5, -0.5, -0.5
+    ],
+    normals: [
+        // Right
+        1, 0, 0,  1, 0, 0,  1, 0, 0,  1, 0, 0,
+        // Left
+        -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0,
+        // Top
+        0, 1, 0,  0, 1, 0,  0, 1, 0,  0, 1, 0,
+        // Bottom
+        0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0,
+        // Front
+        0, 0, 1,  0, 0, 1,  0, 0, 1,  0, 0, 1,
+        // Back
+        0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1
+    ],
+    indices: [
+        0, 1, 2,      0, 2, 3,    // Right
+        4, 5, 6,      4, 6, 7,    // Left
+        8, 9, 10,     8, 10, 11,  // Top
+        12, 13, 14,   12, 14, 15, // Bottom
+        16, 17, 18,   16, 18, 19, // Front
+        20, 21, 22,   20, 22, 23  // Back
+    ]
+};
 
 /**
  * Converts the 2nd layer of a skin (Hat, Jacket) into 3D Voxels.
- * This gives the skin actual depth instead of flat planes.
+ * Optimized version: Direct buffer manipulation instead of object merging.
+ *
  * @param {THREE.Texture} texture
  * @param {Object} layerDef - Definition of UVs and dimensions.
  * @returns {THREE.BufferGeometry|null} Merged geometry of all voxels.
  */
 export function createVoxelLayer(texture, layerDef) {
-    const canvas = document.createElement('canvas');
-    canvas.width = 64; canvas.height = 64;
-    const ctx = canvas.getContext('2d');
-    ctx.drawImage(texture.image, 0, 0);
-    const imgData = ctx.getImageData(0, 0, 64, 64).data;
-
-    const geometries = [];
+    const imgData = getImageData(texture.image);
     const { outer } = layerDef.uv;
     const { w, h, d } = layerDef.size;
 
-    // Mapping faces of the body part to UV coordinates
+    const positions = [];
+    const normals = [];
+    const uvs = [];
+    const indices = [];
+
+    let vertexOffset = 0;
+
+    const addVoxel = (cx, cy, cz, sx, sy, sz, u, v) => {
+        const uCoord = (u + 0.5) / 64;
+        const vCoord = 1.0 - (v + 0.5) / 64;
+
+        for (let i = 0; i < 24; i++) {
+            const vx = CUBE.vertices[i * 3] * sx + cx;
+            const vy = CUBE.vertices[i * 3 + 1] * sy + cy;
+            const vz = CUBE.vertices[i * 3 + 2] * sz + cz;
+
+            positions.push(vx, vy, vz);
+            normals.push(CUBE.normals[i * 3], CUBE.normals[i * 3 + 1], CUBE.normals[i * 3 + 2]);
+            uvs.push(uCoord, vCoord);
+        }
+
+        for (let i = 0; i < CUBE.indices.length; i++) {
+            indices.push(CUBE.indices[i] + vertexOffset);
+        }
+        vertexOffset += 24;
+    };
+
     const faces = [
-        { u: outer.x+d, v: outer.y+d, w: w, h: h, pos: (i,j) => new THREE.Vector3(i-w/2+0.5, j-h/2+0.5, d/2+0.25) },
-        { u: outer.x+d+w+d, v: outer.y+d, w: w, h: h, pos: (i,j) => new THREE.Vector3(-(i-w/2+0.5), j-h/2+0.5, -d/2-0.25) },
-        { u: outer.x, v: outer.y+d, w: d, h: h, pos: (i,j) => new THREE.Vector3(-w/2-0.25, j-h/2+0.5, i-d/2+0.5), sx: 0.5 },
-        { u: outer.x+d+w, v: outer.y+d, w: d, h: h, pos: (i,j) => new THREE.Vector3(w/2+0.25, j-h/2+0.5, -(i-d/2+0.5)), sx: 0.5 },
-        { u: outer.x+d, v: outer.y, w: w, h: d, pos: (i,j) => new THREE.Vector3(i-w/2+0.5, h/2+0.25, -(j-d/2+0.5)), sy: 0.5 },
-        { u: outer.x+d+w, v: outer.y, w: w, h: d, pos: (i,j) => new THREE.Vector3(i-w/2+0.5, -h/2-0.25, (d - 1 - j) - d/2 + 0.5), sy: 0.5 }
+        // Face 0: Front (Z+)
+        {
+            u: outer.x + d, v: outer.y + d, width: w, height: h,
+            pos: (i, j) => ({ x: i - w/2 + 0.5, y: j - h/2 + 0.5, z: d/2 + 0.25 }),
+            scale: { z: 0.5 }
+        },
+        // Face 1: Back (Z-)
+        {
+            u: outer.x + d + w + d, v: outer.y + d, width: w, height: h,
+            pos: (i, j) => ({ x: -(i - w/2 + 0.5), y: j - h/2 + 0.5, z: -d/2 - 0.25 }),
+            scale: { z: 0.5 }
+        },
+        // Face 2: Right UV / Left 3D (X-)
+        {
+            u: outer.x, v: outer.y + d, width: d, height: h,
+            pos: (i, j) => ({ x: -w/2 - 0.25, y: j - h/2 + 0.5, z: i - d/2 + 0.5 }),
+            scale: { x: 0.5 }
+        },
+        // Face 3: Left UV / Right 3D (X+)
+        {
+            u: outer.x + d + w, v: outer.y + d, width: d, height: h,
+            pos: (i, j) => ({ x: w/2 + 0.25, y: j - h/2 + 0.5, z: -(i - d/2 + 0.5) }),
+            scale: { x: 0.5 }
+        },
+        // Face 4: Top (Y+)
+        {
+            u: outer.x + d, v: outer.y, width: w, height: d,
+            pos: (i, j) => ({ x: i - w/2 + 0.5, y: h/2 + 0.25, z: -(j - d/2 + 0.5) }),
+            scale: { y: 0.5 }
+        },
+        // Face 5: Bottom (Y-)
+        {
+            u: outer.x + d + w, v: outer.y, width: w, height: d,
+            pos: (i, j) => ({ x: i - w/2 + 0.5, y: -h/2 - 0.25, z: (d - 1 - j) - d/2 + 0.5 }),
+            scale: { y: 0.5 }
+        }
     ];
 
-    const baseGeo = new THREE.BoxGeometry(1, 1, 1);
-
     faces.forEach(f => {
-        for(let i=0; i<f.w; i++) {
-            for(let j=0; j<f.h; j++) {
+        for (let i = 0; i < f.width; i++) {
+            for (let j = 0; j < f.height; j++) {
                 const u = f.u + i;
                 const v = f.v + j;
 
-                if(imgData[(v*64+u)*4+3] > 0) {
-                    const geo = baseGeo.clone();
-
-                    const uvAttr = geo.attributes.uv;
-                    for(let k=0; k<uvAttr.count; k++) uvAttr.setXY(k, (u+0.5)/64, 1.0-(v+0.5)/64);
-
-                    const m = new THREE.Matrix4();
-                    const scale = new THREE.Vector3(f.sx||1, f.sy||1, f.sz||1);
-                    if(f === faces[0] || f === faces[1]) scale.z = 0.5;
-                    m.compose(f.pos(i, (f.h-1)-j), new THREE.Quaternion(), scale);
-                    geo.applyMatrix4(m);
-                    geometries.push(geo);
+                const alphaIndex = (v * 64 + u) * 4 + 3;
+                if (imgData[alphaIndex] > 0) {
+                    const pos = f.pos(i, (f.height - 1) - j);
+                    const sx = f.scale?.x ?? 1;
+                    const sy = f.scale?.y ?? 1;
+                    const sz = f.scale?.z ?? 1;
+                    addVoxel(pos.x, pos.y, pos.z, sx, sy, sz, u, v);
                 }
             }
         }
     });
 
-    return geometries.length > 0 ? BufferGeometryUtils.mergeGeometries(geometries) : null;
+    if (positions.length === 0) return null;
+
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+    geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
+    geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
+    geometry.setIndex(indices);
+
+    return geometry;
 }