Community Components Example

### A-Frame Project Setup: Install Dependencies and Start Server Source: https://github.com/8thwall/8frame/blob/master/CONTRIBUTING.md Essential commands for setting up the A-Frame project locally, including installing necessary dependencies and starting the development server. ```Shell npm install ``` ```Shell npm start ``` -------------------------------- ### Basic A-Frame Scene Setup in HTML Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/index.md This HTML snippet demonstrates the minimal setup required to start an A-Frame VR experience. It includes the A-Frame library via a CDN and defines a basic scene (``) containing several primitive 3D objects like a box, sphere, cylinder, plane, and sky, showcasing A-Frame's declarative approach to VR content creation without requiring any installation. ```html

``` -------------------------------- ### Set Up A-Frame Local Development Environment Source: https://github.com/8thwall/8frame/blob/master/README.md Clones the A-Frame repository, installs its dependencies, and starts a local development server, enabling local testing and contribution to the A-Frame project. ```sh git clone https://github.com/aframevr/aframe.git # Clone the repository. cd aframe && npm install # Install dependencies. npm start # Start the local development server. ``` -------------------------------- ### Run Local Documentation Server for A-Frame Source: https://github.com/8thwall/8frame/blob/master/CONTRIBUTING.md Command to start a local live server for watching and serving A-Frame documentation, useful for development and review. ```Shell npm run docs ``` -------------------------------- ### Initialize A-Frame Scene with Angle CLI Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/installation.md This command installs the Angle command-line interface globally and then uses it to quickly generate a basic A-Frame scene template, streamlining the setup process for new projects. ```Bash npm install -g angle && angle initscene ``` -------------------------------- ### Basic A-Frame Scene Setup Source: https://github.com/8thwall/8frame/blob/master/README.md This example demonstrates how to create a simple 3D scene using A-Frame's declarative HTML. It includes basic geometric primitives such as a box, sphere, cylinder, plane, and a sky, showcasing the ease of setting up a VR/AR environment with minimal code. ```HTML

``` -------------------------------- ### Basic HTML Structure for A-Frame Scene Source: https://github.com/8thwall/8frame/blob/master/docs/guides/building-a-basic-scene.md This snippet shows the minimal HTML structure required to start an A-Frame scene. It includes the A-Frame library script in the head and the element in the body, which handles all 3D setup. ```html ``` -------------------------------- ### Handle Cordova deviceready Event with React Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/installation.md This example illustrates how to wait for the `deviceready` event in a Cordova environment before rendering your A-Frame scene using a framework like React. It ensures that Cordova is fully initialized before your application's UI components are mounted. ```javascript document.addEventListener('deviceready', () => { ReactDOM.render(, document.getElementById('root')) }) ``` -------------------------------- ### Starting ngrok with a Reserved Subdomain Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/visual-inspector-and-dev-tools.md For consistent and easy-to-remember URLs, this snippet shows how to start ngrok using a pre-reserved subdomain. This feature is typically available with ngrok premium accounts. ```Shell ./ngrok http --subdomain=abc 8080 ``` -------------------------------- ### HTML Example for a-sound Primitive Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-sound.md Demonstrates how to use the primitive within an to play a sound. This example sets the sound source, enables autoplay, and positions the sound in the scene. ```HTML

