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

Move things into namespace 'skinpreview3d'

This commit is contained in:
yushijinhun 2017-09-01 21:57:50 +08:00
parent f145384117
commit 4af41f72a1
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
2 changed files with 426 additions and 406 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example.html
View File

@ -13,7 +13,7 @@
<script type="text/javascript" src="js/skinpreview3d.js"></script>
<script>
$(function() {
$("#skin_container").skinPreview3D({
$("#skin_container").skinPreview3d({
skinUrl: 'img/hatsune_miku.png',
capeUrl: 'img/mojang_cape.png',
slim: true,

256
js/skinpreview3d.js
View File

@ -5,18 +5,10 @@
'use strict';
(function($) {
$.fn.skinPreview3D = function (options) {
var sp = new SkinPreview3D(this, options.width, options.height, options.slim === true);
sp.setSkin(options.skinUrl);
if(options.capeUrl != null)
sp.setCape(options.capeUrl);
};
// namespace skinpreview3d
var skinpreview3d = new function(){
} (window.jQuery));
function SkinUtils(){
this.copyImage = (context, sX, sY, w, h, dX, dY, flipHorizontal) => {
var copyImage = (context, sX, sY, w, h, dX, dY, flipHorizontal) => {
var imgData = context.getImageData(sX, sY, w, h);
if(flipHorizontal){
for(var y = 0; y < h; y++) {
@ -48,7 +40,7 @@ function SkinUtils(){
context.putImageData(imgData,dX,dY);
};
this.convertSkinTo1_8 = (context, width) => {
var convertSkinTo1_8 = (context, width) => {
var scale = width/64.0;
var copySkin = (context, sX, sY, w, h, dX, dY, flipHorizontal) => this.copyImage(context, sX*scale, sY*scale, w*scale, h*scale, dX*scale, dY*scale, flipHorizontal);
@ -65,113 +57,17 @@ function SkinUtils(){
copySkin(context, 48, 20, 4, 12, 32, 52, true); // Inner Arm
copySkin(context, 52, 20, 4, 12, 44, 52, true); // Back Arm
};
}
function SkinPreview3D(model, canvasW, canvasH, isSlim){
var radius = 32;
var isPaused = false;
var rotating = false;
var angleRot = 0;
var camera = new THREE.PerspectiveCamera(75, canvasW / canvasH, 1, 10000);
camera.position.y = -12;
camera.position.z = radius;
var scene = new THREE.Scene();
var utils = new SkinUtils();
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 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.setSkin = url => skinImg.src = url;
this.setCape = url => capeImg.src = url;
var renderer;
var capePivot;
var headBox, headMesh, bodyBox, bodyMesh, rightArmBox, rightArmMesh, leftArmBox, leftArmMesh, rightLegBox, rightLegMesh, leftLegBox, leftLegMesh, head2Box, head2Mesh, body2Box, body2Mesh, rightArm2Box, rightArm2Mesh, leftArm2Box, leftArm2Mesh, rightLeg2Box, rightLeg2Mesh, leftLeg2Box, leftLeg2Mesh, capeBox, capeMesh;
var skinImg = new Image();
skinImg.crossOrigin = '';
var hasAnimate = false;
skinImg.onload = () => {
var isOldFormat = false;
if (skinImg.width !== skinImg.height) {
if (skinImg.width === 2*skinImg.height) {
isOldFormat = true;
} else {
console.log('Bad skin size');
return;
}
}
if(isOldFormat){
var width = skinImg.width;
skinCanvas.width = width;
skinCanvas.height = width;
skinContext.clearRect(0, 0, width, width);
skinContext.drawImage(skinImg, 0, 0, width, width/2.0);
utils.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);
}
skinTexture.needsUpdate = true;
layer1Material.needsUpdate = true;
layer2Material.needsUpdate = true;
if(!hasAnimate) {
initializeSkin();
hasAnimate = true;
drawSkin();
}
};
skinImg.onerror = () => console.log('Failed loading ' + skinImg.src);
var capeImg = new Image();
capeImg.crossOrigin = '';
capeImg.onload = () => {
if (capeImg.width !== 2*capeImg.height) {
console.log('Bad cape size');
return;
}
capePivot.add(capeMesh);
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);
capeTexture.needsUpdate = true;
capeMaterial.needsUpdate = true;
};
capeImg.onerror = () => console.log('Failed loading ' + capeImg.src);
var initializeSkin = () => {
var 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);
var addVertices = (box,top,bottom,left,front,right,back) => {
box.faceVertexUvs[0] = [];
box.faceVertexUvs[0][0] = [right[3], right[0], right[2]];
@ -188,6 +84,57 @@ function SkinPreview3D(model, canvasW, canvasH, isSlim){
box.faceVertexUvs[0][11] = [back[0], back[1], back[2]];
};
this.SkinViewer = function(model, canvasW, canvasH, isSlim){
var angleRot = 0;
var initialized = false;
var camera = new THREE.PerspectiveCamera(75, canvasW / canvasH, 1, 10000);
camera.position.y = -12;
camera.position.z = 32;
var scene = new THREE.Scene();
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});
var renderer;
var capePivot;
var headBox, headMesh,
bodyBox, bodyMesh,
rightArmBox, rightArmMesh,
leftArmBox, leftArmMesh,
rightLegBox, rightLegMesh,
leftLegBox, leftLegMesh,
head2Box, head2Mesh,
body2Box, body2Mesh,
rightArm2Box, rightArm2Mesh,
leftArm2Box, leftArm2Mesh,
rightLeg2Box, rightLeg2Mesh,
leftLeg2Box, leftLeg2Mesh,
capeBox, capeMesh;
this.paused = false;
this.animationSpeed = 3;
this.setSkin = url => skinImg.src = url;
this.setCape = url => capeImg.src = url;
var initialize = () => {
// Head Parts
headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
addVertices(headBox,
@ -446,27 +393,83 @@ function SkinPreview3D(model, canvasW, canvasH, isSlim){
model.append(renderer.domElement);
}
skinImg.crossOrigin = '';
skinImg.onload = () => {
var isOldFormat = false;
if (skinImg.width !== skinImg.height) {
if (skinImg.width === 2*skinImg.height) {
isOldFormat = true;
} else {
console.log('Bad skin size');
return;
}
}
if(isOldFormat){
var width = skinImg.width;
skinCanvas.width = width;
skinCanvas.height = width;
skinContext.clearRect(0, 0, width, width);
skinContext.drawImage(skinImg, 0, 0, width, width/2.0);
utils.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);
}
skinTexture.needsUpdate = true;
layer1Material.needsUpdate = true;
layer2Material.needsUpdate = true;
if(!initialized) {
initialize();
initialized = true;
drawSkin();
}
};
skinImg.onerror = () => console.log('Failed loading ' + skinImg.src);
capeImg.crossOrigin = '';
capeImg.onload = () => {
if (capeImg.width !== 2*capeImg.height) {
console.log('Bad cape size');
return;
}
capePivot.add(capeMesh);
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);
capeTexture.needsUpdate = true;
capeMaterial.needsUpdate = true;
};
capeImg.onerror = () => console.log('Failed loading ' + capeImg.src);
var startTime = Date.now();
var drawSkin = () => {
requestAnimationFrame(drawSkin);
var time = (Date.now() - startTime)/1000;
if(!isPaused)
if(!this.paused)
angleRot += 0.01;
var speed = 3;
//Leg Swing
leftLeg2Mesh.rotation.x = leftLegMesh.rotation.x = Math.cos(angleRot*speed);
leftLeg2Mesh.rotation.x = leftLegMesh.rotation.x = Math.cos(angleRot*this.animationSpeed);
leftLeg2Mesh.position.z = leftLegMesh.position.z = 0 - 6*Math.sin(leftLegMesh.rotation.x);
leftLeg2Mesh.position.y = leftLegMesh.position.y = -16 - 6*Math.abs(Math.cos(leftLegMesh.rotation.x));
rightLeg2Mesh.rotation.x = rightLegMesh.rotation.x = Math.cos(angleRot*speed + (Math.PI));
rightLeg2Mesh.rotation.x = rightLegMesh.rotation.x = Math.cos(angleRot*this.animationSpeed + (Math.PI));
rightLeg2Mesh.position.z = rightLegMesh.position.z = 0 - 6*Math.sin(rightLegMesh.rotation.x);
rightLeg2Mesh.position.y = rightLegMesh.position.y = -16 - 6*Math.abs(Math.cos(rightLegMesh.rotation.x));
//Arm Swing
leftArm2Mesh.rotation.x = leftArmMesh.rotation.x = Math.cos(angleRot*speed + (Math.PI));
leftArm2Mesh.rotation.x = leftArmMesh.rotation.x = Math.cos(angleRot*this.animationSpeed + (Math.PI));
leftArm2Mesh.position.z = leftArmMesh.position.z = 0 - 6*Math.sin(leftArmMesh.rotation.x);
leftArm2Mesh.position.y = leftArmMesh.position.y = -4 - 6*Math.abs(Math.cos(leftArmMesh.rotation.x));
rightArm2Mesh.rotation.x = rightArmMesh.rotation.x = Math.cos(angleRot*speed);
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));
@ -475,9 +478,26 @@ function SkinPreview3D(model, canvasW, canvasH, isSlim){
if(angleRot > 360)
angleRot = 0;
}
}
model.bind('contextmenu', e => {
}
if(window.jQuery){
(function($) {
$.fn.skinPreview3d = function (options) {
var sp = new skinpreview3d.SkinViewer(this, options.width, options.height, options.slim === true);
sp.setSkin(options.skinUrl);
if(options.capeUrl != null)
sp.setCape(options.capeUrl);
if(options.disableControl!==true){
this.bind('contextmenu', e => {
e.preventDefault();
isPaused = !isPaused;
sp.paused = !sp.paused;
});
}
return sp;
};
} (window.jQuery));
}