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

View File

@ -5,15 +5,17 @@
<meta charset="utf-8">
<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://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.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="./../../../dist/aframe.min.js"></script>
<script src="./../../../dist/aframe-blink-controls.min.js"></script>
</head>
<body>
<script src="./../../../dist/xrfragment.aframe.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 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">
@ -29,8 +31,8 @@
</a-scene>
<script>
// the xrfmenu is totally optional but can be handy
// to quickly add your logo & buttons etc
// xrfragment.extras.js is totally optional but can be handy
// to quickly add a menu, logo, buttons, serverless meeting-functionality etc
XRFMENU.logo = './../../assets/logo.png'
XRFMENU.morelabel = '⚡'
// add your menubuttons:
@ -59,6 +61,8 @@
</a>
<br><br>
`,{timeout:false})
XRFMENU.install(xrf)
</script>
</body>

8
make
View File

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

View File

@ -15,15 +15,14 @@ MEETING = {
init: (el) => new Proxy({
scene: null,
enabled: false,
active: false,
visible: false,
//$overlay: $overlay = el.querySelector('#overlay'),
//
install(opts){
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(){
@ -31,11 +30,7 @@ MEETING = {
this.scene.addEventListener('meeting.peer.remove', () => console.log("$meeting.peer.remove") )
},
toggle: () => MEETING.collapsed = !MEETING.collapsed,
install: (opts) => {
document.body.appendChild(el)
document.dispatchEvent( new CustomEvent("MEETING:ready", {detail: opts}) )
}
toggle: () => MEETING.visible = !MEETING.visible,
},{
@ -43,7 +38,7 @@ MEETING = {
set(data,k,v){
data[k] = v
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!
document.addEventListener('XRFMENU:ready', (opts) => {
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.innerHTML = MEETING.html
MEETING = MEETING.init($meeting)

View File

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

View File

@ -1,22 +1,38 @@
// this orchestrates multiplayer events from the scene graph
window.meeting = (THREE, scene) => ({
peer:{
peers: [],
add(peer){
let defaults = {lastUpdated: new Date().getTime() }
peer = { ...defaults,...peer}
this.peers.push(peer)
window.meeting = (THREE, scene) => new Proxy({
status: 'offline',
peers: {},
add(peerid,data){
data = {lastUpdated: new Date().getTime(), id: peerid, ...data }
this.peers[peerid] = data
scene.dispatchEvent({type:'meeting.peer.add', peer})
},
remove(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})
}
}
})

View File

@ -15,9 +15,6 @@ xrf.init = ((init) => function(opts){
// return xrfragment lib as 'xrf' query functor (like jquery)
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
})(xrf.init)

View File

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