Switch to skinview3d on skinlib pages
This commit is contained in:
printempw
parent
0bb3ef55b3
commit
b876b99459
|
|
@ -1,22 +1,33 @@
|
|||
/* global MSP */
|
||||
/* global initSkinViewer, defaultSkin */
|
||||
|
||||
// TODO: Help wanted. This file needs to be tested.
|
||||
|
||||
'use strict';
|
||||
|
||||
$('body')
|
||||
.on('change', '#file', () => handleFiles())
|
||||
.on('ifToggled', '#type-cape', () => {
|
||||
MSP.clear();
|
||||
handleFiles();
|
||||
})
|
||||
.on('ifToggled', '#type-skin', function () {
|
||||
$(this).prop('checked') ? $('#skin-type').show() : $('#skin-type').hide();
|
||||
})
|
||||
.on('ifToggled', '#private', function () {
|
||||
$(this).prop('checked') ? $('#msg').show() : $('#msg').hide();
|
||||
function initUploadListeners() {
|
||||
$('body')
|
||||
.on('change', ['#file', '#skin-type'], () => handleFiles())
|
||||
.on('ifToggled', '#type-cape', () => handleFiles())
|
||||
.on('ifToggled', '#type-skin', function () {
|
||||
$(this).prop('checked') ? $('#skin-type').show() : $('#skin-type').hide();
|
||||
})
|
||||
.on('ifToggled', '#private', function () {
|
||||
$(this).prop('checked') ? $('#msg').show() : $('#msg').hide();
|
||||
});
|
||||
|
||||
$(document).ready(() => {
|
||||
$.msp.config.skinUrl = defaultSkin;
|
||||
initSkinViewer();
|
||||
$('[for="private"]').tooltip();
|
||||
$.msp.handles.walk.paused = $.msp.handles.rotate.paused = false;
|
||||
});
|
||||
|
||||
$(window).resize(() => {
|
||||
$.msp.viewer.width = $('#skin_container').width();
|
||||
$.msp.viewer.height = $('#skin_container').height();
|
||||
});
|
||||
}
|
||||
|
||||
// Real-time preview
|
||||
function handleFiles(files, type) {
|
||||
|
||||
|
|
@ -35,7 +46,31 @@ function handleFiles(files, type) {
|
|||
img.onload = () => {
|
||||
const $name = $('#name');
|
||||
|
||||
(type === 'skin') ? MSP.changeSkin(img.src) : MSP.changeCape(img.src);
|
||||
if (type === 'cape') {
|
||||
$.msp.config.skinUrl = defaultSkin;
|
||||
|
||||
if (img.width / img.height === 2) {
|
||||
$.msp.config.capeUrl = img.src;
|
||||
} else {
|
||||
$.msp.config.capeUrl = null;
|
||||
toastr.warning(trans('skinlib.badCapeSize'));
|
||||
}
|
||||
} else {
|
||||
// Check skin size
|
||||
if (img.width === img.height || img.width / img.height === 2) {
|
||||
$.msp.config.skinUrl = img.src;
|
||||
$.msp.config.capeUrl = null;
|
||||
} else {
|
||||
$.msp.config.skinUrl = defaultSkin;
|
||||
toastr.warning(trans('skinlib.badSkinSize'));
|
||||
}
|
||||
}
|
||||
|
||||
$.msp.config.slim = ($('#skin-type').val() === 'alex');
|
||||
|
||||
initSkinViewer();
|
||||
|
||||
$.msp.handles.walk.paused = $.msp.handles.rotate.paused = false;
|
||||
|
||||
if ($name.val() === '' || $name.val() === $name.attr('data-last-file-name')) {
|
||||
// Remove png extension in filename
|
||||
|
|
@ -132,5 +167,5 @@ function upload() {
|
|||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'test') {
|
||||
module.exports = upload;
|
||||
module.exports = { upload, initUploadListeners };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,6 +33,8 @@ texture-preview: Texture Preview
|
|||
walk: Walk
|
||||
run: Run
|
||||
rotation: Rotation
|
||||
pause: Pause
|
||||
reset: Reset
|
||||
|
||||
submit: Submit
|
||||
|
||||
|
|
|
|||
|
|
@ -61,6 +61,10 @@
|
|||
likes: 'Most Likes'
|
||||
},
|
||||
|
||||
// Preview
|
||||
badSkinSize: 'The size of selected skin file is not valid',
|
||||
badCapeSize: 'The size of selected cape file is not valid',
|
||||
|
||||
// Upload
|
||||
emptyTextureName: 'Empty texture name.',
|
||||
emptyTextureType: 'Please select a type for this texture.',
|
||||
|
|
|
|||
|
|
@ -33,6 +33,8 @@ texture-preview: 材质预览
|
|||
walk: 行走
|
||||
run: 奔跑
|
||||
rotation: 旋转
|
||||
pause: 暂停
|
||||
reset: 重置
|
||||
|
||||
submit: 提交
|
||||
|
||||
|
|
|
|||
|
|
@ -59,6 +59,10 @@
|
|||
likes: '最多收藏'
|
||||
},
|
||||
|
||||
// Preview
|
||||
badSkinSize: '所选皮肤文件的尺寸不对哦',
|
||||
badCapeSize: '所选披风文件的尺寸不对哦',
|
||||
|
||||
// Rename
|
||||
setNewTextureName: '请输入新的材质名称：',
|
||||
emptyNewTextureName: '你还没有输入新名称啊',
|
||||
|
|
|
|||
|
|
@ -2,23 +2,20 @@
|
|||
<h3 class="box-title" style="width: 100%;">{{ trans('general.texture-preview') }}
|
||||
<span id="textures-indicator" data-toggle="tooltip" title="" class="badge bg-light-blue"></span>
|
||||
<div class="operations">
|
||||
<i data-toggle="tooltip" data-placement="bottom" title="{{ trans('general.walk') }}" class="fa fa-pause"></i>
|
||||
<i data-toggle="tooltip" data-placement="bottom" title="{{ trans('general.run') }}" class="fa fa-forward"></i>
|
||||
<i data-toggle="tooltip" data-placement="bottom" title="{{ trans('general.walk').' / '.trans('general.run') }}" class="fa fa-forward"></i>
|
||||
<i data-toggle="tooltip" data-placement="bottom" title="{{ trans('general.rotation') }}" class="fa fa-repeat"></i>
|
||||
<i data-toggle="tooltip" data-placement="bottom" title="{{ trans('general.pause') }}" class="fa fa-pause"></i>
|
||||
<i data-toggle="tooltip" data-placement="bottom" title="{{ trans('general.reset') }}" class="fa fa-stop"></i>
|
||||
</div>
|
||||
</h3>
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
<div id="skinpreview">
|
||||
<div id="skin_container">
|
||||
<!-- Container for 3D Preview -->
|
||||
</div>
|
||||
</div><!-- /.box-body -->
|
||||
|
||||
<script type="text/javascript" src="{{ assets('js/three.min.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ assets('js/three.msp.js') }}"></script>
|
||||
|
||||
<script>
|
||||
var dskin = "data:image/png;base64,{{ App\Http\Controllers\TextureController::getDefaultSkin() }}";
|
||||
MSP.changeSkin(dskin);
|
||||
console.log('[3D Preview] Default skin rendered.');
|
||||
<script type="text/javascript" src="{{ assets('js/skinview3d.js') }}"></script>
|
||||
<script type="text/javascript">
|
||||
var defaultSkin = "data:image/png;base64,{{ App\Http\Controllers\TextureController::getDefaultSkin() }}";
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,16 @@
|
|||
|
||||
@section('title', $texture->name)
|
||||
|
||||
@section('style')
|
||||
<style>
|
||||
@media (min-width: 992px) {
|
||||
#skin_container {
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<!-- Full Width Column -->
|
||||
<div class="content-wrapper">
|
||||
|
|
@ -139,14 +149,26 @@
|
|||
|
||||
@section('script')
|
||||
<script>
|
||||
@if ($texture->type == "cape")
|
||||
MSP.changeCape('{{ url('textures/'.$texture->hash) }}');
|
||||
@else
|
||||
MSP.changeSkin('{{ url('textures/'.$texture->hash) }}');
|
||||
@endif
|
||||
var texture = {!! $texture->toJson() !!};
|
||||
|
||||
$(document).ready(TexturePreview.init3dPreview);
|
||||
// Auto resize canvas to fit responsive design
|
||||
$(window).resize(TexturePreview.init3dPreview);
|
||||
$.msp.config.slim = (texture.type === 'alex');
|
||||
$.msp.config.skinUrl = defaultSkin;
|
||||
|
||||
if (texture.type === 'cape') {
|
||||
$.msp.config.capeUrl = url('textures/' + texture.hash);
|
||||
} else {
|
||||
$.msp.config.skinUrl = url('textures/' + texture.hash);
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
initSkinViewer(60);
|
||||
initAnimationControllers();
|
||||
$.msp.handles.walk.paused = $.msp.handles.rotate.paused = false;
|
||||
});
|
||||
|
||||
$(window).resize(function () {
|
||||
$.msp.viewer.width = $('#skin_container').width();
|
||||
$.msp.viewer.height = $('#skin_container').height();
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -8,6 +8,11 @@ label[for="type-skin"],
|
|||
label[for="type-cape"] {
|
||||
margin-top: 5px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
#skin_container {
|
||||
min-height: 500px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
|
|
@ -40,11 +45,11 @@ label[for="type-cape"] {
|
|||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<label for="type-skin">
|
||||
<input type="radio" name="type" id="type-skin"> {{ trans('general.skin') }}
|
||||
<input type="radio" name="type" id="type-skin" checked> {{ trans('general.skin') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-xs-8">
|
||||
<select class="form-control" id="skin-type" style="display: none;">
|
||||
<select class="form-control" id="skin-type">
|
||||
<option value="steve">{{ trans('skinlib.filter.steve-model') }}</option>
|
||||
<option value="alex">{{ trans('skinlib.filter.alex-model') }}</option>
|
||||
</select>
|
||||
|
|
@ -89,18 +94,11 @@ label[for="type-cape"] {
|
|||
</section><!-- /.content -->
|
||||
</div><!-- /.container -->
|
||||
</div><!-- /.content-wrapper -->
|
||||
|
||||
@endsection
|
||||
|
||||
@section('script')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
TexturePreview.init3dPreview();
|
||||
|
||||
$('[for="private"]').tooltip();
|
||||
});
|
||||
|
||||
// Auto resize canvas to fit responsive design
|
||||
$(window).resize(TexturePreview.init3dPreview);
|
||||
initUploadListeners();
|
||||
initAnimationControllers();
|
||||
</script>
|
||||
@endsection
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user