xrfragment/src/3rd/aframe/index.js

96 lines
2.9 KiB
JavaScript
Raw Normal View History

2023-05-09 17:42:29 +02:00
window.AFRAME.registerComponent('xrf', {
schema: {
},
init: function () {
if( !AFRAME.XRF ) this.initXRFragments()
2023-05-18 17:11:11 +02:00
if( this.data ){
2023-05-17 21:31:28 +02:00
AFRAME.XRF.navigator.to(this.data)
.then( (model) => {
let gets = [ ...document.querySelectorAll('[xrf-get]') ]
2023-05-12 22:40:09 +02:00
gets.map( (g) => g.emit('update') )
})
}
2023-05-09 17:42:29 +02:00
},
2023-05-09 17:42:29 +02:00
initXRFragments: function(){
2023-05-17 21:31:28 +02:00
//window.addEventListener('popstate', clear )
//window.addEventListener('pushstate', clear )
2023-05-17 21:31:28 +02:00
2023-05-09 17:42:29 +02:00
// enable XR fragments
2023-05-17 21:31:28 +02:00
let aScene = document.querySelector('a-scene')
2023-05-09 17:42:29 +02:00
let XRF = AFRAME.XRF = xrfragment.init({
THREE,
camera: aScene.camera,
2023-05-09 17:42:29 +02:00
scene: aScene.object3D,
renderer: aScene.renderer,
debug: true,
loaders: { gltf: THREE.GLTFLoader } // which 3D assets (exts) to check for XR fragments?
2023-05-09 17:42:29 +02:00
})
if( !XRF.camera ) throw 'xrfragment: no camera detected, please declare <a-entity camera..> ABOVE entities with xrf-attributes'
2023-05-09 17:42:29 +02:00
// override the camera-related XR Fragments so the camera-rig is affected
let camOverride = (xrf,v,opts) => {
2023-05-22 14:10:44 +02:00
opts.camera = $('[camera]').object3D.parent
xrf(v,opts)
2023-05-09 17:42:29 +02:00
}
XRF.pos = camOverride
XRF.rot = camOverride
2023-05-12 22:40:09 +02:00
XRF.href = (xrf,v,opts) => { // convert portal to a-entity so AFRAME
2023-05-17 21:31:28 +02:00
camOverride(xrf,v,opts) // raycaster can find & execute it
2023-05-12 22:40:09 +02:00
let {mesh,camera} = opts;
let el = document.createElement("a-entity")
el.setAttribute("xrf-get",mesh.name )
el.setAttribute("class","collidable")
2023-05-17 21:31:28 +02:00
el.addEventListener("click", mesh.userData.XRF.href.exec )
2023-05-12 22:40:09 +02:00
$('a-scene').appendChild(el)
}
// cleanup xrf-get objects when resetting scene
XRF.reset = ((reset) => () => {
console.log("aframe reset")
let els = [...document.querySelectorAll('[xrf-get]')]
els.map( (el) => document.querySelector('a-scene').removeChild(el) )
reset()
})(XRF.reset)
},
})
2023-05-09 17:42:29 +02:00
window.AFRAME.registerComponent('xrf-get', {
2023-05-10 19:12:15 +02:00
schema: {
name: {type: 'string'},
2023-05-17 21:31:28 +02:00
clone: {type: 'boolean', default:false}
2023-05-10 19:12:15 +02:00
},
init: function () {
2023-05-10 19:12:15 +02:00
var el = this.el;
var meshname = this.data.name || this.data;
this.el.addEventListener('update', (evt) => {
2023-05-10 19:12:15 +02:00
2023-05-12 22:40:09 +02:00
let scene = AFRAME.XRF.scene
let mesh = scene.getObjectByName(meshname);
if (!mesh){
console.error("mesh with name '"+meshname+"' not found in model")
2023-05-10 19:12:15 +02:00
return;
}
2023-05-17 21:31:28 +02:00
if( !this.data.clone ) mesh.parent.remove(mesh)
////mesh.updateMatrixWorld();
this.el.object3D.position.setFromMatrixPosition(scene.matrixWorld);
this.el.object3D.quaternion.setFromRotationMatrix(scene.matrixWorld);
mesh.xrf = true // mark for deletion by xrf
2023-05-17 21:31:28 +02:00
this.el.setObject3D('mesh', mesh );
if( !this.el.id ) this.el.setAttribute("id",`xrf-${mesh.name}`)
})
2023-05-10 19:12:15 +02:00
2023-05-12 22:40:09 +02:00
if( this.el.className == "collidable" ) this.el.emit("update")
2023-05-10 19:12:15 +02:00
}
2023-05-10 19:12:15 +02:00
});