aframe-babia-components
Version:
A data visualization set of components for A-Frame.
223 lines (196 loc) • 9.19 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>BabiaXR - Multiuser Babia-boats Demo</title>
<meta name="description" content="Babiaxr multiuser demo using babia-boats.">
</meta>
<!-- Aframe -->
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.0/dist/aframe-extras.min.js"></script>
<script
src="https://unpkg.com/aframe-environment-component@1.2.0/dist/aframe-environment-component.min.js"></script>
<script src="../../dist/aframe-babia-components.js"></script>
<!-- Mulituser -->
<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>
<!-- Gitlab Corner -->
<link rel="stylesheet" href="../assets/gitlab-corner.css">
</head>
<body>
<a-scene id="AframeScene" networked-scene="
room: index_multi_boats;
adapter: easyrtc;
debug: true;
audio: true;
serverURL: https://f-l2108-pc02.aulas.etsit.urjc.es:49153/">
<a-assets>
<!-- Dummy asset to make the scene sync (WIP)-->
<img src="https://wallpapercave.com/wp/wp2345390.jpg?dummy=8484744">
<!-- Templates -->
<!-- Camara -->
<template id="rig-template">
<a-entity class="rig"></a-entity>
</template>
<template id="camera-template">
<a-entity class="camera"></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>
<!-- Environment -->
<a-entity environment="preset: yavapai" renderer="antialias: true"></a-entity>
<!-- Querier -->
<a-entity id="datajetuml" babia-queryjson="url: ./jetuml_code_data.json;"></a-entity>
<!-- Treebuilder -->
<a-entity id="treedata" babia-treebuilder="field: file_path; split_by: /; from: datajetuml"></a-entity>
<!-- Boats Visualizer -->
<a-entity babia-boats="from: treedata; area: num_funs; height: loc_per_function; color: ccn"
position="0 0.1 0"scale="0.03 0.03 0.03"></a-entity>
<!-- Camera -->
<a-entity id="rig" position="2.25 1.6 3" rotation="0 0 0"
networked="template:#rig-template; attachTemplateToLocal:false">
<a-entity id="camera" camera look-controls wasd-controls="fly: false"
networked="template:#camera-template;attachTemplateToLocal:false;">
<a-sphere id="avatar" color="#D3FFE4" scale="0.25 0.25 0.25"
networked="template:#avatar-template;attachTemplateToLocal:false;">
<a-text id="username-tag"
networked="template:#username-tag-template; attachTemplateToLocal:false"
position="-0.5 1.5 0" width="5" color="black" value="username"></a-text>
</a-sphere>
</a-entity>
<!-- Hand Controls -->
<a-entity id="leftHand" oculus-touch-controls="hand: left"
teleport-controls="cameraRig: #rig; teleportOrigin: #avatar; collisionEntities: #environmentGround;
hitCylinderColor: #ff3468; curveHitColor: #ff3468; curveMissColor: #333333; curveLineWidth: 0.01; button: trigger"></a-entity>
<a-entity id="rightHand" laser-controls="hand: right" oculus-touch-controls="hand: right"
raycaster="objects: .babiaxraycasterclass, #audio_button"></a-entity>
<a-entity id="cursor" cursor="rayOrigin:mouse" raycaster="objects: .babiaxraycasterclass, #audio_button">
</a-entity>
</a-entity>
<!-- Audio Button -->
<a-plane id="audio_button" position="7 2.5 0" rotation="0 0 0" height="0.5" width="1.5" color="#000" scale="0.5 0.5 0.5">
<a-text id="audio_label" value="Stop Audio" color="#fff" width="4" position="-0.5 0 0" rotation="0 0 0">
</a-text>
</a-plane>
</a-scene>
<script>
/* Avatar */
let avatar = document.getElementById('avatar')
let usernameTag = document.getElementById('username-tag')
let color = getRandomColor();
usernameTag.setAttribute('value', color)
avatar.setAttribute('color', color)
function getRandomColor() {
var digits = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += digits[Math.floor(Math.random() * 16)];
}
return color;
}
/* Audio */
let audioButton = document.getElementById('audio_button');
let audioLabel = document.getElementById('audio_label');
audioButton.addEventListener('click', function (event) {
if (audioLabel.getAttribute('value') === 'Stop Audio') {
stopAudio();
} else {
turnOnAudio();
}
});
function turnOnAudio() {
NAF.connection.adapter.enableMicrophone(true);
audioButton.setAttribute('color', '#000');
audioLabel.setAttribute('color', '#fff');
audioLabel.setAttribute('value', 'Stop Audio');
}
function stopAudio() {
NAF.connection.adapter.enableMicrophone(false);
audioButton.setAttribute('color', '#fff');
audioLabel.setAttribute('color', '#000');
audioLabel.setAttribute('value', 'Turn on Audio');
}
/* Update avatar height in VR */
document.addEventListener('controllerconnected', (event) => {
rig.setAttribute('position', { x: 4, y: 1.6, z: 3 })
})
</script>
<script>
// Schemas with components and attributes for syncronization
NAF.schemas.add({
template: '#rig-template',
components: [
'position',
'rotation'
]
});
NAF.schemas.add({
template: '#camera-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>
<!-- GITLAB CORNER-->
<div class="gitlab-corner-wrapper"><a
href="https://gitlab.com/babiaxr/aframe-babia-components/-/blob/master/examples/multi_boats/index_multi_boats.html"
class="gitlab-corner" aria-label="View source on GitLab"><svg id="logo_art" data-name="logo art"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 586 559">
<g id="g44">
<path id="path46" class="cls-1"
d="M461.17,301.83l-18.91-58.12L404.84,128.43a6.47,6.47,0,0,0-12.27,0L355.15,243.64H230.82L193.4,128.43a6.46,6.46,0,0,0-12.26,0L143.78,243.64l-18.91,58.19a12.88,12.88,0,0,0,4.66,14.39L293,435,456.44,316.22a12.9,12.9,0,0,0,4.73-14.39" />
</g>
<g id="g48">
<path id="path50" class="cls-2" d="M293,434.91h0l62.16-191.28H230.87L293,434.91Z" />
</g>
<g id="g56">
<path id="path58" class="cls-1" d="M293,434.91,230.82,243.63h-87L293,434.91Z" />
</g>
<g id="g64">
<path id="path66" class="cls-3"
d="M143.75,243.69h0l-18.91,58.12a12.88,12.88,0,0,0,4.66,14.39L293,435,143.75,243.69Z" />
</g>
<g id="g72">
<path id="path74" class="cls-2"
d="M143.78,243.69h87.11L193.4,128.49a6.47,6.47,0,0,0-12.27,0l-37.35,115.2Z" />
</g>
<g id="g76">
<path id="path78" class="cls-1" d="M293,434.91l62.16-191.28H442.3L293,434.91Z" />
</g>
<g id="g80">
<path id="path82" class="cls-3"
d="M442.24,243.69h0l18.91,58.12a12.85,12.85,0,0,1-4.66,14.39L293,434.91l149.2-191.22Z" />
</g>
<g id="g84">
<path id="path86" class="cls-2"
d="M442.28,243.69h-87.1l37.42-115.2a6.46,6.46,0,0,1,12.26,0l37.42,115.2Z" />
</g>
</svg></a></div>
</body>
</html>