├── public └── slemons.png ├── src ├── assets │ ├── bg.png │ ├── ing.png │ ├── steve.png │ ├── arrow-del.png │ ├── arrow-left.png │ ├── arrow-right.png │ ├── model-slim.png │ ├── model-default.png │ └── vue.svg ├── main.js ├── components │ ├── HelloWorld.vue │ ├── 3d.vue │ ├── up.vue │ └── skin.vue ├── App.vue └── style.css ├── .vscode └── extensions.json ├── vite.config.js ├── .gitignore ├── index.html ├── README.md ├── package.json ├── .github └── workflows │ └── npm-publish-github-packages.yml └── app.js /public/slemons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SOURsLEMONS/skinpack/HEAD/public/slemons.png -------------------------------------------------------------------------------- /src/assets/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SOURsLEMONS/skinpack/HEAD/src/assets/bg.png -------------------------------------------------------------------------------- /src/assets/ing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SOURsLEMONS/skinpack/HEAD/src/assets/ing.png -------------------------------------------------------------------------------- /src/assets/steve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SOURsLEMONS/skinpack/HEAD/src/assets/steve.png -------------------------------------------------------------------------------- /src/assets/arrow-del.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SOURsLEMONS/skinpack/HEAD/src/assets/arrow-del.png -------------------------------------------------------------------------------- /src/assets/arrow-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SOURsLEMONS/skinpack/HEAD/src/assets/arrow-left.png -------------------------------------------------------------------------------- /src/assets/arrow-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SOURsLEMONS/skinpack/HEAD/src/assets/arrow-right.png -------------------------------------------------------------------------------- /src/assets/model-slim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SOURsLEMONS/skinpack/HEAD/src/assets/model-slim.png -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/model-default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SOURsLEMONS/skinpack/HEAD/src/assets/model-default.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 皮肤生成器 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 21 | 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 基于 Vue 3 的纯前端我的世界基岩版皮肤包生成器 2 | 3 | 已部署在 [https://skin.suanlemon.cc](https://skin.suanlemon.cc) 4 | 5 | ## 介绍 6 | 7 | 这是一个基于 Vue 3 的我的世界基岩版皮肤包生成器，可以生成一个符合我的世界基岩版皮肤包格式的 zip 文件，可以直接在我的世界基岩版中使用。 8 | 9 | ## 使用 10 | 11 | 1. 在 [https://skin.suanlemon.cc](https://skin.suanlemon.cc) 中输入上传你的皮肤图片 12 | 2. 设置你的皮肤名称（你也可以不设置，不设置的话会自动生成名字） 13 | 3. 设置你的皮肤皮肤包的名字（你也可以不设置，不设置的话会自动生成名字） 14 | 4. 点击生成按钮，好了大功告成 15 | 16 | ## 嘀咕 17 | 18 | 这个项目是我在学习 Vue 3 的时候做的，所以代码写的很烂，有很多地方写的很不好，如果你有什么好的建议，欢迎提出来，我会很感谢的。 19 | -------------------------------------------------------------------------------- /src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "name", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "file-saver": "^2.0.5", 13 | "jszip": "^3.10.1", 14 | "skinview3d": "^3.0.0-alpha.1", 15 | "vue": "^3.2.47" 16 | }, 17 | "devDependencies": { 18 | "@vitejs/plugin-vue": "^4.1.0", 19 | "three": "^0.151.3", 20 | "vite": "^4.2.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 27 | -------------------------------------------------------------------------------- /src/components/3d.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 33 | -------------------------------------------------------------------------------- /.github/workflows/npm-publish-github-packages.yml: -------------------------------------------------------------------------------- 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created 2 | # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages 3 | 4 | name: Node.js Package 5 | 6 | on: 7 | release: 8 | types: [created] 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v4 15 | - uses: actions/setup-node@v4 16 | with: 17 | node-version: 20 18 | - run: npm ci 19 | - run: npm test 20 | 21 | publish-gpr: 22 | needs: build 23 | runs-on: ubuntu-latest 24 | permissions: 25 | contents: read 26 | packages: write 27 | steps: 28 | - uses: actions/checkout@v4 29 | - uses: actions/setup-node@v4 30 | with: 31 | node-version: 20 32 | registry-url: https://npm.pkg.github.com/ 33 | - run: npm ci 34 | - run: npm publish 35 | env: 36 | NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} 37 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 | 17 | 18 | 62 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | a { 27 | font-weight: 500; 28 | color: #646cff; 29 | text-decoration: inherit; 30 | } 31 | a:hover { 32 | color: #535bf2; 33 | } 34 | 35 | body { 36 | margin: 0; 37 | display: flex; 38 | place-items: center; 39 | min-width: 320px; 40 | min-height: 100vh; 41 | } 42 | 43 | h1 { 44 | font-size: 3.2em; 45 | line-height: 1.1; 46 | } 47 | 48 | button { 49 | border-radius: 8px; 50 | border: 1px solid transparent; 51 | padding: 0.6em 1.2em; 52 | font-size: 1em; 53 | font-weight: 500; 54 | font-family: inherit; 55 | background-color: #1a1a1a; 56 | cursor: pointer; 57 | transition: border-color 0.25s; 58 | } 59 | button:hover { 60 | border-color: #646cff; 61 | } 62 | button:focus, 63 | button:focus-visible { 64 | outline: 4px auto -webkit-focus-ring-color; 65 | } 66 | 67 | .card { 68 | padding: 2em; 69 | } 70 | 71 | #app { 72 | max-width: 1280px; 73 | margin: 0 auto; 74 | padding: 2rem; 75 | text-align: center; 76 | } 77 | 78 | @media (prefers-color-scheme: light) { 79 | :root { 80 | color: #213547; 81 | background-color: #ffffff; 82 | } 83 | a:hover { 84 | color: #747bff; 85 | } 86 | button { 87 | background-color: #f9f9f9; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/components/up.vue: -------------------------------------------------------------------------------- 1 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | !function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t() 2 | else if("function"==typeof define&&define.amd)define([],t) 3 | else{var e 4 | e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.McHead=t()}}(function(){return function t(e,i,s){function r(n,a){if(!i[n]){if(!e[n]){var h="function"==typeof require&&require 5 | if(!a&&h)return h(n,!0) 6 | if(o)return o(n,!0) 7 | var u=new Error("Cannot find module '"+n+"'") 8 | throw u.code="MODULE_NOT_FOUND",u}var l=i[n]={exports:{}} 9 | e[n][0].call(l.exports,function(t){var i=e[n][1][t] 10 | return r(i?i:t)},l,l.exports,t,e,i,s)}return i[n].exports}for(var o="function"==typeof require&&require,n=0;n 2 | import { VueElement, ref } from "vue"; 3 | import { SkinViewer } from "skinview3d"; 4 | import JSZip from "jszip"; 5 | import { saveAs } from "file-saver"; 6 | 7 | var loaders = true 8 | 9 | var steve = 10 | "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAe1BMVEUAAACsdloAaGgAf38ApKQAr68AzMwElZUFiIgKvLwjIyMkGAgmGgomJCQoKCgrHg0zJBE0JRI6MYk/KhU/Pz9BIQxBNZtCHQpFIg5GOqVKSkpSKCZSPYlqQDBra2t1Ry+BUzmGUzSKTD2iakesdlqze2K9i3LGloD///+tRwrWAAAAAnRSTlMAAHaTzTgAAALLSURBVFjD7ZZhf5owEMZtTQSXdWRAmbBitTG03/8T7rm7xIrOEenLeYJJ+Hl/755E7xaLYEVhcdniNdjiVitshQuAft/v93MAcKbXa/8N1s+JAAngng8oJInZAEsaFlUA/J4BqDgHpMA2RwNLOt6+jbz5ht4rGAhYUDp0LDArUtQvjLHWEMHSyxg5VBU9r5Jy5xPk/DB495PXFW0oka2djoAixnfC/X0Agr0kDU4k6QAVzpnh42UYXj7ejXP8yBoG2ZT9t8YPHlffy2g4fkhBckwCTGEke//89rY5yBwPCVCkAJxz3nvndu7512aDQZZ48B22c0lnoYT9gD08yHolZ2lVBoufU1orCD1cBcT1So7zBUAzwLv5gHVqBFdS+GsETVM2bdvSQGOZkSl3ODjFU62h606TKQURljBafALKEaBlf5U5R+9CI9for5aPj0tanwDEcQTQSuf4MEeglAr+/MYAjFcBOQxxa9yZTMVzGewRRuMlABMSLAtu+GqacAIE8GKODZMxoCxb0kIAICBoSED+RwD9Ugc58360lQygK6YAAImAIPKgIYmQeQF4BuA62cZLDSAgAtAUS9gDBpARwI0jYEDTRBB/a65IfpaD9wBTjp8A/gzQdQ3n3jRd1223HUeQA6F1AFAyeTYIgAkjQA2/etvxgLuTzQAUUeQ0QRaYtALwAvAngKe6rp+6jgfcNWlBObVNnosuYCE1ElE0dIxY3O2/tLUY/7Joclfkbsn9wmRfcANAO/8lwFp/NQKVHIH0Cw2X+xJ/ptIPcIHVo7L+b0Dbhr6hpXIeOgQu80mA2HEcAerYoNwOiP1ANC5160+7BEhhOfYL3BN4LspcF6cj4LpWngBcqOxiaSlwyyAphIZgCIUxDVC2UvAJ4GJLEspzAuB4EgIg1HOfCDjvF6J/FGEScN4vxH4gyjAJOO8XpCEg+aQ/OP/8HwWygi0ive6eAAAAAElFTkSuQmCC"; 11 | var slemons = 12 | "data:image/png;base64,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"; 13 | var skinlist = [ 14 | { 15 | name: "皮肤1", 16 | src: steve, 17 | slim: false, 18 | }, 19 | // { 20 | // name: "皮肤2", 21 | // src: slemons, 22 | // slim: false, 23 | // }, 24 | ]; 25 | 26 | //生成uuid 27 | function uuid() { 28 | var s = []; 29 | var hexDigits = "0123456789abcdef"; 30 | for (var i = 0; i < 36; i++) { 31 | s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); 32 | } 33 | s[14] = "4"; 34 | s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); 35 | s[8] = s[13] = s[18] = s[23] = "-"; 36 | 37 | var uuid = s.join(""); 38 | return uuid; 39 | } 40 | 41 | 42 | 43 | 44 | var skins = { 45 | serialize_name: "生成的皮肤包",//包名 46 | localization_name: "SLSkinPack",//标识符 47 | skins: [ 48 | ], 49 | } 50 | 51 | 52 | var zh_CN = { 53 | skinpack: "SL皮肤包", 54 | skinlist: [ 55 | "皮肤1", 56 | "皮肤2", 57 | ], 58 | } 59 | 60 | function lang(lang) { 61 | var str = "skinpack."; 62 | str = str + skins.localization_name + "=" + lang.skinpack + "\n"; 63 | for (var i = 0; i < skins.skins.length; i++) { 64 | str += 'skin.' + skins.localization_name + "." + skins.skins[i].localization_name + "=" + lang.skinlist[i].name + "\n"; 65 | // //console.log(lang.skinlist[i]); 66 | } 67 | return str; 68 | } 69 | 70 | 71 | // var skinname = skinlist[skinlistindex].name; 72 | 73 | 74 | // var skinmodel = false; 75 | 76 | var skinViewer; 77 | 78 | 79 | export default { 80 | name: "sk", 81 | data() { 82 | return { 83 | skinpackname: "SL皮肤包", 84 | ulr: steve, 85 | skinlist: skinlist, 86 | skinlistindex: 0, 87 | skinname: '', 88 | skinmodel: false, 89 | loaders: true 90 | }; 91 | }, 92 | methods: { 93 | //这是上传图片的方法 94 | upload: function (e) { 95 | var that = this; 96 | //console.log(e.target.files[0]); 97 | //获取图片大小 98 | let file = e.target.files[0]; 99 | let reader = new FileReader(); 100 | reader.readAsDataURL(file); 101 | let img = new Image(); 102 | reader.onload = function (e) { 103 | //console.log(e.target.result); 104 | img.src = e.target.result; 105 | img.onload = function () { 106 | //console.log(img.width); 107 | //console.log(img.height); 108 | if ( 109 | img.width != img.height && (img.width != 128 ||img.width != 64 || img.width != 32) 110 | ) { 111 | alert("图片尺寸不正确，请上传128 64 32的图片"); 112 | return; 113 | } 114 | //这里ulr 115 | this.ulr = e.target.result; 116 | //console.log(this.ulr); 117 | 118 | skinViewer.loadSkin(this.ulr); 119 | //console.log(skinViewer.loadSkin(this.ulr)); 120 | skinViewer.autoRotate = true; 121 | setTimeout(() => { 122 | skinViewer.autoRotate = false; 123 | }, 6280); 124 | 125 | // //console.log(skinViewer.playerObject.skin.modelType); 126 | 127 | that.skinlistindex = that.skinlist.push({ 128 | name: "皮肤" + (skinlist.length + 1), 129 | src: this.ulr, 130 | slim: skinViewer.playerObject.skin.modelType, 131 | }) - 1; 132 | 133 | //调用skinmodelslim()方法 134 | that.skinmodelslim(this.ulr); 135 | }; 136 | }; 137 | }, 138 | //上一张 下一张 139 | skinlistbrowse: function (n) { 140 | if (this.skinlistindex + n >= 0 && this.skinlistindex + n < skinlist.length) { 141 | this.skinlist[this.skinlistindex].name = this.skinname; 142 | this.skinlistindex += n; 143 | this.skinname = this.skinlist[this.skinlistindex].name; 144 | //console.log(this.skinname); 145 | } 146 | 147 | 148 | if (skinlist[this.skinlistindex].slim) { 149 | //console.log(skinlist[this.skinlistindex].slim); 150 | skinViewer.loadSkin(skinlist[this.skinlistindex].src, { model: "slim" }); 151 | this.skinmodel = true; 152 | } else { 153 | skinViewer.loadSkin(skinlist[this.skinlistindex].src, { model: "default" }); 154 | this.skinmodel = false; 155 | //console.log(skinlist[this.skinlistindex].slim); 156 | } 157 | //console.log(skinlist[this.skinlistindex].slim); 158 | //console.log(this.skinlistindex); 159 | //console.log(this.skinmodel); 160 | 161 | //model 162 | }, 163 | //切换模型 皮肤 164 | skinmodelslim(url = this.skinlist[this.skinlistindex].src) { 165 | if (this.skinmodel) { 166 | skinViewer.loadSkin(url, { model: "default" }); 167 | this.skinlist[this.skinlistindex].slim = false; 168 | this.skinmodel = false; 169 | } else { 170 | skinViewer.loadSkin(url, { model: "slim" }); 171 | //console.log(this.skinlistindex); 172 | //console.log(this.skinlist[this.skinlistindex]); 173 | this.skinlist[this.skinlistindex].slim = true; 174 | this.skinmodel = true; 175 | } 176 | }, 177 | //删除皮肤 178 | skinlistdelete: function () { 179 | if (this.skinlist.length > 1) { 180 | this.skinlist.splice(this.skinlistindex, 1); 181 | this.skinlistindex = 0; 182 | this.skinname = this.skinlist[this.skinlistindex].name; 183 | if (this.skinlist[this.skinlistindex].slim) { 184 | skinViewer.loadSkin(this.skinlist[this.skinlistindex].src, { 185 | model: "slim", 186 | }); 187 | this.skinmodel = true; 188 | } else { 189 | skinViewer.loadSkin(this.skinlist[this.skinlistindex].src, { 190 | model: "default", 191 | }); 192 | this.skinmodel = false; 193 | } 194 | } else { 195 | alert("至少保留一张皮肤"); 196 | } 197 | }, 198 | //生成皮肤包 199 | spawnpack: function () { 200 | this.loaders = true; 201 | var that = this; 202 | this.skinlist[this.skinlistindex].name = this.skinname; 203 | // //console.log(this.skinlist); 204 | 205 | var manifest = { 206 | header: { 207 | name: "包名", 208 | version: [1, 0, 0], 209 | uuid: uuid(), 210 | }, 211 | modules: [ 212 | { 213 | version: [1, 0, 0], 214 | type: "skin_pack", 215 | uuid: uuid(), 216 | }, 217 | ], 218 | format_version: 1, 219 | } 220 | 221 | 222 | var time = new Date(); 223 | time = time.getTime().toString() 224 | time = time.substring(time.length, time.length - 6); 225 | 226 | skins.serialize_name = this.skinpackname; 227 | skins.localization_name = "SLSkinPack" + time; 228 | skins.skins = function () { 229 | var arr = []; 230 | for (var i = 0; i < that.skinlist.length; i++) { 231 | arr.push({ 232 | localization_name: 'Skin' + i, 233 | geometry: skinlist[i].slim ? "geometry.humanoid.customSlim" : "geometry.humanoid.custom", 234 | texture: 'skin' + i + '.png', 235 | type: 'free', 236 | }); 237 | } 238 | return arr; 239 | }(); 240 | //console.log(JSON.stringify(skins, null, 4)); 241 | 242 | manifest.header.name = this.skinpackname; 243 | //console.log(JSON.stringify(manifest, null, 4)); 244 | 245 | zh_CN.skinpack = this.skinpackname; 246 | zh_CN.skinlist = function () { 247 | var arr = []; 248 | for (var i = 0; i < that.skinlist.length; i++) { 249 | arr.push({ 250 | name: that.skinlist[i].name, 251 | }); 252 | } 253 | return arr; 254 | }(); 255 | 256 | //console.log(lang(zh_CN)); 257 | 258 | 259 | var zip = new JSZip(); 260 | 261 | zip.file("manifest.json", JSON.stringify(manifest, null, 4)); 262 | zip.file("skins.json", JSON.stringify(skins, null, 4)); 263 | var texts = zip.folder("texts"); 264 | texts.file("zh_CN.lang", lang(zh_CN)); 265 | for (var i = 0; i < this.skinlist.length; i++) { 266 | zip.file("skin" + i + ".png", this.skinlist[i].src.split(",")[1], { 267 | base64: true, 268 | }); 269 | } 270 | zip.generateAsync({ type: "blob" }) 271 | .then(function (content) { 272 | saveAs(content, "SLSkinPack.zip.mcpack"); 273 | that.loaders = false; 274 | }); 275 | }, 276 | }, 277 | mounted() { 278 | skinViewer = new SkinViewer({ 279 | canvas: document.getElementById("skin_container"), 280 | width: 150, 281 | height: 200, 282 | skin: steve, 283 | }); 284 | this.loaders = false; 285 | // //console.log(this); 286 | // this.skinmodel = false; 287 | }, 288 | }; 289 | // //console.log(Vue); 290 | 291 | 346 | 347 | 679 | --------------------------------------------------------------------------------