Ubujira
/
skinview3d
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix cape cannot be loaded before skin is loaded 

This fix allows skin and cape can be loaded and rendered separately.
This commit is contained in:
yushijinhun 2017-09-03 10:58:17 +08:00
parent 09509022cc
commit f3c4cac7c6
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
1 changed files with 61 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
js/skinpreview3d.js
View File

@ -86,7 +86,8 @@ var skinpreview3d = new function(){
this.SkinViewer = function(domElement, canvasW, canvasH, isSlim){
var angleRot = 0;
var initialized = false;
var skinInitialized = false;
var capeInitialized = false;
var skinImg = new Image();
var skinCanvas = document.createElement('canvas');
@ -135,6 +136,7 @@ var skinpreview3d = new function(){
this.renderer = new THREE.WebGLRenderer({angleRot: true, alpha: true, antialias: false});
this.renderer.setSize(canvasW, canvasH);
this.renderer.context.getShaderInfoLog = () => ''; // shut firefox up
this.domElement.appendChild(this.renderer.domElement);
Object.defineProperties(this, {
'skinUrl': {
@ -147,7 +149,7 @@ var skinpreview3d = new function(){
}
});
var initialize = () => {
var initializeSkin = () => {
// Head Parts
headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
addVertices(headBox,
@ -379,27 +381,7 @@ var skinpreview3d = new function(){
leftLeg2Mesh.position.x = 2;
this.scene.add(leftLeg2Mesh);
// Cape Parts
// back = outside
// front = inside
capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
addVertices(capeBox,
toCapeVertices(1, 0, 11, 0),
toCapeVertices(11, 0, 21, 0),
toCapeVertices(11, 1, 11, 17),
toCapeVertices(12, 1, 22, 17),
toCapeVertices(0, 1, 0, 17),
toCapeVertices(1, 1, 11, 17)
);
capeMesh = new THREE.Mesh(capeBox, capeMaterial);
capeMesh.name = 'cape';
capeMesh.position.y = -12.75;
capeMesh.position.z = -0.55;
capePivot = new THREE.Group();
capePivot.rotation.x = 25 * (Math.PI/180);
this.scene.add(capePivot);
this.domElement.appendChild(this.renderer.domElement);
skinInitialized = true;
}
skinImg.crossOrigin = '';
@ -432,14 +414,37 @@ var skinpreview3d = new function(){
layer1Material.needsUpdate = true;
layer2Material.needsUpdate = true;
if(!initialized) {
initialize();
initialized = true;
drawSkin();
if(!skinInitialized) {
initializeSkin();
}
};
skinImg.onerror = () => console.log('Failed loading ' + skinImg.src);
var initializeCape = () => {
// Cape Parts
// back = outside
// front = inside
capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
addVertices(capeBox,
toCapeVertices(1, 0, 11, 0),
toCapeVertices(11, 0, 21, 0),
toCapeVertices(11, 1, 11, 17),
toCapeVertices(12, 1, 22, 17),
toCapeVertices(0, 1, 0, 17),
toCapeVertices(1, 1, 11, 17)
);
capeMesh = new THREE.Mesh(capeBox, capeMaterial);
capeMesh.name = 'cape';
capeMesh.position.y = -12.75;
capeMesh.position.z = -0.55;
capePivot = new THREE.Group();
capePivot.rotation.x = 25 * (Math.PI/180);
capePivot.add(capeMesh);
this.scene.add(capePivot);
capeInitialized = true;
};
capeImg.crossOrigin = '';
capeImg.onload = () => {
if (capeImg.width !== 2*capeImg.height) {
@ -447,8 +452,6 @@ var skinpreview3d = new function(){
return;
}
capePivot.add(capeMesh);
capeCanvas.width = capeImg.width;
capeCanvas.height = capeImg.height;
capeContext.clearRect(0, 0, capeCanvas.width, capeCanvas.height);
@ -456,13 +459,22 @@ var skinpreview3d = new function(){
capeTexture.needsUpdate = true;
capeMaterial.needsUpdate = true;
if(!capeInitialized) {
initializeCape();
}
};
capeImg.onerror = () => console.log('Failed loading ' + capeImg.src);
var startTime = Date.now();
var drawSkin = () => {
requestAnimationFrame(drawSkin);
var draw = () => {
requestAnimationFrame(draw);
var time = (Date.now() - startTime)/1000;
if(skinInitialized) {
if(angleRot > 360)
angleRot = 0;
if(!this.animationPaused)
angleRot += 0.01;
@ -481,12 +493,11 @@ var skinpreview3d = new function(){
rightArm2Mesh.rotation.x = rightArmMesh.rotation.x = Math.cos(angleRot*this.animationSpeed);
rightArm2Mesh.position.z = rightArmMesh.position.z = 0 - 6*Math.sin(rightArmMesh.rotation.x);
rightArm2Mesh.position.y = rightArmMesh.position.y = -4 - 6*Math.abs(Math.cos(rightArmMesh.rotation.x));
}
this.renderer.render(this.scene, this.camera);
if(angleRot > 360)
angleRot = 0;
}
draw();
}
// ====== OrbitControls ======