``` -------------------------------- ### Install A-Frame Component Template using Angle CLI Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/writing-a-component.md This command installs the `angle` command-line interface globally, which is recommended for setting up A-Frame component templates. After installation, it initializes a new component project, preparing it for development and subsequent publishing to GitHub and npm. ```sh npm install -g angle && angle initcomponent ``` -------------------------------- ### Standard A-Frame Unit Test Structure Source: https://github.com/8thwall/8frame/blob/master/tests/README.md Provides a template for structuring A-Frame unit tests, outlining the hierarchy of suites and test cases. It includes examples of `setup` hooks and both synchronous and asynchronous test case implementations using `done` callbacks. ```JavaScript suite('module/component/custom element', function () { /** * `setup` hook is run before every test. */ setup(function (done) { done(); // If asynchrony is involved, use `done` to tell when finished. }); suite('method/feature', function () [ /** * A synchronous test case. No need to specify `done`. */ test('does this', function () { assert.equal(1, 1); }); /** * An asynchronous test case. */ test('does that', function (done) { process.nextTick(function () { assert.notEqual(1, 2); done(); // Use `done` to tell when finished in asynchronous test. }); }); }); }); ``` -------------------------------- ### Install A-Frame using npm Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/installation.md This command installs the A-Frame library as a project dependency using npm, the Node.js package manager, enabling local management and version control of the A-Frame framework. ```Bash npm install aframe ``` -------------------------------- ### Styling for A-Frame Examples Directory Page Source: https://github.com/8thwall/8frame/blob/master/examples/index.html This CSS defines the visual styles and responsive layout for the A-Frame examples directory page. It sets font properties, background colors, link styles, and adjusts elements for different screen sizes. ```css html { font-size: 14px; } body { background: rgb(239,45,94); color: #fff; font: normal 500 1.2rem/1.2 Inconsolata, Andale Mono, Courier New, monospace; padding: 1rem 2rem; } ul { list-style: none; margin: 0; padding: 0; } .header { position: relative; } .resources { font-size: 0; /* Collapse whitespace. */ text-transform: uppercase; } .resources li + li { margin-top: 0.5rem; } .resources a { color: rgba(0,0,0,.5); display: inline-block; font-size: 1.2rem; margin: -0.25rem -0.5rem; padding: 0.25rem 0.5rem; text-decoration: none; transition: all 0.075s ease-in-out; } .resources a:hover { background-color: rgba(0,0,0,0.25); color: #fff; } h1, h2 { line-height: 100%; } h1 { font-size: 1.6rem; font-weight: 100; letter-spacing: 0.04rem; margin-bottom: 1.25rem; text-transform: uppercase; } h2 { color: rgba(0,0,0,0.5); font-size: 0.9rem; font-weight: 300; margin: 2rem 0 0.5rem; padding: 0; text-transform: uppercase; } hr { background: none; border: 0; border-bottom: 1px dashed rgba(255,255,255,0.25); margin: 2rem 0; } .links li + li { box-shadow: inset 0 0.15rem 0.1rem -0.15rem rgba(0,0,0,0.5); } .links a { color: #fff; display: block; font-size: 1.5rem; letter-spacing: 0.01em; padding: 0.75rem 0; text-decoration: none; transition: opacity 0.075s ease-in-out; } .links a em { font-size: .9rem; font-style: normal; opacity: .6; } .links a:hover { background-color: rgba(0,0,0,0.15); box-shadow: inset 0 0 0 0.15rem rgba(0,0,0,0.15); } .links a:active { background-color: rgba(0,0,0,0.25); opacity: 0.75; } .links li:hover, .links li:hover + li { margin: 0 -0.75rem; } .links li:hover a, .links li:hover + li a { padding-left: 0.75rem; padding-right: 0.75rem; } @media only screen and (min-width: 1000px) { h1 { font-size: 3rem; } .resources { font-size: 1.2; } .resources li { display: inline-block; } .resources li + li { margin-left: 2.5rem; } } ``` -------------------------------- ### Clone A-Frame Repository Locally Source: https://github.com/8thwall/8frame/blob/master/CONTRIBUTING.md Instructions to clone your forked A-Frame repository to your local machine using Git. ```Shell git clone git@github.com:yourusername/aframe ``` -------------------------------- ### HTML Example: Basic Raycaster Setup Source: https://github.com/8thwall/8frame/blob/master/docs/components/raycaster.md This HTML snippet demonstrates how to set up a basic raycaster on an A-Frame entity. It configures the raycaster to detect intersections with entities having the class 'collidable' and to show the raycasting line. A separate box entity is defined with the 'collidable' class to serve as a target. ```html

``` -------------------------------- ### HTML Example for Vive Focus Controls Component Source: https://github.com/8thwall/8frame/blob/master/docs/components/vive-focus-controls.md Demonstrates how to integrate the `vive-focus-controls` component into an A-Frame entity, showing both a general integration and specific hand assignments (left/right). ```html

``` -------------------------------- ### Run Local Server for A-Frame Development Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/installation.md These commands provide options to run a simple local HTTP server, which is recommended for A-Frame development to ensure proper serving of files and correct resolution of absolute and relative URLs. ```Bash npm i -g five-server@latest && five-server --port=8000 ``` ```Bash python -m SimpleHTTPServer ``` ```Bash python -m http.server ``` -------------------------------- ### A-Frame a-obj-model Example Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-obj-model.md Illustrates how to integrate a Wavefront .OBJ model into an A-Frame scene using the primitive. It demonstrates both loading assets via and directly referencing URLs. ```html

``` -------------------------------- ### HTML Example for a-icosahedron Primitive Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-icosahedron.md Demonstrates how to declare an `` primitive in HTML, setting its color and radius attributes to customize its appearance. ```html ``` -------------------------------- ### Install Cordova XHR Local File Plugin Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/installation.md Install the `cordova-plugin-xhr-local-file` plugin. This plugin is crucial for Cordova applications running from `file://` to successfully make XHR requests to local `file://` assets like JSON fonts or 3D models, which would otherwise fail. ```bash cordova plugin add cordova-plugin-xhr-local-file ``` -------------------------------- ### HTML Example: Integrating Hand Tracking Controls Source: https://github.com/8thwall/8frame/blob/master/docs/components/hand-tracking-controls.md Demonstrates how to add left and right hand tracking controls to an A-Frame entity. ```html ``` -------------------------------- ### Include A-Frame via CDN in HTML Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/installation.md This HTML snippet demonstrates the simplest way to integrate A-Frame into a web page by adding a script tag that points to the A-Frame library hosted on a Content Delivery Network (CDN). ```HTML ``` -------------------------------- ### HTML Example: A-Frame Community Components with JSDELIVR CDN Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/entity-component-system.md This HTML example demonstrates how to integrate various A-Frame community components from the Registry using the JSDELIVR CDN. It includes scripts for A-Frame core, particle system, simple sun sky, and A-Frame extras, showcasing a scene with rain, a sphere, an ocean, and a sun/sky. ```html Community Components Example

``` -------------------------------- ### A-Frame HTML with Multiple Component Instances Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/writing-a-component.md Example HTML showing how to attach multiple instances of the same A-Frame component to a single entity using the `__` syntax. ```html

``` -------------------------------- ### A-Frame HTML Entity with Log Component Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/writing-a-component.md Example HTML demonstrating an A-Frame scene containing an `a-entity` with the 'log' component attached, configured with an event and message. ```html

``` -------------------------------- ### Install A-Frame via npm or Yarn Source: https://github.com/8thwall/8frame/blob/master/README.md Installs the A-Frame library as a dependency in your project using either npm or Yarn, allowing it to be managed by a package manager for modern web development workflows. ```sh npm install --save aframe # Or yarn add aframe ``` -------------------------------- ### HTML Example for Windows Motion Controls Source: https://github.com/8thwall/8frame/blob/master/docs/components/windows-motion-controls.md Demonstrates how to add left and right Windows Motion Controllers to an A-Frame scene using the `windows-motion-controls` component. ```html ``` -------------------------------- ### HTML Example: Create a Basic Sphere Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-sphere.md Demonstrates how to create a basic yellow sphere with a radius of 5 units using the `` primitive in an HTML document. ```html ``` -------------------------------- ### A-Frame a-light Primitive Usage Examples Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-light.md Demonstrates various configurations of the `a-light` primitive in A-Frame, including directional, point, ambient, and probe lights. It also shows how to define and use a cubemap for probe lighting. ```html

``` -------------------------------- ### Basic A-Frame Scene Skeleton Source: https://github.com/8thwall/8frame/blob/master/docs/guides/building-a-minecraft-demo.md Initial HTML structure for an A-Frame VR scene, including the A-Frame library script and an empty `a-scene` element. This forms the foundational setup for any A-Frame application. ```html ``` -------------------------------- ### A-Frame HTML Primitives Usage Example Source: https://github.com/8thwall/8frame/blob/master/src/extras/primitives/README.md This example demonstrates how to use A-Frame primitives such as and directly in HTML. These primitives allow developers to define 3D objects with simple, declarative attributes like color, depth, height, width, and src, which are internally mapped to component properties. ```html ``` -------------------------------- ### A-Frame a-image Basic Usage Example Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-image.md Demonstrates how to use the primitive in an A-Frame scene, showing both asset management system usage and inline URL definition for image sources. ```html

``` -------------------------------- ### Run A-Frame Unit Tests Source: https://github.com/8thwall/8frame/blob/master/CONTRIBUTING.md Command to execute the unit tests for the A-Frame project to ensure code quality. ```Shell npm test ``` -------------------------------- ### Create a New Git Branch for Development Source: https://github.com/8thwall/8frame/blob/master/CONTRIBUTING.md Command to create and switch to a new Git branch for making changes in your local repository. ```Shell git checkout -b mybranch ``` -------------------------------- ### A-Frame HTML Entity with Box Component Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/writing-a-component.md Example HTML demonstrating an A-Frame scene with an `a-entity` using the custom 'box' component, configured with specific dimensions and color, and positioned in the scene. ```html

``` -------------------------------- ### Commit and Push Changes to Git Repository Source: https://github.com/8thwall/8frame/blob/master/CONTRIBUTING.md Commands to stage, commit, and push your local changes to your forked Git repository, including a sample commit message. ```Shell git add -A . && git commit -m 'My Changes (fixes #1234)' && git push origin mybranch ``` -------------------------------- ### HTML Example for AR Hit Test Component Source: https://github.com/8thwall/8frame/blob/master/docs/components/ar-hit-test.md Demonstrates how to integrate the `ar-hit-test` component into an `a-scene` element, enabling the `hit-test` optional feature and linking it to a target object. ```html ``` -------------------------------- ### Basic and Textured A-Frame Plane Example Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-plane.md Demonstrates how to create a basic `` with a color and a textured `` with an image source and rotation to make it parallel to the ground in an A-Frame scene. ```html

``` -------------------------------- ### A-Frame Link Primitive Source: https://github.com/8thwall/8frame/blob/master/docs/components/link.md Example demonstrating the simplified syntax for the A-Frame link component using the dedicated `a-link` primitive. This provides a more concise way to define a link with its core properties. ```HTML ``` -------------------------------- ### HTML Example for hand-controls Component Source: https://github.com/8thwall/8frame/blob/master/docs/components/hand-controls.md Demonstrates how to add left and right hand entities using the hand-controls component with custom styles for color and hand model style. ```html ``` -------------------------------- ### Define a Probe Light with Cubemap in HTML Source: https://github.com/8thwall/8frame/blob/master/docs/components/light.md This example demonstrates how to implement a probe light, which provides ambient-like lighting by coloring each angle differently based on a spherical harmonic generated from a cubemap. The cubemap is loaded via `a-assets`. ```html

``` -------------------------------- ### A-Frame Link Component with a-entity Source: https://github.com/8thwall/8frame/blob/master/docs/components/link.md Example demonstrating how to use the A-Frame link component by attaching it to an `a-entity` and referencing an asset for the thumbnail image. This setup allows for custom positioning and styling of the link. ```HTML

``` -------------------------------- ### Initial A-Frame Scene Setup for 360-degree Image Gallery Source: https://github.com/8thwall/8frame/blob/master/docs/guides/building-a-360-image-gallery.md This HTML snippet provides the foundational structure for an A-Frame 360-degree image gallery. It preloads audio and image assets using , sets up a spherical skybox () as the 360-degree image placeholder, and configures a camera with an interactive cursor that includes event-driven animations for visual feedback. ```html

``` -------------------------------- ### JavaScript: Controlling A-Frame Videosphere Playback Programmatically Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-videosphere.md Illustrates how to programmatically interact with an A-Frame videosphere. Examples include setting the video's current time and explicitly calling the play() method on the video texture to start playback. ```javascript // to set specific time of video document.querySelector("#antarctica").components.material.data.src.currentTime = 0 // start of video // to play the videosphere document.querySelector("#antarctica").components.material.material.map.image.play(); ``` -------------------------------- ### Exposing a Local HTTP Server with ngrok Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/visual-inspector-and-dev-tools.md This snippet demonstrates the basic steps to expose a local development server, such as one started with Python's SimpleHTTPServer, to the internet using ngrok. It outlines the command to run ngrok and the expected output URL. ```Shell python -m SimpleHTTPServer 8080 ./ngrok http 8080 ``` -------------------------------- ### Defining a Bash Alias for ngrok Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/visual-inspector-and-dev-tools.md This snippet provides a Bash alias definition to simplify the command for starting ngrok with a reserved subdomain. Once defined, it allows for a shorter, more convenient command execution. ```Bash alias ngrok="~/path/to/ngrok http --subdomain=abc" ``` -------------------------------- ### HTML Example: Using Magic Leap Controls Component Source: https://github.com/8thwall/8frame/blob/master/docs/components/magicleap-controls.md Demonstrates how to integrate the `magicleap-controls` component into an A-Frame entity, showing both default usage and specific hand tracking for left or right controllers. ```html

``` -------------------------------- ### Bundle A-Frame with JavaScript Module Bundlers Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/installation.md This JavaScript snippet shows how to import A-Frame into your application's main script when using module bundlers like Browserify or Webpack, allowing A-Frame to be included in your bundled output. ```JavaScript require('aframe'); ``` -------------------------------- ### Animate A-Frame Entity on Events (HTML) Source: https://github.com/8thwall/8frame/blob/master/docs/guides/building-a-basic-scene.md Demonstrates how to trigger A-Frame entity animations using the `startEvents` attribute. It shows examples for `mouseenter`, `mouseleave`, and `click` events, and how to apply multiple animations to a single entity by suffixing attribute names with `__`. ```HTML ``` -------------------------------- ### Recommended A-Frame Component-Based Codebase Structure Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/entity-component-system.md This example illustrates a recommended file organization for an A-Frame application, promoting a modular and encapsulated component-based development approach where all application logic resides within reusable components. ```text index.html components/ ball.js collidable.js grabbable.js enemy.js scoreboard.js throwable.js ``` -------------------------------- ### Using the Defined ngrok Bash Alias Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/visual-inspector-and-dev-tools.md After defining the Bash alias, this snippet demonstrates how to use the simplified command to start ngrok, passing only the port number. This makes repeated use of ngrok more efficient. ```Bash ngrok 8080 ``` -------------------------------- ### A-Frame HTML Example for Shadow Configuration Source: https://github.com/8thwall/8frame/blob/master/docs/components/shadow.md This example demonstrates how to configure an A-Frame scene with a directional light that casts shadows and a GLTF model that casts shadows but does not receive them. It highlights the independent control over casting and receiving shadows. ```html ``` -------------------------------- ### Add 360 Image Background with A-Frame `` and Asset System Source: https://github.com/8thwall/8frame/blob/master/docs/guides/building-a-basic-scene.md This example shows how to use a 360-degree image as a scene background using the `` primitive. The image is preloaded via the asset management system (``) and then referenced by its ID in the `src` attribute of ``. This creates an immersive panoramic environment. ```html

``` -------------------------------- ### Start Dynamic Behavior of A-Frame Entity Source: https://github.com/8thwall/8frame/blob/master/docs/core/entity.md The `play()` method resumes or starts dynamic behaviors on an A-Frame entity, such as animations and component-defined actions. It is automatically invoked when an entity is attached to the DOM and recursively calls `play()` on child entities. Components use this to re-establish event listeners or resume processes. ```javascript entity.pause(); entity.play(); ``` -------------------------------- ### Add A-Frame Environment Entity with Preset Source: https://github.com/8thwall/8frame/blob/master/docs/guides/building-a-basic-scene.md This code shows how to add an A-Frame entity with the environment component to a scene. It specifies a 'forest' preset and sets the 'dressingAmount' parameter to 500, which controls the density of environmental elements like trees. A basic red box is also included for context. ```html

``` -------------------------------- ### Example A-Frame Scene for DOM Querying Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/javascript-events-dom-apis.md This HTML snippet provides a sample A-Frame scene structure, including various entities with different IDs and classes. This scene serves as a practical example for demonstrating how standard DOM APIs like `querySelector()` and `querySelectorAll()` can be used to select and traverse A-Frame entities. ```HTML

``` -------------------------------- ### Attaching A-Frame Components in HTML Source: https://github.com/8thwall/8frame/blob/master/docs/guides/building-a-minecraft-demo.md This HTML snippet demonstrates how to include A-Frame and custom component scripts, then attach the `random-color` component to an `` using an HTML attribute. It shows a complete A-Frame scene with a box, ground, and sky, illustrating how components extend HTML functionality. ```html

``` -------------------------------- ### Complete Inline A-Frame Embedded Scene Example Source: https://github.com/8thwall/8frame/blob/master/docs/components/embedded.md Presents a fully runnable HTML example demonstrating an A-Frame scene embedded directly into a webpage. It includes the necessary A-Frame library import, custom CSS for the container, and a basic scene with interactive 3D primitives, showcasing the `embedded` component's effect. ```html

``` -------------------------------- ### Configure HTML for A-Frame and CSP in Cordova Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/installation.md Adjust your `index.html` to include a robust Content-Security-Policy (CSP) that allows necessary domains for A-Frame and related assets. This snippet also demonstrates how to include the A-Frame library and initialize your A-Frame scene after the Cordova `deviceready` event. ```html ...

... ``` -------------------------------- ### Apply Image Texture Using A-Frame Asset Management System Source: https://github.com/8thwall/8frame/blob/master/docs/guides/building-a-basic-scene.md This example illustrates the recommended way to manage assets in A-Frame for performance and reusability. An image is defined within `` with a unique ID, and then referenced by its ID using the `src` attribute on the `` element. This allows the browser to cache assets efficiently. ```html

``` -------------------------------- ### A-Frame Entity Position Example Source: https://github.com/8thwall/8frame/blob/master/docs/components/position.md Demonstrates how to set the position of an A-Frame entity using the `position` component directly in HTML. ```html ``` -------------------------------- ### Define Schema with Uniform Properties Source: https://github.com/8thwall/8frame/blob/master/docs/components/material.md Example of defining schema properties that are explicitly passed as uniform values into the shader(s) by including `is: 'uniform'` in their definition. ```javascript AFRAME.registerShader('my-custom', { schema: { color: {type:'color', is:'uniform', default:'red'}, opacity: {type:'number', is:'uniform', default:1.0} }, ... ``` -------------------------------- ### A-Frame Box Geometry Example Source: https://github.com/8thwall/8frame/blob/master/docs/components/geometry.md Demonstrates how to define a box shape using the A-Frame geometry component, specifying its primitive type and dimensions. ```HTML ``` -------------------------------- ### Using an A-Frame Component Declaratively in HTML Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/writing-a-component.md Illustrates how to apply a registered A-Frame component, such as 'hello-world', to an directly within the HTML markup as an attribute. The component's init method will execute once the entity is ready. ```html

``` -------------------------------- ### Example HTML Usage of A-Frame 'follow' Component Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/writing-a-component.md This HTML snippet demonstrates how to apply the 'follow' component to an A-Frame entity. It shows an 'a-box' element configured to follow another 'a-box' identified by its ID '#target-box', with a specified speed of 1 unit per second. This illustrates the declarative way to use A-Frame components in a scene. ```html

``` -------------------------------- ### HTML Example for A-Frame Curved Image Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-curvedimage.md Demonstrates how to use the primitive in an A-Frame scene, showing both asset management and inline URL usage. ```html

``` -------------------------------- ### Add Positional Audio to A-Frame Entity (HTML) Source: https://github.com/8thwall/8frame/blob/master/docs/guides/building-a-basic-scene.md Shows how to integrate positional audio into an A-Frame scene using the `` component. This allows sound volume to dynamically change based on the user's distance from the sound source, enhancing spatial presence. ```HTML

``` -------------------------------- ### HTML Example: WASD Controls with Camera Source: https://github.com/8thwall/8frame/blob/master/docs/components/wasd-controls.md Attaches the `wasd-controls` component to an `a-entity` along with `camera` and `look-controls`, setting an initial position and custom acceleration. ```html ``` -------------------------------- ### Basic A-Frame Camera Scene Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-camera.md Demonstrates a simple A-Frame scene with a box and the default camera primitive, showing how to include a camera in your scene. ```html

``` -------------------------------- ### Include A-Frame Environment Component Scripts Source: https://github.com/8thwall/8frame/blob/master/docs/guides/building-a-basic-scene.md This snippet demonstrates how to include the A-Frame core library and the A-Frame environment component script in the HTML head section. These scripts are necessary to enable A-Frame functionalities and the environment component for procedural environment generation. ```html ``` -------------------------------- ### HTML Example for hide-on-enter-vr Component Source: https://github.com/8thwall/8frame/blob/master/docs/components/hide-on-enter-vr.md Demonstrates how to apply the `hide-on-enter-vr` component to an A-Frame entity. When the user enters VR, this entity will automatically become hidden. ```html ```