【threejs开发随笔】webxr过程中手柄事件监听方法

其实严格来讲在threejs中webxr的手柄没个正经的事件给我们监听，three官方只给了左右手抓握、勾选的事件监听方法，

				controller = renderer.xr.getController( 0 );
				controller.addEventListener( 'selectstart', onSelectStart );
				controller.addEventListener( 'selectend', onSelectEnd );

剩下的那些其实需要自己来写。

controller.addEventListener( 'connected', function ( event ) {
// 这个event是手柄连接成功的事件，我们输出一下看里面有啥
console.log( event );
this.add( buildController( event.data ) );
} );

看，里面有个gamepad，如果你手里有vr设备的话想来也能猜出来，这玩应的手柄其实就是gamepad（xbox手柄）

里面的buttons是个状态，我们需要时刻监听这个状态。这个时候其实我们就可以在一个animationLoop里面并且结合js的setget方法来做这件事了。我这儿放个小例子

//下一个按钮状态
var nextButtonPressed = {
    _isPressed:false,
    set isPressed(isPressed){
        if(this._isPressed !== isPressed){
            if(isPressed){
                next360Scene()
            }
            this._isPressed = isPressed
        }
    },
    get isPressed(){
        return this._isPressed
    }
}

// 上一个按钮状态
var prevButtonPressed={
    _isPressed:false,
    set isPressed(isPressed){
        if(this._isPressed !== isPressed){
            if(isPressed){
                prev360Scene()
            }
            this._isPressed = isPressed
        }
    },
    get isPressed(){
        return this._isPressed
    }
}
//吧xrsession里面的inputSources传给这个方法
function controllerButtonPress(inputSources) {
    // 手柄0
    if(inputSources[0].gamepad.buttons[0].pressed){
        console.log("手柄0按钮0")
    }
    if(inputSources[0].gamepad.buttons[1].pressed){
        console.log("手柄0按钮1")
    }
    if(inputSources[0].gamepad.buttons[2].pressed){
        console.log("手柄0按钮2")
    }
    if(inputSources[0].gamepad.buttons[3].pressed){
        console.log("手柄0按钮3")
    }
    if(inputSources[0].gamepad.buttons[4].pressed){
        console.log("手柄0按钮4")
        nextButtonPressed.isPressed = inputSources[0].gamepad.buttons[4].pressed
    }else{
        nextButtonPressed.isPressed = inputSources[0].gamepad.buttons[4].pressed
    }
    if(inputSources[0].gamepad.buttons[5].pressed){
        console.log("手柄0按钮5")
        prevButtonPressed.isPressed = inputSources[0].gamepad.buttons[5].pressed
    }else{
        prevButtonPressed.isPressed = inputSources[0].gamepad.buttons[5].pressed
    }
    // if(inputSources[0].gamepad.buttons[6].pressed){
    //     console.log("手柄0按钮6")
    // }
    // 手柄1
    if(inputSources[1].gamepad.buttons[0].pressed){
        console.log("手柄1按钮0")
    }
    if(inputSources[1].gamepad.buttons[1].pressed){
        console.log("手柄1按钮1")
    }
    if(inputSources[1].gamepad.buttons[2].pressed){
        console.log("手柄1按钮2")
    }
    if(inputSources[1].gamepad.buttons[3].pressed){
        console.log("手柄1按钮3")
    }
    if(inputSources[1].gamepad.buttons[4].pressed){
        console.log("手柄1按钮4")
        nextButtonPressed.isPressed = inputSources[1].gamepad.buttons[4].pressed
    }else{
        nextButtonPressed.isPressed = inputSources[1].gamepad.buttons[4].pressed
    }
    if(inputSources[1].gamepad.buttons[5].pressed){
        console.log("手柄1按钮5")
        prevButtonPressed.isPressed = inputSources[1].gamepad.buttons[5].pressed
    }else{
        prevButtonPressed.isPressed = inputSources[1].gamepad.buttons[5].pressed
    }
    // if(inputSources[1].gamepad.buttons[6].pressed){
    //     console.log("手柄1按钮6")
    // }
}

// 下一个场景
function next360Scene() {
    document.getElementById("nextButtom").click()
}
// 上一个场景
function prev360Scene() {
    document.getElementById("prevButtom").click()
}