{"id":20389196,"url":"https://github.com/daidr/mc-skinviewer","last_synced_at":"2025-07-20T17:05:12.400Z","repository":{"id":41293564,"uuid":"505039918","full_name":"daidr/mc-skinviewer","owner":"daidr","description":"基于 css transform 的 mc 皮肤预览器","archived":false,"fork":false,"pushed_at":"2022-07-05T15:41:07.000Z","size":47,"stargazers_count":18,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-15T13:32:45.856Z","etag":null,"topics":["css","minecraft","skin","transform"],"latest_commit_sha":null,"homepage":"https://page.daidr.me/mc-skinviewer/test","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daidr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-19T07:22:39.000Z","updated_at":"2025-06-08T13:34:43.000Z","dependencies_parsed_at":"2022-09-05T09:30:15.458Z","dependency_job_id":null,"html_url":"https://github.com/daidr/mc-skinviewer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/daidr/mc-skinviewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daidr%2Fmc-skinviewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daidr%2Fmc-skinviewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daidr%2Fmc-skinviewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daidr%2Fmc-skinviewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daidr","download_url":"https://codeload.github.com/daidr/mc-skinviewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daidr%2Fmc-skinviewer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266161904,"owners_count":23885928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","minecraft","skin","transform"],"created_at":"2024-11-15T03:16:19.057Z","updated_at":"2025-07-20T17:05:12.378Z","avatar_url":"https://github.com/daidr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"SkinViewer\n=========\n[![GitHub commit](https://img.shields.io/github/last-commit/daidr/mc-skinviewer?style=flat-square)](https://github.com/daidr/mc-skinviewer/commit/master)\n[![MIT License](https://img.shields.io/badge/license-MIT-yellowgreen.svg?style=flat-square)](https://github.com/daidr/mc-skinviewer/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/daidr/mc-skinviewer?style=flat-square)](https://github.com/daidr/mc-skinviewer/issues)\n\n基于 css transform 的 mc 皮肤预览器\n\n[DEMO](https://page.daidr.me/mc-skinviewer/test)\n\n## 特点\n\n* 自适应支持\n* 支持 alex 和 steve 模型\n* 支持自定义动画\n* 体积较小\n* 支持头部、手臂、腿部的 transform 调节\n\n## 使用方法\n\n### 基本\n\n最少只需要载入 `skinviewer.css` 与 `skinviewer.js` 即可正常使用 SkinViewer\n\n```html\n\u003clink rel=\"stylesheet\" href=\"skinviewer.css\"\u003e\n\u003cscript src=\"skinviewer.js\"\u003e\u003c/script\u003e\n\n\u003cdiv class=\"my-custom-skinviewer\" width='600px'\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n  const container = document.querySelector('.my-custom-skinviewer');\n  const skinViewer = new SkinViewer({ container });\n\u003c/script\u003e\n```\n\n这些代码将会在 `my-custom-skinviewer` 中初始化一个渲染默认 steve 皮肤的 SkinViewer\n\n### 尺寸设置\n\n或许你已经注意到了，上面的代码为 `my-custom-skinviewer` 设置了固定 600px 的宽度值，这是因为 SkinViewer 的大小完全取决于父容器的宽度值（父容器宽度的 30%），倘若不限制父容器宽度，SkinViewer 将无法正常显示。当然，你完全可以在父容器上设置这些不确定的宽度值 `width:50vw` `width:100%`\n\n或许对于你来说，默认情况下 SkinViewer 继承父容器宽度的 30% 还是太大了。那么，你可以通过设置父容器内第一层级 div 容器的 `width` 或 `scale` 属性来调整 SkinViewer 的大小。就像下面这样。\n\n```css\n.my-custom-skinviewer \u003e div {\n    transform: scale(0.5);\n}\n```\n\n### 皮肤设置\n\n当然，我们也提供了修改皮肤模型和皮肤贴图的功能，倘若你需要载入一个路径为 `./skin.png` 的 Alex 模型皮肤。你可以像下面这样做。\n\n```js\nskinViewer.setSkinType(SkinViewer.SKIN_TYPE.ALEX);\n\nconst customSkin = new Image();\ncustomSkin.onload = () =\u003e {\n    skinViewer.setSkin(customSkin);\n}\ncustomSkin.src = './skin.png';\n```\n\nSkinViewer 的 `setSkin` 方法接收一个 skin 参数，这个参数可以是 HTMLImageElement 或 HTMLCanvasElement 类型的。虽然看起来有些繁琐，但这能让你更好地控制贴图加载的过程。\n\n### 动画设置\n\n默认情况下，skinviewer 不会携带任何动画，并且不会响应任何事件（实际上，SkinViewer 目前也没有提供绑定事件的功能）\n\n不过，我们默认提供了一个动画样式库 `skinviewer-animation.css`，包含了诸如 360°旋转、走路、跑步等一系列的常见动画。\n\n提示：你可以对 头部、手部、腿部的容器进行 transform 操作，且 transform-origin 已经被默认设置为正确的位置，但不能对容器内的子元素(如类名为_cover结尾的元素)执行 transform 操作。\n\n```html\n\u003clink rel=\"stylesheet\" href=\"skinviewer-animation.css\"\u003e\n\n\u003cdiv class=\"my-custom-skinviewer d-skin-aciton-rotate\" width='600px'\u003e\u003c/div\u003e\n```\n\n动画样式库提供了下面这些类名，通过对父容器添加对应的类名，就可以让 SkinViewer 播放对应的动画。\n\n`d-skin-aciton-rotate` - 将会循环播放 360° 旋转动画\n\n`d-skin-aciton-walk` - 将会循环播放走路动画\n\n`d-skin-aciton-run` - 将会循环播放跑步动画\n\n`d-skin-aciton-rotate-paused` - 将会暂停旋转动画\n\n`d-skin-action-skeleton-paused` - 将会暂停骨骼动画\n\n**目前暂未实现头部摆动的动画**\n\n### 简单交互\n\n当然，你也许会需要一些简单的交互，比如通过拖动来旋转视角。那么，你可以试试监听父容器的相关事件，实现所需要的交互。\n\n[DEMO](https://page.daidr.me/mc-skinviewer/test) 页面中的鼠标拖动视角就是一个很好的示例。\n\n```js\n// 选择父容器\nlet container = document.querySelector('.my-custom-skinviewer');\n{\n    let startX = 0;\n    let startY = 0;\n    let defX = 0;\n    let defY = 0;\n    let pointDown = false;\n\n    // 监听 pointer 相关的事件\n    container.addEventListener('pointerdown', (e) =\u003e {\n        const { clientX, clientY } = e;\n        startX = clientX;\n        startY = clientY;\n        const [a, b] = skinViewer.getMainRotate();\n        defX = a;\n        defY = b;\n        pointDown = true;\n    })\n\n    container.addEventListener('pointermove', (e) =\u003e {\n        if (!pointDown) return;\n        const { clientX, clientY } = e;\n        const deltaX = clientX - startX;\n        const deltaY = clientY - startY;\n        skinViewer.setMainRotate(defX - deltaY, defY + deltaX, 0);\n    })\n\n    container.addEventListener('pointerup', (e) =\u003e {\n        pointDown = false;\n        skinViewer.resetMainRotate();\n    })\n}\n```\n\n## 功能实现\n\n- [x] 完整的动画支持\n\n- [x] steve 和 alex 模型皮肤支持\n\n- [ ] 非标准皮肤尺寸(高像素或64*32)\n\n- [ ] 披风材质支持\n\n- [ ] 特殊模型材质支持(耳朵)\n\n\n## 协议\n\n[MIT license](./LICENCE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaidr%2Fmc-skinviewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaidr%2Fmc-skinviewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaidr%2Fmc-skinviewer/lists"}