bucciafico-lib 1.0.4-BETA

package/src/objects/ItemFactory.js

@@ -0,0 +1,83 @@
+import * as THREE from 'three';
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+
+/**
+ * Static factory to generate 3D extruded meshes from 2D item textures.
+ */
+export class ItemFactory {
+    /**
+     * Loads a texture and creates an extruded mesh.
+     * @param {string} url - Image URL.
+     * @param {string} name - Item name.
+     * @returns {Promise<THREE.Mesh>}
+     */
+    static createFromURL(url, name) {
+        return new Promise((resolve, reject) => {
+            new THREE.TextureLoader().load(url, (texture) => {
+                texture.magFilter = THREE.NearestFilter;
+                texture.minFilter = THREE.NearestFilter;
+                texture.colorSpace = THREE.SRGBColorSpace;
+                const mesh = this.generateMesh(texture);
+                if(mesh) {
+                    mesh.name = name;
+                    resolve(mesh);
+                } else {
+                    reject("Error generating geometry");
+                }
+            }, undefined, reject);
+        });
+    }
+
+    /**
+     * Generates geometry by iterating over pixels and creating voxels for non-transparent ones.
+     */
+    static generateMesh(texture) {
+        const img = texture.image;
+        const canvas = document.createElement('canvas');
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0);
+
+        const data = ctx.getImageData(0, 0, img.width, img.height).data;
+        const geometries = [];
+        const baseGeo = new THREE.BoxGeometry(1, 1, 1);
+
+        for (let y = 0; y < img.height; y++) {
+            for (let x = 0; x < img.width; x++) {
+                // Check Alpha > 10
+                if (data[(y * img.width + x) * 4 + 3] > 10) {
+                    const geo = baseGeo.clone();
+                    const matrix = new THREE.Matrix4().makeTranslation((x - img.width/2), ((img.height-1-y) - img.height/2), 0);
+                    geo.applyMatrix4(matrix);
+
+                    // Map UVs for this single voxel
+                    const uvAttr = geo.attributes.uv;
+                    for(let i=0; i<uvAttr.count; i++) {
+                        uvAttr.setXY(i, (x+0.5)/img.width, 1.0-(y+0.5)/img.height);
+                    }
+                    geometries.push(geo);
+                }
+            }
+        }
+
+        if (geometries.length === 0) return null;
+
+        const merged = BufferGeometryUtils.mergeGeometries(geometries);
+        merged.center();
+
+        const mat = new THREE.MeshStandardMaterial({
+            map: texture,
+            side: THREE.DoubleSide
+        });
+
+        const mesh = new THREE.Mesh(merged, mat);
+
+        // Scale to match Minecraft pixel density roughly
+        const scale = 16 / Math.max(img.width, img.height);
+        mesh.scale.set(scale, scale, scale);
+
+        mesh.userData.originalMat = mat;
+        return mesh;
+    }
+}

package/src/objects/SceneSetup.js

@@ -0,0 +1,32 @@
+import * as THREE from 'three';
+
+/**
+ * Initializes basic scene elements: Lights and Grid.
+ */
+export class SceneSetup {
+    constructor(scene) {
+        this.scene = scene;
+        this.gridHelper = 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);
+    }
+
+    initHelpers() {
+        this.gridHelper = new THREE.GridHelper(2000, 125, 0x8b5cf6, 0x222222);
+        this.gridHelper.position.y = -24;
+        this.scene.add(this.gridHelper);
+    }
+
+    setGridVisible(vis) { if(this.gridHelper) this.gridHelper.visible = vis; }
+}

package/src/objects/SkinModel.js

