refactor
This commit is contained in:
yushijinhun
parent
fc129b92dc
commit
30cf976800
|
|
@ -1,23 +0,0 @@
|
|||
VAGRANTFILE_API_VERSION = "2"
|
||||
|
||||
Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
|
||||
|
||||
config.vm.box = "ubuntu/trusty64"
|
||||
|
||||
config.vm.synced_folder ".", "/var/www", type: "nfs"
|
||||
config.vm.hostname = "skinpreview3d"
|
||||
config.vm.network "forwarded_port", guest: 80, host: 80
|
||||
|
||||
config.vm.provider "virtualbox" do |v|
|
||||
v.memory = 2048
|
||||
v.cpus = 2
|
||||
v.customize ["modifyvm", :id, "--natdnshostresolver1", "on"]
|
||||
v.customize ["modifyvm", :id, "--natdnsproxy1", "on"]
|
||||
end
|
||||
|
||||
# Shell provisioning
|
||||
config.vm.provision "shell" do |s|
|
||||
s.path = "config/init.sh"
|
||||
end
|
||||
|
||||
end
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
#!/bin/bash
|
||||
apt-get update > /dev/null
|
||||
apt-get install nginx -y > /dev/null
|
||||
|
||||
echo "nginx Config files"
|
||||
rm -rf /etc/nginx/sites-available/default
|
||||
rm -rf /etc/nginx/sites-enabled/default
|
||||
ln -s /var/www/config/nginx_vhost /etc/nginx/sites-enabled/
|
||||
|
||||
service nginx restart
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
server {
|
||||
listen 80;
|
||||
|
||||
root /var/www;
|
||||
index example.html;
|
||||
server_name localhost;
|
||||
|
||||
sendfile off; #needed for nfs
|
||||
|
||||
}
|
||||
32
example.html
32
example.html
|
|
@ -7,43 +7,29 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
#canvas_container{
|
||||
width: 470px;
|
||||
background: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="canvas_container">
|
||||
<canvas id="canvas" width="64" height="64"></canvas>
|
||||
<canvas id="cape" width="22" height="17"></canvas>
|
||||
<canvas id="canvas"></canvas>
|
||||
<canvas id="cape"></canvas>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.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="/js/skinpreview3d.js"></script>
|
||||
<script type="text/javascript" src="js/skinpreview3d.js"></script>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
$("#canvas_container").skinPreview3D({
|
||||
skinUrl: "/img/Dinnerbone.png",
|
||||
capeUrl: "/img/cape.png",
|
||||
canvasID: "canvas"
|
||||
skinUrl: "img/Dinnerbone.png",
|
||||
capeUrl: "img/cape.png",
|
||||
skinCanvas: $('#canvas'),
|
||||
capeCanvas: $('#cape')
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<label>
|
||||
<input id="head2" class="toggle-head" type="checkbox" checked> Head
|
||||
</label>
|
||||
<label>
|
||||
<input class="toggle-layer2" type="checkbox" checked> Second Layer
|
||||
</label>
|
||||
<label>
|
||||
<input class="toggle-cape" type="checkbox" checked> Cape
|
||||
</label>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -225,20 +225,18 @@ function SkinUtil(){
|
|||
'use strict';
|
||||
|
||||
$.fn.skinPreview3D = function (options) {
|
||||
var sp = new SkinPreview3D(this, options.canvasID, options.capeUrl);
|
||||
var sp = new SkinPreview3D(this, options.skinCanvas.get(0), options.capeCanvas.get(0));
|
||||
sp.setSkin(options.skinUrl);
|
||||
|
||||
if(options.capeUrl){
|
||||
if(options.capeUrl!=null){
|
||||
sp.setCape(options.capeUrl);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
} (window.jQuery));
|
||||
|
||||
function SkinPreview3D(model, canvasID, hasCape){
|
||||
function SkinPreview3D(model, skinCanvas, capeCanvas){
|
||||
var scene, camera, renderer;
|
||||
var geometry, material, mesh;
|
||||
var geometry, mesh;
|
||||
|
||||
var rightLeg2Box, leftLeg2Box;
|
||||
|
||||
|
|
@ -261,86 +259,74 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
|
||||
scene = new THREE.Scene();
|
||||
|
||||
canvas = document.getElementById(canvasID);
|
||||
canvas.width = 64;
|
||||
canvas.height = 64;
|
||||
var context = canvas.getContext("2d");
|
||||
skinCanvas.width = 64;
|
||||
skinCanvas.height = 64;
|
||||
var skinContext = skinCanvas.getContext("2d");
|
||||
|
||||
//Cape Part
|
||||
var canvas2 = document.getElementById('cape');
|
||||
canvas2.width = 22;
|
||||
canvas2.height = 17;
|
||||
var context2 = canvas2.getContext("2d");
|
||||
var capeTexture = new THREE.Texture(canvas2);
|
||||
capeCanvas.width = 22;
|
||||
capeCanvas.height = 17;
|
||||
var capeContext = capeCanvas.getContext("2d");
|
||||
var capeTexture = new THREE.Texture(capeCanvas);
|
||||
capeTexture.magFilter = THREE.NearestFilter;
|
||||
capeTexture.minFilter = THREE.NearestMipMapNearestFilter;
|
||||
|
||||
var skinTexture = new THREE.Texture(canvas);
|
||||
var skinTexture = new THREE.Texture(skinCanvas);
|
||||
skinTexture.magFilter = THREE.NearestFilter;
|
||||
skinTexture.minFilter = THREE.NearestMipMapNearestFilter;
|
||||
|
||||
material = new THREE.MeshBasicMaterial({map: skinTexture, side: THREE.FrontSide});
|
||||
material2 = new THREE.MeshBasicMaterial({map: skinTexture, transparent: true, opacity: 1, angleRotTest: 0.5, side: THREE.DoubleSide});
|
||||
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});
|
||||
capeMaterial = new THREE.MeshBasicMaterial({map: capeTexture});
|
||||
|
||||
// Get the texture for the cape
|
||||
material3 = new THREE.MeshBasicMaterial({map: capeTexture});
|
||||
|
||||
var img = new Image();
|
||||
img.crossOrigin = '';
|
||||
var skinImg = new Image();
|
||||
skinImg.crossOrigin = '';
|
||||
var hasAnimate = false;
|
||||
img.onload = function() {
|
||||
skinImg.onload = () => {
|
||||
|
||||
context.clearRect(0, 0, 64, 64);
|
||||
context.drawImage(img, 0, 0);
|
||||
skinContext.clearRect(0, 0, 64, 64);
|
||||
skinContext.drawImage(skinImg, 0, 0);
|
||||
|
||||
if(img.height == 32) util.convert6432To6464(context);
|
||||
if(skinImg.height == 32) util.convert6432To6464(skinContext);
|
||||
|
||||
//these need work
|
||||
//util.fixNonVisible(context);
|
||||
//util.fixOverlay(context);
|
||||
//util.fixNonVisible(skinContext);
|
||||
//util.fixOverlay(skinContext);
|
||||
|
||||
skinTexture.needsUpdate = true;
|
||||
|
||||
material.needsUpdate = true;
|
||||
material2.needsUpdate = true;
|
||||
layer1Material.needsUpdate = true;
|
||||
layer2Material.needsUpdate = true;
|
||||
|
||||
if(!hasAnimate)
|
||||
{
|
||||
if(!hasAnimate) {
|
||||
initializeSkin();
|
||||
hasAnimate = true;
|
||||
drawSkin();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
img.onerror = function() {
|
||||
console.log("Failed loading " + img.src);
|
||||
}
|
||||
skinImg.onerror = () => console.log("Failed loading " + skinImg.src);
|
||||
|
||||
var img2=new Image();
|
||||
img2.crossOrigin = '';
|
||||
img2.onload = function() {
|
||||
|
||||
console.log("Loaded Cape");
|
||||
var capeImg=new Image();
|
||||
capeImg.crossOrigin = '';
|
||||
capeImg.onload = () => {
|
||||
capePivot.add(capeMesh);
|
||||
|
||||
// Erase what was on the canvas before
|
||||
context2.clearRect(0, 0, canvas2.width, canvas2.height);
|
||||
capeContext.clearRect(0, 0, capeCanvas.width, capeCanvas.height);
|
||||
|
||||
// Draw the image to the canvas
|
||||
context2.drawImage(img2, 0, 0);
|
||||
capeContext.drawImage(capeImg, 0, 0);
|
||||
|
||||
capeTexture.needsUpdate = true;
|
||||
material3.needsUpdate = true;
|
||||
capeMaterial.needsUpdate = true;
|
||||
|
||||
capeLoaded=true;
|
||||
}
|
||||
};
|
||||
capeImg.onerror = () => console.log("Failed loading " + capeImg.src);
|
||||
|
||||
this.setSkin = function(url){
|
||||
img.src = url;
|
||||
}
|
||||
|
||||
this.setCape = function(url){
|
||||
img2.src = url;
|
||||
}
|
||||
this.setSkin = url => skinImg.src = url;
|
||||
this.setCape = url => capeImg.src = url;
|
||||
|
||||
function initializeSkin() {
|
||||
// Head Parts
|
||||
|
|
@ -395,7 +381,7 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
headBox.faceVertexUvs[0][9] = [headFront[0], headFront[1], headFront[2]];
|
||||
headBox.faceVertexUvs[0][10] = [headBack[3], headBack[0], headBack[2]];
|
||||
headBox.faceVertexUvs[0][11] = [headBack[0], headBack[1], headBack[2]];
|
||||
headMesh = new THREE.Mesh(headBox, material);
|
||||
headMesh = new THREE.Mesh(headBox, layer1Material);
|
||||
headMesh.name = "head";
|
||||
scene.add(headMesh);
|
||||
|
||||
|
|
@ -451,7 +437,7 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
bodyBox.faceVertexUvs[0][9] = [bodyFront[0], bodyFront[1], bodyFront[2]];
|
||||
bodyBox.faceVertexUvs[0][10] = [bodyBack[3], bodyBack[0], bodyBack[2]];
|
||||
bodyBox.faceVertexUvs[0][11] = [bodyBack[0], bodyBack[1], bodyBack[2]];
|
||||
bodyMesh = new THREE.Mesh(bodyBox, material);
|
||||
bodyMesh = new THREE.Mesh(bodyBox, layer1Material);
|
||||
bodyMesh.name = "body";
|
||||
bodyMesh.position.y = -10;
|
||||
scene.add(bodyMesh);
|
||||
|
|
@ -508,7 +494,7 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
rightArmBox.faceVertexUvs[0][9] = [rightArmFront[0], rightArmFront[1], rightArmFront[2]];
|
||||
rightArmBox.faceVertexUvs[0][10] = [rightArmBack[3], rightArmBack[0], rightArmBack[2]];
|
||||
rightArmBox.faceVertexUvs[0][11] = [rightArmBack[0], rightArmBack[1], rightArmBack[2]];
|
||||
rightArmMesh = new THREE.Mesh(rightArmBox, material);
|
||||
rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
|
||||
rightArmMesh.name = "rightArm";
|
||||
rightArmMesh.position.y = -10;
|
||||
rightArmMesh.position.x = -6;
|
||||
|
|
@ -566,7 +552,7 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
leftArmBox.faceVertexUvs[0][9] = [leftArmFront[0], leftArmFront[1], leftArmFront[2]];
|
||||
leftArmBox.faceVertexUvs[0][10] = [leftArmBack[3], leftArmBack[0], leftArmBack[2]];
|
||||
leftArmBox.faceVertexUvs[0][11] = [leftArmBack[0], leftArmBack[1], leftArmBack[2]];
|
||||
leftArmMesh = new THREE.Mesh(leftArmBox, material);
|
||||
leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
|
||||
leftArmMesh.name = "leftArm";
|
||||
leftArmMesh.position.y = -10;
|
||||
leftArmMesh.position.x = 6;
|
||||
|
|
@ -624,7 +610,7 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
rightLegBox.faceVertexUvs[0][9] = [rightLegFront[0], rightLegFront[1], rightLegFront[2]];
|
||||
rightLegBox.faceVertexUvs[0][10] = [rightLegBack[3], rightLegBack[0], rightLegBack[2]];
|
||||
rightLegBox.faceVertexUvs[0][11] = [rightLegBack[0], rightLegBack[1], rightLegBack[2]];
|
||||
rightLegMesh = new THREE.Mesh(rightLegBox, material);
|
||||
rightLegMesh = new THREE.Mesh(rightLegBox, layer1Material);
|
||||
rightLegMesh.name = "rightLeg"
|
||||
rightLegMesh.position.y = -22;
|
||||
rightLegMesh.position.x = -2;
|
||||
|
|
@ -681,7 +667,7 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
leftLegBox.faceVertexUvs[0][9] = [leftLegFront[0], leftLegFront[1], leftLegFront[2]];
|
||||
leftLegBox.faceVertexUvs[0][10] = [leftLegBack[3], leftLegBack[0], leftLegBack[2]];
|
||||
leftLegBox.faceVertexUvs[0][11] = [leftLegBack[0], leftLegBack[1], leftLegBack[2]];
|
||||
leftLegMesh = new THREE.Mesh(leftLegBox, material);
|
||||
leftLegMesh = new THREE.Mesh(leftLegBox, layer1Material);
|
||||
leftLegMesh.name = "leftLeg";
|
||||
leftLegMesh.position.y = -22;
|
||||
leftLegMesh.position.x = 2;
|
||||
|
|
@ -738,7 +724,7 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
head2Box.faceVertexUvs[0][9] = [head2Front[0], head2Front[1], head2Front[2]];
|
||||
head2Box.faceVertexUvs[0][10] = [head2Back[3], head2Back[0], head2Back[2]];
|
||||
head2Box.faceVertexUvs[0][11] = [head2Back[0], head2Back[1], head2Back[2]];
|
||||
head2Mesh = new THREE.Mesh(head2Box, material2);
|
||||
head2Mesh = new THREE.Mesh(head2Box, layer2Material);
|
||||
head2Mesh.name = "head2"
|
||||
scene.add(head2Mesh);
|
||||
|
||||
|
|
@ -793,7 +779,7 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
body2Box.faceVertexUvs[0][9] = [body2Front[0], body2Front[1], body2Front[2]];
|
||||
body2Box.faceVertexUvs[0][10] = [body2Back[3], body2Back[0], body2Back[2]];
|
||||
body2Box.faceVertexUvs[0][11] = [body2Back[0], body2Back[1], body2Back[2]];
|
||||
body2Mesh = new THREE.Mesh(body2Box, material2);
|
||||
body2Mesh = new THREE.Mesh(body2Box, layer2Material);
|
||||
body2Mesh.name = "body2";
|
||||
body2Mesh.position.y = -10;
|
||||
scene.add(body2Mesh);
|
||||
|
|
@ -849,7 +835,7 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
rightArm2Box.faceVertexUvs[0][9] = [rightArm2Front[0], rightArm2Front[1], rightArm2Front[2]];
|
||||
rightArm2Box.faceVertexUvs[0][10] = [rightArm2Back[3], rightArm2Back[0], rightArm2Back[2]];
|
||||
rightArm2Box.faceVertexUvs[0][11] = [rightArm2Back[0], rightArm2Back[1], rightArm2Back[2]];
|
||||
rightArm2Mesh = new THREE.Mesh(rightArm2Box, material2);
|
||||
rightArm2Mesh = new THREE.Mesh(rightArm2Box, layer2Material);
|
||||
rightArm2Mesh.name = "rightArm2";
|
||||
rightArm2Mesh.position.y = -10;
|
||||
rightArm2Mesh.position.x = -6;
|
||||
|
|
@ -907,7 +893,7 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
leftArm2Box.faceVertexUvs[0][9] = [leftArm2Front[0], leftArm2Front[1], leftArm2Front[2]];
|
||||
leftArm2Box.faceVertexUvs[0][10] = [leftArm2Back[3], leftArm2Back[0], leftArm2Back[2]];
|
||||
leftArm2Box.faceVertexUvs[0][11] = [leftArm2Back[0], leftArm2Back[1], leftArm2Back[2]];
|
||||
leftArm2Mesh = new THREE.Mesh(leftArm2Box, material2);
|
||||
leftArm2Mesh = new THREE.Mesh(leftArm2Box, layer2Material);
|
||||
leftArm2Mesh.name = "leftArm2";
|
||||
leftArm2Mesh.position.y = -10;
|
||||
leftArm2Mesh.position.x = 6;
|
||||
|
|
@ -966,7 +952,7 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
rightLeg2Box.faceVertexUvs[0][9] = [rightLeg2Front[0], rightLeg2Front[1], rightLeg2Front[2]];
|
||||
rightLeg2Box.faceVertexUvs[0][10] = [rightLeg2Back[3], rightLeg2Back[0], rightLeg2Back[2]];
|
||||
rightLeg2Box.faceVertexUvs[0][11] = [rightLeg2Back[0], rightLeg2Back[1], rightLeg2Back[2]];
|
||||
rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, material2);
|
||||
rightLeg2Mesh = new THREE.Mesh(rightLeg2Box, layer2Material);
|
||||
rightLeg2Mesh.name = "rightLeg2"
|
||||
rightLeg2Mesh.position.y = -22;
|
||||
rightLeg2Mesh.position.x = -2;
|
||||
|
|
@ -1023,13 +1009,12 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
leftLeg2Box.faceVertexUvs[0][9] = [leftLeg2Front[0], leftLeg2Front[1], leftLeg2Front[2]];
|
||||
leftLeg2Box.faceVertexUvs[0][10] = [leftLeg2Back[3], leftLeg2Back[0], leftLeg2Back[2]];
|
||||
leftLeg2Box.faceVertexUvs[0][11] = [leftLeg2Back[0], leftLeg2Back[1], leftLeg2Back[2]];
|
||||
leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, material2);
|
||||
leftLeg2Mesh = new THREE.Mesh(leftLeg2Box, layer2Material);
|
||||
leftLeg2Mesh.name = "leftLeg2";
|
||||
leftLeg2Mesh.position.y = -22;
|
||||
leftLeg2Mesh.position.x = 2;
|
||||
scene.add(leftLeg2Mesh);
|
||||
|
||||
|
||||
// Cape Parts
|
||||
var capeTop = [
|
||||
new THREE.Vector2(1/22, 21/17),
|
||||
|
|
@ -1081,7 +1066,7 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
capeBox.faceVertexUvs[0][9] = [capeFront[0], capeFront[1], capeFront[2]];
|
||||
capeBox.faceVertexUvs[0][10] = [capeBack[3], capeBack[0], capeBack[2]];
|
||||
capeBox.faceVertexUvs[0][11] = [capeBack[0], capeBack[1], capeBack[2]];
|
||||
capeMesh = new THREE.Mesh(capeBox, material3);
|
||||
capeMesh = new THREE.Mesh(capeBox, capeMaterial);
|
||||
capeMesh.name = "cape";
|
||||
|
||||
capePivot = new THREE.Group();
|
||||
|
|
@ -1092,11 +1077,7 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
|
||||
capePivot.rotation.x = 25 * (Math.PI/180);
|
||||
|
||||
if(hasCape != null){
|
||||
capePivot.add(capeMesh);
|
||||
}
|
||||
|
||||
renderer = new THREE.WebGLRenderer({angleRot: true});
|
||||
renderer = new THREE.WebGLRenderer({angleRot: true, alpha: true});
|
||||
renderer.setSize(canvasW, canvasH);
|
||||
|
||||
model.append(renderer.domElement);
|
||||
|
|
@ -1134,7 +1115,6 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
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));
|
||||
|
||||
|
||||
renderer.render(scene, camera);
|
||||
|
||||
if(angleRot > 360){
|
||||
|
|
@ -1160,37 +1140,6 @@ function SkinPreview3D(model, canvasID, hasCape){
|
|||
model.mousemove(function(e){
|
||||
if(!mouseDown){ return; }
|
||||
var x = (e.pageX - this.offsetLeft) - originMouseX;
|
||||
var y = e.pageY - this.offsetTop;
|
||||
|
||||
modelRot = x;
|
||||
});
|
||||
|
||||
//checkbox control logic
|
||||
$(".toggle-head").click(function(){
|
||||
var checked = $(this)[0].checked;
|
||||
var part = scene.getObjectByName("head2", false);
|
||||
part.visible = !part.visible;
|
||||
|
||||
});
|
||||
|
||||
var layer2parts = [
|
||||
"head2", "leftArm2", "body2", "rightArm2", "leftLeg2", "rightLeg2"
|
||||
];
|
||||
|
||||
$(".toggle-cape").click(function(){
|
||||
var part = scene.getObjectByName("cape", false);
|
||||
part.visible = !part.visible;
|
||||
});
|
||||
|
||||
$(".toggle-layer2").click(function(){
|
||||
var head = scene.getObjectByName("head2", false);
|
||||
$("#head2").prop("checked", !head.visible);
|
||||
|
||||
var checked = $(this)[0].checked;
|
||||
for(var i=0; i<layer2parts.length; i++){
|
||||
var part = scene.getObjectByName(layer2parts[i], false);
|
||||
part.visible = !part.visible;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue