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

fixes

This commit is contained in:
yushijinhun 2017-08-29 23:04:08 +08:00
parent cef50a5223
commit dcab556a37
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
3 changed files with 38 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
README.md
View File

@ -14,21 +14,18 @@ The code was originally created by [Kent Rasmussen](https://github.com/earthiver
# Usage # Usage
HTML HTML
```html ```html
<div id="canvas_container"> <div id="skin_container"></div>
<canvas id="skinCanvas"></canvas>
<canvas id="capeCanvas"></canvas>
</div>
``` ```
JS JS
```js ```js
$(function() { $(() => {
$("#canvas_container").skinPreview3D({ $("#skin_container").skinPreview3D({
skinUrl: "img/Dinnerbone.png", skinUrl: 'img/Dinnerbone.png',
capeUrl: "img/cape.png", capeUrl: 'img/cape.png',
skinCanvas: $('#skinCanvas'), width: 600,
capeCanvas: $('#capeCanvas') height: 600
}); });
}); });
``` ```

24
example.html
View File

@ -1,33 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8">
<title>SkinPreview3D</title> <title>SkinPreview3D</title>
<style>
#canvas, #cape{
display: none;
}
</style>
</head> </head>
<body> <body>
<div id="canvas_container"> <div id="skin_container"></div>
<canvas id="canvas"></canvas>
<canvas id="cape"></canvas>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script> <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 type="text/javascript" src="js/skinpreview3d.js"></script>
<script> <script>
$(function() { $(function() {
$("#canvas_container").skinPreview3D({ $("#skin_container").skinPreview3D({
skinUrl: "img/Dinnerbone.png", skinUrl: 'img/Dinnerbone.png',
capeUrl: "img/cape.png", capeUrl: 'img/cape.png',
skinCanvas: $('#canvas'), width: 600,
capeCanvas: $('#cape') height: 600
}); });
}); });
</script> </script>

51
js/skinpreview3d.js
View File