@@ -0,0 +1,137 @@
+import * as THREE from 'three';
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+import { applySkinUVs } from '../utils/SkinUtils.js';
+import { createVoxelLayer } from '../utils/Voxelizer.js';
+import { createGlowMaterial } from '../materials/GlowMaterial.js';
+
+/**
+ * Represents the Minecraft Character Model (Steve/Alex).
+ * Handles geometry generation, UV mapping, and hierarchy.
+ */
+export class SkinModel {
+    constructor() {
+        this.playerGroup = new THREE.Group();
+        this.parts = {};
+        this.glowMeshes = [];
+        this.bodyMeshes = [];
+        this.defaultPositions = {};
+        this.blackMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
+    }
+
+    /**
+     * Creates a single body part (e.g., Head, Arm).
+     * Adds Inner layer (Box), Outer layer (Voxels), and Glow mesh.
+     */
+    createBodyPart(texture, coords, size, pivotPos, meshOffset, name) {
+        const pivotGroup = new THREE.Group();
+        pivotGroup.position.copy(pivotPos);
+        pivotGroup.name = name;
+        this.defaultPositions[name] = pivotPos.clone();
+
+        const meshGroup = new THREE.Group();
+        meshGroup.position.copy(meshOffset);
+
+        // 1. Inner Layer (Standard Box)
+        const innerGeo = new THREE.BoxGeometry(size.w, size.h, size.d);
+        applySkinUVs(innerGeo, coords.inner.x, coords.inner.y, size.w, size.h, size.d);
+        const innerMat = new THREE.MeshStandardMaterial({
+            map: texture,
+            transparent: false, // Opaque for correct depth sorting
+            alphaTest: 0.5
+        });
+        const innerMesh = new THREE.Mesh(innerGeo, innerMat);
+        innerMesh.userData.originalMat = innerMat;
+        meshGroup.add(innerMesh);
+        this.bodyMeshes.push(innerMesh);
+
+        // 2. Outer Layer (Voxelized 2nd Layer)
+        const voxelGeo = createVoxelLayer(texture, { uv: coords, size: size });
+        if (voxelGeo) {
+            const outerMat = new THREE.MeshStandardMaterial({
+                map: texture,
+                transparent: false,
+                alphaTest: 0.5,
+                side: THREE.FrontSide
+            });
+            const voxelMesh = new THREE.Mesh(voxelGeo, outerMat);
+            voxelMesh.userData.originalMat = outerMat;
+            meshGroup.add(voxelMesh);
+            this.bodyMeshes.push(voxelMesh);
+        }
+
+        // 3. Glow Mesh (Copy of geometry for shader)
+        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);
+
+        pivotGroup.add(meshGroup);
+        return pivotGroup;
+    }
+
+    /**
+     * Builds the entire character model from a texture.
+     * @param {THREE.Texture} texture
+     * @param {boolean} isSlim - True for Alex model (3px arms), False for Steve (4px arms).
+     */
+    build(texture, isSlim = false) {
+        this.playerGroup.clear();
+        this.parts = {};
+        this.glowMeshes = [];
+        this.bodyMeshes = [];
+        this.defaultPositions = {};
+
+        const armW = isSlim ? 3 : 4;
+        const armOff = isSlim ? 5.0 : 6.0;
+
+        const defs = {
+            head: { uv: { inner: {x:0, y:0}, outer: {x:32, y:0} }, size: { w:8, h:8, d:8 }, pivotPos: new THREE.Vector3(0, 0, 0), meshOffset: new THREE.Vector3(0, 4, 0) },
+            body: { uv: { inner: {x:16, y:16}, outer: {x:16, y:32} }, size: { w:8, h:12, d:4 }, pivotPos: new THREE.Vector3(0, 0, 0), meshOffset: new THREE.Vector3(0, -6, 0) },
+            rightArm: { uv: { inner: {x:40, y:16}, outer: {x:40, y:32} }, size: { w:armW, h:12, d:4 }, pivotPos: new THREE.Vector3(-armOff, -2, 0), meshOffset: new THREE.Vector3(0, -4, 0) },
+            leftArm: { uv: { inner: {x:32, y:48}, outer: {x:48, y:48} }, size: { w:armW, h:12, d:4 }, pivotPos: new THREE.Vector3(armOff, -2, 0), meshOffset: new THREE.Vector3(0, -4, 0) },
+            rightLeg: { uv: { inner: {x:0, y:16}, outer: {x:0, y:32} }, size: { w:4, h:12, d:4 }, pivotPos: new THREE.Vector3(-1.9, -12, 0), meshOffset: new THREE.Vector3(0, -6, 0) },
+            leftLeg: { uv: { inner: {x:16, y:48}, outer: {x:0, y:48} }, size: { w:4, h:12, d:4 }, pivotPos: new THREE.Vector3(1.9, -12, 0), meshOffset: new THREE.Vector3(0, -6, 0) }
+        };
+
+        for (const [name, def] of Object.entries(defs)) {
+            const part = this.createBodyPart(texture, def.uv, def.size, def.pivotPos, def.meshOffset, name);
+            this.parts[name] = part;
+            this.playerGroup.add(part);
+        }
+    }
+
+    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); }
+    darkenBody() { this.bodyMeshes.forEach(m => m.material = this.blackMaterial); }
+    restoreBody() { this.bodyMeshes.forEach(m => m.material = m.userData.originalMat); }
+
+    setPose(pose) {
+        for (const [name, part] of Object.entries(this.parts)) {
+            part.rotation.set(0,0,0);
+            if (this.defaultPositions[name]) part.position.copy(this.defaultPositions[name]);
+        }
+        if (!pose) return;
+        for (const [name, data] of Object.entries(pose)) {
+            if (this.parts[name]) {
+                if(data.rot) this.parts[name].rotation.set(...data.rot);
+                if(data.pos) this.parts[name].position.set(...data.pos);
+            }
+        }
+    }
+
+    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)] };
+        }
+        return pose;
+    }
+}

