WebXR controller events selectstart/selectend fired at same time

Hey, im using WebXR using the Oculus Quest. Im trying to move objects around via controller using the selectstart and selectend Events.

public makeVRControls(renderer: THREE.WebGLRenderer, scene: THREE.Scene) {

    this.controller1 = renderer.xr.getController(0)
    this.controller1.name = 'controller1'
    this.controller1.addEventListener('selectstart', this.onSelectStart.bind(this))
    this.controller1.addEventListener('selectend', this.onSelectEnd.bind(this))
    
    this.controller2 = renderer.xr.getController(1)
    this.controller2.name = 'controller2'
    this.controller2.addEventListener('selectstart', this.onSelectStart.bind(this))
    this.controller2.addEventListener('selectend', this.onSelectEnd.bind(this))

    scene.add(this.controller1)
    scene.add(this.controller2)

    this.raycasterVR = new THREE.Raycaster()
}

When clicking the controller button, following events are thrown

selectstart
selectend
selectstart

If I release, a final selectend event is fired.

I’ve tested the dragging example on my Quest and everything works fine.

https://threejs.org/examples/webxr_vr_dragging

The code also uses selectstart and selectend events. Can you please share and entire example that shows what you are doing in your code?

I duplicated the webxr_vr_dragging example and played with it. You can test it under https://test.3x60.de/riis-vr/webxr.html. And the file if you need webxr.html (6.5 KB).

1 Like

Just for clarification: The interaction of your demo works correctly. It’s just the event firing/order which is confusing, right?

The interaction of the demo doesnt matter.
The problem is that (seen in console) with a click (and hold) its already firing the selectend event and two selectstart events before and after.

click:
select start
select end
select start
release:
select end

Yes, I can reproduce the issue. Since three.js only dispatches the events to the controller objects, there might be an issue with the Oculus browser. Can you please host the following (non three.js) example on your server and enhance the code with respective logging and event listeners? Currently, the demo only uses select but not selectstart and selectend.

If the demo shows the same behavior, we should report an issue here:

https://developer.oculus.com/bugs/

Im not able to enhance this demo, but I will report the issue and ask on the oculus forum

1 Like