SkinViewer 皮肤展示

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

基础用法

皮肤参数

拖拽小人或调节下方参数

皮肤Steve（默认）

Slim（Alex 体型，3px 手臂）

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

自动旋转

姿势

缩放

import { ref, computed } from 'vue'

const STEVE_URL = 'https://assets.mojang.com/SkinTemplates/steve.png'
const ALEX_URL = 'https://assets.mojang.com/SkinTemplates/alex.png'

const customSkin = ref('')
const customName = ref('')
const slim = ref(false)
const showSecondLayer = ref(true)
const autoRotate = ref(true)

const skin = computed(() => customSkin.value || (slim.value ? ALEX_URL : STEVE_URL))
const fileName = computed(() => customName.value || (slim.value ? 'Alex（默认）' : 'Steve（默认）'))

const poseOptions = [
  { title: 'idle 站立', value: 'idle' },
  { title: 'walk 行走', value: 'walk' },
  { title: 'none 静止', value: 'none' },
]
const poseValue = ref('idle')

const scale = ref(6)

const fileInput = ref<HTMLInputElement | null>(null)

function pickFile() {
  fileInput.value?.click()
}
function onPick(event: Event) {
  const f = (event.target as HTMLInputElement).files?.[0]
  if (!f) return
  customSkin.value = URL.createObjectURL(f)
  customName.value = f.name
}

import { ref } from 'vue'
const skin = ref('/path/to/your-skin.png')
const skinHd = ref('/path/to/your-hd-skin.png')
const skinLegacy = ref('/path/to/your-legacy-skin.png')

皮肤来源

• 本地文件：用 <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 处理，浏览器自动缩放

实现说明：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），左半身镜像右半身。

API

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	皮肤图加载失败