Leisuretimedock/blessing-skin-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added real-time 2d preview

Browse Source
This commit is contained in:
printempw 2016-02-10 18:59:14 +08:00
parent 9caab363d2
commit 15b9715aef
3 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/user.style.css
View File

@ -2,7 +2,7 @@
* @Author: prpr * @Author: prpr
* @Date: 2016-01-21 19:12:06 * @Date: 2016-01-21 19:12:06
* @Last Modified by: prpr * @Last Modified by: prpr
* @Last Modified time: 2016-02-05 18:50:36 * @Last Modified time: 2016-02-10 15:41:59
*/ */
.home-menu-blur { .home-menu-blur {
@ -100,7 +100,7 @@ input[type=radio] {
.container { .container {
position: initial !important; position: initial !important;
} }
#skinpreview > p { #preview-2d > p {
height: 64px; height: 64px;
line-height: 64px; line-height: 64px;
} }

25
assets/js/user.utils.js
View File

@ -2,7 +2,7 @@
* @Author: prpr * @Author: prpr
* @Date: 2016-01-21 13:56:40 * @Date: 2016-01-21 13:56:40
* @Last Modified by: prpr * @Last Modified by: prpr
* @Last Modified time: 2016-02-07 10:25:41 * @Last Modified time: 2016-02-10 18:54:54
*/ */
'use strict'; 'use strict';
@ -33,8 +33,11 @@ function handleFiles(files, type) {
} }
if (type == "skin") { if (type == "skin") {
MSP.changeSkin(img.src); MSP.changeSkin(img.src);
var model = $('#model-alex').prop('checked') ? "alex" : "steve";
change2dTexture(model, img.src);
} else { } else {
MSP.changeCape(img.src); MSP.changeCape(img.src);
change2dTexture('cape', img.src);
} }
}; };
img.onerror = function () { img.onerror = function () {
@ -76,21 +79,19 @@ $("[title='Rotation']").click(function(){
function show2dPreview() { function show2dPreview() {
$('#canvas3d').remove(); $('#canvas3d').remove();
$('.operations').hide(); $('.operations').hide();
$("#skinpreview").html($('<p>Steve 模型的皮肤：</p>').append($('<img />').addClass('skin2d').attr('src', '../skin/'+docCookies.getItem('uname')+'-steve.png?v='+Math.random()))); $('#preview-2d').show();
$("#skinpreview").append($('<p>Alex 模型的皮肤：</p>').append($('<img />').addClass('skin2d').attr('src', '../skin/'+docCookies.getItem('uname')+'-alex.png?v='+Math.random()))); $('#preview').html('3D 皮肤预览').attr('href', 'javascript:show3dPreview();');
$("#skinpreview").append($('<p>披风：</p>').append($('<img />').addClass('skin2d').attr('src', '../cape/'+docCookies.getItem('uname')+'.png?v='+Math.random())));
$('#preview').html('3D Preview').attr('href', 'javascript:show3dPreview();');
} }
function show3dPreview() { function show3dPreview() {
$('#skinpreview').html(''); $('#preview-2d').hide();
$('.operations').show(); $('.operations').show();
init3dCanvas() init3dCanvas()
$('#preview').html('2D Preview').attr('href', 'javascript:show2dPreview();'); $('#preview').html('2D 皮肤预览').attr('href', 'javascript:show2dPreview();');
} }
$("#upload").click(function(){ $("#upload").click(function(){
var model = $('#model-steve').prop('checked') ? "steve" : "alex"; var model = $('#model-alex').prop('checked') ? "alex" : "steve";
var skin_file = $('#skininput').get(0).files[0]; var skin_file = $('#skininput').get(0).files[0];
var cape_file = $('#capeinput').get(0).files[0]; var cape_file = $('#capeinput').get(0).files[0];
var form_data = new FormData(); var form_data = new FormData();
@ -147,3 +148,11 @@ function changeModel(uname) {
}); });
} }
$(document).ready(function(){
$('#preview-2d').hide();
$('#model-steve').prop('checked', true);
});
function change2dTexture(type, file) {
$('#'+type).attr('src', file);
}

11
user/preview.php
View File

@ -3,10 +3,17 @@
* @Author: prpr * @Author: prpr
* @Date: 2016-02-04 19:37:21 * @Date: 2016-02-04 19:37:21
* @Last Modified by: prpr * @Last Modified by: prpr
* @Last Modified time: 2016-02-06 23:24:56 * @Last Modified time: 2016-02-10 18:37:35
*/ */
?> ?>
<div id="skinpreview"></div> <div id="skinpreview">
<div id="preview-2d">
<p>Steve 模型的皮肤：<img id="steve" class="skin2d" src="<?php echo "../textures/".$user->getTexture('skin');?>" /></p>
<p>Alex 模型的皮肤：<img id="alex" class="skin2d" src="<?php echo "../textures/".$user->getTexture('alex');?>" /></p>
<p>披风：<img id="cape" class="skin2d" src="<?php echo "../textures/".$user->getTexture('cape');?>" /></p>
</div>
</div>
<script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/three.msp.js"></script> <script type="text/javascript" src="../libs/three.msp.js"></script>
<?php <?php