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

wip

This commit is contained in:
Leon van Kammen 2023-12-21 12:47:28 +00:00
parent 3f63c3e132
commit b61f6371d0
7 changed files with 55 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
example/aframe/sandbox/index.html
View File

@ -5,15 +5,17 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script> <!-- <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js"></script> -->
<script src="./../../../dist/aframe.min.js"></script>
<script src="./../../../dist/aframe-blink-controls.min.js"></script>
</head> </head>
<body> <body>
<script src="./../../../dist/xrfragment.aframe.js"></script> <script src="./../../../dist/xrfragment.aframe.js"></script>
<script src="./../../../dist/xrfragment.extras.js"></script> <script src="./../../../dist/xrfragment.extras.js"></script>
<a-scene xr-mode-ui="XRMode: xr" renderer="colorManagement: true; highRefreshRate:true" light="defaultLightsEnabled: false"> <a-scene stats xr-mode-ui="XRMode: xr" renderer="colorManagement: true; highRefreshRate:true" light="defaultLightsEnabled: false">
<a-entity id="player" wasd-controls look-controls> <a-entity id="player" wasd-controls look-controls>
<a-entity camera="fov:90" position="0 1.6 0" id="camera"></a-entity> <a-entity camera="fov:90" position="0 1.6 0" id="camera"></a-entity>
<a-entity id="left-hand" laser-controls="hand: left" raycaster="objects:.ray" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: .floor"> <a-entity id="left-hand" laser-controls="hand: left" raycaster="objects:.ray" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: .floor">
@ -29,8 +31,8 @@
</a-scene> </a-scene>
<script> <script>
// the xrfmenu is totally optional but can be handy // xrfragment.extras.js is totally optional but can be handy
// to quickly add your logo & buttons etc // to quickly add a menu, logo, buttons, serverless meeting-functionality etc
XRFMENU.logo = './../../assets/logo.png' XRFMENU.logo = './../../assets/logo.png'
XRFMENU.morelabel = '⚡' XRFMENU.morelabel = '⚡'
// add your menubuttons: // add your menubuttons:
@ -59,6 +61,8 @@
</a> </a>
<br><br> <br><br>
`,{timeout:false}) `,{timeout:false})
XRFMENU.install(xrf)
</script> </script>
</body> </body>

8
make
View File

