aframe-babia-components
Version:
A data visualization set of components for A-Frame.
209 lines (177 loc) • 8.21 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Simple No Persistence Example — Networked-Aframe in BabiaXr</title>
<meta name="description" content="Simple No Persistence Example — Networked-Aframe in BabiaXr" />
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script>
<script src="./easyrtc.js"></script>
<script src="https://unpkg.com/networked-aframe@^0.8.0/dist/networked-aframe.js"></script>
<script
src="https://unpkg.com/aframe-environment-component@1.3.3/dist/aframe-environment-component.min.js"></script>
<script src="../../dist/aframe-babia-components.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v7.2.0/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene id="AframeScene" networked-scene="
room: room_no_persistence;
adapter: easyrtc;
debug: true;
audio: false;
serverURL: empty_server;
">
<!-- serverURL:http://10.1.130.131:8080/; -->
<a-assets>
<!-- Dummy asset to make the scene sync (WIP)-->
<img src="https://wallpapercave.com/wp/wp2345390.jpg?dummy=8484744">
<!-- Templates -->
<!-- Avatar -->
<template id="mov-template">
<a-entity class="mov"></a-entity>
</template>
<template id="avatar-template">
<a-sphere class="avatar" networked-audio-source></a-sphere>
</template>
<template id="username-tag-template">
<a-text class="username-tag"></a-text>
</template>
</a-assets>
<!--Sync entities, not persistent-->
<a-entity id="mov" movement-controls="fly: true" position="0 1 3"
networked="template:#mov-template; attachTemplateToLocal:false">
<a-sphere id="avatar" camera color="#66FFFF" scale="0.2 0.2 0.2" look-controls
networked="template:#avatar-template;attachTemplateToLocal:false;">
</a-sphere>
<a-text id="username-tag" networked="template:#username-tag-template; attachTemplateToLocal:false"
position="-0.5 0.5 0" width="5" color="black" value="Light Blue Player"></a-text>
</a-sphere>
<a-entity cursor="rayOrigin:mouse"></a-entity>
<a-entity laser-controls="hand: right"></a-entity>
</a-entity>
<!--Not sync entities-->
<a-plane id="audio_button" position="0 2 0" rotation="0 0 0" height="0.5" width="1.5" color="#E44B00">
<a-text id="audio_label" value="Stop Audio" color="#0582B5" width="4" position="-0.5 0 0" rotation="0 0 0">
</a-text>
</a-plane>
<a-plane id="color_button" position="0 1 0" rotation="0 0 0" height="0.5" width="3.5" color="#66FFFF">
<a-text id="color_label" value="Light Blue Player. Click to change player" color="black" width="4"
position="-1.5 0 0" rotation="0 0 0">
</a-text>
</a-plane>
<a-entity environment="preset: dream; skyType: color; skyColor: #358DF8 "></a-entity>
</a-scene>
<script>
/* GET DOM ELEMENTS */
let scene = document.getElementById('AframeScene')
let avatar = document.getElementById('avatar')
let usernameTag = document.getElementById('username-tag')
let audioButton = document.getElementById('audio_button')
let audioLabel = document.getElementById('audio_label')
let colorButton = document.getElementById('color_button')
let colorLabel = document.getElementById('color_label')
/* SET SERVER URL FROM QUERY STRING */
let serverURL = getValueFromQueryString('serverURL');
console.log("Empty server URL, networked-scene: ", scene.getAttribute('networked-scene'))
if (serverURL) {
scene.setAttribute('networked-scene', 'serverURL', serverURL);
scene.setAttribute('networked-scene', 'audio', 'true');
}
/* LIST OF USERNAMES AND AVATAR COLORS */
let players = [
{ color: "#66FFFF", username: "Light Blue Player" },
{ color: "#FF33CC", username: "Pink Player" },
{ color: "#33CC66", username: "Green Player" },
{ color: "#FF6666", username: "Red Player" },
{ color: "#3C78D8", username: "Dark Blue Player" },
{ color: "#FFFF66", username: "Yellow Player" },
{ color: "#B28DFF", username: "Purple Player" },
{ color: "#663300", username: "Brown Player" },
{ color: "#999999", username: "Gray Player" },
{ color: "#F6F7FB", username: "Pearl Player" }
]
// UI Event Listeners
audioButton.addEventListener('click', function (event) {
if (audioLabel.getAttribute('value') === 'Stop Audio') {
stopAudio();
} else {
turnOnAudio();
}
});
colorButton.addEventListener('click', function (event) {
let _players = players.filter(player => player.color === colorButton.getAttribute('color'))
let index = players.indexOf(_players[0]) + 1
if (index >= players.length) {
index = 0;
}
colorButton.setAttribute('color', players[index].color)
colorLabel.setAttribute('value', `${players[index].username}. Click to change player`)
usernameTag.setAttribute('value', players[index].username)
avatar.setAttribute('color', players[index].color)
})
// NAF Event Listeners
document.body.addEventListener('connected', function (event) {
console.log('connected event. clientId =', event.detail.clientId);
console.log("Filled serverURL, networked-scene: ", scene.getAttribute('networked-scene'))
});
document.body.addEventListener('clientConnected', function (event) {
let clientId = event.detail.clientId;
console.log('clientConnected event. clientId =', clientId);
});
document.body.addEventListener('clientDisconnected', function (event) {
let clientId = event.detail.clientId;
console.log('clientDisconnected event. clientId =', clientId);
});
document.body.addEventListener('entityCreated', function (event) {
console.log(event.detail.el)
});
// Other methods
function getValueFromQueryString(string) {
string = string.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + string + '(=([^&#]*)|&|#|$)'),
results = regex.exec(window.location.href);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
function turnOnAudio() {
NAF.connection.adapter.enableMicrophone(true)
audioButton.setAttribute('color', '#E44B00')
audioLabel.setAttribute('value', 'Stop Audio')
}
function stopAudio() {
NAF.connection.adapter.enableMicrophone(false)
audioButton.setAttribute('color', '#F8F6F2')
audioLabel.setAttribute('value', 'Turn on Audio')
}
</script>
<script>
// Schemas with components and attributes for syncronization
NAF.schemas.add({
template: '#mov-template',
components: [
'position',
'rotation'
]
});
NAF.schemas.add({
template: '#avatar-template',
components: [
'position',
'rotation',
'color',
'scale'
]
});
NAF.schemas.add({
template: '#username-tag-template',
components: [
'value',
'color',
'width',
'position',
'rotation'
]
});
</script>
</body>
</html>