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
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.

6

Have you seen this?

1 Like
7

Thanks Doug. I ended up rolling my own.

8

Nice. What was your basic approach in the end?

9

I used the DOM overlay to get the touch/mouse events and used that to do the panning/zooming/rotating.

10

Thank you that’s v helpful.

11

Yeah, limiting developers’ options is always a foolish decision. No one can guess all the possibilities, and what another developer might think of. It should always be the creator’s decision, not the tool developers’, who arrogantly consider themselves “wiser” and able to “protect” us…supposedly the dumb ones, and the users… LOL That’s offending and stupid as hell.

I used the DOM overlay to get the touch/mouse events and used that to do the panning/zooming/rotating.

Good to know, thanks for sharing it.