package/src/plugins/EditorPlugin.js

@@ -0,0 +1,213 @@
+import * as THREE from 'three';
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
+import { HistoryManager } from '../managers/HistoryManager.js';
+
+/**
+ * Plugin responsible for User Interaction.
+ * Handles: Transform Gizmos, Raycasting (Selecting objects), History (Undo/Redo).
+ */
+export class EditorPlugin {
+    constructor() {
+        this.name = 'EditorPlugin';
+        this.hoveredObject = null;
+    }
+
+    /**
+     * Called by SkinViewer when plugin is added.
+     * @param {SkinViewer} viewer
+     */
+    init(viewer) {
+        this.viewer = viewer;
+        this.history = new HistoryManager((state) => this.restoreState(state));
+
+        this.raycaster = new THREE.Raycaster();
+        this.mouse = new THREE.Vector2();
+
+        this.setupGizmo();
+        this.bindEvents();
+    }
+
+    setupGizmo() {
+        this.transformControl = new TransformControls(this.viewer.cameraManager.camera, this.viewer.renderer.domElement);
+        this.transformControl.setMode('rotate');
+
+        // Handle History recording on drag start
+        this.transformControl.addEventListener('dragging-changed', (event) => {
+            this.viewer.cameraManager.setEnabled(!event.value);
+            if (event.value === true) {
+                this.saveHistory();
+            }
+        });
+
+        this.viewer.overlayScene.add(this.transformControl);
+    }
+
+    bindEvents() {
+        this.onPointerDown = (e) => this.handleClick(e);
+        this.onPointerMove = (e) => this.handleHover(e);
+
+        const canvas = this.viewer.renderer.domElement;
+        canvas.addEventListener('pointerdown', this.onPointerDown);
+        canvas.addEventListener('pointermove', this.onPointerMove);
+    }
+
+    getIntersects(event) {
+        const rect = this.viewer.renderer.domElement.getBoundingClientRect();
+        this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+        this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+        this.raycaster.setFromCamera(this.mouse, this.viewer.cameraManager.camera);
+
+        let objectsToCheck = [];
+
+        this.viewer.skinModel.getGroup().traverse((child) => {
+            if (child.isMesh && child.material.visible) {
+                if (child.material.side !== THREE.BackSide) {
+                    objectsToCheck.push(child);
+                }
+            }
+        });
+
+        const itemsPlugin = this.viewer.getPlugin('ItemsPlugin');
+        if (itemsPlugin) {
+            objectsToCheck = [...objectsToCheck, ...itemsPlugin.items];
+        }
+
+        return this.raycaster.intersectObjects(objectsToCheck, false);
+    }
+
+    handleHover(event) {
+        if (this.transformControl.dragging) return;
+
+        const intersects = this.getIntersects(event);
+
+        if (intersects.length > 0) {
+            const target = intersects[0].object;
+
+            if (this.hoveredObject !== target) {
+                this.unhighlightObject();
+                this.highlightObject(target);
+            }
+
+            this.viewer.renderer.domElement.style.cursor = 'pointer';
+        } else {
+            this.unhighlightObject();
+            this.viewer.renderer.domElement.style.cursor = 'default';
+        }
+    }
+
+    highlightObject(obj) {
+        this.hoveredObject = obj;
+
+        if (obj.material && obj.material.emissive) {
+            if (!obj.userData.originalHex) {
+                obj.userData.originalHex = obj.material.emissive.getHex();
+            }
+            obj.material.emissive.setHex(0x444444);
+        }
+    }
+
+    unhighlightObject() {
+        if (this.hoveredObject) {
+            const obj = this.hoveredObject;
+            if (obj.material && obj.material.emissive && obj.userData.originalHex !== undefined) {
+                obj.material.emissive.setHex(obj.userData.originalHex);
+            }
+            this.hoveredObject = null;
+        }
+    }
+
+    handleClick(event) {
+        if (this.transformControl.dragging) return;
+
+        const rect = this.viewer.renderer.domElement.getBoundingClientRect();
+        this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+        this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+        this.raycaster.setFromCamera(this.mouse, this.viewer.cameraManager.camera);
+
+        let objectsToCheck = [...this.viewer.skinModel.getGroup().children];
+
+        const itemsPlugin = this.viewer.getPlugin('ItemsPlugin');
+        if (itemsPlugin) {
+            objectsToCheck = [...objectsToCheck, ...itemsPlugin.items];
+        }
+
+        const intersects = this.raycaster.intersectObjects(objectsToCheck, true);
+
+        if (intersects.length > 0) {
+            let target = intersects[0].object;
+
+            const skinGroup = this.viewer.skinModel.getGroup();
+            let temp = target;
+            while(temp) {
+                if (temp.parent === skinGroup) {
+                    target = temp;
+                    break;
+                }
+                temp = temp.parent;
+            }
+
+            if (this.transformControl.object !== target) {
+                this.selectObject(target);
+            }
+        } else {
+            this.deselect();
+        }
+    }
+
+    selectObject(obj) {
+        this.transformControl.attach(obj);
+
+        // Notify EffectsPlugin to draw outline
+        const fx = this.viewer.getPlugin('EffectsPlugin');
+        if (fx) fx.setSelected(obj);
+
+        // Callback support (can be injected)
+        if (this.viewer.onSelectionChanged) this.viewer.onSelectionChanged(obj);
+    }
+
+    deselect() {
+        this.transformControl.detach();
+
+        const fx = this.viewer.getPlugin('EffectsPlugin');
+        if (fx) fx.setSelected(null);
+
+        if (this.viewer.onSelectionChanged) this.viewer.onSelectionChanged(null);
+    }
+
+    /**
+     * Sets gizmo mode.
+     * @param {'translate'|'rotate'|'scale'} mode
+     */
+    setTransformMode(mode) {
+        this.transformControl.setMode(mode);
+    }
+
+    // --- HISTORY API ---
+
+    getSnapshot() {
+        const pose = this.viewer.skinModel.getPose();
+        const itemsPlugin = this.viewer.getPlugin('ItemsPlugin');
+        const itemsState = itemsPlugin ? itemsPlugin.getSnapshot() : [];
+        return { pose, items: itemsState };
+    }
+
+    saveHistory() { this.history.pushState(this.getSnapshot()); }
+    undo() { this.history.undo(this.getSnapshot()); }
+    redo() { this.history.redo(this.getSnapshot()); }
+
+    restoreState(state) {
+        if (state.pose) this.viewer.skinModel.setPose(state.pose);
+
+        const itemsPlugin = this.viewer.getPlugin('ItemsPlugin');
+        if (itemsPlugin && state.items) {
+            itemsPlugin.restoreSnapshot(state.items);
+        }
+    }
+
+    dispose() {
+        this.viewer.renderer.domElement.removeEventListener('pointerdown', this.onPointerDown);
+        this.transformControl.dispose();
+    }
+}

