<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M62+)" data-expires="<%= ORIGIN_TRIAL_EXPIRES %>" content="<%= ORIGIN_TRIAL_TOKEN %>">
<link rel="shortcut icon" type="image/png" href="/favicon.ico"/>
<title>Hubs | A new way to get together online</title>
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,300i,400,400i,700" rel="stylesheet">
<% 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 data-html-prefix="<%= HTML_PREFIX %>">
<audio id="test-tone" src="./assets/sfx/tone.ogg"></audio>
<a-scene
networked-scene="adapter: janus; audio: true; debug: true; connectOnLoad: false;"
physics
mute-mic="eventSrc: a-scene; toggleEvents: action_mute"
personal-space-bubble="debug: false;"
app-mode-input-mappings="modes: default, hud; actionSets: default, hud;"
>
<a-assets>
<img id="unmuted" src="./assets/hud/unmuted.png" >
<img id="muted" src="./assets/hud/muted.png" >
<img id="avatar" src="./assets/hud/avatar.png" >
<a-asset-item id="botdefault" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/bots/BotDefault_Avatar-9f71f8ff22.gltf"></a-asset-item>
<a-asset-item id="botbobo" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/bots/BotBobo_Avatar-f9740a010b.gltf"></a-asset-item>
<a-asset-item id="botdom" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/bots/BotDom_Avatar-6aa1b5d781.gltf"></a-asset-item>
<a-asset-item id="botgreg" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/bots/BotGreg_Avatar-98d39797bb.gltf"></a-asset-item>
<a-asset-item id="botguest" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/bots/BotGuest_Avatar-78cd857332.gltf"></a-asset-item>
<a-asset-item id="botjim" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/bots/BotJim_Avatar-d28005a687.gltf"></a-asset-item>
<a-asset-item id="botkev" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/bots/BotKev_Avatar-a95787bb51.gltf"></a-asset-item>
<a-asset-item id="botpinky" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/bots/BotPinky_Avatar-b0b93f8675.gltf"></a-asset-item>
<a-asset-item id="botrobert" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/bots/BotRobert_Avatar-e9554880f3.gltf"></a-asset-item>
<a-asset-item id="botwoody" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/bots/BotWoody_Avatar-0140485a23.gltf"></a-asset-item>
<a-asset-item id="watch-model" response-type="arraybuffer" src="./assets/hud/watch.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">
<!-- Templates -->
<template id="video-template">
<a-entity class="video" geometry="primitive: plane;" material="side: double; shader: flat;" 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-entity class="model" gltf-model-plus="inflate: true">
<template data-selector=".RootScene">
<a-entity ik-controller hand-pose__left hand-pose__right animation-mixer space-invader-mesh="meshSelector: .Bot_Skinned"></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=".Chest">
<a-entity personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility></a-entity>
</template>
<template data-selector=".Head">
<a-entity
networked-audio-source
networked-audio-analyser
personal-space-invader="radius: 0.15; useMaterial: true;"
bone-visibility
>
</a-entity>
</template>
<template data-selector=".LeftHand">
<a-entity personal-space-invader="radius: 0.1" bone-visibility></a-entity>
</template>
<template data-selector=".RightHand">
<a-entity personal-space-invader="radius: 0.1" bone-visibility></a-entity>
</template>
</a-entity>
</a-entity>
</template>
<template id="interactable-template">
<a-entity
gltf-model-plus="src: #interactable-duck; inflate: true;"
scale="2 2 2"
class="interactable"
super-networked-interactable="counter: #counter; mass: 5;"
body="type: dynamic; shape: none; mass: 5;"
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-plus="src: #interactable-duck"
scale="2 2 2"
class="interactable"
super-spawner="template: #interactable-template;"
position="2.9 1.2 0"
body="mass: 0; type: static; shape: box;"
></a-entity>
<a-entity
id="super-cursor"
super-cursor="cursor: #3d-cursor; camera: #player-camera;"
raycaster="objects: .collidable, .interactable; far: 10;"
>
<a-sphere
id="3d-cursor"
radius="0.02"
static-body="shape: sphere;"
mixin="super-hands"
segments-height="9"
segments-width="9"
></a-sphere>
</a-entity>
<!-- Player Rig -->
<a-entity
id="player-rig"
networked="template: #remote-avatar-template; attachTemplateToLocal: false;"
spawn-controller="radius: 4;"
wasd-to-analog2d
character-controller="pivot: #player-camera"
ik-root
app-mode-toggle-playing__character-controller="mode: hud; invert: true;"
app-mode-toggle-playing__wasd-to-analog2d="mode: hud; invert: true;"
player-info
>
<a-entity
id="player-hud"
hud-controller="head: #player-camera;"
vr-mode-toggle-visibility
vr-mode-toggle-playing__hud-controller
>
<a-entity in-world-hud="haptic:#player-right-controller;raycaster:#player-right-controller;" rotation="30 0 0">
<a-rounded height="0.13" width="0.6" color="#000000" position="-0.3 -0.065 0" radius="0.065" opacity="0.35" class="hud bg"></a-rounded>
<a-image src="#unmuted" scale="0.1 0.1 0.1" position="-0.2 0 0.001" class="hud mic" material="alphaTest:0.1;"></a-image>
<a-image src="#avatar" scale="0.2 0.2 0.2" position="0 0 0.001" class="hud avatar"></a-image>
<a-image src="#unmuted" scale="0.1 0.1 0.1" position="0.2 0 0.001" class="hud mic" material="alphaTest:0.1;"></a-image>
</a-entity>
</a-entity>
<a-entity
id="player-camera"
class="camera"
camera
position="0 1.6 0"
personal-space-bubble="radius: 0.4"
></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_;
collisionEntities: [nav-mesh]"
app-mode-toggle-playing__teleport-controls="mode: hud; invert: true;"
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_;
collisionEntities: [nav-mesh]"
haptic-feedback
raycaster="objects:.hud; showLine: true; far: 2;"
cursor="fuse: false; downEvents: action_ui_select_down; upEvents: action_ui_select_up;"
app-mode-toggle-playing__teleport-controls="mode: hud; invert: true;"
app-mode-toggle-playing__raycaster="mode: hud;"
app-mode-toggle-playing__cursor="mode: hud;"
app-mode-toggle-attribute__line="mode: hud; property: visible;"
></a-entity>
<a-entity gltf-model-plus="inflate: true;" class="model">
<template data-selector=".RootScene">
<a-entity
ik-controller
animation-mixer
hand-pose__left
hand-pose__right
hand-pose-controller__left="eventSrc:#player-left-controller"
hand-pose-controller__right="eventSrc:#player-right-controller"
></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" bone-visibility></a-entity>
</template>
<template data-selector=".LeftHand">
<a-entity bone-visibility>
<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 bone-visibility>
<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-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-entity
id="environment-root"
nav-mesh-helper
static-body="shape: none;"
class="collidable"
></a-entity>
<a-entity
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-scene>
<div id="ui-root"></div>
</body>
</html>