<html>
<head>
<title>Mozilla Mixed Reality Social Client</title>
<script src="https://webrtc.github.io/adapter/adapter-6.0.2.js"></script>
<script src="./app.bundle.js"></script>
<style>
.a-enter-vr {
top: 90px;
bottom: auto;
}
#loader {
position: fixed;
width: 100vw;
height: 100vh;
z-index: 10001;
background: #eaeaea no-repeat url(assets/loading.gif) center center;
opacity: 0.9;
}
</style>
</head>
<body>
<div id="loader"></div>
<a-scene
networked-scene="adapter: janus;
audio: true;
debug: true;
onConnect: App.onConnect;
connectOnLoad: false;"
mute-mic="eventSrc: a-scene; toggleEvents: action_mute"
light="defaultLightsEnabled: false">
<a-assets>
<img id="grid" src="assets/grid.png" crossorigin="anonymous" />
<img id="sky" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg" crossorigin="anonymous" />
<a-asset-item id="bot-head-mesh" src="assets/avatars/Bot_Head_Mesh.glb"></a-asset-item>
<a-asset-item id="bot-body-mesh" src="assets/avatars/Bot_Body_Mesh.glb"></a-asset-item>
<a-asset-item id="bot-left-hand-mesh" src="assets/avatars/Bot_LeftHand_Mesh.glb"></a-asset-item>
<a-asset-item id="bot-right-hand-mesh" src="assets/avatars/Bot_RightHand_Mesh.glb"></a-asset-item>
<a-asset-item id="watch-model" src="assets/hud/watch.gltf"></a-asset-item>
<a-asset-item id="meeting-space1-mesh" src="assets/environments/MeetingSpace1_mesh.glb"></a-asset-item>
<a-asset-item id="outdoor-facade-mesh" src="assets/environments/OutdoorFacade_mesh.glb"></a-asset-item>
<a-asset-item id="floor-nav-mesh" src="assets/environments/FloorNav_mesh.glb"></a-asset-item>
<!-- Templates -->
<script id="head-template" type="text/html">
<a-entity
class="head"
gltf-model2="#bot-head-mesh"
networked-audio-source
networked-audio-analyser
matcolor-audio-feedback="objectName: Head_Mesh"
scale-audio-feedback
personal-space-invader
rotation="0 180 0"
animation-mixer
></a-entity>
</script>
<script id="body-template" type="text/html">
<a-entity
class="body"
gltf-model2="#bot-body-mesh"
personal-space-invader
rotation="0 180 0"
position="0 -0.05 0"
></a-entity>
</script>
<script id="left-hand-template" type="text/html">
<a-entity
class="hand"
gltf-model2="#bot-left-hand-mesh"
animation-mixer
personal-space-invader
rotation="-90 90 0"
position="0 0 0.075"
></a-entity>
</script>
<script id="right-hand-template" type="text/html">
<a-entity
class="hand"
gltf-model2="#bot-right-hand-mesh"
personal-space-invader
rotation="-90 -90 0"
position="0 0 0.075"
></a-entity>
</script>
<script id="video-template" type="text/html">
<a-entity class="video" geometry="primitive: plane;" material="side: double" networked-video-player></a-entity>
</script>
<script id="nametag-template" type="text/html">
<a-entity
class="nametag"
nametag-transform="follow: .head"
text="side: double; align: center; color: #555"
position="0 2.5 0"
scale="6 6 6"
></a-entity>
</script>
</a-assets>
<!-- Player Rig -->
<a-entity
id="player-rig"
networked
character-controller="pivot: #head"
>
<a-sphere scale="0.1 0.1 0.1"></a-sphere>
<a-entity
id="head"
camera="userHeight: 1.6"
personal-space-bubble
look-controls
networked="template: #head-template; showLocalTemplate: false;"
></a-entity>
<a-entity
id="body"
body-controller="eyeNeckOffset: 0 -0.11 0.09; neckHeight: 0.05"
networked="template: #body-template;"
></a-entity>
<a-entity
id="nametag"
networked="template: #nametag-template; showLocalTemplate: false;"
></a-entity>
<a-entity
id="left-hand"
split-axis-events
hand-controls2="left"
axis-dpad="centerZone: 1"
teleport-controls="cameraRig: #player-rig; teleportOrigin: #head; button: action_teleport_"
networked="template: #left-hand-template;"
>
<a-entity
id="watch"
gltf-model2="assets/hud/watch.gltf"
position="0 0.0015 0.147"
rotation="3.5 0 0"
>
<a-circle
mute-state-indicator
scale-audio-feedback="analyserSrc: #head; minScale: 0.035; maxScale: 0.08;"
position="0 0.023 0"
rotation="-90 0 0"
scale="0.04 0.04 0.04"
material="color: #d8eece; shader: flat;"
></a-circle>
</a-entity>
</a-entity>
<a-entity
id="right-hand"
hand-controls2="right"
axis-dpad
teleport-controls="cameraRig: #player-rig;
teleportOrigin: #head;
hitEntity: #telepor-indicator;
button: action_teleport_;"
networked="template: #right-hand-template;"
></a-entity>
</a-entity>
<a-entity light="type: ambient; color: #FFF"></a-entity>
<!-- Environment -->
<a-entity
gltf-model2="#meeting-space1-mesh"
position="0 0 0"
></a-entity>
<a-entity
gltf-model2="#outdoor-facade-mesh"
position="0 0 0"
></a-entity>
<a-entity
gltf-model2="#floor-nav-mesh"
visible="false"
position="0 0 0"
></a-entity>
<a-sky color="#DDFFD9"></a-sky>
</a-scene>
<script>
document.querySelector('a-scene').addEventListener('loaded', App.onSceneLoad)
</script>
</body>
</html>