Oculous Touch controller orientation

[ManuelGraf]

I was trying to add Oculus touch controllers to my (existing) THREEjs App. The models are loading fine with GLTF Loader. Also targetRaySpace seems to work fine. But still, the controller model's orientations are messed up:

What I did:

1. use XR OffsetSpace with translation and rotation
2. add gltf models "root" marked object to my scene. Orientation updates via gripSpace (not correct)
3. add a ray line (0,0,1) to the scene. Orientation via targetRaySpace (correct)
4. add Axes Helpers to the GLTFs Object marked as "root". This reveals that indeed meshes must be rotated incorrectly.

Expected behavior

1. Both controllers are correctly oriented, i.e. tips of controllers point towards same axis,
2. Thus RaySpace points out the "tip" of the controller

Screenshots Here you can see how controllers are looking when I point them straight forward into viewing direction the THREE.Axeshelper shows local object axes. X is red, Y is green, Z is blue. Althought correctly rotated in world space, the model itself seems to be rotated.

Version "@webxr-input-profiles/assets": "^1.0.1", "@webxr-input-profiles/motion-controllers": "^1.0.0", "@webxr-input-profiles/registry": "^1.0.0", "three": "0.108.0",

Desktop (please complete the following information): THREE.js r108 Oculus Browser (latest)

Is there anything I am doing wrong? I read the motion controllers explanation, but there was little help.

// APPENDIX My Reference Space

My XR Space offsets should be correct. (need to rotate -90° around x and translate XR space coordinates for matching my scene). Looking around is fine and also controllers POSITIONS are correct, but not the orientation. this is the referencespace I use for both controllers and the hmd:

this.orientationOffset = new THREE.Quaternion()
  .setFromAxisAngle(new THREE.Vector3(1, 0, 0), THREE.Math.degToRad(-90));
this.orientationOffsetInverse = new THREE.Quaternion().copy(this.orientationOffset).inverse();

get myReferencespace() {
    this.positionOffset.copy(this.mainViewCamera.position);
    this.positionOffset.applyQuaternion(this.orientationOffsetInverse);
    const offsetTransform = new (window as any).XRRigidTransform(this.positionOffset, this.orientationOffset);
    return this.hmdSpace.getOffsetReferenceSpace(offsetTransform);
  }

This is how I add the objects to my scene

this.loader.load(assetPath, (gltf) => {
  console.log('loaded GLTF', gltf);
  let model = gltf.scene.getObjectByName('root') || gltf.scene.getObjectByName('RootNode');
  this.controllerGroup.add(model);
  // ray
  const mat = new THREE.LineBasicMaterial({
    color: 0x99ff99,
    transparent: true,
    linewidth: 3
  });
  const ray = new THREE.BufferGeometry().setFromPoints([
    new this.iv.lib.THREE.Vector3(0, 0, 0),
    new this.iv.lib.THREE.Vector3(0, 0, -1)
  ]);

  motionController.ray = new THREE.Line(ray, mat);
  motionController.ray.name = 'ray';
  this.scene.add(motionController.ray);
  motionController.object = model;
});

This is how I update the objects `updateMotionControllerModel(frame, motionController) {

const motionControllerRoot = motionController.object;
if (motionController.inputSource.gripSpace) {
  let gripPose = frame.getPose(motionController.inputSource.gripSpace, this.myReferencespace);
  if (gripPose) {
    motionController.object.setRotationFromQuaternion(gripPose.transform.orientation);
    motionController.object.position.copy(gripPose.transform.position);
  }
  let rayPose = frame.getPose(motionController.inputSource.targetRaySpace, this.myReferencespace)
  if (rayPose) {
    let rayObject = motionController.ray;
    rayObject.setRotationFromQuaternion(rayPose.transform.orientation);
    rayObject.position.copy(rayPose.transform.position);
  }
  // console.log(this.mainViewCamera.position);
}`

[toji]

Do you have a live version of a page exhibiting this issue that we could look at? It's difficult to tell from the description where the issue is.