package/src/plugins/EffectsPlugin.js

@@ -0,0 +1,149 @@
+import * as THREE from 'three';
+import { PostProcessingManager } from '../managers/PostProcessingManager.js';
+
+/**
+ * Plugin responsible for visual effects and post-processing.
+ * Handles Bloom (Glow), Outlines, and high-res Screenshots.
+ */
+export class EffectsPlugin {
+    constructor() {
+        this.name = 'EffectsPlugin';
+        this.isEnabled = false;
+    }
+
+    init(viewer) {
+        this.viewer = viewer;
+        const w = viewer.container.clientWidth;
+        const h = viewer.container.clientHeight;
+
+        this.composer = new PostProcessingManager(viewer.renderer, viewer.scene, viewer.cameraManager.camera, w, h);
+
+        this.composer.setBloom(false, 0, 0, 0.1);
+    }
+
+    /**
+     * Updates effect parameters.
+     * @param {Object} config - { enabled, strength, radius, height, thickness }
+     */
+    updateConfig(config) {
+        this.isEnabled = config.enabled;
+        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
+        this.composer.setBloom(config.enabled, config.strength, config.radius, 0.1);
+    }
+
+    /**
+     * Highlights an object (used by EditorPlugin).
+     */
+    setSelected(obj) {
+        this.composer.setSelected(obj);
+    }
+
+    onResize(w, h) {
+        this.composer.resize(w, h);
+    }
+
+    /**
+     * Custom render loop called by the Core animate().
+     */
+    render() {
+        const skin = this.viewer.skinModel;
+        const itemsPlugin = this.viewer.getPlugin('ItemsPlugin');
+        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);
+                items.forEach(i => {
+                    if(i.userData.originalMat) i.material = i.userData.originalMat;
+                });
+            }
+        );
+    }
+
+    /**
+     * Generates a transparent PNG screenshot.
+     * Temporarily resizes renderer if width/height are provided.
+     */
+    captureScreenshot(width, height) {
+        const renderer = this.viewer.renderer;
+        const camera = this.viewer.cameraManager.camera;
+
+        const originalSize = new THREE.Vector2();
+        renderer.getSize(originalSize);
+        const originalAspect = camera.aspect;
+
+        if (width && height) {
+            renderer.setSize(width, height);
+            camera.aspect = width / height;
+            camera.updateProjectionMatrix();
+            this.composer.resize(width, height);
+        }
+
+        const wasGridEnabled = this.viewer.config.showGrid;
+        const prevBg = this.viewer.scene.background;
+        const prevSel = this.composer.outlinePass.selectedObjects;
+        const prevClearColor = new THREE.Color();
+        renderer.getClearColor(prevClearColor);
+        const prevClearAlpha = renderer.getClearAlpha();
+
+        this.composer.setSelected(null);
+
+        this.viewer.config.showGrid = false;
+        this.viewer.sceneSetup.setGridVisible(false);
+
+        this.viewer.scene.background = null;
+        renderer.setClearColor(0x000000, 0);
+
+        this.render();
+
+        const dataUrl = renderer.domElement.toDataURL("image/png");
+
+        this.viewer.scene.background = prevBg;
+        renderer.setClearColor(prevClearColor, prevClearAlpha);
+
+        this.viewer.config.showGrid = wasGridEnabled;
+        this.viewer.sceneSetup.setGridVisible(wasGridEnabled);
+
+        this.composer.outlinePass.selectedObjects = prevSel;
+
+        if (width && height) {
+            renderer.setSize(originalSize.x, originalSize.y);
+            camera.aspect = originalAspect;
+            camera.updateProjectionMatrix();
+            this.composer.resize(originalSize.x, originalSize.y);
+        }
+
+        this.viewer.cameraManager.update();
+        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
+        };
+    }
+
+}