Added Skinview3D

This commit is contained in:
Arne van Iterson 2020-05-12 19:02:20 +02:00
parent 9dd358e097
commit bde532e123
5 changed files with 78 additions and 11 deletions

View File

@ -14,8 +14,11 @@
<div class="content">
<p class="message"></p>
<img src="" class="skin" alt="Current Skin">
<button id="render">Switch to 3D</button>
<img src="" class="skin" id="flat" alt="Current Skin" style="display: none;">
<div id="mesh" style="display: inline;"></div>
<button id="switch">Switch to 2D</button>
<button id="download">Download</button>
<button id="main">Back</button>
</div>

View File

@ -13,7 +13,7 @@ function createWindow () {
// Create the browser window.
const win = new BrowserWindow({
width: 320,
height: 480,
height: 520,
backgroundColor: "#ffffff",
resizable: false,
frame: true,

26
package-lock.json generated
View File

@ -2462,6 +2462,27 @@
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
},
"skinview-utils": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/skinview-utils/-/skinview-utils-0.2.1.tgz",
"integrity": "sha512-WhXaKwYp1FBspaKq/AXb4EG3E2gaVpA57dXWvPgM7GP2F36E8Pfdg1MZESWpTMG2TGp8xKz5JELgKD3uXSG0EA=="
},
"skinview3d": {
"version": "2.0.0-alpha.1",
"resolved": "https://registry.npmjs.org/skinview3d/-/skinview3d-2.0.0-alpha.1.tgz",
"integrity": "sha512-HCA6nfBgr7SUwx+UYe8irNsHN0aVVKOplSPUVxEx5WRd9ZG5wpF4nXpObrKutfOz/TzYuxjdL0t1Th7E/noI/w==",
"requires": {
"skinview-utils": "^0.2.0",
"three": "^0.112.1"
},
"dependencies": {
"three": {
"version": "0.112.1",
"resolved": "https://registry.npmjs.org/three/-/three-0.112.1.tgz",
"integrity": "sha512-8I0O74hiYtKl3LgDNcPJbBGOlpekbcJ6fJnImmW3mFdeUFJ2H9Y3/UuUSW2sBdjrIlCM0gvOkaTEFlofO900TQ=="
}
}
},
"slice-ansi": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
@ -2675,6 +2696,11 @@
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
"integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
},
"three": {
"version": "0.116.1",
"resolved": "https://registry.npmjs.org/three/-/three-0.116.1.tgz",
"integrity": "sha512-l2JCMiA/lVZAuSrLWRYMalvpR+0j8hbIhCpfs4V6JFnw2+JQEQJ5HltNpfFr+9TDpQts1BhtcISehWf/xBGPvQ=="
},
"through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",

View File

@ -24,7 +24,9 @@
"electron-handlebars": "^2.0.0",
"electron-reload": "^1.5.0",
"eslint": "^7.0.0",
"pngjs": "^5.0.0"
"pngjs": "^5.0.0",
"skinview3d": "^2.0.0-alpha.1",
"three": "^0.116.1"
},
"devDependencies": {},
"repository": {

View File

@ -3,6 +3,8 @@ const { BrowserWindow, ipcRenderer, remote } = require("electron");
const axios = require("axios").default;
const path = require("path");
const skinview3d = require("skinview3d/dist/skinview3d.min.js");
const session = ipcRenderer.sendSync("getSession");
if (!session.accessToken) {
console.log("Session does not exist, return to auth");
@ -20,9 +22,46 @@ case "current":
method: "GET",
url: "https://sessionserver.mojang.com/session/minecraft/profile/" + session.selectedProfile.id
}).then((data) => {
const url = JSON.parse(atob(data.data.properties[0].value)).textures.SKIN.url;
document.querySelectorAll("div.content > img.skin")[0].src = url;
// Switch button and views
var btn = document.querySelectorAll("div.content > button#switch")[0];
var view = {
flat: document.querySelectorAll("div.content > img.skin#flat")[0],
mesh: document.querySelectorAll("div.content > div#mesh")[0]
};
// Set flat view
const url = JSON.parse(atob(data.data.properties[0].value)).textures.SKIN.url;
view.flat.src = url;
// Set mesh view
let skinViewer = new skinview3d.SkinViewer({
domElement: view.mesh,
width: 200,
height: 200,
skinUrl: url
});
let control = skinview3d.createOrbitControls(skinViewer);
control.enableRotate = true;
control.enableZoom = false;
control.enablePan = false;
// Switch button action
btn.addEventListener("click", (e) => {
console.log("Switch button clicked");
if (view.flat.style.display == "inline") {
view.flat.style.display = "none";
view.mesh.style.display = "inline";
btn.innerHTML = "Switch to 2D";
} else {
view.flat.style.display = "inline";
view.mesh.style.display = "none";
btn.innerHTML = "Switch to 3D";
}
});
// Download button action
document.querySelectorAll("div.content > button#download")[0].addEventListener("click", (e) => {
ipcRenderer.send("download", {
url: url,
@ -32,16 +71,13 @@ case "current":
});
ipcRenderer.on("downloadResult", (event, arg) => {
const msg = document.querySelectorAll("div.content > p.message")[0];
var msg = document.querySelectorAll("div.content > p.message")[0];
console.log(msg);
msg.classList.add("success");
msg.innerHTML = "Downloaded successfully";
});
});
document.querySelectorAll("div.content > button#render")[0].addEventListener("click", (e) => {
console.log("Switch to 3D clicked");
});
});
break;
case "upload":