back/forward buttons are now parented to handcontrols

example/aframe/sandbox/index.html

@@ -18,7 +18,7 @@
              light="defaultLightsEnabled: false">
       <a-entity id="player" movement-controls touch-controls wasd-controls="fly:false" look-controls>
         <a-entity camera="fov:90" position="0 1.6 0" id="camera"></a-entity>
-        <a-entity id="left-hand" hand-tracking-controls="hand:left;modelColor:#cccccc" laser-controls="hand: left" raycaster="objects:.ray" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: .floor">
+        <a-entity id="left-hand" hand-tracking-controls="hand:left;modelColor:#cccccc" 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>
             <a-entity id="next" xrf-button="label: >; width:0.05; action: history.forward()" position=" 0.025 0 0" class="ray"></a-entity>

src/3rd/js/aframe/patch.hand-tracking-controls.js

@@ -0,0 +1,11 @@
+AFRAME.components['hand-tracking-controls'].Component.prototype.onModelLoaded = function(onModelLoaded){
+  return function(e){
+    onModelLoaded.apply(this);
+    // re-attach children 
+    ([...this.el.children]).map( (c) => {
+      if( c.object3D ){
+        this.el.object3D.getObjectByName("wrist").add(c.object3D)
+      }
+    })
+  }
+}(AFRAME.components['hand-tracking-controls'].Component.prototype.onModelLoaded)

src/3rd/js/aframe/pressable.js

@@ -64,7 +64,7 @@ AFRAME.registerComponent('pressable', {
                 this.el.emit('click');
                 this.pressed = setTimeout( () => {
                   this.el.emit('pressedended');
-                  this.pressed = null 
+                  this.pressed = false 
                 },300)
               }
             }

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

