Rotating 3D object in WebXR

Questions
#1

Hi,

I’m trying to rotate an object I’ve added to a scene in WebXR. I want to rotate when the user touches it and moves their finger. I tried adding event listeners for the touchstart, touchmove, and touchend events but they don’t seem to work. I found the THREEx.DomEvents extension (https://github.com/jeromeetienne/threex.domevents) but that doesn’t seem to support touch events. How would I go about accomplishing this?

Thanks,

Victor

#2

Hi, welcome to the forum,

What do you mean exactly by “it doesn’t seem to work” ?
The events don’t fire ?
If so it’s no really a three.js issue… My guess would be that you have a CSS rule like pointer-events that disable touch events.

#3

Correct, the events don’t fire. I’m not sure it’s pointer-events because the ‘select’ event fires (which is not a DOM event). I am adding the event listener to a GLTF object, like so:

var loader = new GLTFLoader();
	// Load a glTF resource
	loader.load(
		// resource URL
		'models/gltf/test/test.gltf',
		// called when the resource is loaded
		function ( gltf ) {

			gltf.scene.position.setFromMatrixPosition( reticle.matrix );
			model = gltf;
			scene.add( model.scene );

			model.scene.addEventListener( "touchstart", handleTouchStart, false );
			model.scene.addEventListener( "touchend", handleTouchEnd, false );
			model.scene.addEventListener( "touchmove", handleTouchMove, false );
  }
);
#4

That is the intended behavior. More information in this issue at GitHub. The relevant part is:

FYI, on a phone, immersive WebXR modes (both VR and AR) don’t deliver mouse or touch events for screen touches. The immersive view just shows the content of the WebXR-specific opaque framebuffer, and the page’s DOM content (including the scene canvas) is not visible and can’t be touched through the phone screen while the session is in progress. On a desktop, mouse events still get processed for the page content on the 2D monitor, but that’s decoupled from the 3D immersive scene.

1 Like
WebXR Touch Input
#5

Thank you @Mugen87. I will likely contribute to https://github.com/immersive-web/dom-overlays since this is functionality I need and I am a rather experienced web developer.