fix: xr layer transform rotation

Author: bbohlender

examples/layers/app.tsx

@@ -35,7 +35,15 @@ export function App() {
             32x32 XRLayer with DPR=32
           </Text>
           <XROrigin position={[0, -1.5, 0]} />
-          <XRLayer dpr={32} pixelWidth={32} pixelHeight={32} position={[-0.6, 0, -0.5]} scale={0.5} shape="quad">
+          <XRLayer
+            rotation-y={Math.PI / 16}
+            dpr={32}
+            pixelWidth={32}
+            pixelHeight={32}
+            position={[-0.6, 0, -0.5]}
+            scale={0.5}
+            shape="quad"
+          >
             <mesh>
               <boxGeometry />
               <meshBasicMaterial color="red" toneMapped={false} />
@@ -50,7 +58,7 @@ export function App() {
           <Text scale={0.03} color="black" position={[0.6, 0.28, -0.5]}>
             Without XRLayer
           </Text>
-          <mesh position={[0.6, 0, -0.5]} scale={0.5}>
+          <mesh rotation-y={-Math.PI / 16} position={[0.6, 0, -0.5]} scale={0.5}>
             <planeGeometry />
             <meshBasicMaterial map={videoTexture} toneMapped={false} />
           </mesh>

packages/xr/src/anchor.ts

@@ -1,5 +1,6 @@
 import { Matrix4, Quaternion, Vector3 } from 'three'
 import { XRStore } from './store.js'
+import { toDOMPointInit } from './utils.js'
 
 const OneVector = new Vector3(1, 1, 1)
 const ZeroVector = new Vector3(0, 0, 0)
@@ -84,10 +85,7 @@ export type XRAnchorSpaceOptions = {
 export async function requestXRAnchor(store: XRStore<any>, options: XRAnchorOptions): Promise<XRAnchor | undefined> {
   if (options.relativeTo === 'hit-test-result') {
     return options.hitTestResult.createAnchor?.(
-      new XRRigidTransform(
-        options.offsetPosition == null ? undefined : { ...options.offsetPosition, w: 1 },
-        options.offsetQuaternion == null ? undefined : { ...options.offsetQuaternion },
-      ),
+      new XRRigidTransform(toDOMPointInit(options.offsetPosition), toDOMPointInit(options.offsetQuaternion)),
     )
   }
   let frame: XRFrame
@@ -118,5 +116,8 @@ export async function requestXRAnchor(store: XRStore<any>, options: XRAnchorOpti
     positionHelper.copy(offsetPosition ?? ZeroVector)
     quaternionHelper.copy(offsetQuaternion ?? NeutralQuaternion)
   }
-  return frame.createAnchor?.(new XRRigidTransform({ ...positionHelper, w: 1 }, { ...quaternionHelper }), space)
+  return frame.createAnchor?.(
+    new XRRigidTransform(toDOMPointInit(positionHelper), toDOMPointInit(quaternionHelper)),
+    space,
+  )
 }

packages/xr/src/hit-test.ts

@@ -1,5 +1,6 @@
 import { Matrix4, Object3D, Quaternion, Vector3 } from 'three'
 import { getSpaceFromAncestors, XRStore } from './internals.js'
+import { toDOMPointInit } from './utils.js'
 
 const matrixHelper = new Matrix4()
 const vectorHelper = new Vector3()
@@ -40,11 +41,10 @@ export async function createXRHitTestSource(
 
     //compute offset ray
     vectorHelper.setFromMatrixPosition(matrixHelper)
-    const point: DOMPointInit = { ...vectorHelper }
+    const point = toDOMPointInit(vectorHelper)
     quaternionHelper.setFromRotationMatrix(matrixHelper)
     vectorHelper.set(0, 0, -1).applyQuaternion(quaternionHelper)
-    const direction: DOMPointInit = { ...vectorHelper }
-    const offsetRay = new XRRay(point, direction)
+    const offsetRay = new XRRay(point, toDOMPointInit(vectorHelper, 0))
 
     //configure for request and compute hit test results
     object = relativeTo

packages/xr/src/layer.ts

@@ -18,6 +18,7 @@ import {
 } from 'three'
 import { getSpaceFromAncestors } from './space.js'
 import { XRState, XRStore } from './store.js'
+import { toDOMPointInit } from './utils.js'
 
 export type XRLayerEntry = { renderOrder: number; readonly layer: XRCylinderLayer | XRQuadLayer | XREquirectLayer }
 
@@ -134,7 +135,7 @@ const scaleHelper = new Vector3()
 
 function matrixToRigidTransform(matrix: Matrix4, scaleTarget: Vector3 = scaleHelper): XRRigidTransform {
   matrix.decompose(vectorHelper, quaternionHelper, scaleTarget)
-  return new XRRigidTransform({ ...vectorHelper, w: 1.0 }, { ...quaternionHelper })
+  return new XRRigidTransform(toDOMPointInit(vectorHelper), toDOMPointInit(quaternionHelper))
 }
 
 declare module 'three' {

packages/xr/src/utils.ts

@@ -0,0 +1,11 @@
+import { Quaternion, Vector3 } from 'three'
+
+export function toDOMPointInit(
+  value: Vector3 | Quaternion | undefined,
+  defaultW: number = 1,
+): DOMPointInit | undefined {
+  if (value == null) {
+    return undefined
+  }
+  return { x: value.x, y: value.y, z: value.z, w: 'w' in value ? value.w : defaultW }
+}