back/forward buttons are now parented to handcontrols

This commit is contained in:
Leon van Kammen 2024-04-15 14:06:54 +00:00
parent 8de1988302
commit 45b46f788c
10 changed files with 50 additions and 32 deletions

View File

@ -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>

View File

@ -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)

View File

@ -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)
}
}

View File

@ -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() {

View File

@ -284,29 +284,8 @@ window.frontend = (opts) => new Proxy({
},
updateHashPosition(randomize){
// *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
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(/#&/,'')
}
const pos = xrf.frag.pos.get()
xrf.navigator.URI.hash.pos = `${pos.x},${pos.y},${pos.z}`
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 )

View File

@ -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 ){

View File

@ -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)

View File

@ -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'

View File

@ -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"}
]

View File

@ -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;