@@ -57,8 +57,10 @@ window.AFRAME.registerComponent('xrf-button', {
         this.el.addEventListener('mouseenter', (e) => this.onMouseEnter(e) );
         this.el.addEventListener('mouseleave', (e) => this.onMouseLeave(e) );
 
+        let cb = new Function(this.data.action)
+
         if( this.data.action ){ 
-          this.el.addEventListener('click', new Function(this.data.action) )
+          this.el.addEventListener('click', AFRAME.utils.throttle(cb, 500 ) )
         }
     },
     bindMethods: function() {

src/3rd/js/plugin/frontend/frontend.js

@@ -284,29 +284,8 @@ window.frontend = (opts) => new Proxy({
   },
 
   updateHashPosition(randomize){
-    // *TODO* this should be part of the XRF Threejs framework
+    const pos = xrf.frag.pos.get()
-    if( typeof THREE == 'undefined' ) THREE = xrf.THREE
+    xrf.navigator.URI.hash.pos = `${pos.x},${pos.y},${pos.z}`
-    let radToDeg  = THREE.MathUtils.radToDeg
-    let toDeg     = (x) => x / (Math.PI / 180)
-    let camera    = document.querySelector('[camera]').object3D.parent // *TODO* fix for threejs
-    camera.position.x += Math.random()/10
-    camera.position.z += Math.random()/10
-
-    // *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|rot)=[0-9\.-]+,[0-9\.-]+,[0-9\.-]+/,'')
-    if( lastPos != "pos=" ){
-      newHash += `&${lastPos}`
-      document.location.hash = newHash.replace(/&&/,'&')
-                                      .replace(/#&/,'')
-    }
     this.copyToClipboard( window.location.href );
   },
 
@@ -326,8 +305,9 @@ window.frontend = (opts) => new Proxy({
       document.location.hash += `&meet=${network.meetingLink}`
     }
     if( !document.location.hash.match(/pos=/) && (network.posName || network.pos) ){
-      document.location.hash += `&pos=${ network.posName || network.pos }`
+      xrf.navigator.URI.hash.pos = network.posName || network.pos
-    }
+    }else frontend.updateHashPosition()
+
     let url = window.location.href
     if( opts.linkonly ) return url
     this.copyToClipboard( url )

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

@@ -12,7 +12,6 @@ xrf.navigator.to = (url,flags,loader,data) => {
   let hashbus       = xrf.hashbus
   xrf.navigator.URI = URI
   let {directory,file,fragment,fileExt} = URI;
-  console.dir({URI, nav: xrf.navigator.URI})
 
   const evalFragment  = () => {
     if( URI.fragment ){

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

@@ -24,6 +24,32 @@ xrf.frag.pos = function(v, opts){
   camera.updateMatrixWorld()
 }
 
+xrf.frag.pos.get = function(precision,randomize){
+    if( !precision ) precision = 2;
+    if( typeof THREE == 'undefined' ) THREE = xrf.THREE
+    let radToDeg  = THREE.MathUtils.radToDeg
+    let toDeg     = (x) => x / (Math.PI / 180)
+    let camera    = xrf.camera 
+    if( randomize ){
+      camera.position.x += Math.random()/10
+      camera.position.z += Math.random()/10
+    }
+
+    // *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;
+
+    return {
+      x: String(camera.position.x.toFixed(2)),
+      y: String(camera.position.y.toFixed(2)),
+      z: String(camera.position.z.toFixed(2)),
+    }
+}
+
 xrf.addEventListener('reset', (opts) => {
   // set the player to position 0,0,0
   xrf.camera.position.set(0,0,0)

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

@@ -94,7 +94,7 @@ xrf.frag.src.externalSRC = (url,frag,opts) => {
   fetch(url, { method: 'HEAD' })
   .then( (res) => {
     let mimetype = res.headers.get('Content-type')
-    if(xrf.debug != undefined ) console.log("HEAD "+url+" => "+mimetype)
+    if(xrf.debug > 0 ) console.log("HEAD "+url+" => "+mimetype)
     if( url.replace(/#.*/,'').match(/\.(gltf|glb)$/)     ) mimetype = 'gltf'
     if( url.replace(/#.*/,'').match(/\.(frag|fs|glsl)$/) ) mimetype = 'x-shader/x-fragment'
     if( url.replace(/#.*/,'').match(/\.(vert|vs)$/)      ) mimetype = 'x-shader/x-fragment'

src/spec/url.json

@@ -16,5 +16,6 @@
   {"fn":"url","data":"/bar/flop#mycustom=foo", "expect":{ "fn":"testURLBrowse", "input":"path","out":"/bar/flop"},"label":"test URLBrowser (overwrite path 2)"},
   {"fn":"url","data":"/bar/flop#mycustom=foo", "expect":{ "fn":"testURLBrowse", "input":"host","out":"foo.com"},"label":"test URLBrowser (maintain host)"},
   {"fn":"url","data":"c/d?foo=1#mycustom=foo", "expect":{ "fn":"testURLBrowse", "input":"path","out":"/bar/flop/c/d"},"label":"test URLBrowser (append path+query)"},
-  {"fn":"url","data":"a/b#foo=bar", "expect":{ "fn":"testURL", "input":"hash.foo","out":"bar"},"label":"test URL hash #mycustom == foo"}
+  {"fn":"url","data":"a/b#foo=bar", "expect":{ "fn":"testURL", "input":"hash.foo","out":"bar"},"label":"test URL hash #mycustom == foo"},
+  {"fn":"url","data":"a/b?index.glb#foo=bar://foo/flop.gltf", "expect":{ "fn":"testURL", "input":"directory","out":"a/b"},"label":"test URLhash with protocol"}
 ]

src/xrfragment/URI.hx

@@ -410,7 +410,6 @@ class URI {
        
         if (newURI.host != null && newURI.host.length > 0 )
         {
-            trace("host: "+newURI.host);
             resultURI.host = newURI.host;
             resultURI.port = null;
             resultURI.fragment = null;