diff --git a/html/skin_current.hbs b/html/skin_current.hbs
index 22fa733..e36b17d 100644
--- a/html/skin_current.hbs
+++ b/html/skin_current.hbs
@@ -14,8 +14,11 @@
-
-
+
+
+
+
+
diff --git a/main.js b/main.js
index 3e13116..75fc75d 100644
--- a/main.js
+++ b/main.js
@@ -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,
diff --git a/package-lock.json b/package-lock.json
index 12c290e..a837e52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 5fb1760..8e07d10 100644
--- a/package.json
+++ b/package.json
@@ -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": {
diff --git a/src/skin.js b/src/skin.js
index d843d87..e0d59fb 100644
--- a/src/skin.js
+++ b/src/skin.js
@@ -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":