-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
114 lines (105 loc) · 6.59 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Holo Presentation</title>
<meta name="description" content="Make 3D presentations viewable in VR">
<script src="/aframe.min.js"></script>
<script src="/aframe-environment-component.min.js"></script>
<script src="/aframe-extras.min.js"></script>
<script src="/super-hands.min.js"></script>
<script src="/aframe-super-keyboard.js"></script>
</head>
<body class="app">
<a-scene renderer="antialias: true" cursor="rayOrigin: mouse" raycaster="far: 20; objects: .collidable" keyboard-shortcuts="enterVR: false" loading-screen="enabled: false" holo>
<a-assets id="assets">
<a-mixin id="point"
raycaster="far: 10; objects: .collidable; lineColor: #ffffff; threshold: 0.1"
super-hands="colliderEvent: raycaster-intersection;
colliderEventProperty: els;
colliderEndEvent: raycaster-intersection-cleared;
colliderEndEventProperty: clearedEls;
grabStartButtons: griptouchstart;
grabEndButtons: griptouchend;
stretchStartButtons: griptouchstart;
stretchEndButtons: griptouchend;">
</a-mixin>
<a-mixin id="tab"
geometry="width: 1; height: 0.2;"
material="color: #323248; opacity: 0;"
text="color: #fff; width: 0.8; wrapCount: 15;"
>
</a-mixin>
<a-asset-item id="scene" src="scifi.glb"></a-asset-item>
<img id="keyboard-controls" src="keyboard-controls.png">
<img id="vr-controls" src="vr-controls.png">
<img id="example1-image" src="example1.png">
<img id="example2-image" src="example2.png">
</a-assets>
<a-gltf-model id="model" src="#scene" position="0 -30 5" rotation="0 0 0" animation-mixer hide-on-enter-ar></a-gltf-model>
<a-entity light="type: ambient; color: #BBB"></a-entity>
<a-light type="directional" position="0 50 0" color="#fff" intensity="5"></a-light>
<a-light type="directional" position="0 50 0" color="#fff" intensity="3" rotation="0 0 0" target="#directionaltarget">
<a-entity id="directionaltarget" position="0 100 0"></a-entity>
</a-light>
<a-entity id="rig" movement-controls="speed: 0.2" position="0 0 6.5">
<a-entity camera="fov: 80" look-controls position="0 1.6 0"></a-entity>
<a-entity id="handLeft" super-hands laser-controls="hand: left" mixin="point"></a-entity>
<a-entity id="handRight" super-hands laser-controls="hand: right" mixin="point"></a-entity>
</a-entity>
<a-plane id="info" width="4" height="2" color="#FFF" position="0 1.5 4.7" material="side: double; color: #191923" visible="true">
<a-plane width="1" height="2" position="-1.5 00 0.002" material="color: #222230" tabs="active: getting-started-tab">
<a-plane id="getting-started-tab" mixin="tab" position="0 0.8 0.005" text="value: Getting Started;" class="collidable"
tab="getting-started" onclick="this.parentEl.setAttribute('tabs', {active: this.id})"></a-plane>
<a-plane id="controls-tab" mixin="tab" position="0 0.6 0.005" text="value: Controls;" class="collidable"
tab="controls" onclick="this.parentEl.setAttribute('tabs', {active: this.id})"></a-plane>
<a-plane id="examples-tab" mixin="tab" position="0 0.4 0.005" text="value: Examples;" class="collidable"
tab="examples" onclick="this.parentEl.setAttribute('tabs', {active: this.id})"></a-plane>
</a-plane>
<a-entity id="getting-started" position="-0.9 0.8 0" visible="false">
<a-text color="#FFFFFF" position="0 0 0" width="2.8" value="1. Create a container"></a-text>
<a-text color="#FFFFFF" position="0 -0.3 0" width="2.8" value="2. Add text, emojis, images, 3D models, or other containers"></a-text>
<a-text color="#FFFFFF" position="0 -0.6 0" width="2.8" value="3. Add depth layers to your container"></a-text>
<a-text color="#FFFFFF" position="0 -0.8 0" width="2.8" value="4. Save your presentation with 'Cmd + S'"></a-text>
<a-text color="#FFFFFF" position="0 -1.1 0" width="2.8" value="5. Visualize by pressing 'v' afer selecting the root conainer"></a-text>
</a-entity>
<a-entity id="controls" position="-0.4 0 0.01" visible="false">
<a-image width="1" height="1.22" transparent="true" src="#keyboard-controls" position="0 0.28 0"></a-image>
<a-image width="1.8" height="1.05" transparent="true" src="#vr-controls" position="1.4 -0.3 0"></a-image>
</a-entity>
<a-entity id="examples" position="-0.3 0.4 0" visible="false">
<a-plane id="example1" class="collidable" material="transparent: true; opacity: 0;" width="1" height="0.8" position="0 0 0.01">
<a-image src="#example1-image" material="transparent: true;" height="0.6" position="0 0.1 0"></a-image>
<a-plane material="color: #ffffff; transparent: true; opacity: 0.2;" height="0.6" position="0 0.1 0"></a-plane>
<a-text width="1.6" value="How to use Holo Presentation" position="-0.5 -0.3 0"></a-text>
</a-plane>
<a-plane id="example2" class="collidable" material="transparent: true; opacity: 0;" width="1" height="0.8" position="1.2 0 0.01">
<a-image transparent="true" src="#example2-image" material="transparent: false;" height="0.6" position="0 0.1 0"></a-image>
<a-plane material="color: #ffffff; transparent: true; opacity: 0.2;" height="0.6" position="0 0.1 0"></a-plane>
<a-text width="1.6" wrapCount="28" value="History of GUIs" position="-0.5 -0.3 0"></a-text>
</a-plane>
</a-entity>
</a-plane>
<div class="interface" style="display: none;">
<!-- Material Input based on https://codingbeautydev.com/blog/material-design-text-field/ -->
<div class="textUploader">
<input
type="text"
id="fname"
name="fname"
value=""
aria-labelledby="label-fname"
/>
<label class="label" for="fname" id="label-fname">
<div class="text">Add Text</div>
</label>
</div>
</div>
<a-entity id="keyboard" super-keyboard="hand: #handRight; show: false;" position="0 1.6 -0.5" rotation="-30 0 0"></a-entity>
</a-scene>
<input type="file" class="dropzone" style="display: none;">
<script type="module" src="/main.js"></script>
</body>
</html>