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

欢迎转载，转载需带着文章出处链接~~，希望我的经验能帮到你，有问题可以点我头像加我微信

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

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

-参考-

-说明-

为什么出现了问题？

① 正常情况下，在最新版本的谷歌浏览器(最新版火狐浏览器不清楚)下可以正常使用，并且通过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 );

}

}