-
Notifications
You must be signed in to change notification settings - Fork 31
/
Copy pathindex.html
131 lines (118 loc) · 6.03 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta
content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1"
name="viewport"
/>
<link href="static/images/conix-x.png" rel="icon" type="image/png" />
<title>ARENA</title>
<meta content="Augmented Reality Edge Networking Architecture" name="description" />
<!-- our default configs -->
<script src="conf/defaults.js"></script>
<!-- login auth check with calls to mqtt connect placed in an `onauth` event listener -->
<script src="static/auth.js"></script>
<script src="static/vendor/sweetalert2.all.min.js" async></script>
<!-- jquery, needed by lib jitsi -->
<script src="static/vendor/jquery-2.1.1.min.js"></script>
<!-- lib jitsi -->
<script src="static/vendor/lib-jitsi-meet.min.js"></script>
<!-- AFRAME base -->
<script src="static/vendor/aframe/aframe-master.min.js"></script>
<!-- main arena bundle -->
<script src="dist/index.js"></script>
<!-- 2D UI -->
<link rel="stylesheet" href="static/vendor/mdb/mdb.min.css" />
<link rel="stylesheet" href="static/vendor/fontawesome-5/css/all.min.css" />
</head>
<body>
<!-- overlay for webxr -->
<div id="overlay"></div>
<a-scene
name="ARENAScene"
id="ARENAScene"
background="color: black"
stats="false"
stats-monitor="enabled: false"
arena-hybrid-render-client
renderer="antialias: true; maxCanvasWidth: 3840; maxCanvasHeight: 3840;"
webxr="optionalFeatures: dom-overlay, computerVision, mesh-detection, plane-detection; overlayElement: #overlay;"
webxr-device-manager
gltf-model="dracoDecoderPath: /static/vendor/draco/;"
inspector="url: static/vendor/aframe-inspector.min.js;"
xr-mode-ui="XRMode:xr"
>
<a-assets></a-assets>
<a-entity id="sceneRoot">
<a-entity id="cameraRig" position="0 0 0">
<a-entity id="cameraSpinner" name="PerspectiveCamera" position="0 0 0" tag="MainCamera">
<!-- this camera can 'fly': z axis follows pitch of head direction -->
<a-camera
id="my-camera"
gesture-detector
network-latency
look-controls="reverseMouseDrag: true"
arrow-controls
mouse-cursor
press-and-move="constrainToNavMesh:true"
wasd-controls="fly: false; acceleration: 30; constrainToNavMesh:true"
geometry="primitive: sphere; radius: 0.05"
material="opacity: 0.1"
box-collider="collideNonVisible:true"
box-collision-publisher
>
<a-entity
cursor="rayOrigin: mouse"
id="mouse-cursor"
raycaster="objects:[click-listener],[click-listener-local]"
></a-entity>
</a-camera>
<a-entity
id="leftHand"
box-collider="collideNonVisible: true; enabled: false"
box-collision-publisher
visible="false"
arena-hand="hand:left"
laser-controls="hand:left"
blink-controls="cameraRig: #cameraRig; collisionEntities: [nav-mesh]; teleportOrigin: #my-camera"
raycaster="objects: [click-listener],[click-listener-local]; enabled: false"
></a-entity>
<a-entity
id="rightHand"
box-collider="collideNonVisible: true; enabled: false"
box-collision-publisher
visible="false"
arena-hand="hand:right"
laser-controls="hand:right"
raycaster="objects: [click-listener],[click-listener-local]; enabled: false"
></a-entity>
</a-entity>
</a-entity>
</a-entity>
</a-scene>
<div id="side-menu-container" class="side-menu-container d-none d-flex flex-column">
<div id="side-menu" class="side-menu d-flex flex-column align-items-center"></div>
<div id="side-menu-expand" class="side-menu-expand text-white text-center">
<i id="side-menu-expand-button" class="side-menu-expand-button fas fa-angle-down"></i>
</div>
</div>
<div id="chat-button-group-container" class="chat-button-group-container d-none d-flex">
<div class="text-white chat-button-group-expand d-flex align-items-center">
<i id="chat-button-group-expand-icon" class="fas fa-angle-left"></i>
</div>
<div id="chat-button-group" class="chat-button-group"></div>
</div>
<div class="error-icon" id="error-icon">
<img id="error-img" src="src/systems/ui/images/exclamation-error.png" />
<div id="error-block" class="error-block"></div>
</div>
<span class="echo-name" id="echo-name"></span>
<span class="pose-stats" id="pose-stats"></span>
<video id="cornerVideo" autoplay="1" crossorigin="anonymous" muted="true" playsinline="1" volume="0"></video>
<!-- 2D UI -->
<script src="static/vendor/mdb/mdb.min.js" async></script>
</body>
</html>