working player skin in inventory

Author: michaljaz

lib/server.js

@@ -4,6 +4,7 @@ const netApi = require('./proxy.js')
 const port = process.env.PORT || 8080
 const cors = require('cors')
 const axios = require('axios');
+const atob = require('atob');
 
 app.use(cors())
 app.use(netApi({ allowOrigin: '*' }))
@@ -28,12 +29,21 @@ app.get("/getId",(req,res,next)=>{
 
 app.get("/getSkin",(req,res,next)=>{
 	axios.get(`https://sessionserver.mojang.com/session/minecraft/profile/${req.query.id}?legacy=true`,{responseType: 'json'})
-  .then(function (response) {
-		res.json(response.data)
-  })
-  .catch(function (error) {
-    res.send("ERR")
-  })
+	  .then(function (response) {
+			var url=JSON.parse(atob(response.data.properties[0].value)).textures.SKIN.url
+			axios.get(url,{responseType: 'arraybuffer'})
+			  .then(function (response) {
+					var headers = {'Content-Type': 'image/jpeg'};
+		        res.writeHead(200, headers);
+		        res.end(response.data, 'binary');
+			  })
+			  .catch(function (error) {
+			    res.send("ERR")
+			  })
+	  })
+	  .catch(function (error) {
+	    res.send("ERR")
+	  })
 })
 
 app.listen(port, () => {

package-lock.json

@@ -28,6 +28,7 @@
 		"node": "14.x"
 	},
 	"dependencies": {
+		"atob": "^2.1.2",
 		"axios": "^0.24.0",
 		"body-parser": "^1.19.0",
 		"cors": "^2.8.5",

package.json

@@ -1,6 +1,6 @@
 import Stats from 'three/examples/jsm/libs/stats.module.js'
 import * as dat from 'three/examples/jsm/libs/dat.gui.module.js'
-import { WebGLRenderer, Scene, PerspectiveCamera, AmbientLight } from 'three'
+import { WebGLRenderer, Scene, PerspectiveCamera, AmbientLight, TextureLoader } from 'three'
 import { DistanceBasedFog } from './rendering/DistanceBasedFog.js'
 import { UrlParams } from './UrlParams.js'
 import { gpuInfo } from './additional/gpuInfo.js'
@@ -45,7 +45,7 @@ function Setup (game) {
   UrlParams(game)
   console.warn(gpuInfo())
   game.socket = new Socket(game)
-  game.pii = new PlayerInInventory(game)
+	game.pii = new PlayerInInventory(game)
   game.bb = new BlockBreak(game)
   game.bp = new BlockPlace(game)
   game.world = new World(game)
@@ -81,20 +81,20 @@ function Setup (game) {
 						if(id!=="ERR"){
 							console.log(`UUID: ${id}`)
 							//SKIN
-							fetch(`${document.location.protocol}//${hostname}:${port}/getSkin?id=${id}`)
-							  .then(response => response.json())
-							  .then(data => {
-									// console.log(data)
-									const nd=JSON.parse(atob(data.properties[0].value))
-									// console.log(nd)
-									console.log(`SKIN: ${nd.textures.SKIN.url}`)
-								});
+							game.skinUrl=`${document.location.protocol}//${hostname}:${port}/getSkin?id=${id}`
+							console.log(game.skinUrl)
+							new TextureLoader().load(game.skinUrl, (texture) => {
+								game.pii.setup(texture)
+							})
+
 						}else{
 							console.log("UUID not found!")
+							game.pii.setup(game.al.get('playerTex'))
 						}
 					});
 			}
 		});
+
   game.distanceBasedFog.addShaderToMaterials([
     game.world.material,
     game.ent.mobMaterial,

src/scripts/Setup.js

@@ -19,10 +19,12 @@ class PlayerInInventory {
     this.scene.background = new Color('black')
     const light = new AmbientLight(0xffffff)
     this.scene.add(light)
-    const player = this.game.al.get('player')
-    const playerTex = this.game.al.get('playerTex')
-    playerTex.magFilter = NearestFilter
-    player.children[0].material.map = playerTex
+  }
+
+	setup (texture) {
+		const player = this.game.al.get('player')
+    texture.magFilter = NearestFilter
+    player.children[0].material.map = texture
     this.scene.add(player)
     this.camera = new PerspectiveCamera(70, 140 / 204, 0.1, 1000)
     this.camera.rotation.order = 'YXZ'
@@ -50,7 +52,7 @@ class PlayerInInventory {
                     wychX * top)
       }
     })
-  }
+	}
 
   render () {
     return this.renderer.render(this.scene, this.camera)