WebXR rotate glb object with Joystick

Questions
1

Hi,
it’s possible rotate glb 3D object with Joystick on WebXR?

2

Hello,

You can get the joystick delta and apply the delta to the object’s rotation.

3

But Joystick rotate the camera.

4

@RaananW is it possible to detach the joystick controls from the XR camera?

5

You can disable the rotation of the teleportation feature -
WebXRMotionControllerTeleportation | Babylon.js Documentation (babylonjs.com)

Then you can use the controller data to rotate the object instead of rotating the camera

7

have you checked the link?

If you want to show a playground, I will be able to point you in the right direction. In general, the default experience has a teleportation object, which you can use to set the flag I linked before.

8

Hi,
thanks.

Now with joystick I want to rotate 3D object, but my code now working (object not rotate):

// XR
		var xrHelper = await scene.createDefaultXRExperienceAsync({
			//floorMeshes: [ground],
			disableTeleportation: false,
		});
		
		//Block camera on VR
		xrHelper.teleportation.rotationEnabled = false;
			
		xrHelper.input.onControllerAddedObservable.add((controller) => {
			controller.onMotionControllerInitObservable.add((motionController) => {
				if (motionController.handness === 'left') {
					const xr_ids = motionController.getComponentIds();
					let thumbstickComponent = motionController.getComponent(xr_ids[2]);//xr-standard-thumbstick
					thumbstickComponent.onAxisValueChangedObservable.add((axes) => {
						scene.getMeshById('m1').rotation.y = 110;
						console.log(axes.x);
					});
				};
			});
		});
9

Playground for testing

https://playground.babylonjs.com/#WEICVC

10
  1. rotation of an object is in radians. Not degrees. You set 110, which i assume is a degree value?
  2. You set a fixed number every time the axis has changed. Instead you should use the values passed by the axis (which you are now console-logging) and convert them to radians. The conversion is your decision and it depends on the use case. Technically, multiplying it times Math.PI will probably give you the result you are looking for.
  3. Don’t use the object’s rotation object. Instead use the object’s rotation quaternion. Especially if it is an imported object, because in this case it will have a quaternion automatically. However, you can’t pass a degree to a quaternion. You will need to convert the degrees to a quaternion. You can do that using the Quaternion.FromEulerAnglesToRef function, to which you can pass the rotation in euler angles. If you want to rotate around the Y axis (which i assume you do), just pass the value as the 2nd variable. i.e. -
Quaternion.FromEulerAnglesToRef(0, axisValus * Math.PI, 0, object.rotationQuaternion);

Of course, if you want to rotate around a different axis, just change the value correctly.