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

refactor

This commit is contained in:
yushijinhun 2017-09-10 22:37:35 +08:00
parent 171fa67a6e
commit 43e08b364d
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
2 changed files with 282 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
example_purejs.html
View File

@ -11,7 +11,7 @@
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script type="text/javascript" src="js/skinpreview3d.js"></script>
<script>
var skinViewer = new skinpreview3d.SkinViewer({
let skinViewer = new skinpreview3d.SkinViewer({
domElement: document.getElementById('skin_container'),
slim: true,
width: 600,
@ -30,7 +30,7 @@
// skinViewer.height = 400;
// this enables the mouse control feature
var control = new skinpreview3d.SkinControl(skinViewer);
let control = new skinpreview3d.SkinControl(skinViewer);
// this makes the animation paused
// skinViewer.animationPaused = true;

416
js/skinpreview3d.js
View File

@ -6,24 +6,24 @@
'use strict';
// namespace skinpreview3d
var skinpreview3d = new function(){
let skinpreview3d = new function(){
var copyImage = (context, sX, sY, w, h, dX, dY, flipHorizontal) => {
var imgData = context.getImageData(sX, sY, w, h);
let copyImage = (context, sX, sY, w, h, dX, dY, flipHorizontal) => {
let imgData = context.getImageData(sX, sY, w, h);
if(flipHorizontal){
for(var y = 0; y < h; y++) {
for(var x = 0; x < (w / 2); x++) {
var index = (x + y * w) * 4;
var index2 = ((w - x - 1) + y * w) * 4;
var pA1 = imgData.data[index];
var pA2 = imgData.data[index+1];
var pA3 = imgData.data[index+2];
var pA4 = imgData.data[index+3];
for(let y = 0; y < h; y++) {
for(let x = 0; x < (w / 2); x++) {
let index = (x + y * w) * 4;
let index2 = ((w - x - 1) + y * w) * 4;
let pA1 = imgData.data[index];
let pA2 = imgData.data[index+1];
let pA3 = imgData.data[index+2];
let pA4 = imgData.data[index+3];
var pB1 = imgData.data[index2];
var pB2 = imgData.data[index2+1];
var pB3 = imgData.data[index2+2];
var pB4 = imgData.data[index2+3];
let pB1 = imgData.data[index2];
let pB2 = imgData.data[index2+1];
let pB3 = imgData.data[index2+2];
let pB4 = imgData.data[index2+3];
imgData.data[index] = pB1;
imgData.data[index+1] = pB2;
@ -40,9 +40,9 @@ var skinpreview3d = new function(){
context.putImageData(imgData,dX,dY);
};
var convertSkinTo1_8 = (context, width) => {
var scale = width/64.0;
var copySkin = (context, sX, sY, w, h, dX, dY, flipHorizontal) => copyImage(context, sX*scale, sY*scale, w*scale, h*scale, dX*scale, dY*scale, flipHorizontal);
let convertSkinTo1_8 = (context, width) => {
let scale = width/64.0;
let copySkin = (context, sX, sY, w, h, dX, dY, flipHorizontal) => copyImage(context, sX*scale, sY*scale, w*scale, h*scale, dX*scale, dY*scale, flipHorizontal);
copySkin(context, 4, 16, 4, 4, 20, 48, true); // Top Leg
copySkin(context, 8, 16, 4, 4, 24, 48, true); // Bottom Leg
@ -58,17 +58,17 @@ var skinpreview3d = new function(){
copySkin(context, 52, 20, 4, 12, 44, 52, true); // Back Arm
};
var toFaceVertices = (x1,y1,x2,y2,w,h) => [
let toFaceVertices = (x1,y1,x2,y2,w,h) => [
new THREE.Vector2(x1/w, 1.0-y2/h),
new THREE.Vector2(x2/w, 1.0-y2/h),
new THREE.Vector2(x2/w, 1.0-y1/h),
new THREE.Vector2(x1/w, 1.0-y1/h)
];
var toSkinVertices = (x1,y1,x2,y2) => toFaceVertices(x1, y1, x2, y2, 64.0, 64.0);
var toCapeVertices = (x1,y1,x2,y2) => toFaceVertices(x1, y1, x2, y2, 64.0, 32.0);
let toSkinVertices = (x1,y1,x2,y2) => toFaceVertices(x1, y1, x2, y2, 64.0, 64.0);
let toCapeVertices = (x1,y1,x2,y2) => toFaceVertices(x1, y1, x2, y2, 64.0, 32.0);
var addVertices = (box,top,bottom,left,front,right,back) => {
let addVertices = (box,top,bottom,left,front,right,back) => {
box.faceVertexUvs[0] = [];
box.faceVertexUvs[0][0] = [right[3], right[0], right[2]];
box.faceVertexUvs[0][1] = [right[0], right[1], right[2]];
@ -93,7 +93,7 @@ var skinpreview3d = new function(){
// Head
this.head = new THREE.Group();
var headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
let headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
addVertices(headBox,
toSkinVertices(8, 0, 16, 8),
toSkinVertices(16, 0, 24, 8),
@ -102,10 +102,10 @@ var skinpreview3d = new function(){
toSkinVertices(16, 8, 24, 16),
toSkinVertices(24, 8, 32, 16)
);
var headMesh = new THREE.Mesh(headBox, layer1Material);
let headMesh = new THREE.Mesh(headBox, layer1Material);
this.head.add(headMesh);
var head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0);
let head2Box = new THREE.BoxGeometry(9, 9, 9, 0, 0, 0);
addVertices(head2Box,
toSkinVertices(40, 0, 48, 8),
toSkinVertices(48, 0, 56, 8),
@ -114,7 +114,7 @@ var skinpreview3d = new function(){
toSkinVertices(48, 8, 56, 16),
toSkinVertices(56, 8, 64, 16)
);
var head2Mesh = new THREE.Mesh(head2Box, layer2Material);
let head2Mesh = new THREE.Mesh(head2Box, layer2Material);
head2Mesh.renderOrder = -1;
this.head.add(head2Mesh);
@ -124,7 +124,7 @@ var skinpreview3d = new function(){
// Body
this.body = new THREE.Group();
var bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0);
let bodyBox = new THREE.BoxGeometry(8, 12, 4, 0, 0, 0);
addVertices(bodyBox,
toSkinVertices(20, 16, 28, 20),
toSkinVertices(28, 16, 36, 20),
@ -133,10 +133,10 @@ var skinpreview3d = new function(){
toSkinVertices(28, 20, 32, 32),
toSkinVertices(32, 20, 40, 32)
);
var bodyMesh = new THREE.Mesh(bodyBox, layer1Material);
let bodyMesh = new THREE.Mesh(bodyBox, layer1Material);
this.body.add(bodyMesh);
var body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
let body2Box = new THREE.BoxGeometry(9, 13.5, 4.5, 0, 0, 0);
addVertices(body2Box,
toSkinVertices(20, 32, 28, 36),
toSkinVertices(28, 32, 36, 36),
@ -145,7 +145,7 @@ var skinpreview3d = new function(){
toSkinVertices(28, 36, 32, 48),
toSkinVertices(32, 36, 40, 48)
);
var body2Mesh = new THREE.Mesh(body2Box, layer2Material);
let body2Mesh = new THREE.Mesh(body2Box, layer2Material);
this.body.add(body2Mesh);
this.body.position.y = -10;
@ -154,9 +154,9 @@ var skinpreview3d = new function(){
// Right Arm
this.rightArm = new THREE.Group();
var rightArmPivot = new THREE.Group();
let rightArmPivot = new THREE.Group();
var rightArmBox = new THREE.BoxGeometry((isSlim?3:4)-esp, 12-esp, 4-esp, 0, 0, 0);
let rightArmBox = new THREE.BoxGeometry((isSlim?3:4)-esp, 12-esp, 4-esp, 0, 0, 0);
if (isSlim) {
addVertices(rightArmBox,
toSkinVertices(44, 16, 47, 20),
@ -176,10 +176,10 @@ var skinpreview3d = new function(){
toSkinVertices(52, 20, 56, 32)
);
}
var rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
let rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
rightArmPivot.add(rightArmMesh);
var rightArm2Box = new THREE.BoxGeometry((isSlim?3.375:4.5)-esp, 13.5-esp, 4.5-esp, 0, 0, 0);
let rightArm2Box = new THREE.BoxGeometry((isSlim?3.375:4.5)-esp, 13.5-esp, 4.5-esp, 0, 0, 0);
if (isSlim) {
addVertices(rightArm2Box,
toSkinVertices(44, 32, 47, 36),
@ -199,7 +199,7 @@ var skinpreview3d = new function(){
toSkinVertices(52, 36, 56, 48)
);
}
var rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
let rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
rightArm2Mesh.renderOrder = 1;
rightArmPivot.add(rightArm2Mesh);
@ -212,9 +212,9 @@ var skinpreview3d = new function(){
// Left Arm
this.leftArm = new THREE.Group();
var leftArmPivot = new THREE.Group();
let leftArmPivot = new THREE.Group();
var leftArmBox = new THREE.BoxGeometry((isSlim?3:4)-esp, 12-esp, 4-esp, 0, 0, 0);
let leftArmBox = new THREE.BoxGeometry((isSlim?3:4)-esp, 12-esp, 4-esp, 0, 0, 0);
if (isSlim) {
addVertices(leftArmBox,
toSkinVertices(36, 48, 39, 52),
@ -234,10 +234,10 @@ var skinpreview3d = new function(){
toSkinVertices(44, 52, 48, 64)
);
}
var leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
let leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
leftArmPivot.add(leftArmMesh);
var leftArm2Box = new THREE.BoxGeometry((isSlim?3.375:4.5)-esp, 13.5-esp, 4.5-esp, 0, 0, 0);
let leftArm2Box = new THREE.BoxGeometry((isSlim?3.375:4.5)-esp, 13.5-esp, 4.5-esp, 0, 0, 0);
if (isSlim) {
addVertices(leftArm2Box,
toSkinVertices(52, 48, 55, 52),
@ -257,7 +257,7 @@ var skinpreview3d = new function(){
toSkinVertices(60, 52, 64, 64)
);
}
var leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
let leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
leftArm2Mesh.renderOrder = 1;
leftArmPivot.add(leftArm2Mesh);
@ -270,9 +270,9 @@ var skinpreview3d = new function(){
// Right Leg
this.rightLeg = new THREE.Group();
var rightLegPivot = new THREE.Group();
let rightLegPivot = new THREE.Group();
var rightLegBox = new THREE.BoxGeometry(4-esp, 12-esp, 4-esp, 0, 0, 0);
let rightLegBox = new THREE.BoxGeometry(4-esp, 12-esp, 4-esp, 0, 0, 0);
addVertices(rightLegBox,
toSkinVertices(4, 16, 8, 20),
toSkinVertices(8, 16, 12, 20),
@ -281,10 +281,10 @@ var skinpreview3d = new function(){
toSkinVertices(8, 20, 12, 32),
toSkinVertices(12, 20, 16, 32)
);
var rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material);
let rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material);
rightLegPivot.add(rightLegMesh);
var rightLeg2Box = new THREE.BoxGeometry(4.5-esp, 13.5-esp, 4.5-esp, 0, 0, 0);
let rightLeg2Box = new THREE.BoxGeometry(4.5-esp, 13.5-esp, 4.5-esp, 0, 0, 0);
addVertices(rightLeg2Box,
toSkinVertices(4, 32, 8, 36),
toSkinVertices(8, 32, 12, 36),
@ -293,7 +293,7 @@ var skinpreview3d = new function(){
toSkinVertices(8, 36, 12, 48),
toSkinVertices(12, 36, 16, 48)
);
var rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material);
let rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material);
rightLeg2Mesh.renderOrder = 1;
rightLegPivot.add(rightLeg2Mesh);
@ -305,9 +305,9 @@ var skinpreview3d = new function(){
// Left Leg
this.leftLeg = new THREE.Group();
var leftLegPivot = new THREE.Group();
let leftLegPivot = new THREE.Group();
var leftLegBox = new THREE.BoxGeometry(4-esp, 12-esp, 4-esp, 0, 0, 0);
let leftLegBox = new THREE.BoxGeometry(4-esp, 12-esp, 4-esp, 0, 0, 0);
addVertices(leftLegBox,
toSkinVertices(20, 48, 24, 52),
toSkinVertices(24, 48, 28, 52),
@ -316,10 +316,10 @@ var skinpreview3d = new function(){
toSkinVertices(24, 52, 28, 64),
toSkinVertices(28, 52, 32, 64)
);
var leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material);
let leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material);
leftLegPivot.add(leftLegMesh);
var leftLeg2Box = new THREE.BoxGeometry(4.5-esp, 13.5-esp, 4.5-esp, 0, 0, 0);
let leftLeg2Box = new THREE.BoxGeometry(4.5-esp, 13.5-esp, 4.5-esp, 0, 0, 0);
addVertices(leftLeg2Box,
toSkinVertices(4, 48, 8, 52),
toSkinVertices(8, 48, 12, 52),
@ -328,7 +328,7 @@ var skinpreview3d = new function(){
toSkinVertices(8, 52, 12, 64),
toSkinVertices(12, 52, 16, 64)
);
var leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material);
let leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material);
leftLeg2Mesh.renderOrder = 1;
leftLegPivot.add(leftLeg2Mesh);
@ -338,7 +338,7 @@ var skinpreview3d = new function(){
this.leftLeg.position.x = 2;
this.add(this.leftLeg);
}
}
};
this.CapeObject = class extends THREE.Group {
constructor(capeMaterial) {
@ -346,7 +346,7 @@ var skinpreview3d = new function(){
// back = outside
// front = inside
var capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
let capeBox = new THREE.BoxGeometry(10, 16, 1, 0, 0, 0);
addVertices(capeBox,
toCapeVertices(1, 0, 11, 1),
toCapeVertices(11, 0, 21, 1),
@ -360,13 +360,15 @@ var skinpreview3d = new function(){
this.cape.position.z = -0.5;
this.add(this.cape);
}
}
};
this.PlayerObject = class extends THREE.Group {
constructor(isSlim, layer1Material, layer2Material, capeMaterial){
constructor(slim, layer1Material, layer2Material, capeMaterial){
super();
this.skin = new skinpreview3d.SkinObject(isSlim, layer1Material, layer2Material);
this.slim = slim;
this.skin = new skinpreview3d.SkinObject(slim, layer1Material, layer2Material);
this.skin.visible = false;
this.add(this.skin);
@ -377,11 +379,11 @@ var skinpreview3d = new function(){
this.cape.visible = false;
this.add(this.cape);
}
}
};
this.WalkAnimation = (player,time) => {
var skin = player.skin;
var angleRot = time + Math.PI/2;
let skin = player.skin;
let angleRot = time + Math.PI/2;
// Leg Swing
skin.leftLeg.rotation.x = Math.cos(angleRot);
@ -390,35 +392,35 @@ var skinpreview3d = new function(){
// Arm Swing
skin.leftArm.rotation.x = Math.cos(angleRot + (Math.PI));
skin.rightArm.rotation.x = Math.cos(angleRot);
}
};
this.SkinViewer = function(options){
this.SkinViewer = class {
constructor(options) {
this.domElement = options.domElement;
this.slim = options.slim || false;
this.animation = options.animation || null;
var skinImg = new Image();
var skinCanvas = document.createElement('canvas');
var skinContext = skinCanvas.getContext('2d');
var skinTexture = new THREE.Texture(skinCanvas);
skinTexture.magFilter = THREE.NearestFilter;
skinTexture.minFilter = THREE.NearestMipMapNearestFilter;
var capeImg = new Image();
var capeCanvas = document.createElement('canvas');
var capeContext = capeCanvas.getContext('2d');
var capeTexture = new THREE.Texture(capeCanvas);
capeTexture.magFilter = THREE.NearestFilter;
capeTexture.minFilter = THREE.NearestMipMapNearestFilter;
var layer1Material = new THREE.MeshBasicMaterial({map: skinTexture, side: THREE.FrontSide});
var layer2Material = new THREE.MeshBasicMaterial({map: skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide});
var capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture});
this.animationPaused = false;
this.animationSpeed = 3;
this.animationTime = 0;
this.disposed = false;
// texture
this.skinImg = new Image();
this.skinCanvas = document.createElement('canvas');
this.skinTexture = new THREE.Texture(this.skinCanvas);
this.skinTexture.magFilter = THREE.NearestFilter;
this.skinTexture.minFilter = THREE.NearestMipMapNearestFilter;
this.capeImg = new Image();
this.capeCanvas = document.createElement('canvas');
this.capeTexture = new THREE.Texture(this.capeCanvas);
this.capeTexture.magFilter = THREE.NearestFilter;
this.capeTexture.minFilter = THREE.NearestMipMapNearestFilter;
this.layer1Material = new THREE.MeshBasicMaterial({map: this.skinTexture, side: THREE.FrontSide});
this.layer2Material = new THREE.MeshBasicMaterial({map: this.skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide});
this.capeMaterial = new THREE.MeshBasicMaterial({map: this.capeTexture});
// scene
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75);
@ -430,39 +432,16 @@ var skinpreview3d = new function(){
this.renderer.context.getShaderInfoLog = () => ''; // shut firefox up
this.domElement.appendChild(this.renderer.domElement);
this.playerObject = new skinpreview3d.PlayerObject(this.slim, layer1Material, layer2Material, capeMaterial);
this.playerObject = new skinpreview3d.PlayerObject(options.slim === true, this.layer1Material, this.layer2Material, this.capeMaterial);
this.scene.add(this.playerObject);
var setSize = (width,height) => {
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
};
Object.defineProperties(this, {
'skinUrl': {
get: () => skinImg.src,
set: url => skinImg.src = url
},
'capeUrl': {
get: () => capeImg.src,
set: url => capeImg.src = url
},
'width': {
get: () => this.renderer.getSize().width,
set: newWidth => setSize(newWidth, this.height)
},
'height': {
get: () => this.renderer.getSize().height,
set: newHeight => setSize(this.width, newHeight)
}
});
skinImg.crossOrigin = '';
skinImg.onload = () => {
var isOldFormat = false;
if (skinImg.width !== skinImg.height) {
if (skinImg.width === 2*skinImg.height) {
// texture loading
this.skinImg.crossOrigin = '';
this.skinImg.onerror = () => console.log('Failed loading ' + this.skinImg.src);
this.skinImg.onload = () => {
let isOldFormat = false;
if (this.skinImg.width !== this.skinImg.height) {
if (this.skinImg.width === 2*this.skinImg.height) {
isOldFormat = true;
} else {
console.log('Bad skin size');
@ -470,49 +449,56 @@ var skinpreview3d = new function(){
}
}
let skinContext = this.skinCanvas.getContext('2d');
if(isOldFormat){
var width = skinImg.width;
skinCanvas.width = width;
skinCanvas.height = width;
let width = this.skinImg.width;
this.skinCanvas.width = width;
this.skinCanvas.height = width;
skinContext.clearRect(0, 0, width, width);
skinContext.drawImage(skinImg, 0, 0, width, width/2.0);
skinContext.drawImage(this.skinImg, 0, 0, width, width/2.0);
convertSkinTo1_8(skinContext, width);
} else {
skinCanvas.width = skinImg.width;
skinCanvas.height = skinImg.height;
skinContext.clearRect(0, 0, skinCanvas.width, skinCanvas.height);
skinContext.drawImage(skinImg, 0, 0, skinCanvas.width, skinCanvas.height);
this.skinCanvas.width = this.skinImg.width;
this.skinCanvas.height = this.skinImg.height;
skinContext.clearRect(0, 0, this.skinCanvas.width, this.skinCanvas.height);
skinContext.drawImage(this.skinImg, 0, 0, this.skinCanvas.width, this.skinCanvas.height);
}
skinTexture.needsUpdate = true;
layer1Material.needsUpdate = true;
layer2Material.needsUpdate = true;
this.skinTexture.needsUpdate = true;
this.layer1Material.needsUpdate = true;
this.layer2Material.needsUpdate = true;
this.playerObject.skin.visible = true;
};
skinImg.onerror = () => console.log('Failed loading ' + skinImg.src);
capeImg.crossOrigin = '';
capeImg.onload = () => {
if (capeImg.width !== 2*capeImg.height) {
this.capeImg.crossOrigin = '';
this.capeImg.onerror = () => console.log('Failed loading ' + this.capeImg.src);
this.capeImg.onload = () => {
if (this.capeImg.width !== 2*this.capeImg.height) {
console.log('Bad cape size');
return;
}
capeCanvas.width = capeImg.width;
capeCanvas.height = capeImg.height;
capeContext.clearRect(0, 0, capeCanvas.width, capeCanvas.height);
capeContext.drawImage(capeImg, 0, 0, capeCanvas.width, capeCanvas.height);
this.capeCanvas.width = this.capeImg.width;
this.capeCanvas.height = this.capeImg.height;
let capeContext = this.capeCanvas.getContext('2d');
capeContext.clearRect(0, 0, this.capeCanvas.width, this.capeCanvas.height);
capeContext.drawImage(this.capeImg, 0, 0, this.capeCanvas.width, this.capeCanvas.height);
capeTexture.needsUpdate = true;
capeMaterial.needsUpdate = true;
this.capeTexture.needsUpdate = true;
this.capeMaterial.needsUpdate = true;
this.playerObject.cape.visible = true;
};
capeImg.onerror = () => console.log('Failed loading ' + capeImg.src);
var draw = () => {
requestAnimationFrame(draw);
if(options.skinUrl) this.skinUrl = options.skinUrl;
if(options.capeUrl) this.capeUrl = options.capeUrl;
if(options.width) this.width = options.width;
if(options.height) this.height = options.height;
let draw = () => {
if(this.disposed) return;
window.requestAnimationFrame(draw);
if(!this.animationPaused){
this.animationTime++;
if(this.animation){
@ -520,15 +506,57 @@ var skinpreview3d = new function(){
}
}
this.renderer.render(this.scene, this.camera);
}
};
draw();
if(options.skinUrl) this.skinUrl = options.skinUrl;
if(options.capeUrl) this.capeUrl = options.capeUrl;
if(options.width) this.width = options.width;
if(options.height) this.height = options.height;
}
setSize(width, height){
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
}
dispose() {
this.disposed = true;
this.domElement.removeChild(this.renderer.domElement);
this.renderer.dispose();
this.skinTexture.dispose();
this.capeTexture.dispose();
}
get skinUrl(){
return this.skinImg.src;
}
set skinUrl(url){
this.skinImg.src = url;
}
get capeUrl(){
return this.capeImg.src;
}
set capeUrl(url){
this.capeImg.src = url;
}
get width(){
return this.renderer.getSize().width;
}
set width(newWidth){
this.setSize(newWidth, this.height);
}
get height(){
return this.renderer.getSize().height;
}
set height(newHeight){
this.setSize(this.width, newHeight);
}
};
// ====== OrbitControls ======
// The code was originally from https://github.com/mrdoob/three.js/blob/d45a042cf962e9b1aa9441810ba118647b48aacb/examples/js/controls/OrbitControls.js
/**
@ -667,18 +695,18 @@ var skinpreview3d = new function(){
// this method is exposed, but perhaps it would be better if we can make it private...
this.update = function () {
var offset = new THREE.Vector3();
let offset = new THREE.Vector3();
// so camera.up is the orbit axis
var quat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0));
var quatInverse = quat.clone().inverse();
let quat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0));
let quatInverse = quat.clone().inverse();
var lastPosition = new THREE.Vector3();
var lastQuaternion = new THREE.Quaternion();
let lastPosition = new THREE.Vector3();
let lastQuaternion = new THREE.Quaternion();
return function update() {
var position = scope.object.position;
let position = scope.object.position;
offset.copy(position).sub(scope.target);
@ -777,37 +805,37 @@ var skinpreview3d = new function(){
// internals
//
var scope = this;
let scope = this;
var changeEvent = { type: 'change' };
var startEvent = { type: 'start' };
var endEvent = { type: 'end' };
let changeEvent = { type: 'change' };
let startEvent = { type: 'start' };
let endEvent = { type: 'end' };
var STATE = { NONE: - 1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5 };
let STATE = { NONE: - 1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5 };
var state = STATE.NONE;
let state = STATE.NONE;
var EPS = 0.000001;
let EPS = 0.000001;
// current position in spherical coordinates
var spherical = new THREE.Spherical();
var sphericalDelta = new THREE.Spherical();
let spherical = new THREE.Spherical();
let sphericalDelta = new THREE.Spherical();
var scale = 1;
var panOffset = new THREE.Vector3();
var zoomChanged = false;
let scale = 1;
let panOffset = new THREE.Vector3();
let zoomChanged = false;
var rotateStart = new THREE.Vector2();
var rotateEnd = new THREE.Vector2();
var rotateDelta = new THREE.Vector2();
let rotateStart = new THREE.Vector2();
let rotateEnd = new THREE.Vector2();
let rotateDelta = new THREE.Vector2();
var panStart = new THREE.Vector2();
var panEnd = new THREE.Vector2();
var panDelta = new THREE.Vector2();
let panStart = new THREE.Vector2();
let panEnd = new THREE.Vector2();
let panDelta = new THREE.Vector2();
var dollyStart = new THREE.Vector2();
var dollyEnd = new THREE.Vector2();
var dollyDelta = new THREE.Vector2();
let dollyStart = new THREE.Vector2();
let dollyEnd = new THREE.Vector2();
let dollyDelta = new THREE.Vector2();
function getAutoRotationAngle() {
return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
@ -825,8 +853,8 @@ var skinpreview3d = new function(){
sphericalDelta.phi -= angle;
}
var panLeft = function () {
var v = new THREE.Vector3();
let panLeft = function () {
let v = new THREE.Vector3();
return function panLeft(distance, objectMatrix) {
v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix
v.multiplyScalar(- distance);
@ -835,8 +863,8 @@ var skinpreview3d = new function(){
};
}();
var panUp = function () {
var v = new THREE.Vector3();
let panUp = function () {
let v = new THREE.Vector3();
return function panUp(distance, objectMatrix) {
v.setFromMatrixColumn(objectMatrix, 1); // get Y column of objectMatrix
v.multiplyScalar(distance);
@ -846,15 +874,15 @@ var skinpreview3d = new function(){
}();
// deltaX and deltaY are in pixels; right and down are positive
var pan = function () {
var offset = new THREE.Vector3();
let pan = function () {
let offset = new THREE.Vector3();
return function pan(deltaX, deltaY) {
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
let element = scope.domElement === document ? scope.domElement.body : scope.domElement;
if (scope.object instanceof THREE.PerspectiveCamera) {
// perspective
var position = scope.object.position;
let position = scope.object.position;
offset.copy(position).sub(scope.target);
var targetDistance = offset.length();
let targetDistance = offset.length();
// half of the fov is center to top of screen
targetDistance *= Math.tan((scope.object.fov / 2) * Math.PI / 180.0);
@ -922,7 +950,7 @@ var skinpreview3d = new function(){
function handleMouseMoveRotate(event) {
rotateEnd.set(event.clientX, event.clientY);
rotateDelta.subVectors(rotateEnd, rotateStart);
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
let element = scope.domElement === document ? scope.domElement.body : scope.domElement;
// rotating across whole screen goes 360 degrees around
rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed);
// rotating up and down along whole screen attempts to go 360, but limited to 180
@ -994,9 +1022,9 @@ var skinpreview3d = new function(){
}
function handleTouchStartDolly(event) {
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
var distance = Math.sqrt(dx * dx + dy * dy);
let dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
let dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
let distance = Math.sqrt(dx * dx + dy * dy);
dollyStart.set(0, distance);
}
@ -1007,7 +1035,7 @@ var skinpreview3d = new function(){
function handleTouchMoveRotate(event) {
rotateEnd.set(event.touches[ 0 ].pageX, event.touches[ 0 ].pageY);
rotateDelta.subVectors(rotateEnd, rotateStart);
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
let element = scope.domElement === document ? scope.domElement.body : scope.domElement;
rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed);
rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed);
rotateStart.copy(rotateEnd);
@ -1016,9 +1044,9 @@ var skinpreview3d = new function(){
}
function handleTouchMoveDolly(event) {
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
var distance = Math.sqrt(dx * dx + dy * dy);
let dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
let dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
let distance = Math.sqrt(dx * dx + dy * dy);
dollyEnd.set(0, distance);
dollyDelta.subVectors(dollyEnd, dollyStart);
if (dollyDelta.y > 0) {
@ -1213,7 +1241,8 @@ var skinpreview3d = new function(){
this.OrbitControls.prototype.constructor = this.OrbitControls;
// ============
this.SkinControl = function(skinViewer) {
this.SkinControl = class {
constructor(skinViewer) {
this.enableAnimationControl = true;
this.skinViewer = skinViewer;
@ -1224,22 +1253,29 @@ var skinpreview3d = new function(){
this.orbitControls.maxDistance = 256;
this.orbitControls.update();
this.skinViewer.domElement.addEventListener('contextmenu', e => {
this.animationPauseListener = e => {
if(this.enableAnimationControl) {
e.preventDefault();
this.skinViewer.animationPaused = !this.skinViewer.animationPaused;
}
}, false);
};
this.skinViewer.domElement.addEventListener('contextmenu', this.animationPauseListener, false);
}
dispose(){
this.skinViewer.domElement.removeEventListener('contextmenu', this.animationPauseListener, false);
this.orbitControls.dispose();
}
};
}();
if(window.jQuery){
(function($) {
$.fn.skinPreview3d = function (jqueryOptions) {
var options = Object.create(jqueryOptions);
let options = Object.create(jqueryOptions);
options.domElement = this.get(0);
var skinViewer = new skinpreview3d.SkinViewer(options);
let skinViewer = new skinpreview3d.SkinViewer(options);
if(options.disableControl !== true)
skinViewer.control = new skinpreview3d.SkinControl(skinViewer);