back/forward buttons are now parented to handcontrols
This commit is contained in:
parent
8de1988302
commit
45b46f788c
|
@ -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>
|
||||
|
|
|
@ -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)
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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 )
|
||||
|
|
|
@ -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 ){
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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"}
|
||||
]
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue