improved default fragment/url triggers

This commit is contained in:
Leon van Kammen 2023-11-29 16:45:21 +01:00
parent 44acdfb2d7
commit 1291763409
8 changed files with 28366 additions and 46 deletions

19
dist/utils.js vendored
View file

@ -285,12 +285,25 @@ function download(){
}
function embed(){
// *TODO* this should be part of the XRF framework
let camera = document.querySelector('[camera]').object3D.parent // *TODO* fix for threejs
// *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;

View file

@ -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)
let frag = hashbus.pub( url, model) // and eval URI XR fragments
hashbus.pub.XRWG({model,scene:model.scene,frag})
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','')
AFRAME.fade = document.querySelector('[camera]').components['xrf-fade']
camera.setAttribute('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
// we need to disable look-controls
//xrf.rot = (xrf,v,opts) => {
// let {frag,renderer} = opts;
// //let look = document.querySelector('[look-controls]')
// //if( look ) look.removeAttribute("look-controls")
// // *TODO* make look-controls compatible, because simply
// // adding the look-controls will revert to the old rotation (cached somehow?)
// //setTimeout( () => look.setAttribute("look-controls",""), 100 )
//}
// patch wasd-controls to affect camera-rig
if( camera.components['wasd-controls'] ){
camera.components['wasd-controls'].tick = function(time,delta){
var data = this.data;
var el = this.el;
var velocity = this.velocity;
function isEmptyObject(keys) {
var key;
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

28254
dist/xrfragment.module.js vendored

File diff suppressed because it is too large Load diff

View file

@ -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)
let frag = hashbus.pub( url, model) // and eval URI XR fragments
hashbus.pub.XRWG({model,scene:model.scene,frag})
xrf.add( model.scene )
xrf.navigator.updateHash(hash)
xrf.emit('navigateLoaded',{url,model})

View file

@ -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)
let frag = hashbus.pub( url, model) // and eval URI XR fragments
hashbus.pub.XRWG({model,scene:model.scene,frag})
xrf.add( model.scene )
xrf.navigator.updateHash(hash)
xrf.emit('navigateLoaded',{url,model})

View file

@ -285,12 +285,25 @@ export function download(){
}
export function embed(){
// *TODO* this should be part of the XRF framework
let camera = document.querySelector('[camera]').object3D.parent // *TODO* fix for threejs
// *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;

View file

@ -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','')
AFRAME.fade = document.querySelector('[camera]').components['xrf-fade']
camera.setAttribute('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
// we need to disable look-controls
//xrf.rot = (xrf,v,opts) => {
// let {frag,renderer} = opts;
// //let look = document.querySelector('[look-controls]')
// //if( look ) look.removeAttribute("look-controls")
// // *TODO* make look-controls compatible, because simply
// // adding the look-controls will revert to the old rotation (cached somehow?)
// //setTimeout( () => look.setAttribute("look-controls",""), 100 )
//}
// patch wasd-controls to affect camera-rig
if( camera.components['wasd-controls'] ){
camera.components['wasd-controls'].tick = function(time,delta){
var data = this.data;
var el = this.el;
var velocity = this.velocity;
function isEmptyObject(keys) {
var key;
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

View file

@ -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)
let frag = hashbus.pub( url, model) // and eval URI XR fragments
hashbus.pub.XRWG({model,scene:model.scene,frag})
xrf.add( model.scene )
xrf.navigator.updateHash(hash)
xrf.emit('navigateLoaded',{url,model})