|
|
Basic Scene |
| A basic scene containing a variety of colorful shapes: box, sphere, cylinder, cone, torus, and trefoil torus knot. |
 |
Image Textures (Grid) |
| The basic scene with a sky-sphere image added, and using square grid image textures on all the geometric objects. |
 |
Image Texture |
| Applying image textures to geometric objects. |
 |
Environment Component |
| Using the environment component to automatically generate a background. |
 |
Extended WASD Controls |
|
Introduces an "extended WASD controls" component for desktop (keyboard) that enables the user to: Controls and settings are completely customizable; can be applied to camera or other entities. |
 |
Screen Controls (Buttons/Look) |
| 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). |
 |
Screen Controls (Joystick/Look) |
| 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). |
 |
Screen Controls (Dual Joysticks) |
| 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. |
 |
Fade-In Effect |
| 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. |
 |
Text (2D) |
| Displaying text on a 2D plane with a text-area entity. Uses component with tick function to continuously update text. |
 |
Text (3D) |
| Displaying text as a 3D geometric object (with thickness), using the text geometry component. Example updates text once per second. |
 |
Keyboard Component |
| Using the keyboard component. Enter the name of a color and press enter to change the color of the sphere. |
 |
Animation |
| Animations 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 timeline component. |
 |
Particle Effects |
| A selection of particle effects (fountain, fireball, clouds, fireworks, etc.) created using the SPE particles component, the most feature-complete wrapper for the Shader Particle Engine known at this time. Visit here for even more examples and documentation. |
 |
Fireworks |
| A fireworks display, complete with sound effects. Uses fade-in (required user interaction to enable sounds), spritesheet-animation component, and SPE particles component. |
 |
Parametric Curves and Tubes |
| Introducing new components: aframe-curve-component, aframe-curve-geometry, and aframe-tube-geometry, that create geometric objects from a set of parametric equations x(t), y(t), z(t). Uses the mathematical expression evaluator expr-eval to parse strings as mathematical functions. |
 |
Parametric Path Following |
|
Introducing a new component, aframe-curve-follow, that moves an entity according to a set of parametric equations x(t), y(t), z(t), adjusting position and rotation over a specified time interval. start/stop movement with setAttribute("curve-follow", "enabled", "true") (or "false") reverse/normal movement with setAttribute("curve-follow", "reverse", "true") (or "false") |
 |
Physics |
| Adding basic physics to a scene using the physics system component. |
 |
Model |
| A scene containing (GLTF) models of trees (from Poly by Google), and an animated (GLB) model using the animation-mixer component. |
 |
Animated Spritesheet |
| Introducing a new component that uses a spritesheet as an animated texture. |
 |
Sprites |
| Illustrating the creation of sprite-like objects: images that always face the camera. Uses the look-at component, and the render-order component to address (most) issues with overlapping transparency. Applications in example include simulated glow effect and text labels. Also demonstrates integration with spritesheet-animation component. |
 |
Canvas Texture |
| 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. |
 |
Conway's Game of Life - Texture |
| Conway's Game of Life played on a torus, rotating in space. |
 |
Video Texture |
|
A video is used as the texture of a plane. With a VR headset, pointing at and clicking on video activates pause and play functionality. |
 |
Link Navigation |
| Demonstrates portal-like navigation between A-Frame scenes using the link controls component. |
 |
Laser Controls |
| 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.) |
 |
Gamepad Emulation (Oculus Go) |
| 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. |
 |
Virtual Arcade |
|
Builds upon the previous examples. A hidden canvas contains a game (Starfish Collector) created using the Phaser 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.
If using a regular computer, the keyboard can be used: W/A/S/D to move the camera, Arrow Keys to control the game. If using the Oculus Go, the trackpad on the controller can be used to control the game. |