-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathvr.html
297 lines (285 loc) · 15.5 KB
/
vr.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<head>
</head>
<h1>Introduction to Virtual Reality with A-Frame</h1>
Last updated: March 19, 2020<br><br>
This tutorial will show you how to make your own interactive VR scene using A-Frame.<br><br>
<img src="https://cdn.glitch.com/2693d0bd-10f3-4631-aa45-8a61112afe2c%2FScreen%20Shot%202019-08-08%20at%206.06.39%20PM.png?v=1565309326387">
<h3>Setting up a glitch project</h3><br>
1. Go to <a href="http://glitch.com">glitch.com</a><br><br>
2. Click on “new project” and select “hello webpage”<br><br>
3. Go into index.html. You can ignore the other files.<br><br>
4. Delete all of the default content in index.html<br><br>
<h3>Setting up a basic a-frame scene</h3>
5. Start by adding head and body tags. Add the following code to index.html:<br>
<div class="code">
<head><br>
</head><br>
<body><br>
</body><br>
</div><br><br>
6. Between the head tags, add a link to a-frame:
<div class="code">
<head><br>
<yellow><script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script></yellow><br>
</head><br>
<body><br>
</body><br>
</div><br><br>
7. Between the body tags, add a-frame scene tags:
<div class="code">
<head><br>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script><br>
</head><br>
<body><br>
<yellow><a-scene><br>
</a-scene><br></yellow>
</body><br>
</div><br><br>
8. Between the scene tags, add an orange box:
<div class="code">
<head><br>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script><br>
</head><br>
<body><br>
<a-scene><br>
<yellow><a-box color="orange" position="0 0 -4"></a-box></yellow><br>
</a-scene><br>
</body><br>
</div><br><br>
You can view your project by clicking on "Show" in the upper left corner of the page. In non-VR, you can use arrow keys to move. Click and drag the page to look around. It should look like this:<br><br>
<img src="https://cdn.glitch.com/2693d0bd-10f3-4631-aa45-8a61112afe2c%2FScreen%20Shot%202019-08-08%20at%201.21.03%20PM.png?v=1565292108677">
<br><br>
9. Add a small blue sphere to your scene to the right of the box, and add a large red cone behind the box:
<div class="code">
<head><br>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script><br>
</head><br>
<body><br>
<a-scene><br>
<a-box color="orange" position="0 0 -4"></a-box><br>
<yellow><a-sphere color="blue" scale=".2 .2 .2" position="3 .1 -4"></a-sphere><br>
<a-cone color="red" scale="4 4 4" position="-2 2 -8"></a-cone></yellow><br>
</a-scene><br>
</body><br>
</div><br><br>
10. Add a plane for the floor:
<div class="code">
<head><br>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script><br>
</head><br>
<body><br>
<a-scene><br>
<a-box color="orange" position="0 0 -4"></a-box><br>
<a-sphere color="blue" scale=".2 .2 .2" position="3 .1 -4"></a-sphere><br>
<a-cone color="red" scale="4 4 4" position="-2 2 -8"></a-cone><br>
<yellow><a-plane color="lime" scale="5 5" rotation="-90 0 0" position="0 0 -4"></a-plane></yellow><br>
</a-scene><br>
</body><br>
</div><br><br>
Your webpage should now look like this:<br><br>
<img src="https://cdn.glitch.com/2693d0bd-10f3-4631-aa45-8a61112afe2c%2FScreen%20Shot%202019-08-08%20at%206.12.05%20PM.png?v=1565309541762">
<br><br>
You can see how your project looks in VR by going to its URL in the browser in a VR headset.<br>
In VR, you will not be able to move around yet.
<br><br>
<h3>Add the controller</h3>
11. Add an entity to the scene with the ID "rig":
<div class="code">
<head><br>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script><br>
</head><br>
<body><br>
<a-scene><br>
<a-box color="orange" position="0 0 -4"></a-box><br>
<a-sphere color="blue" scale=".2 .2 .2" position="3 .1 -4"></a-sphere><br>
<a-cone color="red" scale="4 4 4" position="-2 2 -8"></a-cone><br>
<a-plane color="lime" scale="5 5" rotation="-90 0 0" position="0 0 -4"></a-plane><br>
<yellow><a-entity id="rig"><br>
</a-entity></yellow><br>
</a-scene><br>
</body><br>
</div><br><br>
12. Add a camera between the rig entity tags:
<div class="code">
<head><br>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script><br>
</head><br>
<body><br>
<a-scene><br>
<a-box color="orange" position="0 0 -4"></a-box><br>
<a-sphere color="blue" scale=".2 .2 .2" position="3 .1 -4"></a-sphere><br>
<a-cone color="red" scale="4 4 4" position="-2 2 -8"></a-cone><br>
<a-plane color="lime" scale="5 5" rotation="-90 0 0" position="0 0 -4"></a-plane><br>
<a-entity id="rig"><br>
<yellow><a-camera></a-camera></yellow><br>
</a-entity><br>
</a-scene><br>
</body><br>
</div><br><br>
13. Add a controller between the rig entity tags:
<div class="code">
<head><br>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script><br>
</head><br>
<body><br>
<a-scene><br>
<a-box color="orange" position="0 0 -4"></a-box><br>
<a-sphere color="blue" scale=".2 .2 .2" position="3 .1 -4"></a-sphere><br>
<a-cone color="red" scale="4 4 4" position="-2 2 -8"></a-cone><br>
<a-plane color="lime" scale="5 5" rotation="-90 0 0" position="0 0 -4"></a-plane><br>
<a-entity id="rig"><br>
<a-camera></a-camera><br>
<yellow><a-entity laser-controls></a-entity></yellow><br>
</a-entity><br>
</a-scene><br>
</body><br>
</div><br>
Now, when you go to your webpage in VR, you will be able to see the controller, and it will have a line coming out the front.
<br><br>
<h3>Add a checkpoint function</h3>
14. Add some objects around the scene to act as checkpoints. You will move to their location when you click on them.
<div class="code">
<head><br>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script><br>
</head><br>
<body><br>
<a-scene><br>
<a-box color="orange" position="0 0 -4"></a-box><br>
<a-sphere color="blue" scale=".2 .2 .2" position="3 .1 -4"></a-sphere><br>
<a-cone color="red" scale="4 4 4" position="-2 2 -8"></a-cone><br>
<a-plane color="lime" scale="5 5" rotation="-90 0 0" position="0 0 -4"></a-plane><br>
<yellow><a-box checkpoint color="purple" scale=".2 .2 .2" position="-2 1 -1"></a-box><br>
<a-box checkpoint color="purple" scale=".2 .2 .2" position="2 1 -1"></a-box><br>
<a-box checkpoint color="purple" scale=".2 .2 .2" position="2 1 -5"></a-box></yellow><br>
<a-entity id="rig"><br>
<a-camera></a-camera><br>
<a-entity laser-controls></a-entity><br>
</a-entity><br>
</a-scene><br>
</body><br>
</div><br><br>
15. Between the head tags, add script tags. This is where the javascript will go:
<div class="code">
<head><br>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script><br>
<yellow><script><br>
</script></yellow><br>
</head><br>
<body><br>
<a-scene><br>
<a-box color="orange" position="0 0 -4"></a-box><br>
<a-sphere color="blue" scale=".2 .2 .2" position="3 .1 -4"></a-sphere><br>
<a-cone color="red" scale="4 4 4" position="-2 2 -8"></a-cone><br>
<a-plane color="lime" scale="5 5" rotation="-90 0 0" position="0 0 -4"></a-plane><br>
<a-box checkpoint color="purple" scale=".2 .2 .2" position="-2 1 -1"></a-box><br>
<a-box checkpoint color="purple" scale=".2 .2 .2" position="2 1 -1"></a-box><br>
<a-box checkpoint color="purple" scale=".2 .2 .2" position="2 1 -5"></a-box><br>
<a-entity id="rig"><br>
<a-camera></a-camera><br>
<a-entity laser-controls></a-entity><br>
</a-entity><br>
</a-scene><br>
</body><br>
</div><br><br>
16. Between the script tags, add the following function:
<div class="code">
<head><br>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script><br>
<script><br>
<yellow>AFRAME.registerComponent('checkpoint', {<br>
init: function () {<br>
var el = this.el;<br>
el.addEventListener('click', function () {<br>
document.querySelector('#rig').object3D.position.x = el.object3D.position.x;<br>
document.querySelector('#rig').object3D.position.z = el.object3D.position.z;<br>
});<br>
}<br>
});<br></yellow>
</script><br>
</head><br>
<body><br>
<a-scene><br>
<a-box color="orange" position="0 0 -4"></a-box><br>
<a-sphere color="blue" scale=".2 .2 .2" position="3 .1 -4"></a-sphere><br>
<a-cone color="red" scale="4 4 4" position="-2 2 -8"></a-cone><br>
<a-plane color="lime" scale="5 5" rotation="-90 0 0" position="0 0 -4"></a-plane><br>
<a-box checkpoint color="purple" scale=".2 .2 .2" position="-2 1 -1"></a-box><br>
<a-box checkpoint color="purple" scale=".2 .2 .2" position="2 1 -1"></a-box><br>
<a-box checkpoint color="purple" scale=".2 .2 .2" position="2 1 -5"></a-box><br>
<a-entity id="rig"><br>
<a-camera></a-camera><br>
<a-entity laser-controls></a-entity><br>
</a-entity><br>
</a-scene><br>
</body><br>
</div><br>
Now when you're in VR, you can move around your scene by clicking on the checkpoints.
<br><br>
17. Finally, to make checkpoints clickable in the non-VR browser, add
<div class="code">
cursor="rayOrigin:mouse"
</div><br>
inside the initial scene tag, so it looks like this:
<div class="code">
<a-scene <yellow>cursor="rayOrigin:mouse"</yellow>>
</div><br><br>
That concludes the tutorial. With less than 30 lines of code, you have made an interactive VR scene!
<br>
You can continue learning A-Frame by changing colors, shapes, and positions, adding objects and interactions to your scene, and checking out <a href="http://aframe.io">aframe.io</a>.
<h3>Finished code</h3>
<div class="code">
<head><br>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script><br>
<script><br>
AFRAME.registerComponent('checkpoint', {<br>
init: function () {<br>
var el = this.el;<br>
el.addEventListener('click', function () {<br>
document.querySelector('#rig').object3D.position.x = el.object3D.position.x;<br>
document.querySelector('#rig').object3D.position.z = el.object3D.position.z;<br>
});<br>
}<br>
});<br>
</script><br>
</head><br>
<body><br>
<a-scene cursor="rayOrigin:mouse"><br>
<a-box color="orange" position="0 .5 -4"></a-box><br>
<a-sphere color="blue" scale=".2 .2 .2" position="3 .1 -4"></a-sphere><br>
<a-cone color="red" scale="4 4 4" position="-2 2 -8"></a-cone><br>
<a-plane color="lime" scale="5 5" rotation="-90 0 0" position="0 0 -4"></a-plane><br>
<a-box checkpoint color="purple" scale=".2 .2 .2" position="-2 1 -1"></a-box><br>
<a-box checkpoint color="purple" scale=".2 .2 .2" position="2 1 -1"></a-box><br>
<a-box checkpoint color="purple" scale=".2 .2 .2" position="2 1 -5"></a-box><br>
<a-entity id="rig"><br>
<a-camera></a-camera><br>
<a-entity laser-controls></a-entity><br>
</a-entity><br>
</a-scene><br>
</body>
</div><br><br>
For a slightly more advanced A-Frame example, check out
<a href="https://glitch.com/~crddsvr">this project</a>.<br>
To learn more about A-Frame and VR, check out <a href="https://aframe.io/">aframe.io</a>.
<style>
body{
padding:2em;
font-size:18px;
}
img{
width:50%;
border:1px solid black;
}
h3{
background-color:lavender;
}
yellow{
background-color:yellow;
}
.code{
padding:1em 2em 1em 2em;
background-color:f1f1f1;
font-family:monospace;
font-size:14px;
}
</style>