Added Skinview3D

html/skin_current.hbs

@@ -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>

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,

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",

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": {

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;
+    // Switch button and views
-    document.querySelectorAll("div.content > img.skin")[0].src = url;
+    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":