@ -4,7 +4,7 @@
*/ */
function SkinUtil(){ function SkinUtil(){
this.convert6432To6464 = function(context) { this.convert6432To6464 = context => {
this.copyImage(context, 4, 16, 4, 4, 20, 48, true); // Top Leg this.copyImage(context, 4, 16, 4, 4, 20, 48, true); // Top Leg
this.copyImage(context, 8, 16, 4, 4, 24, 48, true); // Bottom Leg this.copyImage(context, 8, 16, 4, 4, 24, 48, true); // Bottom Leg
this.copyImage(context, 0, 20, 4, 12, 24, 52, true); // Outer Leg this.copyImage(context, 0, 20, 4, 12, 24, 52, true); // Outer Leg
@ -20,7 +20,7 @@ function SkinUtil(){
this.copyImage(context, 52, 20, 4, 12, 44, 52, true); // Back Arm this.copyImage(context, 52, 20, 4, 12, 44, 52, true); // Back Arm
} }
this.copyImage = function(context, sX, sY, w, h, dX, dY, flipHorizontal) { this.copyImage = (context, sX, sY, w, h, dX, dY, flipHorizontal) => {
var imgData = context.getImageData(sX, sY, w, h); var imgData = context.getImageData(sX, sY, w, h);
if(flipHorizontal){ if(flipHorizontal){
@ -54,7 +54,7 @@ function SkinUtil(){
context.putImageData(imgData,dX,dY); context.putImageData(imgData,dX,dY);
} }
this.fixOverlay = function(context) { this.fixOverlay = context => {
this.fixHead2(context); this.fixHead2(context);
this.fixBody2(context); this.fixBody2(context);
this.fixRightArm2(context); this.fixRightArm2(context);
@ -63,7 +63,7 @@ function SkinUtil(){
this.fixLeftLeg2(context); this.fixLeftLeg2(context);
} }
this.fixHead2 = function(context) { this.fixHead2 = context => {
// Front // Front
if(this.hasTransparency(context, 40, 8, 8, 8)) return; if(this.hasTransparency(context, 40, 8, 8, 8)) return;
@ -83,7 +83,7 @@ function SkinUtil(){
context.clearRect(56, 8, 8, 8); context.clearRect(56, 8, 8, 8);
} }
this.fixBody2 = function(context) { this.fixBody2 = context => {
// Front // Front
if(this.hasTransparency(context, 20, 36, 8, 12)) return; if(this.hasTransparency(context, 20, 36, 8, 12)) return;
@ -103,7 +103,7 @@ function SkinUtil(){
context.clearRect(32, 36, 8, 12); context.clearRect(32, 36, 8, 12);
} }
this.fixRightArm2 = function(context) { this.fixRightArm2 = context => {
// Front // Front
if(this.hasTransparency(context, 44, 36, 4, 12)) return; if(this.hasTransparency(context, 44, 36, 4, 12)) return;
@ -123,7 +123,7 @@ function SkinUtil(){
context.clearRect(52, 36, 4, 12); context.clearRect(52, 36, 4, 12);
} }
this.fixLeftArm2 = function(context) { this.fixLeftArm2 = context => {
// Front // Front
if(this.hasTransparency(context, 52, 52, 4, 12)) return; if(this.hasTransparency(context, 52, 52, 4, 12)) return;
@ -143,7 +143,7 @@ function SkinUtil(){
context.clearRect(60, 52, 4, 12); context.clearRect(60, 52, 4, 12);
} }
this.fixRightLeg2 = function(context) { this.fixRightLeg2 = context => {
// Front // Front
if(this.hasTransparency(context, 4, 36, 4, 12)) return; if(this.hasTransparency(context, 4, 36, 4, 12)) return;
@ -163,7 +163,7 @@ function SkinUtil(){
context.clearRect(12, 36, 4, 12); context.clearRect(12, 36, 4, 12);
} }
this.fixLeftLeg2 = function(context) { this.fixLeftLeg2 = context => {
// Front // Front
if(this.hasTransparency(context, 4, 52, 4, 12)) return; if(this.hasTransparency(context, 4, 52, 4, 12)) return;
@ -183,7 +183,7 @@ function SkinUtil(){
context.clearRect(12, 52, 4, 12); context.clearRect(12, 52, 4, 12);
} }
this.fixNonVisible = function(context) { this.fixNonVisible = context => {
// 64x32 and 64x64 skin parts // 64x32 and 64x64 skin parts
context.clearRect(0, 0, 8, 8); context.clearRect(0, 0, 8, 8);
context.clearRect(24, 0, 16, 8); context.clearRect(24, 0, 16, 8);
@ -206,7 +206,7 @@ function SkinUtil(){
context.clearRect(60, 48, 8, 4); context.clearRect(60, 48, 8, 4);
} }
this.hasTransparency = function(context, x, y, w, h) { this.hasTransparency = (context, x, y, w, h) => {
var imgData = context.getImageData(x, y, w, h); var imgData = context.getImageData(x, y, w, h);
for(y = 0; y < h; y++) { for(y = 0; y < h; y++) {
@ -221,11 +221,13 @@ function SkinUtil(){
} }
(function ($) { (function($) {
'use strict'; 'use strict';
$.fn.skinPreview3D = function (options) { $.fn.skinPreview3D = function (options) {
var sp = new SkinPreview3D(this, options.skinCanvas.get(0), options.capeCanvas.get(0)); var skinCanvas=document.createElement('canvas');
var capeCanvas=document.createElement('canvas');
var sp = new SkinPreview3D(this, skinCanvas, capeCanvas, options.width, options.height);
sp.setSkin(options.skinUrl); sp.setSkin(options.skinUrl);
if(options.capeUrl!=null){ if(options.capeUrl!=null){
sp.setCape(options.capeUrl); sp.setCape(options.capeUrl);
@ -234,17 +236,12 @@ function SkinUtil(){
} (window.jQuery)); } (window.jQuery));
function SkinPreview3D(model, skinCanvas, capeCanvas){ function SkinPreview3D(model, skinCanvas, capeCanvas, canvasW, canvasH){
var scene, camera, renderer; var scene, camera, renderer;
var geometry, mesh; var geometry, mesh;
var rightLeg2Box, leftLeg2Box; var rightLeg2Box, leftLeg2Box;
var radius = 32; var radius = 32;
var canvasW = 470;
var canvasH = 620;
var isPaused = false; var isPaused = false;
var originMouseX = 0; var originMouseX = 0;
var rotating = false; var rotating = false;
@ -264,8 +261,8 @@ function SkinPreview3D(model, skinCanvas, capeCanvas){
var skinContext = skinCanvas.getContext("2d"); var skinContext = skinCanvas.getContext("2d");
//Cape Part //Cape Part
capeCanvas.width = 22; capeCanvas.width = 32;
capeCanvas.height = 17; capeCanvas.height = 32;
var capeContext = capeCanvas.getContext("2d"); var capeContext = capeCanvas.getContext("2d");
var capeTexture = new THREE.Texture(capeCanvas); var capeTexture = new THREE.Texture(capeCanvas);
capeTexture.magFilter = THREE.NearestFilter; capeTexture.magFilter = THREE.NearestFilter;
@ -276,7 +273,7 @@ function SkinPreview3D(model, skinCanvas, capeCanvas){
skinTexture.minFilter = THREE.NearestMipMapNearestFilter; skinTexture.minFilter = THREE.NearestMipMapNearestFilter;
layer1Material = new THREE.MeshBasicMaterial({map: skinTexture, side: THREE.FrontSide}); layer1Material = new THREE.MeshBasicMaterial({map: skinTexture, side: THREE.FrontSide});
layer2Material = new THREE.MeshBasicMaterial({map: skinTexture, transparent: true, opacity: 1, angleRotTest: 0.5, side: THREE.DoubleSide}); layer2Material = new THREE.MeshBasicMaterial({map: skinTexture, transparent: true, opacity: 1, side: THREE.DoubleSide});
capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture}); capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture});
var skinImg = new Image(); var skinImg = new Image();
@ -316,7 +313,7 @@ function SkinPreview3D(model, skinCanvas, capeCanvas){
capeContext.clearRect(0, 0, capeCanvas.width, capeCanvas.height); capeContext.clearRect(0, 0, capeCanvas.width, capeCanvas.height);
// Draw the image to the canvas // Draw the image to the canvas
capeContext.drawImage(capeImg, 0, 0); capeContext.drawImage(capeImg, 0, 0, capeCanvas.width, capeCanvas.height);
capeTexture.needsUpdate = true; capeTexture.needsUpdate = true;
capeMaterial.needsUpdate = true; capeMaterial.needsUpdate = true;
@ -1077,7 +1074,7 @@ function SkinPreview3D(model, skinCanvas, capeCanvas){
capePivot.rotation.x = 25 * (Math.PI/180); capePivot.rotation.x = 25 * (Math.PI/180);
renderer = new THREE.WebGLRenderer({angleRot: true, alpha: true}); renderer = new THREE.WebGLRenderer({angleRot: true, alpha: true, antialias: true});
renderer.setSize(canvasW, canvasH); renderer.setSize(canvasW, canvasH);
model.append(renderer.domElement); model.append(renderer.domElement);
@ -1128,11 +1125,9 @@ function SkinPreview3D(model, skinCanvas, capeCanvas){
mouseDown = true; mouseDown = true;
}); });
$(document).mouseup(function(){ $(document).mouseup(() => mouseDown = false);
mouseDown = false;
});
model.bind("contextmenu", function(e){ model.bind("contextmenu", e => {
e.preventDefault(); e.preventDefault();
isPaused = !isPaused; isPaused = !isPaused;
}); });