SkinViewer 皮肤展示

把 64×64 / 64×32（旧版）/ 128×128（HD） 的 Minecraft 皮肤图折叠成一个可旋转的 3D 小人。纯 CSS 3D transforms 实现，无第三方依赖，支持自动旋转 / 拖拽 / 行走姿势 / 第二层。

皮肤Steve（默认）

Slim（Alex 体型，3px 手臂）

显示第二层（帽子 / 夹克 / 袖子 / 裤腿）

自动旋转

姿势

idle 站立

缩放

Selected:

vue

<script setup>
import { ref } from 'vue'
const skin = ref('/path/to/your-skin.png')
</script>

<template>
  <!-- 标准 64×64 -->
  <mc-skin-viewer :skin="skin" />

  <!-- Slim 体型（Alex，3px 手臂） -->
  <mc-skin-viewer :skin="skin" slim />

  <!-- HD 皮肤（128×128）自动识别 -->
  <mc-skin-viewer :skin="skinHd" :scale="8" />

  <!-- 旧版 64×32（自动镜像左半身） -->
  <mc-skin-viewer :skin="skinLegacy" />

  <!-- 行走姿势 + 关闭第二层 -->
  <mc-skin-viewer :skin="skin" pose="walk" :show-second-layer="false" />
</template>

皮肤来源

本地文件：用 <input type="file"> + URL.createObjectURL(file) 转成 blob URL 直接传给 skin。
远程 URL：直接传图片地址；跨域加载只是 <img> 标签读取，不需要 CORS（仅作为 background-image 使用）。
DataURL：data:image/png;base64,... 同样支持。

支持的皮肤格式

尺寸	说明
`64×64`	标准现代皮肤，包含双臂 / 双腿独立 UV，以及完整第二层
`64×64`（Slim）	Alex 体型，3px 手臂；通过 `slim` prop 切换
`64×32`	旧版 1.7- 皮肤，自动检测：仅有右半身数据，左半身会镜像；第二层仅帽子可用
`128×128`	HD 皮肤，UV 布局与 64×64 等比放大；组件按 64×64 处理，浏览器自动缩放

Props

名称	类型	默认	说明
`skin`	`string`	—	必填，皮肤图地址（URL / blob URL / dataURL）
`slim`	`boolean`	`false`	是否 Slim（Alex）体型，手臂宽 3px
`scale`	`number`	`6`	1 个皮肤像素对应多少 CSS 像素；整体大小由它决定
`showSecondLayer`	`boolean`	`true`	是否显示帽子 / 夹克 / 袖子 / 裤腿外层
`pose`	`'idle' \| 'walk' \| 'none'`	`'idle'`	站立微浮动 / 行走摆动 / 完全静止
`autoRotate`	`boolean`	`true`	自动绕 Y 轴旋转
`pitch`	`number`	`8`	视角俯仰角（度），>0 从上往下看
`yaw`	`number`	`-20`	初始 Y 旋转角（度）
`interactive`	`boolean`	`true`	是否允许鼠标 / 触摸拖拽旋转；按住时自动旋转暂停
`background`	`string`	`'transparent'`	容器背景，可填任意 CSS 颜色

Events

事件	参数	说明
`load`	`{ width: number; height: number; legacy: boolean }`	皮肤图加载完成，`legacy=true` 表示识别为 64×32 旧版
`error`	`Event \| string`	皮肤图加载失败

实现说明

6 个基础部位（头 / 身 / 双臂 / 双腿）+ 6 个外层，全部用 6 个 <div> 当 cube 面，通过 background-position 在皮肤图上裁出 UV 区域，再用 CSS transform 推到立方体表面。
关节摆动用 4 层 wrapper：pivot → swing → center → faces，保证肩 / 髋绕关节点旋转而不是绕几何中心旋转。
image-rendering: pixelated 保持像素质感；HD 皮肤同样按 64×64 UV，浏览器自动做近邻缩放。
旧版 64×32 皮肤自动检测（宽:高 = 2:1），左半身镜像右半身。

SkinViewer 皮肤展示 ​

皮肤来源 ​

支持的皮肤格式 ​

Props ​

Events ​

实现说明 ​