disable 3d preview on mobile for default

assets/js/user.utils.js

@@ -2,7 +2,7 @@
 * @Author: prpr
 * @Date:   2016-01-21 13:56:40
 * @Last Modified by:   printempw
-* @Last Modified time: 2016-03-05 20:36:43
+* @Last Modified time: 2016-03-05 21:48:36
 */
 
 'use strict';
@@ -72,6 +72,7 @@ $('#model-steve').on('change', function() {
 });
 
 function show2dPreview() {
+    preview_type = "2d";
     $('#canvas3d').remove();
     $('.operations').hide();
     $('#preview-2d').show();
@@ -79,10 +80,25 @@ function show2dPreview() {
 }
 
 function show3dPreview() {
-    $('#preview-2d').hide();
-    $('.operations').show();
-    init3dCanvas()
-    $('#preview').html('2D 皮肤预览').attr('href', 'javascript:show2dPreview();');
+    if (isMobile() && preview_type == "2d") {
+        showAlert("手机上的 3D 预览可能会出现奇怪的问题，亟待解决。确定要启用吗？", function(){
+            preview_type = "3d";
+            show3dPreview();
+        }, function(){
+            return false;
+        });
+    } else {
+        preview_type = "3d";
+    }
+    if (preview_type == "3d") {
+        var canvas3d = renderer.domElement;
+        canvas3d.setAttribute('id', 'canvas3d');
+        canvas3d.style = '';
+        container.appendChild(canvas3d);
+        $('#preview-2d').hide();
+        $('.operations').show();
+        $('#preview').html('2D 皮肤预览').attr('href', 'javascript:show2dPreview();');
+    }
 }
 
 $("#upload").click(function(){
@@ -146,8 +162,29 @@ function changeModel(uname) {
 $(document).ready(function(){
     $('#preview-2d').hide();
     $('#model-steve').prop('checked', true);
+
+    if (isMobile()) {
+        show2dPreview();
+    }
 });
 
 function change2dTexture(type, file) {
     $('#'+type).attr('src', file);
 }
+
+function onWindowResize() {
+    if (preview_type == "3d") {
+        camera.aspect = (window.innerWidth - sidebarWidth) / window.innerHeight;
+        camera.updateProjectionMatrix();
+
+        var canvas3d = document.getElementById('canvas3d');
+        canvas3d.width = 600;
+        canvas3d.height = 350;
+
+        canvas3d.setSize(container.clientWidth, container.clientWidth/12*7);
+    } else {
+        show2dPreview();
+    }
+}
+
+window.addEventListener('resize', onWindowResize, false);

assets/js/utils.js

@@ -1,8 +1,8 @@
 /*
 * @Author: prpr
 * @Date:   2016-02-03 18:23:21
-* @Last Modified by:   prpr
-* @Last Modified time: 2016-02-05 21:12:29
+* @Last Modified by:   printempw
+* @Last Modified time: 2016-03-05 21:41:24
 */
 
 'use strict';
@@ -12,9 +12,16 @@ function showMsg(type, msg) {
     $("[id=msg]").removeClass().addClass("alert").addClass(type).html(msg);
 }
 
-function showAlert(msg, callback) {
+function showAlert(msg, callback, callback2) {
     callback = callback ? callback : new Function;
-    Ply.dialog("alert", msg).done(callback);
+    Ply.dialog("alert", msg).done(callback).fail(callback2);
+}
+
+function isMobile() {
+    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
+        return true;
+    }
+    return false;
 }
 
 function logout(callback) {

libs/three.msp.js

@@ -880,8 +880,6 @@ function RenderSkin() {
     renderer = new THREE.WebGLRenderer({alpha: true});
     renderer.setSize(600, 350);
 
-    window.addEventListener('resize', onWindowResize, false);
-
     displayCanvas = renderer.domElement;
     displayCanvas.addEventListener('mousedown', function(e) {
         e.preventDefault();
@@ -901,19 +899,7 @@ function RenderSkin() {
     var canvas3d = renderer.domElement;
     canvas3d.setAttribute('id', 'canvas3d');
     canvas3d.style = '';
-    container.appendChild(canvas3d);
-    onWindowResize();
-}
-
-function onWindowResize() {
-    camera.aspect = (window.innerWidth - sidebarWidth) / window.innerHeight;
-    camera.updateProjectionMatrix();
-
-    var canvas3d = document.getElementById('canvas3d');
-    canvas3d.width = 600;
-    canvas3d.height = 350;
-
-    canvas3d.setSize(container.clientWidth, container.clientWidth/12*7);
+    if (preview_type == "3d") container.appendChild(canvas3d);
 }
 
 Element.prototype.setSize = function (w, h) {

user/preview.php

@@ -3,7 +3,7 @@
  * @Author: prpr
  * @Date:   2016-02-04 19:37:21
  * @Last Modified by:   printempw
- * @Last Modified time: 2016-03-05 18:36:08
+ * @Last Modified time: 2016-03-05 21:36:08
  */
 ?>
 <div id="skinpreview">
@@ -13,7 +13,9 @@
         <p>披风：<img id="cape" class="skin2d" src="<?php if ($t = $user->getTexture('cape')) echo "../textures/".$t;?>" /></p>
     </div>
 </div>
-
+<script type="text/javascript">
+    var preview_type = "3d";
+</script>
 <script type="text/javascript" src="../libs/2dskin.js"></script>
 <script type="text/javascript" src="../libs/three.js"></script>
 <script type="text/javascript" src="../libs/three.msp.js"></script>