<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mozilla Mixed Reality Social Client</title>
<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M62+)" data-expires="<%= ORIGIN_TRIAL_EXPIRES %>" content="<%= ORIGIN_TRIAL_TOKEN %>">
<% if(NODE_ENV === "production") { %>
<script src="https://cdn.rawgit.com/brianpeiris/aframe/845825ae694449524c185c44a314d361eead4680/dist/aframe-master.min.js"></script>
<% } else { %>
<script src="https://cdn.rawgit.com/brianpeiris/aframe/845825ae694449524c185c44a314d361eead4680/dist/aframe-master.js"></script>
<% } %>
</head>
<body>
<audio id="test-tone" src="./assets/sfx/tone.ogg"></audio>
<a-scene
physics
mute-mic="eventSrc: a-scene; toggleEvents: action_mute"
2d-mute-state-indicator
light="defaultLightsEnabled: false">
<a-assets>
<a-progressive-asset
id="bot-skinned-mesh"
response-type="arraybuffer"
src="./assets/avatars/BotDefault_Avatar_Unlit.glb"
high-src="./assets/avatars/BotDefault_Avatar.glb"
low-src="./assets/avatars/BotDefault_Avatar_Unlit.glb"
></a-progressive-asset>
<a-asset-item id="bot-dom-mesh" response-type="arraybuffer" src="./assets/avatars/BotDom_Avatar.glb"></a-asset-item>
<a-asset-item id="watch-model" response-type="arraybuffer" src="./assets/hud/watch.glb"></a-asset-item>
<a-asset-item id="meeting-space1-mesh" response-type="arraybuffer" src="./assets/environments/MeetingSpace1_mesh.glb"></a-asset-item>
<a-asset-item id="outdoor-facade-mesh" response-type="arraybuffer" src="./assets/environments/OutdoorFacade_mesh.glb"></a-asset-item>
<a-asset-item id="floor-nav-mesh" response-type="arraybuffer" src="./assets/environments/FloorNav_mesh.glb"></a-asset-item>
<a-asset-item id="cliff-vista-mesh" response-type="arraybuffer" src="./assets/environments/CliffVista_mesh.glb"></a-asset-item>
<a-asset-item id="interactable-duck" response-type="arraybuffer" src="./assets/interactables/duck/DuckyMesh.glb"></a-asset-item>
<img id="water-normal-map" src="./assets/waternormals.jpg"></a-asset-item>
<!-- Templates -->
<template id="video-template">
<a-entity class="video" geometry="primitive: plane;" material="side: double" networked-video-player></a-entity>
</template>
<template id="remote-avatar-template">
<a-entity ik-root player-info>
<a-entity class="camera"></a-entity>
<a-entity class="left-controller"></a-entity>
<a-entity class="right-controller"></a-entity>
<a-gltf-entity class="model" inflate="true">
<template data-selector=".RootScene">
<a-entity ik-controller animation-mixer></a-entity>
</template>
<template data-selector=".Neck">
<a-entity>
<a-entity
class="nametag"
billboard
text="side: double; align: center; color: #ddd"
position="0 1 0"
scale="6 6 6"
></a-entity>
</a-entity>
</template>
<template data-selector=".Head">
<a-entity
networked-audio-source
networked-audio-analyser
personal-space-invader
>
</a-entity>
</template>
<template data-selector=".LeftHand">
<a-entity personal-space-invader ></a-entity>
</template>
<template data-selector=".RightHand">
<a-entity personal-space-invader ></a-entity>
</template>
</a-gltf-entity>
</a-entity>
</template>
<template id="interactable-template">
<a-entity
gltf-model="#interactable-duck"
scale="2 2 2"
class="collidable"
super-networked-interactable="counter: #counter; mass: 5;"
body="type: dynamic; mass: 5; shape: box;"
grabbable
stretchable="useWorldPosition: true;"
>
</a-entity>
</template>
<a-mixin id="super-hands"
super-hands="colliderEvent: collisions; colliderEventProperty: els;
colliderEndEvent: collisions; colliderEndEventProperty: clearedEls;
grabStartButtons: action_grab; grabEndButtons: action_release;
stretchStartButtons: action_grab; stretchEndButtons: action_release;
dragDropStartButtons: action_grab; dragDropEndButtons: action_release;
"
collision-filter="collisionForces: false"
physics-collider
></a-mixin>
</a-assets>
<!-- Interactables -->
<a-entity id="counter" networked-counter="max: 3; ttl: 120"></a-entity>
<a-entity
gltf-model="#interactable-duck"
scale="2 2 2"
class="collidable"
class="collidable"
super-spawner="template: #interactable-template;"
position="2.5 1.2 0"
body="mass: 0; type: static; shape: box;"
></a-entity>
<a-sphere
id="3d-cursor"
material="color: #00EFFF"
radius=0.02
static-body="shape: sphere;"
mixin="super-hands"
></a-sphere>
<!-- Player Rig -->
<a-entity
id="player-rig"
networked="template: #remote-avatar-template; attachLocalTemplate: false;"
spawn-controller="radius: 4;"
wasd-to-analog2d
character-controller="pivot: #player-camera"
ik-root
player-info
>
<a-entity
id="player-camera"
class="camera"
camera
position="0 1.6 0"
personal-space-bubble
>
<a-entity
id="super-cursor"
super-cursor="cursor: #3d-cursor"
position="0 0 0"
raycaster="objects: .collidable; direction: 0 0 -1;"
></a-entity>
</a-entity>
<a-entity
id="player-left-controller"
class="left-controller"
hand-controls2="left"
tracked-controls
teleport-controls="cameraRig: #player-rig; teleportOrigin: #player-camera; button: action_teleport_"
haptic-feedback
></a-entity>
<a-entity
id="player-right-controller"
class="right-controller"
hand-controls2="right"
tracked-controls
teleport-controls="cameraRig: #player-rig; teleportOrigin: #player-camera; button: action_teleport_"
haptic-feedback
></a-entity>
<a-gltf-entity class="model" inflate="true">
<template data-selector=".RootScene">
<a-entity
ik-controller
animated-robot-hands
animation-mixer
></a-entity>
</template>
<template data-selector=".Neck">
<a-entity>
<a-entity class="nametag" visible="false" text ></a-entity>
</a-entity>
</template>
<template data-selector=".Head">
<a-entity visible="false"></a-entity>
</template>
<template data-selector=".LeftHand">
<a-entity>
<a-gltf-entity
id="watch"
src="#watch-model"
bone-mute-state-indicator
scale="1.5 1.5 1.5"
rotation="0 -90 90"
position="0 -0.04 0"
></a-gltf-entity>
<a-entity
event-repeater="events: action_grab, action_release; eventSource: #player-left-controller"
static-body="shape: sphere; sphereRadius: 0.02"
mixin="super-hands"
position="0 0.05 0"
></a-entity>
</a-entity>
</template>
<template data-selector=".RightHand">
<a-entity>
<a-entity
event-repeater="events: action_grab, action_release; eventSource: #player-right-controller"
static-body="shape: sphere; sphereRadius: 0.02"
mixin="super-hands"
position="0 -0.05 0"
></a-entity>
</a-entity>
</template>
</a-gltf-entity>
</a-entity>
<!-- Lights -->
<a-entity
hide-when-quality="low"
light="type: directional; color: #F9FFCE; intensity: 0.6"
position="0.002 5.231 -15.3"
></a-entity>
<!-- Environment -->
<a-gltf-entity
id="meeting-space"
src="#meeting-space1-mesh"
position="0 0 0"
></a-gltf-entity>
<a-gltf-entity
id="outdoor-facade"
src="#outdoor-facade-mesh"
position="0 0 0"
xr="ar: false"
></a-gltf-entity>
<a-gltf-entity
id="floor-nav"
src="#floor-nav-mesh"
visible="false"
position="0 0 0"
xr="ar: false"
></a-gltf-entity>
<a-gltf-entity
id="cliff-vista"
src="#cliff-vista-mesh"
layers="reflection:true"
position="0 0 0"
xr="ar: false"
></a-gltf-entity>
<a-entity id="skybox"
id="skybox"
scale="8000 8000 8000"
skybox="azimuth:0.280; inclination:0.440"
light="type: ambient; color: #FFF"
layers="reflection:true"
xr="ar: false"
></a-entity>
<a-entity
id="water"
water="forceMobile: true; normalMap:#water-normal-map"
rotation="-90 0 0"
position="0 -88.358 -332.424"
xr="ar: false"
></a-entity>
<a-cylinder
position="0 0.45 0"
material="visible: false"
height="1" radius="3.1"
segments-radial="12"
static-body
class="collidable"
></a-cylinder>
<a-plane
material="visible: false"
rotation="-90 0 0"
height="35"
width="35"
static-body
class="collidable">
</a-plane>
</a-scene>
<div id="ui-root" class="ui"></div>
</body>
</html>