Technical Specification: Free Online 3D Minecraft Skin Viewer and Editor

Overview

A high-performance, browser-based Minecraft skin creation and visualization tool. This application allows users to upload, edit, and preview 3D player models without leaving their browser.

Core Features

• Interactive 3D Viewport: Uses Three.js to render a rotatable, zoomable 3D character model.
• Pixel-Perfect Editing: Toolset for manual editing including:
  • Pencil tool with adjustable colors.
  • Eraser tool.
  • Color picker (eyedropper).
  • Undo/Redo stack (in-memory only).
• Skin Import/Export: Upload custom .png files or export the finished product.
• Part Toggling: Selectively hide body parts (e.g., hat, jacket, sleeves) to edit base layers easily.
• Performance: Lightweight rendering to ensure smooth interaction on modern devices.

UI Layout

• Header: Minimalist title bar with "Export Skin" button.
• Main Layout (Flexbox Container):
  • Left Sidebar: Contains drawing tools, color palettes, and body-part visibility toggles.
  • Central Stage: The primary 3D canvas area showing the Minecraft character model.
  • Right Panel: A 2D texture preview window showing the current file as a flat image, updating in real-time as the user draws.

Color Palette & Aesthetics

• Background: Soft off-white/very light gray (#FAFAFA) to keep the focus on the skin.
• Accent Colors: Professional, vibrant accent colors for UI buttons (e.g., #2563EB for primary actions).
• Interface Elements: High-contrast, clean typography (Sans-serif, system-stack).
• Shadows: Subtle, soft drop-shadows (elevation) for tool panels to create a modern SaaS feel.

Technical Directives (Strict Constraints)

• Single-File Architecture: All HTML, CSS, and JS must reside in one file. Use CDNs for dependencies like three.js.
• Zero Persistence: Do not use localStorage, sessionStorage, or cookies. If the user refreshes, the session resets. All state variables (texture data, rotation, tool state) must exist only in JavaScript objects.
• No Branding: The UI must be purely functional. No references to companies, characters, or fictional brands.
• Iframe Compatibility: The tool must work within a sandboxed <iframe> without triggering security errors. Avoid prompt(), alert(), or any blocked browser APIs.
• Responsive Design: Ensure the 3D viewport scales appropriately on tablet and desktop. On mobile, focus on the 3D model as the primary interactive area with a drawer-based tool menu.

Animations & Transitions

• Micro-interactions: Subtle hover scaling on buttons.
• Tool Switching: Smooth transition (0.2s ease) when selecting different painting tools.
• Viewport: Fluid mouse-rotation handling using standard Three.js OrbitControls to avoid jittering.

Developer Notes

• Use requestAnimationFrame for the rendering loop.
• Ensure textures are applied as THREE.Texture objects with magFilter = THREE.NearestFilter to preserve the pixelated Minecraft aesthetic.