-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (75 loc) · 4.12 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-environment-component.min.js"></script>
<title>ARENA Mesh UI</title>
</head>
<body>
<a-scene
background="color: #333333"
environment
renderer="antialias: true; maxCanvasWidth: 3840; maxCanvasHeight: 3840;"
webxr="optionalFeatures: anchors, hit-test, dom-overlay, computerVision; overlayElement: overlay;"
>
<a-entity
id="card-example"
position="0 1.8 -1.5"
arenaui-card="title:ARENA Title Right;
body: The Augmented Reality Edge Network Architecture (ARENA) is a platform designed to simplify programming where there is a mix of virtual and physical systems, with locality and pervasive sensing as first-class citizens. ARENA makes it easy to create and host multiple applications that interact with users and other agents in an immersive 3D environment created inside a browser.;
img: https://docs.arenaxr.org/assets/img/intro/robot-arm.png;
imgCaption: Look it's a robot;
imgDirection: left;
closeButton: true;"
></a-entity>
<a-entity
id="card-example2"
position="-3 1.8 -1.5"
arenaui-card="title:ARENA Title Left;
body: The Augmented Reality Edge Network Architecture (ARENA) is a platform designed to simplify programming where there is a mix of virtual and physical systems, with locality and pervasive sensing as first-class citizens.;
bodyAlign: left;
img: https://docs.arenaxr.org/assets/img/intro/robot-arm.png;
imgCaption: Look it's a robot;
imgSize: stretch;
fontSize: 0.06;
widthScale: 1.5"
></a-entity>
<a-entity id='test-button-panel' arenaui-button-panel='title:;buttons:Previous,Next;demo:True' position='3 0 -2'></a-entity>
<a-entity id='test-button-panel2' arenaui-button-panel='title:My button menu text goes here;buttons:Button Option 1,Button Option 2,Button Option 3,D;vertical:true;font:Roboto-Mono' position='5 1 -2'></a-entity>
<a-entity id='test-button-panel3' arenaui-button-panel='vertical:true' position='5 2.5 -2'></a-entity>
<script>
window.setTimeout(() => {
document.getElementById('test-button-panel3').setAttribute('arenaui-button-panel', 'buttons',
['Option 1', { name: "B", img: "https://i.imgur.com/w3rB932.png", size: 0.3 }, 'Option 2']
)
}, 1000);
</script>
<a-entity id='test-prompt' position='7 1 -2' arenaui-prompt="title:Confirmation;
description:Confirmation occurs when the system requires a feedback from user that keeps one operation going or return back to the previous step. This occurs when important steps are taken.;
width: 1.25"
></a-entity>
<a-camera
id="my-camera"
near="0.1"
far="10000"
gesture-detector
look-controls="reverseMouseDrag: true"
arrow-controls
mouse-cursor
press-and-move
wasd-controls="fly: false; acceleration: 30; constrainToNavMesh:true"
geometry="primitive: box; width: 0.25; height: 0.25; depth: 0.25"
>
<a-entity
cursor="rayOrigin: mouse"
id="mouse-cursor"
raycaster="objects:[click-listener],[click-listener-local]"
></a-entity>
</a-camera>
<a-box position='0 0 0' click-listener></a-box>
</a-scene>
<script type="module" src="/src/main.js"></script>
</body>
</html>