coderofsalvation/xrfragment
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

wip: solve AFRAME teleport issue

Browse source
This commit is contained in:
Leon van Kammen 2023-05-12 22:40:09 +02:00
parent 3cd5a7d333
commit c626f7c762
7 changed files with 48 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
dist/xrfragment.aframe.js vendored
View file

@ -816,7 +816,7 @@ xrf.reset = () => {
if( !xrf.model.scene ) return if( !xrf.model.scene ) return
xrf.scene.remove( xrf.model.scene ) xrf.scene.remove( xrf.model.scene )
xrf.model.scene.traverse( function(node){ xrf.model.scene.traverse( function(node){
if( node instanceof THREE.Mesh ){ if( node instanceof xrf.THREE.Mesh ){
node.geometry.dispose() node.geometry.dispose()
node.material.dispose() node.material.dispose()
} }
@ -944,9 +944,9 @@ xrf.frag.href = function(v, opts){
}); });
mesh.material.needsUpdate = true mesh.material.needsUpdate = true
const handleTeleport = (e) => { mesh.handleTeleport = (e) => {
if( mesh.clicked ) return if( mesh.clicked ) return
this.clicked = true mesh.clicked = true
let portalArea = 1 // 1 meter let portalArea = 1 // 1 meter
const meshWorldPosition = new THREE.Vector3(); const meshWorldPosition = new THREE.Vector3();
meshWorldPosition.setFromMatrixPosition(mesh.matrixWorld); meshWorldPosition.setFromMatrixPosition(mesh.matrixWorld);
@ -980,7 +980,7 @@ xrf.frag.href = function(v, opts){
setTimeout( () => mesh.clicked = false, 200 ) // prevent double clicks setTimeout( () => mesh.clicked = false, 200 ) // prevent double clicks
} }
if( !opts.frag.q ) mesh.addEventListener('click', handleTeleport ) if( !opts.frag.q ) mesh.addEventListener('click', mesh.handleTeleport )
// lazy remove mesh (because we're inside a traverse) // lazy remove mesh (because we're inside a traverse)
setTimeout( () => { setTimeout( () => {
@ -1048,7 +1048,7 @@ window.AFRAME.registerComponent('xrf', {
AFRAME.XRF.navigate.to(this.data) AFRAME.XRF.navigate.to(this.data)
.then( (model) => { .then( (model) => {
let gets = [ ...document.querySelectorAll('[xrf-get]') ] let gets = [ ...document.querySelectorAll('[xrf-get]') ]
gets.map( (g) => g.emit('update',model) ) gets.map( (g) => g.emit('update') )
}) })
} }
}, },
@ -1074,7 +1074,19 @@ window.AFRAME.registerComponent('xrf', {
XRF.pos = camOverride XRF.pos = camOverride
XRF.rot = camOverride XRF.rot = camOverride
XRF.href = camOverride
XRF.href = (xrf,v,opts) => { // convert portal to a-entity so AFRAME
camOverride(xrf,v,opts) // raycaster can reach it
let {mesh,camera} = opts;
let el = document.createElement("a-entity")
el.setAttribute("xrf-get",mesh.name )
el.setAttribute("class","collidable")
el.addEventListener("click", (e) => {
mesh.handleTeleport() // *TODO* rename to fragment-neutral mesh.xrf.exec() e.g.
$('#player').object3D.position.copy(camera.position)
})
$('a-scene').appendChild(el)
}
}, },
}) })
@ -1092,7 +1104,7 @@ window.AFRAME.registerComponent('xrf-get', {
this.el.addEventListener('update', (evt) => { this.el.addEventListener('update', (evt) => {
let scene = evt.detail.scene let scene = AFRAME.XRF.scene
let mesh = scene.getObjectByName(meshname); let mesh = scene.getObjectByName(meshname);
if (!mesh){ if (!mesh){
console.error("mesh with name '"+meshname+"' not found in model") console.error("mesh with name '"+meshname+"' not found in model")
@ -1109,6 +1121,8 @@ window.AFRAME.registerComponent('xrf-get', {
}) })
if( this.el.className == "collidable" ) this.el.emit("update")
} }
}); });

8
dist/xrfragment.three.js vendored
View file

@ -816,7 +816,7 @@ xrf.reset = () => {
if( !xrf.model.scene ) return if( !xrf.model.scene ) return
xrf.scene.remove( xrf.model.scene ) xrf.scene.remove( xrf.model.scene )
xrf.model.scene.traverse( function(node){ xrf.model.scene.traverse( function(node){
if( node instanceof THREE.Mesh ){ if( node instanceof xrf.THREE.Mesh ){
node.geometry.dispose() node.geometry.dispose()
node.material.dispose() node.material.dispose()
} }
@ -944,9 +944,9 @@ xrf.frag.href = function(v, opts){
}); });
mesh.material.needsUpdate = true mesh.material.needsUpdate = true
const handleTeleport = (e) => { mesh.handleTeleport = (e) => {
if( mesh.clicked ) return if( mesh.clicked ) return
this.clicked = true mesh.clicked = true
let portalArea = 1 // 1 meter let portalArea = 1 // 1 meter
const meshWorldPosition = new THREE.Vector3(); const meshWorldPosition = new THREE.Vector3();
meshWorldPosition.setFromMatrixPosition(mesh.matrixWorld); meshWorldPosition.setFromMatrixPosition(mesh.matrixWorld);
@ -980,7 +980,7 @@ xrf.frag.href = function(v, opts){
setTimeout( () => mesh.clicked = false, 200 ) // prevent double clicks setTimeout( () => mesh.clicked = false, 200 ) // prevent double clicks
} }
if( !opts.frag.q ) mesh.addEventListener('click', handleTeleport ) if( !opts.frag.q ) mesh.addEventListener('click', mesh.handleTeleport )
// lazy remove mesh (because we're inside a traverse) // lazy remove mesh (because we're inside a traverse)
setTimeout( () => { setTimeout( () => {

1
example/threejs/sandbox/example3.gltf Symbolic link
View file

@ -0,0 +1 @@
../../assets/example3.gltf

2
example/threejs/sandbox/index.html
View file

@ -129,7 +129,7 @@
let file = document.location.search.length > 2 ? document.location.search.substr(1) : './../../assets/example3.gltf' let file = document.location.search.length > 2 ? document.location.search.substr(1) : './../../assets/example3.gltf'
$('#model').setAttribute("href","./../../asset/"+file) $('#model').setAttribute("href","./../../asset/"+file)
XRF.navigate( file ) XRF.navigate.to( file )
// setup mouse controls // setup mouse controls

20
src/3rd/aframe/index.js
View file

@ -8,7 +8,7 @@ window.AFRAME.registerComponent('xrf', {
AFRAME.XRF.navigate.to(this.data) AFRAME.XRF.navigate.to(this.data)
.then( (model) => { .then( (model) => {
let gets = [ ...document.querySelectorAll('[xrf-get]') ] let gets = [ ...document.querySelectorAll('[xrf-get]') ]
gets.map( (g) => g.emit('update',model) ) gets.map( (g) => g.emit('update') )
}) })
} }
}, },
@ -34,7 +34,19 @@ window.AFRAME.registerComponent('xrf', {
XRF.pos = camOverride XRF.pos = camOverride
XRF.rot = camOverride XRF.rot = camOverride
XRF.href = camOverride
XRF.href = (xrf,v,opts) => { // convert portal to a-entity so AFRAME
camOverride(xrf,v,opts) // raycaster can reach it
let {mesh,camera} = opts;
let el = document.createElement("a-entity")
el.setAttribute("xrf-get",mesh.name )
el.setAttribute("class","collidable")
el.addEventListener("click", (e) => {
mesh.handleTeleport() // *TODO* rename to fragment-neutral mesh.xrf.exec() e.g.
//$('#player').object3D.position.copy(camera.position)
})
$('a-scene').appendChild(el)
}
}, },
}) })
@ -52,7 +64,7 @@ window.AFRAME.registerComponent('xrf-get', {
this.el.addEventListener('update', (evt) => { this.el.addEventListener('update', (evt) => {
let scene = evt.detail.scene let scene = AFRAME.XRF.scene
let mesh = scene.getObjectByName(meshname); let mesh = scene.getObjectByName(meshname);
if (!mesh){ if (!mesh){
console.error("mesh with name '"+meshname+"' not found in model") console.error("mesh with name '"+meshname+"' not found in model")
@ -69,6 +81,8 @@ window.AFRAME.registerComponent('xrf-get', {
}) })
if( this.el.className == "collidable" ) this.el.emit("update")
} }
}); });

2
src/3rd/three/index.js
View file

@ -95,7 +95,7 @@ xrf.reset = () => {
if( !xrf.model.scene ) return if( !xrf.model.scene ) return
xrf.scene.remove( xrf.model.scene ) xrf.scene.remove( xrf.model.scene )
xrf.model.scene.traverse( function(node){ xrf.model.scene.traverse( function(node){
if( node instanceof THREE.Mesh ){ if( node instanceof xrf.THREE.Mesh ){
node.geometry.dispose() node.geometry.dispose()
node.material.dispose() node.material.dispose()
} }

6
src/3rd/three/xrf/href.js
View file

@ -47,9 +47,9 @@ xrf.frag.href = function(v, opts){
}); });
mesh.material.needsUpdate = true mesh.material.needsUpdate = true
const handleTeleport = (e) => { mesh.handleTeleport = (e) => {
if( mesh.clicked ) return if( mesh.clicked ) return
this.clicked = true mesh.clicked = true
let portalArea = 1 // 1 meter let portalArea = 1 // 1 meter
const meshWorldPosition = new THREE.Vector3(); const meshWorldPosition = new THREE.Vector3();
meshWorldPosition.setFromMatrixPosition(mesh.matrixWorld); meshWorldPosition.setFromMatrixPosition(mesh.matrixWorld);
@ -83,7 +83,7 @@ xrf.frag.href = function(v, opts){
setTimeout( () => mesh.clicked = false, 200 ) // prevent double clicks setTimeout( () => mesh.clicked = false, 200 ) // prevent double clicks
} }
if( !opts.frag.q ) mesh.addEventListener('click', handleTeleport ) if( !opts.frag.q ) mesh.addEventListener('click', mesh.handleTeleport )
// lazy remove mesh (because we're inside a traverse) // lazy remove mesh (because we're inside a traverse)
setTimeout( () => { setTimeout( () => {