improved default fragment/url triggers

dist/utils.js

@@ -285,12 +285,25 @@ function download(){
 }
 
 function embed(){
-  // *TODO* this should be part of the XRF framework
+  // *TODO* this should be part of the XRF Threejs framework
+  if( typeof THREE == 'undefined' ) THREE = xrf.THREE 
+  let radToDeg  = THREE.MathUtils.radToDeg
+  let toDeg     = (x) => x / (Math.PI / 180)
   let camera    = document.querySelector('[camera]').object3D.parent // *TODO* fix for threejs
+
+  // *TODO* add camera direction
+  let direction = new xrf.THREE.Vector3()
+  camera.getWorldDirection(direction)
+  const pitch   = Math.asin(direction.y);
+  const yaw     = Math.atan2(direction.x, direction.z);
+  const pitchInDegrees = pitch * 180 / Math.PI;
+  const yawInDegrees = yaw * 180 / Math.PI;
+
   let lastPos = `pos=${camera.position.x.toFixed(2)},${camera.position.y.toFixed(2)},${camera.position.z.toFixed(2)}`
-  let newHash = document.location.hash.replace(/[&]?pos=[0-9\.-]+,[0-9\.-]+,[0-9\.-]+/,'')
+  let newHash = document.location.hash.replace(/[&]?(pos|rot)=[0-9\.-]+,[0-9\.-]+,[0-9\.-]+/,'')
   newHash += `&${lastPos}`
   document.location.hash = newHash.replace(/&&/,'&')
+                                  .replace(/#&/,'')
   // copy url to clipboard 
   var dummy = document.createElement('input'),
       text = window.location.href;

dist/xrfragment.aframe.js

@@ -978,10 +978,9 @@ xrf.navigator.to = (url,flags,loader,data) => {
       xrf.frag.defaultPredefinedViews({model,scene:model.scene})
       // spec: 2. init metadata
       // spec: predefined view(s) from URL (https://xrfragment.org/#predefined_view)
-      setTimeout( () => { // give external objects some slack 
       let frag = hashbus.pub( url, model) // and eval URI XR fragments 
       hashbus.pub.XRWG({model,scene:model.scene,frag})
-      },2000)
+
       xrf.add( model.scene )
       xrf.navigator.updateHash(hash)
       xrf.emit('navigateLoaded',{url,model})
@@ -2307,9 +2306,10 @@ window.AFRAME.registerComponent('xrf', {
   init: function () {
     if( !AFRAME.XRF ){
 
+      let camera = document.querySelector('[camera]')
       // start with black
-      document.querySelector('[camera]').setAttribute('xrf-fade','')
+      camera.setAttribute('xrf-fade','')
-      AFRAME.fade = document.querySelector('[camera]').components['xrf-fade']
+      AFRAME.fade = camera.components['xrf-fade']
 
       if( document.location.host.match(/localhost/) ) document.querySelector('a-scene').setAttribute("stats",'')
 
@@ -2365,16 +2365,37 @@ window.AFRAME.registerComponent('xrf', {
           }
         })
 
-        // in order to set the rotation programmatically
+        // patch wasd-controls to affect camera-rig
-        // we need to disable look-controls
+        if( camera.components['wasd-controls'] ){
-        //xrf.rot  = (xrf,v,opts) => {
+          camera.components['wasd-controls'].tick = function(time,delta){
-        //  let {frag,renderer} = opts;
+            var data = this.data;
-        //  //let look = document.querySelector('[look-controls]')
+            var el = this.el;
-        //  //if( look ) look.removeAttribute("look-controls")
+            var velocity = this.velocity;
-        //  // *TODO* make look-controls compatible, because simply
+            function isEmptyObject(keys) {
-        //  // adding the look-controls will revert to the old rotation (cached somehow?)
+              var key;
-        //  //setTimeout( () => look.setAttribute("look-controls",""), 100 )
+              for (key in keys) { return false; }
-        //}
+              return true;
+            }
+
+            if (!velocity[data.adAxis] && !velocity[data.wsAxis] &&
+                isEmptyObject(this.keys)) { return; }
+
+            // Update velocity.
+            delta = delta / 1000;
+            this.updateVelocity(delta);
+
+            if (!velocity[data.adAxis] && !velocity[data.wsAxis]) { return; }
+
+
+            // Transform direction relative to heading.
+            let directionVector = this.getMovementVector(delta)
+            var rotationEuler = new THREE.Euler(0, 0, 0, 'YXZ');
+            rotationEuler.set(THREE.MathUtils.degToRad(0), THREE.MathUtils.degToRad(xrf.camera.rotation.y + 45), 0);
+            directionVector.applyEuler(rotationEuler);
+            // Get movement vector and translate position to camera-rig (not camera)
+            xrf.camera.position.add(directionVector);
+          }.bind( camera.components['wasd-controls'] )        
+        }
 
         // convert href's to a-entity's so AFRAME
         // raycaster can find & execute it

dist/xrfragment.three.js

@@ -978,10 +978,9 @@ xrf.navigator.to = (url,flags,loader,data) => {
       xrf.frag.defaultPredefinedViews({model,scene:model.scene})
       // spec: 2. init metadata
       // spec: predefined view(s) from URL (https://xrfragment.org/#predefined_view)
-      setTimeout( () => { // give external objects some slack 
       let frag = hashbus.pub( url, model) // and eval URI XR fragments 
       hashbus.pub.XRWG({model,scene:model.scene,frag})
-      },2000)
+
       xrf.add( model.scene )
       xrf.navigator.updateHash(hash)
       xrf.emit('navigateLoaded',{url,model})

dist/xrfragment.three.module.js

@@ -978,10 +978,9 @@ xrf.navigator.to = (url,flags,loader,data) => {
       xrf.frag.defaultPredefinedViews({model,scene:model.scene})
       // spec: 2. init metadata
       // spec: predefined view(s) from URL (https://xrfragment.org/#predefined_view)
-      setTimeout( () => { // give external objects some slack 
       let frag = hashbus.pub( url, model) // and eval URI XR fragments 
       hashbus.pub.XRWG({model,scene:model.scene,frag})
-      },2000)
+
       xrf.add( model.scene )
       xrf.navigator.updateHash(hash)
       xrf.emit('navigateLoaded',{url,model})

example/assets/js/utils.js

@@ -285,12 +285,25 @@ export function download(){
 }
 
 export function embed(){
-  // *TODO* this should be part of the XRF framework
+  // *TODO* this should be part of the XRF Threejs framework
+  if( typeof THREE == 'undefined' ) THREE = xrf.THREE 
+  let radToDeg  = THREE.MathUtils.radToDeg
+  let toDeg     = (x) => x / (Math.PI / 180)
   let camera    = document.querySelector('[camera]').object3D.parent // *TODO* fix for threejs
+
+  // *TODO* add camera direction
+  let direction = new xrf.THREE.Vector3()
+  camera.getWorldDirection(direction)
+  const pitch   = Math.asin(direction.y);
+  const yaw     = Math.atan2(direction.x, direction.z);
+  const pitchInDegrees = pitch * 180 / Math.PI;
+  const yawInDegrees = yaw * 180 / Math.PI;
+
   let lastPos = `pos=${camera.position.x.toFixed(2)},${camera.position.y.toFixed(2)},${camera.position.z.toFixed(2)}`
-  let newHash = document.location.hash.replace(/[&]?pos=[0-9\.-]+,[0-9\.-]+,[0-9\.-]+/,'')
+  let newHash = document.location.hash.replace(/[&]?(pos|rot)=[0-9\.-]+,[0-9\.-]+,[0-9\.-]+/,'')
   newHash += `&${lastPos}`
   document.location.hash = newHash.replace(/&&/,'&')
+                                  .replace(/#&/,'')
   // copy url to clipboard 
   var dummy = document.createElement('input'),
       text = window.location.href;

src/3rd/js/aframe/index.js

@@ -4,9 +4,10 @@ window.AFRAME.registerComponent('xrf', {
   init: function () {
     if( !AFRAME.XRF ){
 
+      let camera = document.querySelector('[camera]')
       // start with black
-      document.querySelector('[camera]').setAttribute('xrf-fade','')
+      camera.setAttribute('xrf-fade','')
-      AFRAME.fade = document.querySelector('[camera]').components['xrf-fade']
+      AFRAME.fade = camera.components['xrf-fade']
 
       if( document.location.host.match(/localhost/) ) document.querySelector('a-scene').setAttribute("stats",'')
 
@@ -62,16 +63,37 @@ window.AFRAME.registerComponent('xrf', {
           }
         })
 
-        // in order to set the rotation programmatically
+        // patch wasd-controls to affect camera-rig
-        // we need to disable look-controls
+        if( camera.components['wasd-controls'] ){
-        //xrf.rot  = (xrf,v,opts) => {
+          camera.components['wasd-controls'].tick = function(time,delta){
-        //  let {frag,renderer} = opts;
+            var data = this.data;
-        //  //let look = document.querySelector('[look-controls]')
+            var el = this.el;
-        //  //if( look ) look.removeAttribute("look-controls")
+            var velocity = this.velocity;
-        //  // *TODO* make look-controls compatible, because simply
+            function isEmptyObject(keys) {
-        //  // adding the look-controls will revert to the old rotation (cached somehow?)
+              var key;
-        //  //setTimeout( () => look.setAttribute("look-controls",""), 100 )
+              for (key in keys) { return false; }
-        //}
+              return true;
+            }
+
+            if (!velocity[data.adAxis] && !velocity[data.wsAxis] &&
+                isEmptyObject(this.keys)) { return; }
+
+            // Update velocity.
+            delta = delta / 1000;
+            this.updateVelocity(delta);
+
+            if (!velocity[data.adAxis] && !velocity[data.wsAxis]) { return; }
+
+
+            // Transform direction relative to heading.
+            let directionVector = this.getMovementVector(delta)
+            var rotationEuler = new THREE.Euler(0, 0, 0, 'YXZ');
+            rotationEuler.set(THREE.MathUtils.degToRad(0), THREE.MathUtils.degToRad(xrf.camera.rotation.y + 45), 0);
+            directionVector.applyEuler(rotationEuler);
+            // Get movement vector and translate position to camera-rig (not camera)
+            xrf.camera.position.add(directionVector);
+          }.bind( camera.components['wasd-controls'] )        
+        }
 
         // convert href's to a-entity's so AFRAME
         // raycaster can find & execute it

src/3rd/js/three/navigator.js

@@ -37,10 +37,9 @@ xrf.navigator.to = (url,flags,loader,data) => {
       xrf.frag.defaultPredefinedViews({model,scene:model.scene})
       // spec: 2. init metadata
       // spec: predefined view(s) from URL (https://xrfragment.org/#predefined_view)
-      setTimeout( () => { // give external objects some slack 
       let frag = hashbus.pub( url, model) // and eval URI XR fragments 
       hashbus.pub.XRWG({model,scene:model.scene,frag})
-      },2000)
+
       xrf.add( model.scene )
       xrf.navigator.updateHash(hash)
       xrf.emit('navigateLoaded',{url,model})