@ -89,12 +89,12 @@ build(){
cat src/3rd/js/extra/*.js > dist/xrfragment.extras.js cat src/3rd/js/extra/*.js > dist/xrfragment.extras.js
# fat all-in-one standalone xrf release # fat all-in-one standalone xrf release
test -f /tmp/xrf-aframe.js || { test -f dist/aframe.min.js || {
wget "https://aframe.io/releases/1.5.0/aframe.min.js" -O /tmp/xrf-aframe.js wget "https://aframe.io/releases/1.5.0/aframe.min.js" -O dist/aframe.min.js
wget "https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js" -O /tmp/xrf-blink.js wget "https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js" -O dist/aframe-blink-controls.min.js
} }
cat /tmp/xrf-*.js dist/xrfragment.aframe.js dist/xrfragment.extras.js > dist/xrfragment.aframe.all.js cat dist/aframe.min.js dist/aframe-blink-controls.min.js dist/xrfragment.aframe.js dist/xrfragment.extras.js > dist/xrfragment.aframe.all.js
# add license headers # add license headers
for file in dist/xrfragment.{aframe,module,three,three.module,aframe.all}.js; do for file in dist/xrfragment.{aframe,module,three,three.module,aframe.all}.js; do

20
src/3rd/js/extra/$meeting.js
View File

@ -14,16 +14,15 @@ MEETING = {
init: (el) => new Proxy({ init: (el) => new Proxy({
scene: null, scene: null,
enabled: false, visible: false,
active: false,
//$overlay: $overlay = el.querySelector('#overlay'), //$overlay: $overlay = el.querySelector('#overlay'),
// //
install(opts){ install(opts){
this.scene = opts.scene this.scene = opts.scene
window.meeting.buttons.push(`<a class="btn" aria-label="button" aria-description="start text/audio/video chat" id="meeting" onclick="MEETING.toggle()" target="_blank">🧑‍🤝‍🧑 meeting</a><br>`)
document.body.appendChild( el )
document.body.appendChild( el )
document.dispatchEvent( new CustomEvent("MEETING:ready", {detail: opts}) )
}, },
start(){ start(){
@ -31,11 +30,7 @@ MEETING = {
this.scene.addEventListener('meeting.peer.remove', () => console.log("$meeting.peer.remove") ) this.scene.addEventListener('meeting.peer.remove', () => console.log("$meeting.peer.remove") )
}, },
toggle: () => MEETING.collapsed = !MEETING.collapsed, toggle: () => MEETING.visible = !MEETING.visible,
install: (opts) => {
document.body.appendChild(el)
document.dispatchEvent( new CustomEvent("MEETING:ready", {detail: opts}) )
}
},{ },{
@ -43,7 +38,7 @@ MEETING = {
set(data,k,v){ set(data,k,v){
data[k] = v data[k] = v
switch( k ){ switch( k ){
case "css": document.head.innerHTML += v; break; case "visible": el.style.display = data.visible ? 'block' : 'none'
} }
}, },
@ -53,6 +48,9 @@ MEETING = {
// reactify component! // reactify component!
document.addEventListener('XRFMENU:ready', (opts) => { document.addEventListener('XRFMENU:ready', (opts) => {
opts = opts.detail opts = opts.detail
XRFMENU.buttons = ([`<a class="btn" aria-label="button" aria-description="start text/audio/video chat" id="meeting" onclick="MEETING.toggle()" target="_blank">🧑‍🤝‍🧑 meeting</a><br>`])
.concat(XRFMENU.buttons)
document.head.innerHTML += MEETING.css
$meeting = document.createElement('div') $meeting = document.createElement('div')
$meeting.innerHTML = MEETING.html $meeting.innerHTML = MEETING.html
MEETING = MEETING.init($meeting) MEETING = MEETING.init($meeting)

3
src/3rd/js/extra/$menu.js
View File

@ -63,8 +63,7 @@ $xrfmenu = document.createElement('div')
$xrfmenu.innerHTML = XRFMENU.html $xrfmenu.innerHTML = XRFMENU.html
XRFMENU = XRFMENU.init($xrfmenu) XRFMENU = XRFMENU.init($xrfmenu)
// attach menu functions which are less related to rendering
// here come all menu functions which are less related to rendering
let utils = { let utils = {
bindToWindow(opts){ bindToWindow(opts){

46
src/3rd/js/extra/meeting.js
View File

@ -1,22 +1,38 @@
// this orchestrates multiplayer events from the scene graph // this orchestrates multiplayer events from the scene graph
window.meeting = (THREE, scene) => ({ window.meeting = (THREE, scene) => new Proxy({
peer:{
peers: [], status: 'offline',
add(peer){ peers: {},
let defaults = {lastUpdated: new Date().getTime() }
peer = { ...defaults,...peer}
this.peers.push(peer)
scene.dispatchEvent({type:'meeting.peer.add', peer})
},
remove(peer){
scene.dispatchEvent({type:'meeting.peer.remove', peer})
},
send(opts){
},
receive(opts){
add(peerid,data){
data = {lastUpdated: new Date().getTime(), id: peerid, ...data }
this.peers[peerid] = data
scene.dispatchEvent({type:'meeting.peer.add', peer})
},
remove(peerid,data){
delete this.peers[peerid]
scene.dispatchEvent({type:'meeting.peer.remove', peer})
},
send(opts){
},
receive(opts){
}
},
{
// auto-trigger events on changes
get(meeting,k,receiver){ return meeting[k] },
set(meeting,k,v){
let from = meeting[k]
meeting[k] = v
switch( k ){
default: scene.dispatchEvent({type:`meeting.${k}.change`, from, to:v})
} }
} }
}) })

3
src/3rd/js/three/index.js
View File

@ -15,9 +15,6 @@ xrf.init = ((init) => function(opts){
// return xrfragment lib as 'xrf' query functor (like jquery) // return xrfragment lib as 'xrf' query functor (like jquery)
for ( let i in xrf ) xrf.query[i] = xrf[i] for ( let i in xrf ) xrf.query[i] = xrf[i]
// install menu+extras if available
if( typeof XRFMENU != 'undefined' ) XRFMENU.install(xrf)
return xrf.query return xrf.query
})(xrf.init) })(xrf.init)

2
src/3rd/js/three/xrf/dynamic/uvscroll.js
View File

@ -2,7 +2,7 @@ xrf.addEventListener('dynamicKeyValue', (opts) => {
let {scene,match,v} = opts let {scene,match,v} = opts
let objname = v.fragment let objname = v.fragment
let autoscroll = v.z > 0 || v.w > 0 let autoscroll = v.z > 0 || v.w > 0
return // DISABLED
scene.traverse( (mesh) => { scene.traverse( (mesh) => {
if( mesh.name == objname ){ if( mesh.name == objname ){
if( !mesh.geometry ) return console.warn(`mesh '${objname}' has no uvcoordinates to offset`) if( !mesh.geometry ) return console.warn(`mesh '${objname}' has no uvcoordinates to offset`)