Babylon.js微信端无法旋转、缩放问题解决方案。

最近新版微信更新后,babylonjs的第三人称相机触控出现问题,具体表现为在微信安卓端无法正常缩放和旋转。我的同事在解决这个问题是发现主要是因为babylon的_onPointerUp 事件和微信的长按系统菜单冲突导致,解决方案如下:
1.导入pep.min.js

<script src="https://code.jquery.com/pep/0.4.0/pep.min.js"></script>

2.注意不要忘记给canvas设置 touch-action="none"

<canvas id="renderCanvas" touch-action="none"></canvas>


2018年7月9日更新,好像不用下面的代码也可以支持微信了。如果引入上面代码没用再试试下面的。

var oldUp = scene._onPointerUp,
            oldDown = scene._onPointerDown,
            oldMove = scene._onPointerMove;

        var eventPrefix = BABYLON.Tools.GetPointerPrefix();
        canvas.removeEventListener(eventPrefix + "move", oldMove);
        canvas.removeEventListener(eventPrefix + "down", oldDown);
        window.removeEventListener(eventPrefix + "up", oldUp);
        
        // Wheel
        scene._onPointerUp = function(evt){
            console.log(1);
            if(false === evt.pointerId > 0){ return;}
            oldUp(evt);
        }

        scene._onPointerDown = function(evt){
            console.log(2);
            if(false === evt.pointerId > 0){ return;}
            oldDown(evt);
        }

        scene._onPointerMove = function(evt){
            if(false === evt.pointerId > 0){ return;}
            oldMove(evt);
        }

        canvas.addEventListener(eventPrefix + "move", scene._onPointerMove, false);
        // Whee
        canvas.addEventListener(eventPrefix + "down", scene._onPointerDown, false);
        window.addEventListener(eventPrefix + "up", scene._onPointerUp, false);

上面的不行就用下面的,再不行就jj了。。。

 var n = scene._onPointerUp
                  , o = scene._onPointerDown
                  , r = scene._onPointerMove
                  , a = BABYLON.Tools.GetPointerPrefix();
                canvas.removeEventListener(a + "move", r),
                canvas.removeEventListener(a + "down", o),
                window.removeEventListener(a + "up", n),
                scene._onPointerUp = function(e) {
                    void 0 !== e.pointerId && n(e)
                }
                ,
                scene._onPointerDown = function(e) {
                    void 0 !== e.pointerId && o(e)
                }
                ,
                scene._onPointerMove = function(e) {
                    void 0 !== e.pointerId && r(e)
                }
                ,
                canvas.addEventListener(a + "move", scene._onPointerMove, !1),
                canvas.addEventListener(a + "down", scene._onPointerDown, !1),
                window.addEventListener(a + "up", scene._onPointerUp, !1);

共有 2 条评论

  1. 多谢非常好用。另外,还有个问题请教,微信里先横屏后再竖屏,Babylon不能正常恢复显示竖屏的内容,有一部分内容跑到屏幕外了。已经按照官方在window resize事件里调用了engine.resize()了。原生移动版safari没有这个问题,只是在微信里才有这个问题。请楼主不吝赐教,谢谢!

Top