diff --git a/resources/assets/src/js/skinlib/upload.js b/resources/assets/src/js/skinlib/upload.js
index f0eb414b..7e28f4a6 100644
--- a/resources/assets/src/js/skinlib/upload.js
+++ b/resources/assets/src/js/skinlib/upload.js
@@ -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 };
 }
diff --git a/resources/lang/en/general.yml b/resources/lang/en/general.yml
index 71e9c546..f5b1c17a 100644
--- a/resources/lang/en/general.yml
+++ b/resources/lang/en/general.yml
@@ -33,6 +33,8 @@ texture-preview: Texture Preview
 walk: Walk
 run: Run
 rotation: Rotation
+pause: Pause
+reset: Reset
 
 submit: Submit
 
diff --git a/resources/lang/en/locale.js b/resources/lang/en/locale.js
index ec4b165f..195d021a 100644
--- a/resources/lang/en/locale.js
+++ b/resources/lang/en/locale.js
@@ -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.',
diff --git a/resources/lang/zh_CN/general.yml b/resources/lang/zh_CN/general.yml
index b038e31f..5edc7e84 100644
--- a/resources/lang/zh_CN/general.yml
+++ b/resources/lang/zh_CN/general.yml
@@ -33,6 +33,8 @@ texture-preview: 材质预览
 walk: 行走
 run: 奔跑
 rotation: 旋转
+pause: 暂停
+reset: 重置
 
 submit: 提交
 
diff --git a/resources/lang/zh_CN/locale.js b/resources/lang/zh_CN/locale.js
index 09f6da57..f9f18ebd 100644
--- a/resources/lang/zh_CN/locale.js
+++ b/resources/lang/zh_CN/locale.js
@@ -59,6 +59,10 @@
                 likes: '最多收藏'
             },
 
+            // Preview
+            badSkinSize: '所选皮肤文件的尺寸不对哦',
+            badCapeSize: '所选披风文件的尺寸不对哦',
+
             // Rename
             setNewTextureName: '请输入新的材质名称：',
             emptyNewTextureName: '你还没有输入新名称啊',
diff --git a/resources/views/common/texture-preview.tpl b/resources/views/common/texture-preview.tpl
index 698c7fcb..a3ce1228 100644
--- a/resources/views/common/texture-preview.tpl
+++ b/resources/views/common/texture-preview.tpl
@@ -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>
diff --git a/resources/views/skinlib/show.tpl b/resources/views/skinlib/show.tpl
index 0e0c1073..54fc9328 100644
--- a/resources/views/skinlib/show.tpl
+++ b/resources/views/skinlib/show.tpl
@@ -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
diff --git a/resources/views/skinlib/upload.tpl b/resources/views/skinlib/upload.tpl
index 6c33d8d9..eeec3002 100644
--- a/resources/views/skinlib/upload.tpl
+++ b/resources/views/skinlib/upload.tpl
@@ -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