-
Notifications
You must be signed in to change notification settings - Fork 70
/
index.html
483 lines (425 loc) · 24.8 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
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
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
<html>
<head>
<title>A-Frame Examples</title>
<link rel=stylesheet href="css/index.css"/>
</head>
<body>
<div class="bigTitle">A-Frame Examples</div>
<br/>
<hr/>
The goal of this collection is to provide a set of basic and instructive examples that introduce the various features of the <a class="toc" href="https://aframe.io/">A-Frame</a> library, and to introduce new A-Frame components.
<br/><br/>
Examples can be viewed using a normal web browser. Some examples contain interactive virtual reality components that require a VR headset (Oculus Quest).
<br/><br/>
Source code hosted at <a class="toc" href="https://github.com/stemkoski/A-Frame-Examples">GitHub</a>.
<hr/>
<br/>
<table class="demo-table">
<tr><td rowspan="2"><a href="Hello-WebVR.html">
<img src="images/demo/Hello-WebVR.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="Hello-WebVR.html">Basic Scene</a></td></tr>
<tr><td class="demo-text">
A basic scene containing a variety of colorful shapes: box, sphere, cylinder, cone, torus, and trefoil torus knot.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="image-texture-grid.html">
<img src="images/demo/image-texture-grid.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="image-texture-grid.html">Image Textures (Grid)</a></td></tr>
<tr><td class="demo-text">
The basic scene with a sky-sphere image added, and using square grid image textures on all the geometric objects.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="image-texture.html">
<img src="images/demo/image-texture.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="image-texture.html">Image Texture</a></td></tr>
<tr><td class="demo-text">
Applying image textures to geometric objects.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="environment.html">
<img src="images/demo/environment.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="environment.html">Environment Component</a></td></tr>
<tr><td class="demo-text">
Using the <a href="https://github.com/supermedium/aframe-environment-component">environment component</a> to automatically generate a background.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="extended-wasd-controls.html">
<img src="images/demo/extended-wasd-controls.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="extended-wasd-controls.html">Extended WASD Controls</a></td></tr>
<tr><td class="demo-text">
Introduces an "extended WASD controls" component for desktop (keyboard) that enables the user to: <br/>
<li>move forward/left/backward/right (W/A/S/D) <br/>
<li>turn left/right (Q/E) <br/>
<li>fly up/down (R/F) <br/>
<li>look up/down (T/G) <br/>
Controls and settings are completely customizable; can be applied to camera or other entities.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="screen-controls-buttons-look.html">
<img src="images/demo/screen-controls.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="screen-controls-buttons-look.html">Screen Controls (Buttons/Look)</a></td></tr>
<tr><td class="demo-text">
Incorporating on-screen button controls for movement (optimized for touchscreen/tablet devices; also supports desktop) with the "extended WASD controls" component and the look-controls component (supports "magic screen" effect as well as desktop).
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="screen-controls-joystick-look.html">
<img src="images/demo/screen-controls-joystick-look.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="screen-controls-joystick-look.html">Screen Controls (Joystick/Look)</a></td></tr>
<tr><td class="demo-text">
Incorporating on-screen joystick controls for movement (optimized for touchscreen/tablet devices; also supports desktop) with the "extended WASD controls" component and the look-controls component (supports "magic screen" effect as well as desktop).
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="screen-controls-joystick-dual.html">
<img src="images/demo/screen-controls-joystick-dual.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="screen-controls-joystick-dual.html">Screen Controls (Dual Joysticks)</a></td></tr>
<tr><td class="demo-text">
Incorporating dual on-screen joystick controls for movement and turn/look (optimized for touchscreen/tablet devices; also supports desktop) with the "extended WASD controls" component.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="fade-in.html">
<img src="images/demo/fade-in.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="fade-in.html">Fade-In Effect</a></td></tr>
<tr><td class="demo-text">
A fade-in effect that requires the user to press a button before entering an A-Frame scene. Since audio can not be played until the user interacts with the application, this approach also enables sounds (background ambient sounds, in this example) to be activated at the same time.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="text-2D.html">
<img src="images/demo/text-2D.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="text-2D.html">Text (2D)</a></td></tr>
<tr><td class="demo-text">
Displaying text on a 2D plane with a text-area entity.
Uses component with tick function to continuously update text.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="text-3D.html">
<img src="images/demo/text-3D.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="text-3D.html">Text (3D)</a></td></tr>
<tr><td class="demo-text">
Displaying text as a 3D geometric object (with thickness), using the <a href="https://github.com/supermedium/superframe/tree/master/components/text-geometry">text geometry component</a>. Example updates text once per second.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="keyboard.html">
<img src="images/demo/keyboard.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="keyboard.html">Keyboard Component</a></td></tr>
<tr><td class="demo-text">
Using the <a href="https://github.com/supermedium/aframe-super-keyboard">keyboard component</a>. Enter the name of a color and press enter to change the color of the sphere.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="animation.html">
<img src="images/demo/animation.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="animation.html">Animation</a></td></tr>
<tr><td class="demo-text">
<a href="https://aframe.io/docs/1.0.0/components/animation.html">Animations</a> added to geometric objects from the basic scene example. Animated properties include position, rotation, scale, color, and opacity. Contains examples with simultaneous animations (sphere changes radius and color) and sequential animations (box changes scale, then opacity) using the <a href="https://github.com/supermedium/superframe/tree/master/components/animation-timeline">timeline component</a>.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="particles.html">
<img src="images/demo/particles.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="particles.html">Particle Effects</a></td></tr>
<tr><td class="demo-text">
A selection of particle effects (fountain, fireball, clouds, fireworks, etc.) created using the <a href="https://github.com/harlyq/aframe-spe-particles-component">SPE particles component</a>, the most feature-complete wrapper for the <a href="http://squarefeet.github.io/ShaderParticleEngine/">Shader Particle Engine</a> known at this time. Visit <a href="https://github.com/harlyq/aframe-spe-particles-component">here</a> for even more examples and documentation.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="fireworks.html">
<img src="images/demo/fireworks.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="fireworks.html">Fireworks</a></td></tr>
<tr><td class="demo-text">
A fireworks display, complete with sound effects. Uses fade-in (required user interaction to enable sounds), spritesheet-animation component, and SPE particles component.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="curves-tubes.html">
<img src="images/demo/curves-tubes.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="curves-tubes.html">Parametric Curves and Tubes</a></td></tr>
<tr><td class="demo-text">
Introducing new components: aframe-curve-component, aframe-curve-geometry, and aframe-tube-geometry, that create geometric objects from a set of parametric equations <i>x(t)</i>, <i>y(t)</i>, <i>z(t)</i>. Uses the mathematical expression evaluator <a href="https://github.com/silentmatt/expr-eval">expr-eval</a> to parse strings as mathematical functions.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="parametric-path-follow.html">
<img src="images/demo/parametric-path-follow.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="parametric-path-follow.html">Parametric Path Following</a></td></tr>
<tr><td class="demo-text">
Introducing a new component, aframe-curve-follow, that moves an entity according to a set of parametric equations <i>x(t)</i>, <i>y(t)</i>, <i>z(t)</i>, adjusting position and rotation over a specified time interval. <br/>
start/stop movement with <span class="code">setAttribute("curve-follow", "enabled", "true")</span> (or "false") <br/>
reverse/normal movement with <span class="code">setAttribute("curve-follow", "reverse", "true")</span> (or "false")
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="physics.html">
<img src="images/demo/physics.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="physics.html">Physics</a></td></tr>
<tr><td class="demo-text">
Adding basic physics to a scene using the <a href="https://github.com/donmccurdy/aframe-physics-system">physics system component</a>.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="model.html">
<img src="images/demo/model.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="model.html">Model</a></td></tr>
<tr><td class="demo-text">
A scene containing (GLTF) models of trees (from <a href="https://poly.google.com">Poly by Google</a>), and an animated (GLB) model using the <a href="https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders#animation">animation-mixer</a> component.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="spritesheet.html">
<img src="images/demo/spritesheet.gif" class="demo-image"/></a></td>
<td class="demo-title"><a href="spritesheet.html">Animated Spritesheet</a></td></tr>
<tr><td class="demo-text">
Introducing a new component that uses a spritesheet as an animated texture.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="sprites.html">
<img src="images/demo/sprites.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="sprites.html">Sprites</a></td></tr>
<tr><td class="demo-text">
Illustrating the creation of sprite-like objects: images that always face the camera. Uses the
<a href="https://github.com/supermedium/superframe/tree/master/components/look-at">look-at component</a>, and the <a href="https://github.com/supermedium/superframe/tree/master/components/render-order">render-order component</a> to address (most) issues with overlapping transparency. Applications in example include simulated glow effect and text labels.
Also demonstrates integration with spritesheet-animation component.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="canvas-texture.html">
<img src="images/demo/canvas-texture.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="canvas-texture.html">Canvas Texture</a></td></tr>
<tr><td class="demo-text">
An HTML canvas element is used as the texture of a plane. The canvas is updated (redrawn) in the tick function of a component, created an animated effect.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="conway-game-of-life.html">
<img src="images/demo/conway-game-of-life.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="conway-game-of-life.html">Conway's Game of Life Texture</a></td></tr>
<tr><td class="demo-text">
Conway's Game of Life played on a torus, rotating in space. Texture is from a canvas; for an optimized version, see the related shader-based example below.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="camera-texture.html">
<img src="images/demo/camera-texture.jpg" class="demo-image"/></a></td>
<td class="demo-title"><a href="camera-texture.html">Camera Texture</a></td></tr>
<tr><td class="demo-text">
Using the camera's viewpoint as a texture for another object in a scene.
(Uses multiple render targets, similar to a post-processing setup.)
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="video-texture.html">
<img src="images/demo/video-texture.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="video-texture.html">Video Texture</a></td></tr>
<tr><td class="demo-text">
A video is used as the texture of a plane. <br/>With a VR headset, pointing at and clicking on video activates pause and play functionality.
</td></tr>
</table>
<!-- shader examples -->
<table class="demo-table">
<tr><td rowspan="2"><a href="dissolve-shader.html">
<img src="images/demo/dissolve-shader.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="dissolve-shader.html">Dissolve Shader</a></td></tr>
<tr><td class="demo-text">
Applies a "dissolving" effect on meshes within a scene using a Perlin noise function.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="mandlebrot-shader.html">
<img src="images/demo/mandlebrot-shader.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="mandlebrot-shader.html">Mandlebrot Fractal Shader</a></td></tr>
<tr><td class="demo-text">
Generates a Mandlebrot set fractal.
A moving sphere on the Mandlebrot set corresponds to a seed value used to generate the corresponding Julia set fractal.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="conway-shader.html">
<img src="images/demo/conway-shader.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="conway-shader.html">Conway's Game of Life Shader</a></td></tr>
<tr><td class="demo-text">
Creates the Conway's Game of Life cellular automata; all computations take place in a fragment shader for optimal performance. <br/>
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="raymarching-shader.html">
<img src="images/demo/raymarching-shader.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="raymarching-shader.html">Raymarching Shader</a></td></tr>
<tr><td class="demo-text">
Illustrates the raymarching rendering technique; different shapes are specified using distance functions.
</td></tr>
</table>
<!-- SOON TO BE DEPRECATED...
<table class="demo-table">
<tr><td rowspan="2"><a href="portal-default.html">
<img src="images/demo/portals.jpg" class="demo-image"/></a></td>
<td class="demo-title"><a href="portal-default.html">Link Navigation</a></td></tr>
<tr><td class="demo-text">
Demonstrates portal-like navigation between A-Frame scenes using the <a href="https://github.com/aframevr/aframe/blob/master/examples/showcase/link-traversal/js/components/link-controls.js">link controls component</a>. (Works best on desktop.)
</td></tr>
</table>
-->
<table class="demo-table">
<tr><td rowspan="2"><a href="vrm.html">
<img src="images/demo/walk.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="vrm.html">VRM Models and Animation</a></td></tr>
<tr><td class="demo-text">
Demonstrates VRM Model import and animation using the <a href="https://github.com/binzume/aframe-vrm">A-Frame VRM component</a> created by binzume.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="dice.html">
<img src="images/demo/dice.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="dice.html">Dice Models</a></td></tr>
<tr><td class="demo-text">
A set of polyhedra dice models, available in GLTF/GLB format.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="dice-color.html">
<img src="images/demo/dice-color.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="dice-color.html">Dice Models - Colored</a></td></tr>
<tr><td class="demo-text">
A material and component to easily recolor the polyhedra dice models (or any model that is primarily two colors).
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="dice-tower.html">
<img src="images/demo/dice-tower.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="dice-tower.html">Infinite Dice Tower</a></td></tr>
<tr><td class="demo-text">
A physics-based simulation of polyhedral dice falling down a dice tower.<br/>
Code illustrates how to change position of dynamic physics objects.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="dice-instancing.html">
<img src="images/demo/dice-instancing.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="dice-instancing.html">Ball of Dice</a></td></tr>
<tr><td class="demo-text">
One thousand polyhedral dice (icosahedral, D20), each with random colors and rotating randomly. <br/>
Code illustrates how to use GLTF models with an instanced mesh to reduce draw calls.
</td></tr>
</table>
<hr>
<br/>
<div class="bigTitle">New Quest Examples</div>
<br/><br/>
<center>
The following examples require a Quest VR headset and controllers.
</center>
<br/><br/>
<hr>
<table class="demo-table">
<tr><td rowspan="2"><a href="quest-controllers.html">
<img src="images/demo/quest-controllers.jpg" class="demo-image"/></a></td>
<td class="demo-title"><a href="quest-controllers.html">Quest Controller Data</a></td></tr>
<tr><td class="demo-text">
Conveniently access all Quest controller input data from the "controller-listener" component. Includes support for
discrete events (button pressed, button released) and continuous events (button pressing: the state between pressed and released).
Used in all examples that follow.<br/><br/>
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="quest-extras.html">
<img src="images/demo/quest-extras.jpg" class="demo-image"/></a></td>
<td class="demo-title"><a href="quest-extras.html">Quest Player Movement and Raycaster Interaction</a></td></tr>
<tr><td class="demo-text">
The "raycaster-extras" component adds graphical improvements to the raycaster system, appearing similar
to the Quest home screen: the raycaster beam is a cylinder with a gradient texture applied, and the point of
intersection is indicated by a cursor. Entities with the new "raycaster-target" component class
can set booleans that cause an object to glow when the raycaster is pointing towards it,
and enabled an object to be grabbed by holding the right grip button.
While being held, an object can be pulled towards or pushed from the controller with the right joystick.
<br/><br/>
The "player-move" component simplifies movement in a scene.
A navigation mesh class may be set, in which case a marker will appear indicating when the beam is pointing at the corresponding mesh, and the right trigger activates the teleportation.
Additionally, the left joystick
controls first-person navigation, movement forward/backward and left/right.
Pressing the left trigger while moving increases movement speed.
While holding the left grip button, the left joystick
instead causes the user to fly up/down and turn left/right.<br/><br/>
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="quest-music.html">
<img src="images/demo/quest-music.jpg" class="demo-image"/></a></td>
<td class="demo-title"><a href="quest-music.html">Quest Music Player</a></td></tr>
<tr><td class="demo-text">
The "music-player" component creates a music player that plays audio files and displays an image and text for the currently playing song. It includes buttons that support standard music player functions: play/pause, replay, previous/next song, volume up/down. Play modes include: play current song once, automatically repeat current song, and play all music in list.<br/><br/>
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="quest-book.html">
<img src="images/demo/quest-book.jpg" class="demo-image"/></a></td>
<td class="demo-title"><a href="quest-book.html">Quest PDF Book Reader</a></td></tr>
<tr><td class="demo-text">
The "interactive-book" component creates a interactive model of a book with pages rendered from a PDF file
using the <a href="https://github.com/mozilla/pdf.js">pdf.js</a> library. Pointing at the book and pressing the right trigger enables interactivity (indicated by the power light changing from red to green). While activated, the "player-move" component is deactivated; moving the Quest joysticks left/right and pressing the A/B/X/Y buttons will turn the pages of the book. Clicking on the book with the right trigger a second time will pause the interaction and reactivate the "player-move" component.<br/><br/>
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="quest-bagel.html">
<img src="images/demo/quest-bagel.jpg" class="demo-image"/></a></td>
<td class="demo-title"><a href="quest-bagel.html">Quest Video Game Player</a></td></tr>
<tr><td class="demo-text">
A collection of new A-Frame components and libraries create a working* handheld video game player in VR.
The new "gamepad-model" component creates the gamepad model; pointing at the model and pressing the right trigger activates the gamepad (indicated by the power light changing from red to green). While activated, the "player-move" component is deactivated; moving the Quest joysticks and pressing the A/B/X/Y buttons will be shown in the gamepad model. Games created with BAGEL (the <a href="https://github.com/stemkoski/BAGEL-Javascript">Basic Adaptable Game Engine Library</a>) can be easily ported and run in A-Frame (using the Quest controllers for game input) using the "BAGEL-game-component" component. When a game is in progress, clicking on the gamepad with the right trigger will pause the game and reactivate the "player-move" component.
<br>(*Note: Playing the game sometimes causes A-Frame to freeze for an unknown reason; this is currently being investigated.)
<br/><br/>
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="quest-physics.html">
<img src="images/demo/physx.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="quest-physics.html">Quest Physics and Interaction</a></td></tr>
<tr><td class="demo-text">
Physics added to a scene using the <a href="https://github.com/zach-capalbo/PhysX">PhysX component</a>,
originally created by Zach Capalbo for the <a href="https://vartiste.xyz/">VARTISTE</a> project;
code modified to remove various dependencies. Features static, dynamic, and kinematic objects.
Objects can be grabbed and manipulated with the raycaster-extras component.
<br/><br/>
</td></tr>
</table>
<br/><br/><br/>
<!-- DEPRECATED EXAMPLES -->
<!--
<table class="demo-table">
<tr><td rowspan="2"><a href="laser-controls.html">
<img src="images/demo/laser-controls.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="laser-controls.html">Laser Controls</a></td></tr>
<tr><td class="demo-text">
Requires VR headset (only tested with Oculus Go). Can point a laser at a cube; cube changes color when pointed at, when clicked on, and when no longer pointed at. (Corresponds to mouseenter, mousedown, mouseleave events.)
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="gamepad-emulation.html">
<img src="images/demo/gamepad-emulation.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="gamepad-emulation.html">Gamepad Emulation (Oculus Go)</a></td></tr>
<tr><td class="demo-text">
Requires Oculus Go headset. The trackpad and trigger on the Oculus Go controller are used to simulate an analog joystick and button of a standard gamepad controller. Controller state data is stored in a component, and displayed on a text element.
</td></tr>
</table>
<table class="demo-table">
<tr><td rowspan="2"><a href="virtual-arcade.html">
<img src="images/demo/virtual-arcade.png" class="demo-image"/></a></td>
<td class="demo-title"><a href="virtual-arcade.html">Virtual Arcade</a></td></tr>
<tr><td class="demo-text">
Builds upon the previous examples. A hidden canvas contains a game (Starfish Collector) created using the <a class="toc" href="http://phaser.io/">Phaser</a> game framework. The game is used as a canvas texture in the A-Frame scene, positioned directly in front of a model of an arcade cabinet.
<br/>If using a regular computer, the keyboard can be used: W/A/S/D to move the camera, Arrow Keys to control the game.
<br/>If using the Oculus Go, the trackpad on the controller can be used to control the game.
</td></tr>
</table>
-->
</body>
</html>