better #rot (blink-controls some sidefx)

dist/xrfragment.aframe.all.js

@@ -1,5 +1,5 @@
 /*
- * v0.5.1 generated at Tue Dec 12 05:22:39 PM CET 2023
+ * v0.5.1 generated at Tue Dec 12 06:06:16 PM CET 2023
  * https://xrfragment.org
  * SPDX-License-Identifier: MPL-2.0
  */
@@ -1180,6 +1180,7 @@ xrf.frag.pos = function(v, opts){
     camera.position.y = v.y
     camera.position.z = v.z
   }
+  camera.updateMatrixWorld()
 }
 xrf.frag.rot = function(v, opts){
   let { frag, mesh, model, camera, scene, renderer, THREE} = opts
@@ -1190,6 +1191,8 @@ xrf.frag.rot = function(v, opts){
       v.y * Math.PI / 180,
       v.z * Math.PI / 180
     )
+    camera.rotation.offset = camera.rotation.clone() // remember
+    //camera.updateProjectionMatrix()
   }else{
     obj = model.scene.isReparented ? model.scene.children[0] : model.scene
     obj.rotation.set( 
@@ -2765,6 +2768,59 @@ window.AFRAME.registerComponent('xrf', {
   },
 
 })
+// look-controls turns off autoUpdateMatrix (of player) which 
+// will break teleporting and other stuff
+// overriding this is easier then adding updateMatrixWorld() everywhere else
+
+//AFRAME.components['look-controls'].Component.prototype.onEnterVR = function () {}
+//AFRAME.components['look-controls'].Component.prototype.onExitVR = function () {}
+AFRAME.components['look-controls'].Component.prototype.onEnterVR = function () {
+  var sceneEl = this.el.sceneEl;
+  if (!sceneEl.checkHeadsetConnected()) { return; }
+  this.saveCameraPose();
+  this.el.object3D.position.set(0, 0, 0);
+  this.el.object3D.rotation.set(0, 0, 0);
+  if (sceneEl.hasWebXR) {
+   // this.el.object3D.matrixAutoUpdate = false;
+    this.el.object3D.updateMatrix();
+  }
+}
+
+/**
+ * Restore the pose.
+ */
+AFRAME.components['look-controls'].Component.prototype.onExitVR = function () {
+  if (!this.el.sceneEl.checkHeadsetConnected()) { return; }
+  this.restoreCameraPose();
+  this.previousHMDPosition.set(0, 0, 0);
+  this.el.object3D.matrixAutoUpdate = true;
+}
+
+// it also needs to apply the offset (in case the #rot was used in URLS)
+
+AFRAME.components['look-controls'].Component.prototype.updateOrientation = function () {
+  var object3D = this.el.object3D;
+  var pitchObject = this.pitchObject;
+  var yawObject = this.yawObject;
+  var sceneEl = this.el.sceneEl;
+
+  // In VR or AR mode, THREE is in charge of updating the camera pose.
+  if ((sceneEl.is('vr-mode') || sceneEl.is('ar-mode')) && sceneEl.checkHeadsetConnected()) {
+    // With WebXR THREE applies headset pose to the object3D internally.
+    return;
+  }
+
+  this.updateMagicWindowOrientation();
+
+  let offsetX = object3D.rotation.offset ? object3D.rotation.offset.x : 0
+  let offsetY = object3D.rotation.offset ? object3D.rotation.offset.y : 0 
+
+  // On mobile, do camera rotation with touch events and sensors.
+  object3D.rotation.x = this.magicWindowDeltaEuler.x + offsetX + pitchObject.rotation.x;
+  object3D.rotation.y = this.magicWindowDeltaEuler.y + offsetY + yawObject.rotation.y;
+  object3D.rotation.z = this.magicWindowDeltaEuler.z;
+  object3D.matrixAutoUpdate = true
+}
 window.AFRAME.registerComponent('xrf-button', {
     schema: {
         label: {
@@ -2803,6 +2859,7 @@ window.AFRAME.registerComponent('xrf-button', {
             depth: 0.005
         });
         el.setAttribute('material', {
+            shader: "flat",
             color: this.color, 
             transparent:true,
             opacity:0.7
@@ -3004,19 +3061,6 @@ window.AFRAME.registerComponent('xrf-get', {
 
 });
 
-// gaze click on mobile VR
-
-AFRAME.registerComponent('xrf-moveplayer',{
-  schema:{
-  },
-  init:function(data){
-    this.player = document.querySelector('#player')
-  },
-  tick:function(){
-    this.player.object3D.rotation.copy( this.el.object3D.rotation )
-    this.player.object3D.position.copy( this.el.object3D.position )
-  }
-});
 window.AFRAME.registerComponent('xrf-wear', {
   schema:{
     el: {type:"selector"}, 

dist/xrfragment.aframe.js

@@ -1,5 +1,5 @@
 /*
- * v0.5.1 generated at Tue Dec 12 05:22:39 PM CET 2023
+ * v0.5.1 generated at Tue Dec 12 06:06:16 PM CET 2023
  * https://xrfragment.org
  * SPDX-License-Identifier: MPL-2.0
  */
@@ -1174,6 +1174,7 @@ xrf.frag.pos = function(v, opts){
     camera.position.y = v.y
     camera.position.z = v.z
   }
+  camera.updateMatrixWorld()
 }
 xrf.frag.rot = function(v, opts){
   let { frag, mesh, model, camera, scene, renderer, THREE} = opts
@@ -1184,6 +1185,8 @@ xrf.frag.rot = function(v, opts){
       v.y * Math.PI / 180,
       v.z * Math.PI / 180
     )
+    camera.rotation.offset = camera.rotation.clone() // remember
+    //camera.updateProjectionMatrix()
   }else{
     obj = model.scene.isReparented ? model.scene.children[0] : model.scene
     obj.rotation.set( 
@@ -2759,6 +2762,59 @@ window.AFRAME.registerComponent('xrf', {
   },
 
 })
+// look-controls turns off autoUpdateMatrix (of player) which 
+// will break teleporting and other stuff
+// overriding this is easier then adding updateMatrixWorld() everywhere else
+
+//AFRAME.components['look-controls'].Component.prototype.onEnterVR = function () {}
+//AFRAME.components['look-controls'].Component.prototype.onExitVR = function () {}
+AFRAME.components['look-controls'].Component.prototype.onEnterVR = function () {
+  var sceneEl = this.el.sceneEl;
+  if (!sceneEl.checkHeadsetConnected()) { return; }
+  this.saveCameraPose();
+  this.el.object3D.position.set(0, 0, 0);
+  this.el.object3D.rotation.set(0, 0, 0);
+  if (sceneEl.hasWebXR) {
+   // this.el.object3D.matrixAutoUpdate = false;
+    this.el.object3D.updateMatrix();
+  }
+}
+
+/**
+ * Restore the pose.
+ */
+AFRAME.components['look-controls'].Component.prototype.onExitVR = function () {
+  if (!this.el.sceneEl.checkHeadsetConnected()) { return; }
+  this.restoreCameraPose();
+  this.previousHMDPosition.set(0, 0, 0);
+  this.el.object3D.matrixAutoUpdate = true;
+}
+
+// it also needs to apply the offset (in case the #rot was used in URLS)
+
+AFRAME.components['look-controls'].Component.prototype.updateOrientation = function () {
+  var object3D = this.el.object3D;
+  var pitchObject = this.pitchObject;
+  var yawObject = this.yawObject;
+  var sceneEl = this.el.sceneEl;
+
+  // In VR or AR mode, THREE is in charge of updating the camera pose.
+  if ((sceneEl.is('vr-mode') || sceneEl.is('ar-mode')) && sceneEl.checkHeadsetConnected()) {
+    // With WebXR THREE applies headset pose to the object3D internally.
+    return;
+  }
+
+  this.updateMagicWindowOrientation();
+
+  let offsetX = object3D.rotation.offset ? object3D.rotation.offset.x : 0
+  let offsetY = object3D.rotation.offset ? object3D.rotation.offset.y : 0 
+
+  // On mobile, do camera rotation with touch events and sensors.
+  object3D.rotation.x = this.magicWindowDeltaEuler.x + offsetX + pitchObject.rotation.x;
+  object3D.rotation.y = this.magicWindowDeltaEuler.y + offsetY + yawObject.rotation.y;
+  object3D.rotation.z = this.magicWindowDeltaEuler.z;
+  object3D.matrixAutoUpdate = true
+}
 window.AFRAME.registerComponent('xrf-button', {
     schema: {
         label: {
@@ -2797,6 +2853,7 @@ window.AFRAME.registerComponent('xrf-button', {
             depth: 0.005
         });
         el.setAttribute('material', {
+            shader: "flat",
             color: this.color, 
             transparent:true,
             opacity:0.7
@@ -2998,19 +3055,6 @@ window.AFRAME.registerComponent('xrf-get', {
 
 });
 
-// gaze click on mobile VR
-
-AFRAME.registerComponent('xrf-moveplayer',{
-  schema:{
-  },
-  init:function(data){
-    this.player = document.querySelector('#player')
-  },
-  tick:function(){
-    this.player.object3D.rotation.copy( this.el.object3D.rotation )
-    this.player.object3D.position.copy( this.el.object3D.position )
-  }
-});
 window.AFRAME.registerComponent('xrf-wear', {
   schema:{
     el: {type:"selector"}, 

dist/xrfragment.three.js

@@ -1,5 +1,5 @@
 /*
- * v0.5.1 generated at Tue Dec 12 05:22:39 PM CET 2023
+ * v0.5.1 generated at Tue Dec 12 06:06:16 PM CET 2023
  * https://xrfragment.org
  * SPDX-License-Identifier: MPL-2.0
  */
@@ -1174,6 +1174,7 @@ xrf.frag.pos = function(v, opts){
     camera.position.y = v.y
     camera.position.z = v.z
   }
+  camera.updateMatrixWorld()
 }
 xrf.frag.rot = function(v, opts){
   let { frag, mesh, model, camera, scene, renderer, THREE} = opts
@@ -1184,6 +1185,8 @@ xrf.frag.rot = function(v, opts){
       v.y * Math.PI / 180,
       v.z * Math.PI / 180
     )
+    camera.rotation.offset = camera.rotation.clone() // remember
+    //camera.updateProjectionMatrix()
   }else{
     obj = model.scene.isReparented ? model.scene.children[0] : model.scene
     obj.rotation.set( 

dist/xrfragment.three.module.js

@@ -1,5 +1,5 @@
 /*
- * v0.5.1 generated at Tue Dec 12 05:22:39 PM CET 2023
+ * v0.5.1 generated at Tue Dec 12 06:06:16 PM CET 2023
  * https://xrfragment.org
  * SPDX-License-Identifier: MPL-2.0
  */
@@ -1174,6 +1174,7 @@ xrf.frag.pos = function(v, opts){
     camera.position.y = v.y
     camera.position.z = v.z
   }
+  camera.updateMatrixWorld()
 }
 xrf.frag.rot = function(v, opts){
   let { frag, mesh, model, camera, scene, renderer, THREE} = opts
@@ -1184,6 +1185,8 @@ xrf.frag.rot = function(v, opts){
       v.y * Math.PI / 180,
       v.z * Math.PI / 180
     )
+    camera.rotation.offset = camera.rotation.clone() // remember
+    //camera.updateProjectionMatrix()
   }else{
     obj = model.scene.isReparented ? model.scene.children[0] : model.scene
     obj.rotation.set( 

example/aframe/sandbox/index.html

@@ -29,8 +29,8 @@
     <canvas id="qrcode" style="display:none" width="300" height="300"></canvas>
 
     <a-scene xr-mode-ui="XRMode: xr"  renderer="colorManagement: true; highRefreshRate:true" light="defaultLightsEnabled: false">
-      <a-entity id="player">
+      <a-entity id="player" wasd-controls look-controls>
-        <a-entity camera="fov:90" position="0 1.6 0" wasd-controls look-controls id="camera"></a-entity>
+        <a-entity camera="fov:90" position="0 1.6 0" id="camera"></a-entity>
         <a-entity id="left-hand"  laser-controls="hand: left" raycaster="objects:.ray" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: .floor">
           <a-entity rotation="-35 0 0" position="0 0.1 0" id="navigator"> 
             <a-entity id="back" xrf-button="label: <; width:0.05; action: history.back()"    position="-0.025 0 0" class="ray"></a-entity>

make

@@ -93,7 +93,7 @@ build(){
     test -f /tmp/xrf-aframe.js || {
       wget "https://aframe.io/releases/1.5.0/aframe.min.js" -O /tmp/xrf-aframe.js
       wget "https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js" -O /tmp/xrf-blink.js
-      for i in /tmp/xrf-*.js; do echo -e "\n" >> $i; done # add extra linebreak to prevent bundle issues
+      #for i in /tmp/xrf-*.js; do echo -e "\n" >> $i; done # add extra linebreak to prevent bundle issues
     }
     cat /tmp/xrf-*.js dist/xrfragment.aframe.js > dist/xrfragment.aframe.all.js
     

src/3rd/js/aframe/patch.look-controls.js

@@ -0,0 +1,53 @@
+// look-controls turns off autoUpdateMatrix (of player) which 
+// will break teleporting and other stuff
+// overriding this is easier then adding updateMatrixWorld() everywhere else
+
+//AFRAME.components['look-controls'].Component.prototype.onEnterVR = function () {}
+//AFRAME.components['look-controls'].Component.prototype.onExitVR = function () {}
+AFRAME.components['look-controls'].Component.prototype.onEnterVR = function () {
+  var sceneEl = this.el.sceneEl;
+  if (!sceneEl.checkHeadsetConnected()) { return; }
+  this.saveCameraPose();
+  this.el.object3D.position.set(0, 0, 0);
+  this.el.object3D.rotation.set(0, 0, 0);
+  if (sceneEl.hasWebXR) {
+   // this.el.object3D.matrixAutoUpdate = false;
+    this.el.object3D.updateMatrix();
+  }
+}
+
+/**
+ * Restore the pose.
+ */
+AFRAME.components['look-controls'].Component.prototype.onExitVR = function () {
+  if (!this.el.sceneEl.checkHeadsetConnected()) { return; }
+  this.restoreCameraPose();
+  this.previousHMDPosition.set(0, 0, 0);
+  this.el.object3D.matrixAutoUpdate = true;
+}
+
+// it also needs to apply the offset (in case the #rot was used in URLS)
+
+AFRAME.components['look-controls'].Component.prototype.updateOrientation = function () {
+  var object3D = this.el.object3D;
+  var pitchObject = this.pitchObject;
+  var yawObject = this.yawObject;
+  var sceneEl = this.el.sceneEl;
+
+  // In VR or AR mode, THREE is in charge of updating the camera pose.
+  if ((sceneEl.is('vr-mode') || sceneEl.is('ar-mode')) && sceneEl.checkHeadsetConnected()) {
+    // With WebXR THREE applies headset pose to the object3D internally.
+    return;
+  }
+
+  this.updateMagicWindowOrientation();
+
+  let offsetX = object3D.rotation.offset ? object3D.rotation.offset.x : 0
+  let offsetY = object3D.rotation.offset ? object3D.rotation.offset.y : 0 
+
+  // On mobile, do camera rotation with touch events and sensors.
+  object3D.rotation.x = this.magicWindowDeltaEuler.x + offsetX + pitchObject.rotation.x;
+  object3D.rotation.y = this.magicWindowDeltaEuler.y + offsetY + yawObject.rotation.y;
+  object3D.rotation.z = this.magicWindowDeltaEuler.z;
+  object3D.matrixAutoUpdate = true
+}

src/3rd/js/aframe/xrf-button.js

@@ -36,6 +36,7 @@ window.AFRAME.registerComponent('xrf-button', {
             depth: 0.005
         });
         el.setAttribute('material', {
+            shader: "flat",
             color: this.color, 
             transparent:true,
             opacity:0.7

src/3rd/js/aframe/xrf-moveplayer.js

@@ -1,13 +0,0 @@
-// gaze click on mobile VR
-
-AFRAME.registerComponent('xrf-moveplayer',{
-  schema:{
-  },
-  init:function(data){
-    this.player = document.querySelector('#player')
-  },
-  tick:function(){
-    this.player.object3D.rotation.copy( this.el.object3D.rotation )
-    this.player.object3D.position.copy( this.el.object3D.position )
-  }
-});

src/3rd/js/three/xrf/pos.js

@@ -15,4 +15,5 @@ xrf.frag.pos = function(v, opts){
     camera.position.y = v.y
     camera.position.z = v.z
   }
+  camera.updateMatrixWorld()
 }

src/3rd/js/three/xrf/rot.js

@@ -7,6 +7,8 @@ xrf.frag.rot = function(v, opts){
       v.y * Math.PI / 180,
       v.z * Math.PI / 180
     )
+    camera.rotation.offset = camera.rotation.clone() // remember
+    //camera.updateProjectionMatrix()
   }else{
     obj = model.scene.isReparented ? model.scene.children[0] : model.scene
     obj.rotation.set(