-
Marshall Quander authoredMarshall Quander authored
hub.html 23.33 KiB
<!DOCTYPE html>
<html>
<head>
<!-- DO NOT REMOVE/EDIT THIS COMMENT - HUB_META_TAGS -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" type="image/png" href="/favicon.ico">
<title>Get together | Hubs by Mozilla</title>
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,300i,400,400i,700" rel="stylesheet">
</head>
<body>
<audio id="test-tone">
<source src="./assets/sfx/tone.webm" type="audio/webm"/>
<source src="./assets/sfx/tone.mp3" type="audio/mpeg"/>
<source src="./assets/sfx/tone.ogg" type="audio/ogg"/>
<source src="./assets/sfx/tone.wav" type="audio/wav"/>
</audio>
<a-scene
renderer="antialias: true; gammaOutput: true; sortObjects: true; physicallyCorrectLights: true;"
gamma-factor
networked-scene="adapter: janus; audio: true; debug: true; connectOnLoad: false;"
physics="gravity: -6; debug: false;"
mute-mic="eventSrc: a-scene; toggleEvents: action_mute"
freeze-controller="toggleEvent: action_freeze"
personal-space-bubble="debug: false;"
vr-mode-ui="enabled: false"
pinch-to-move
input-configurator="
gazeCursorRayObject: #player-camera;
cursorController: #cursor-controller;
gazeTeleporter: #gaze-teleport;
camera: #player-camera;
playerRig: #player-rig;
leftController: #player-left-controller;
leftControllerRayObject: #player-left-controller;
rightController: #player-right-controller;
rightControllerRayObject: #player-right-controller;"
>
<a-assets>
<img id="tooltip" crossorigin="anonymous" src="./assets/hud/tooltip.9.png">
<img id="mute-off" crossorigin="anonymous" src="./assets/hud/mute_off.png">
<img id="mute-off-hover" crossorigin="anonymous" src="./assets/hud/mute_off-hover.png">
<img id="mute-on" crossorigin="anonymous" src="./assets/hud/mute_on.png">
<img id="mute-on-hover" crossorigin="anonymous" src="./assets/hud/mute_on-hover.png">
<img id="bubble-off" crossorigin="anonymous" src="./assets/hud/bubble_off.png">
<img id="bubble-off-hover" crossorigin="anonymous" src="./assets/hud/bubble_off-hover.png">
<img id="bubble-on" crossorigin="anonymous" src="./assets/hud/bubble_on.png">
<img id="bubble-on-hover" crossorigin="anonymous" src="./assets/hud/bubble_on-hover.png">
<img id="freeze-off" crossorigin="anonymous" src="./assets/hud/freeze_off.png">
<img id="freeze-off-hover" crossorigin="anonymous" src="./assets/hud/freeze_off-hover.png">
<img id="freeze-on" crossorigin="anonymous" src="./assets/hud/freeze_on.png">
<img id="freeze-on-hover" crossorigin="anonymous" src="./assets/hud/freeze_on-hover.png">
<img id="spawn-pen" crossorigin="anonymous" src="./assets/hud/spawn_pen.png">
<img id="spawn-pen-hover" crossorigin="anonymous" src="./assets/hud/spawn_pen-hover.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-0c48bf15a5.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="quack" src="./assets/sfx/quack.mp3" response-type="arraybuffer" preload="auto"></a-asset-item>
<a-asset-item id="specialquack" src="./assets/sfx/specialquack.mp3" response-type="arraybuffer" preload="auto"></a-asset-item>
<img id="water-normal-map" crossorigin="anonymous" 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 networked-avatar 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-name="RootScene">
<a-entity ik-controller hand-pose__left hand-pose__right animation-mixer space-invader-mesh="meshName: Bot_Skinned"></a-entity>
</template>
<template data-name="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-name="Chest">
<a-entity personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility>
<a-entity billboard>
<a-entity mixin="rounded-text-button" block-button visible-while-frozen ui-class-while-frozen position="0 0 .35"> </a-entity>
<a-entity visible-while-frozen text="value:Block; width:2.5; align:center;" position="0 0 0.36"></a-entity>
</a-entity>
</a-entity>
</template>
<template data-name="Head">
<a-entity
networked-audio-source
networked-audio-analyser
personal-space-invader="radius: 0.15; useMaterial: true;"
bone-visibility
>
<a-cylinder
static-body
radius="0.13"
height="0.2"
position="0 0.07 0.05"
visible="false"
></a-cylinder>
</a-entity>
</template>
<template data-name="LeftHand">
<a-entity personal-space-invader="radius: 0.1" bone-visibility></a-entity>
</template>
<template data-name="RightHand"> <a-entity personal-space-invader="radius: 0.1" bone-visibility></a-entity>
</template>
</a-entity>
</a-entity>
</template>
<template id="interactable-media">
<a-entity
class="interactable"
super-networked-interactable="counter: #media-counter;"
body="type: dynamic; shape: none; mass: 1;"
grabbable
stretchable="useWorldPosition: true; usePhysics: never"
hoverable
auto-scale-cannon-physics-body
sticky-object="autoLockOnRelease: true; autoLockOnLoad: true;"
position-at-box-shape-border="target:.delete-button"
destroy-at-extreme-distances
rotation
activatable__increase-scale="buttonStartEvents: scroll_right; buttonEndEvents: horizontal_scroll_release; activatedState: scaleUp;"
activatable__decrease-scale="buttonStartEvents: scroll_left; buttonEndEvents: horizontal_scroll_release; activatedState: scaleDown;"
>
<!-- HACK: rotation component above is required for its side effect of setting YXZ order -->
<a-entity class="delete-button" visible-while-frozen>
<a-entity mixin="rounded-text-button" remove-networked-object-button position="0 0 0"> </a-entity>
<a-entity text=" value:Delete; width:2.5; align:center;" text-raycast-hack position="0 0 0.01"></a-entity>
</a-entity>
</a-entity>
</template>
<template id="pen-interactable">
<a-entity
class="interactable toggle"
super-networked-interactable="counter: #pen-counter;"
body="type: dynamic; shape: none; mass: 1;"
grabbable-toggle="maxGrabbers: 1;"
sticky-object="autoLockOnRelease: true; autoLockOnLoad: true;"
hoverable
activatable__draw-hand="buttonStartEvents: secondary_hand_grab; buttonEndEvents: secondary_hand_release;"
activatable__draw-cursor="buttonStartEvents: secondary-cursor-grab; buttonEndEvents: secondary-cursor-release;"
activatable__color-next="buttonStartEvents: next_color, scroll_right; buttonEndEvents: thumb_up, secondary_hand_release, horizontal_scroll_release; activatedState: colorNext;"
activatable__color-prev="buttonStartEvents: previous_color, scroll_left; buttonEndEvents: thumb_up, secondary_hand_release, horizontal_scroll_release; activatedState: colorPrev;"
activatable__increase-radius="buttonStartEvents: increase_radius, scroll_up; buttonEndEvents: thumb_up, secondary_hand_release, vertical_scroll_release; activatedState: radiusUp;"
activatable__decrease-radius="buttonStartEvents: decrease_radius, scroll_down; buttonEndEvents: thumb_up, secondary_hand_release, vertical_scroll_release; activatedState: radiusDown;"
scale="0.5 0.5 0.5"
>
<a-sphere
id="pen"
scale="1.5, 1.5, 1.5"
position="0 -0.18 0"
radius="0.02"
color="#FF0033"
pen="camera: #player-camera; drawingManager: #drawing-manager"
segments-width="16"
segments-height="12"
></a-sphere>
<a-entity class="delete-button" visible-while-frozen>
<a-entity mixin="rounded-text-button" remove-networked-object-button position="0 0 0"> </a-entity>
<a-entity text=" value:Delete; width:2.5; align:center;" text-raycast-hack position="0 0 0.01"></a-entity>
</a-entity>
</a-entity>
</template>
<template id="interactable-drawing">
<a-entity
networked-drawing
></a-entity>
</template>
<template id="paging-toolbar">
<a-entity class="paging-toolbar" visible-to-owner>
<a-entity class="prev-button" position="-0.3 0 0">
<a-entity mixin="rounded-text-button" slice9="width: 0.2"> </a-entity>
<a-entity text=" value:<; width:2; align:center;" text-raycast-hack position="0 0 0.01"></a-entity>
</a-entity>
<a-entity class="page-label" text="width:2; align:center;" text-raycast-hack></a-entity>
<a-entity class="next-button" position="0.3 0 0">
<a-entity mixin="rounded-text-button" slice9="width: 0.2"> </a-entity>
<a-entity text=" value:>; width:2; align:center;" text-raycast-hack position="0 0 0.01"></a-entity>
</a-entity>
</a-entity>
</template>
<a-mixin id="rounded-text-button"
text-button="
haptic:#player-right-controller;
textHoverColor: #fff;
textColor: #fff;
backgroundHoverColor: #ea4b54;
backgroundColor: #fff;"
slice9="
width: 0.45;
height: 0.2;
left: 53;
top: 53;
right: 10;
bottom: 10;
opacity: 1.3;
src: #tooltip"
></a-mixin>
<a-mixin id="controller-super-hands"
super-hands="
colliderEvent: collisions;
colliderEventProperty: els;
colliderEndEvent: collisions;
colliderEndEventProperty: clearedEls;
grabStartButtons: primary_hand_grab, secondary_hand_grab;
grabEndButtons: primary_hand_release, secondary_hand_release;
stretchStartButtons: primary_hand_grab, secondary_hand_grab;
stretchEndButtons: primary_hand_release, secondary_hand_release;
dragDropStartButtons: hand_grab, secondary_hand_grab;
dragDropEndButtons: hand_release, secondary_hand_release;
activateStartButtons: secondary_hand_grab, next_color, previous_color, increase_radius, decrease_radius, scroll_up, scroll_down, scroll_left, scroll_right;
activateEndButtons: secondary_hand_release, vertical_scroll_release, horizontal_scroll_release, thumb_up;"
collision-filter="collisionForces: false"
physics-collider
></a-mixin>
</a-assets>
<!-- Interactables -->
<a-entity id="media-counter" networked-counter="max: 10;"></a-entity>
<a-entity id="pen-counter" networked-counter="max: 10;"></a-entity>
<a-entity id="drawing-manager" drawing-manager></a-entity>
<a-entity
id="cursor-controller"
cursor-controller="
cursor: #cursor;
camera: #player-camera;
objects: .collidable, .interactable, .ui;"
line="visible: false; color: white; opacity: 0.2;"
></a-entity>
<a-sphere
id="cursor"
material="depthTest: false; opacity:0.9;" radius="0.02"
segments-width="9"
segments-height="9"
static-body="shape: sphere;"
collision-filter="collisionForces: false"
super-hands="
colliderEvent: raycaster-intersection;
colliderEndEvent: raycaster-intersection-cleared;
grabStartButtons: cursor-grab, primary_hand_grab, secondary_hand_grab;
grabEndButtons: cursor-release, primary_hand_release, secondary_hand_release;
stretchStartButtons: cursor-grab, primary_hand_grab, secondary_hand_grab;
stretchEndButtons: cursor-release, primary_hand_release, secondary_hand_release;
dragDropStartButtons: cursor-grab, primary_hand_grab, secondary_hand_grab;
dragDropEndButtons: cursor-release, primary_hand_release, secondary_hand_release;
activateStartButtons: secondary-cursor-grab, secondary_hand_grab, next_color, previous_color, increase_radius, decrease_radius, scroll_up, scroll_down, scroll_left, scroll_right;
activateEndButtons: secondary-cursor-release, secondary_hand_release, vertical_scroll_release, horizontal_scroll_release, thumb_up;"
></a-sphere>
<!-- Player Rig -->
<a-entity
id="player-rig"
networked="template: #remote-avatar-template; attachTemplateToLocal: false;"
spawn-controller="loadedEvent: bundleloaded; target: #environment-root"
wasd-to-analog2d
character-controller="pivot: #player-camera"
ik-root
player-info
networked-avatar
cardboard-controls
>
<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.48" color="#000000" position="-0.24 -0.065 0" radius="0.065" opacity="0.35" class="hud bg"></a-rounded>
<a-image icon-button="tooltip: #hud-tooltip; tooltipText: Mute Mic; activeTooltipText: Unmute Mic; image: #mute-off; hoverImage: #mute-off-hover; activeImage: #mute-on; activeHoverImage: #mute-on-hover" scale="0.1 0.1 0.1" position="-0.17 0 0.001" class="ui hud mic" material="alphaTest:0.1;"></a-image>
<a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pause; activeTooltipText: Resume; image: #freeze-off; hoverImage: #freeze-off-hover; activeImage: #freeze-on; activeHoverImage: #freeze-on-hover" scale="0.2 0.2 0.2" position="0 0 0.005" class="ui hud freeze"></a-image>
<a-image icon-button="tooltip: #hud-tooltip; tooltipText: Spawn Pen; activeTooltipText: Spawn Pen; image: #spawn-pen; hoverImage: #spawn-pen-hover; activeImage: #spawn-pen; activeHoverImage: #spawn-pen-hover" scale="0.1 0.1 0.1" position="0.17 0 0.001" class="ui hud pen" material="alphaTest:0.1;"></a-image>
<a-rounded visible="false" id="hud-tooltip" height="0.08" width="0.3" color="#000000" position="-0.15 -0.2 0" rotation="-20 0 0" radius="0.025" opacity="0.35" class="hud bg">
<a-entity text="value: Mute Mic; align:center;" position="0.15 0.04 0.001" ></a-entity>
</a-rounded>
</a-entity>
</a-entity>
<a-entity
id="player-camera"
class="camera"
camera
position="0 1.6 0"
personal-space-bubble="radius: 0.4;"
pitch-yaw-rotator
>
<a-entity
id="gaze-teleport"
position = "0.15 0 0"
teleport-controls="
cameraRig: #player-rig;
teleportOrigin: #player-camera;
button: gaze-teleport_;
collisionEntities: [nav-mesh];
drawIncrementally: true;
incrementalDrawMs: 600;
hitOpacity: 0.3;
missOpacity: 0.1;
curveShootingSpeed: 12;"
></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: cursor-teleport_;
collisionEntities: [nav-mesh];
drawIncrementally: true;
incrementalDrawMs: 600;
hitOpacity: 0.3;
missOpacity: 0.1;
curveShootingSpeed: 12;"
haptic-feedback
body="type: static; shape: none;"
mixin="controller-super-hands"
controls-shape-offset
>
</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: cursor-teleport_;
collisionEntities: [nav-mesh];
drawIncrementally: true;
incrementalDrawMs: 600;
hitOpacity: 0.3;
missOpacity: 0.1;
curveShootingSpeed: 12;"
haptic-feedback
event-repeater="events: haptic_pulse; eventSource: #cursor"
body="type: static; shape: none;"
mixin="controller-super-hands"
controls-shape-offset
>
</a-entity>
<a-entity gltf-model-plus="inflate: true;"
class="model">
<template data-name="RootScene">
<a-entity
ik-controller
animation-mixer
hand-pose__left
hand-pose__right
hand-pose-controller__left="networkedAvatar:#player-rig;eventSrc:#player-left-controller"
hand-pose-controller__right="networkedAvatar:#player-rig;eventSrc:#player-right-controller"
></a-entity>
</template>
<template data-name="Neck">
<a-entity>
<a-entity class="nametag" visible="false" text ></a-entity>
</a-entity>
</template>
<template data-name="Head">
<a-entity visible="false" bone-visibility></a-entity>
</template>
<template data-name="LeftHand"> <a-entity bone-visibility></a-entity>
</template>
<template data-name="RightHand">
<a-entity bone-visibility></a-entity>
</template>
</a-entity>
</a-entity>
<!-- Environment -->
<a-entity
id="environment-root"
nav-mesh-helper
static-body="shape: none;"
></a-entity>
<a-entity
super-spawner="
template: #pen-interactable;
src: https://asset-bundles-prod.reticulum.io/interactables/DrawingPen/DrawingPen-34fb4aee27.gltf;
spawnEvent: spawn_pen;
superHand: #player-right-controller;
cursorSuperHand: #cursor;"
></a-entity>
</a-scene>
<div id="ui-root"></div>
</body>
</html>