work in progress [might break]

This commit is contained in:
Leon van Kammen 2023-06-02 12:00:21 +02:00
parent c5d12868d6
commit 4a4119657e
7 changed files with 191 additions and 160 deletions

View file

@ -853,29 +853,6 @@ xrf.add = (object) => {
xrf.scene.add(object)
}
/*
* EVENTS
*/
xrf.addEventListener = function(eventName, callback) {
if( !this._listeners ) this._listeners = []
if (!this._listeners[eventName]) {
// create a new array for this event name if it doesn't exist yet
this._listeners[eventName] = [];
}
// add the callback to the listeners array for this event name
this._listeners[eventName].push(callback);
};
xrf.emit = function(eventName, data) {
if( !this._listeners ) this._listeners = []
var callbacks = this._listeners[eventName]
if (callbacks) {
for (var i = 0; i < callbacks.length; i++) {
callbacks[i](data);
}
}
};
xrf.navigator = {}
xrf.navigator.to = (url,event) => {
@ -920,6 +897,57 @@ xrf.navigator.pushState = (file,hash) => {
if( file == document.location.search.substr(1) ) return // page is in its default state
window.history.pushState({},`${file}#${hash}`, document.location.pathname + `?${file}#${hash}` )
}
/*
* (promise-able) EVENTS
*
* example:
*
* xrf.addEventListener('foo',(e) => {
* // let promise = e.promise()
* console.log("navigating to: "+e.detail.destination.url)
* // promise.resolve()
* // promise.reject("not going to happen")
* })
*
* xrf.emit('foo',123)
* xrf.emit('foo',123).then(...).catch(...).finally(...)
*/
xrf.addEventListener = function(eventName, callback) {
if( !this._listeners ) this._listeners = []
if (!this._listeners[eventName]) {
// create a new array for this event name if it doesn't exist yet
this._listeners[eventName] = [];
}
// add the callback to the listeners array for this event name
this._listeners[eventName].push(callback);
};
xrf.emit = function(eventName, data){
return xrf.emit.promise(eventName,data)
}
xrf.emit.normal = function(eventName, data) {
if( !xrf._listeners ) xrf._listeners = []
var callbacks = xrf._listeners[eventName]
if (callbacks) {
for (var i = 0; i < callbacks.length; i++) {
callbacks[i](data);
}
}
};
xrf.emit.promise = function(e, opts){
opts.XRF = xrf // always pass root XRF obj
return new Promise( (resolve, reject) => {
opts.promise = () => {
opts.promise.halted = true
return { resolve, reject }
}
xrf.emit.normal(e, opts)
if( !opts.promise.halted ) resolve()
})
}
xrf.frag.env = function(v, opts){
let { mesh, model, camera, scene, renderer, THREE} = opts
let env = mesh.getObjectByName(v.string)
@ -1051,27 +1079,9 @@ xrf.frag.href = function(v, opts){
}
let teleport = mesh.userData.XRF.href.exec = (e) => {
const meshWorldPosition = new THREE.Vector3();
meshWorldPosition.setFromMatrixPosition(mesh.matrixWorld);
let portalArea = 1 // 2 meter
const cameraDirection = new THREE.Vector3();
camera.getWorldPosition(cameraDirection);
cameraDirection.sub(meshWorldPosition);
cameraDirection.normalize();
cameraDirection.multiplyScalar(portalArea); // move away from portal
const newPos = meshWorldPosition.clone().add(cameraDirection);
const distance = camera.position.distanceTo(newPos);
//if( distance > portalArea ){
if( !renderer.xr.isPresenting ){
if( !confirm("teleport to "+v.string+" ?") ) return
}
xrf.navigator.to(v.string) // ok let's surf to HREF!
console.log("teleport!")
xrf.emit('href',{click:true,mesh,xrf:v})
xrf
.emit('href',{click:true,mesh,xrf:v}) // let all listeners agree
.then( () => xrf.navigator.to(v.string) ) // ok let's surf to HREF!
}
let selected = (state) => () => {
@ -1082,8 +1092,9 @@ xrf.frag.href = function(v, opts){
if( !renderer.domElement.lastCursor )
renderer.domElement.lastCursor = renderer.domElement.style.cursor
renderer.domElement.style.cursor = state ? 'pointer' : renderer.domElement.lastCursor
xrf.emit('href',{selected:state,mesh,xrf:v})
mesh.selected = state
xrf
.emit('href',{selected:state,mesh,xrf:v}) // let all listeners agree
.then( () => mesh.selected = state )
}
if( !opts.frag.q ){ // query means an action

View file

@ -853,29 +853,6 @@ xrf.add = (object) => {
xrf.scene.add(object)
}
/*
* EVENTS
*/
xrf.addEventListener = function(eventName, callback) {
if( !this._listeners ) this._listeners = []
if (!this._listeners[eventName]) {
// create a new array for this event name if it doesn't exist yet
this._listeners[eventName] = [];
}
// add the callback to the listeners array for this event name
this._listeners[eventName].push(callback);
};
xrf.emit = function(eventName, data) {
if( !this._listeners ) this._listeners = []
var callbacks = this._listeners[eventName]
if (callbacks) {
for (var i = 0; i < callbacks.length; i++) {
callbacks[i](data);
}
}
};
xrf.navigator = {}
xrf.navigator.to = (url,event) => {
@ -920,6 +897,57 @@ xrf.navigator.pushState = (file,hash) => {
if( file == document.location.search.substr(1) ) return // page is in its default state
window.history.pushState({},`${file}#${hash}`, document.location.pathname + `?${file}#${hash}` )
}
/*
* (promise-able) EVENTS
*
* example:
*
* xrf.addEventListener('foo',(e) => {
* // let promise = e.promise()
* console.log("navigating to: "+e.detail.destination.url)
* // promise.resolve()
* // promise.reject("not going to happen")
* })
*
* xrf.emit('foo',123)
* xrf.emit('foo',123).then(...).catch(...).finally(...)
*/
xrf.addEventListener = function(eventName, callback) {
if( !this._listeners ) this._listeners = []
if (!this._listeners[eventName]) {
// create a new array for this event name if it doesn't exist yet
this._listeners[eventName] = [];
}
// add the callback to the listeners array for this event name
this._listeners[eventName].push(callback);
};
xrf.emit = function(eventName, data){
return xrf.emit.promise(eventName,data)
}
xrf.emit.normal = function(eventName, data) {
if( !xrf._listeners ) xrf._listeners = []
var callbacks = xrf._listeners[eventName]
if (callbacks) {
for (var i = 0; i < callbacks.length; i++) {
callbacks[i](data);
}
}
};
xrf.emit.promise = function(e, opts){
opts.XRF = xrf // always pass root XRF obj
return new Promise( (resolve, reject) => {
opts.promise = () => {
opts.promise.halted = true
return { resolve, reject }
}
xrf.emit.normal(e, opts)
if( !opts.promise.halted ) resolve()
})
}
xrf.frag.env = function(v, opts){
let { mesh, model, camera, scene, renderer, THREE} = opts
let env = mesh.getObjectByName(v.string)
@ -1051,27 +1079,9 @@ xrf.frag.href = function(v, opts){
}
let teleport = mesh.userData.XRF.href.exec = (e) => {
const meshWorldPosition = new THREE.Vector3();
meshWorldPosition.setFromMatrixPosition(mesh.matrixWorld);
let portalArea = 1 // 2 meter
const cameraDirection = new THREE.Vector3();
camera.getWorldPosition(cameraDirection);
cameraDirection.sub(meshWorldPosition);
cameraDirection.normalize();
cameraDirection.multiplyScalar(portalArea); // move away from portal
const newPos = meshWorldPosition.clone().add(cameraDirection);
const distance = camera.position.distanceTo(newPos);
//if( distance > portalArea ){
if( !renderer.xr.isPresenting ){
if( !confirm("teleport to "+v.string+" ?") ) return
}
xrf.navigator.to(v.string) // ok let's surf to HREF!
console.log("teleport!")
xrf.emit('href',{click:true,mesh,xrf:v})
xrf
.emit('href',{click:true,mesh,xrf:v}) // let all listeners agree
.then( () => xrf.navigator.to(v.string) ) // ok let's surf to HREF!
}
let selected = (state) => () => {
@ -1082,8 +1092,9 @@ xrf.frag.href = function(v, opts){
if( !renderer.domElement.lastCursor )
renderer.domElement.lastCursor = renderer.domElement.style.cursor
renderer.domElement.style.cursor = state ? 'pointer' : renderer.domElement.lastCursor
xrf.emit('href',{selected:state,mesh,xrf:v})
mesh.selected = state
xrf
.emit('href',{selected:state,mesh,xrf:v}) // let all listeners agree
.then( () => mesh.selected = state )
}
if( !opts.frag.q ){ // query means an action

View file

@ -52,26 +52,24 @@
$('a-scene').addEventListener('loaded', () => {
let XRF = window.AFRAME.XRF
setupConsole( $('textarea') )
setupUrlBar( $('input#uri'), window.AFRAME.XRF )
// optional hook to prompt surfing to external asset
window.AFRAME.XRF.href = (xrf,v,opts) => {
let { mesh, model, camera, scene, renderer, THREE} = opts
alert("1")
let isExtern = v.string[0] != '#'
let notIsHome = v.string != $('#home').getAttribute("xrf")
// xrf(v,opts) // original init
// const exec = mesh.userData.XRF.href.exec
//console.dir(exec)
// mesh.userData.XRF.href.exec = (e) => {
// if( !renderer.xr.isPresenting && isExtern && notIsHome ){
// if( !confirm("teleport to "+v.string+" ?") ) return
// }
// exec(e)
// }
}
setupUrlBar( $('input#uri'), XRF )
// example listener, to prompt surfing to external asset
XRF.addEventListener('href',(e) => {
if( e.click ){
const { mesh, model, camera, scene, renderer, THREE} = e.XRF
const url = e.xrf.string
const isExtern = url != '#'
const notIsHome = url != $('#home').getAttribute("xrf")
const promise = e.promise() // promisify event
if( !renderer.xr.isPresenting && isExtern && notIsHome ){
if( confirm("teleport to "+url+" ?") ) promise.resolve()
else promise.reject('teleport not ok')
}
}
})
// add screenshot component with camera to capture bigger size equirects
$('a-scene').setAttribute("screenshot",{camera: "[camera]",width: 4096*2, height:2048*2})

File diff suppressed because one or more lines are too long

View file

@ -119,26 +119,3 @@ xrf.add = (object) => {
xrf.scene.add(object)
}
/*
* EVENTS
*/
xrf.addEventListener = function(eventName, callback) {
if( !this._listeners ) this._listeners = []
if (!this._listeners[eventName]) {
// create a new array for this event name if it doesn't exist yet
this._listeners[eventName] = [];
}
// add the callback to the listeners array for this event name
this._listeners[eventName].push(callback);
};
xrf.emit = function(eventName, data) {
if( !this._listeners ) this._listeners = []
var callbacks = this._listeners[eventName]
if (callbacks) {
for (var i = 0; i < callbacks.length; i++) {
callbacks[i](data);
}
}
};

51
src/3rd/three/pubsub.js Normal file
View file

@ -0,0 +1,51 @@
/*
* (promise-able) EVENTS
*
* example:
*
* xrf.addEventListener('foo',(e) => {
* // let promise = e.promise()
* console.log("navigating to: "+e.detail.destination.url)
* // promise.resolve()
* // promise.reject("not going to happen")
* })
*
* xrf.emit('foo',123)
* xrf.emit('foo',123).then(...).catch(...).finally(...)
*/
xrf.addEventListener = function(eventName, callback) {
if( !this._listeners ) this._listeners = []
if (!this._listeners[eventName]) {
// create a new array for this event name if it doesn't exist yet
this._listeners[eventName] = [];
}
// add the callback to the listeners array for this event name
this._listeners[eventName].push(callback);
};
xrf.emit = function(eventName, data){
return xrf.emit.promise(eventName,data)
}
xrf.emit.normal = function(eventName, data) {
if( !xrf._listeners ) xrf._listeners = []
var callbacks = xrf._listeners[eventName]
if (callbacks) {
for (var i = 0; i < callbacks.length; i++) {
callbacks[i](data);
}
}
};
xrf.emit.promise = function(e, opts){
opts.XRF = xrf // always pass root XRF obj
return new Promise( (resolve, reject) => {
opts.promise = () => {
opts.promise.halted = true
return { resolve, reject }
}
xrf.emit.normal(e, opts)
if( !opts.promise.halted ) resolve()
})
}

View file

@ -94,27 +94,9 @@ xrf.frag.href = function(v, opts){
}
let teleport = mesh.userData.XRF.href.exec = (e) => {
const meshWorldPosition = new THREE.Vector3();
meshWorldPosition.setFromMatrixPosition(mesh.matrixWorld);
let portalArea = 1 // 2 meter
const cameraDirection = new THREE.Vector3();
camera.getWorldPosition(cameraDirection);
cameraDirection.sub(meshWorldPosition);
cameraDirection.normalize();
cameraDirection.multiplyScalar(portalArea); // move away from portal
const newPos = meshWorldPosition.clone().add(cameraDirection);
const distance = camera.position.distanceTo(newPos);
//if( distance > portalArea ){
if( !renderer.xr.isPresenting ){
if( !confirm("teleport to "+v.string+" ?") ) return
}
xrf.navigator.to(v.string) // ok let's surf to HREF!
console.log("teleport!")
xrf.emit('href',{click:true,mesh,xrf:v})
xrf
.emit('href',{click:true,mesh,xrf:v}) // let all listeners agree
.then( () => xrf.navigator.to(v.string) ) // ok let's surf to HREF!
}
let selected = (state) => () => {
@ -125,8 +107,9 @@ xrf.frag.href = function(v, opts){
if( !renderer.domElement.lastCursor )
renderer.domElement.lastCursor = renderer.domElement.style.cursor
renderer.domElement.style.cursor = state ? 'pointer' : renderer.domElement.lastCursor
xrf.emit('href',{selected:state,mesh,xrf:v})
mesh.selected = state
xrf
.emit('href',{selected:state,mesh,xrf:v}) // let all listeners agree
.then( () => mesh.selected = state )
}
if( !opts.frag.q ){ // query means an action