threejs火狐低版本浏览器视角无法转动问题

617 阅读3分钟

欢迎转载,转载需带着文章出处链接~~,希望我的经验能帮到你,有问题可以点我头像加我微信 本文章仅对遇到的问题提供一个解决思路,对于迫切想要实现功能效果的人来说,希望能稍微沉下心观看,或者直接观看思路部分,或者直接观看完整代码 本文章的代码并不能直接拿来使用,完整代码只是本篇文章解决的问题需要用到的代码,如果直接使用可能会有报错,只要修改一下代码既可使用~~~

threejs火狐低版本视角转动问题

通过THREE.OrbitControls这个方法来进行视角转动,网上给出的大部分原因为创建时由于没有传第二个参数或者是新建了一个标签覆盖等问题导致视角无法转动。

-参考-

浏览器的统一指针事件:Pointer Event window属性:onpaint (不是解决办法,仅纪录用)使用HTML元素作为sprite添加到场景后无法转动视角的问题 (不是解决办法,仅纪录用)解决Three.js中使用OrbitControls导致不能选中DOM的问题


-说明-

为什么出现了问题?

① 正常情况下,在最新版本的谷歌浏览器(最新版火狐浏览器不清楚)下可以正常使用,并且通过QT(5.10+版本以上),window10系统下没有问题。
② 在低版本火狐或者是linux环境下的QT发生了这个问题。
③ 经过排查排除上方的OrbitControls传第二个参数的原因,通过控制器可以发现第二个参数打印正常。
④ 最后发现OrbitControls内部的方法在低版本下无法使用,主要定位到了Pointer这个事件上。

-主要版本-

three.js r123,不仅限于这个版本 firefox 51.0.1,不仅限于这个版本 QT 5.9.6,linux环境


-思路-

1、查找代码相关位置 2、将Pointer替换为Mouse 3、event.pointerType无法获取,故直接跳过这步,将里边的方法拿出来


-过程-

1、鼠标按下事件修改

在OrbitControls.js内,通过定位Pointer,找到相对应的位置,截图部分我已经对其修改了:

这里我已经对其修改了,代码行数为1162

这里我已经对其修改了,代码行数为912和913

2、找到事件方法的位置

找到对应事件的方法(三个方法应该靠在一起),将event.pointerType移除,内部的方法拿出来,代码如下(注意,我这里的switch方法没有删除,故意留在这里的):

这处代码也已经对其修改了,后边有放出过兼容的代码,不过兼不兼容都无所谓。

这里我的方法名都没有进行修改,还叫原来的名字,看情况想改就改。

-完整代码-

scope.domElement.addEventListener( 'contextmenu', onContextMenu, false );
scope.domElement.addEventListener( 'mousedown', onPointerDown, false );
scope.domElement.addEventListener( 'wheel', onMouseWheel, false );
scope.domElement.addEventListener( 'touchstart', onTouchStart, false );
scope.domElement.addEventListener( 'touchend', onTouchEnd, false );
scope.domElement.addEventListener( 'touchmove', onTouchMove, false );
scope.domElement.addEventListener( 'keydown', onKeyDown, false );
// force an update at start
this.update();
.
.
.
if ( state !== STATE.NONE ) {
	scope.domElement.ownerDocument.addEventListener( 'mousemove', onPointerMove, false );
	scope.domElement.ownerDocument.addEventListener( 'mouseup', onPointerUp, false );
	scope.dispatchEvent( startEvent );
}
.
.
.
function onPointerDown( event ) {
    if ( scope.enabled === false ) return;
    if("pointerType" in event){
        switch ( event.pointerType ) {

            case 'mouse':
            case 'pen':
                onMouseDown( event );
                break;

            // TODO touch

        }
    }else{
        onMouseDown( event );
    }
}

function onPointerMove( event ) {
    if ( scope.enabled === false ) return;
    if("pointerType" in event){
        switch ( event.pointerType ) {

            case 'mouse':
            case 'pen':
                onMouseMove( event );
                break;

            // TODO touch

        }
    }else{
        onMouseMove( event );
    }

}

function onPointerUp( event ) {
    if("pointerType" in event){
        switch ( event.pointerType ) {

            case 'mouse':
            case 'pen':
                onMouseUp( event );
                break;

            // TODO touch

        }
    }else{
        onMouseUp( event );
    }

}