Community Components Example

### Example with Multiple Community Components and JSDELIVR Source: https://github.com/aframevr/aframe/blob/master/docs/introduction/entity-component-system.md Demonstrates using various community components like particle systems, sun-sky, and extras, loaded via JSDELIVR CDN. This example showcases a more complex scene setup. ```html Community Components Example

``` -------------------------------- ### A-Frame Scene Setup with Assets and Entities Source: https://context7.com/aframevr/aframe/llms.txt This example demonstrates setting up an A-Frame scene, including preloading assets like models, images, and audio. It also shows how to add entities such as a 3D model, a plane for the ground, a sky, and an entity with sound. Scripting is included to handle scene loading events and provide basic scene interaction. ```html

``` -------------------------------- ### Clone and Run A-Frame Locally Source: https://github.com/aframevr/aframe/blob/master/README.md Steps to clone the A-Frame repository, install dependencies, and start the local development server. ```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 A-Frame Locally with HTTPS Source: https://github.com/aframevr/aframe/blob/master/README.md Instructions for starting the local development server with HTTPS enabled, necessary for testing VR examples. ```sh npm run start:https ``` -------------------------------- ### Basic OBB Collider Setup Source: https://github.com/aframevr/aframe/blob/master/docs/components/obb-collider.md Add the `obb-collider` component to an entity to enable collision detection. This is the most basic setup. ```html ``` -------------------------------- ### Basic Test Structure with Setup and Async/Sync Tests Source: https://github.com/aframevr/aframe/blob/master/tests/README.md Tests are structured with `suite` for modules/components and inner `suite`s for methods/features. Use `setup` for pre-test logic. Differentiate between synchronous tests (no `done`) and asynchronous tests (using `done`). ```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) { setTimeout(function () { assert.notEqual(1, 2); done(); // Use `done` to tell when finished in asynchronous test. }); }); ]); }); ``` -------------------------------- ### Basic a-cursor Setup Source: https://github.com/aframevr/aframe/blob/master/docs/primitives/a-cursor.md This snippet shows the fundamental setup of an a-cursor within an a-scene. The cursor is placed as a child of the a-camera, making it the default interaction point for the scene. ```html

``` -------------------------------- ### Basic Camera Setup Source: https://github.com/aframevr/aframe/blob/master/docs/components/camera.md Use this to set up a camera at human eye level. This position will be overridden by VR devices. ```html ``` -------------------------------- ### Basic Scene Setup with a-camera Source: https://github.com/aframevr/aframe/blob/master/docs/primitives/a-camera.md Include an a-camera primitive within an a-scene to establish the user's viewpoint. This is the most basic setup for an A-Frame experience. ```html

``` -------------------------------- ### Blue Point Light Example Source: https://github.com/aframevr/aframe/blob/master/docs/primitives/a-light.md Sets up a blue point light located 5 meters above the scene origin. ```html ``` -------------------------------- ### Use Component in HTML Source: https://github.com/aframevr/aframe/blob/master/docs/introduction/writing-a-component.md Example of how to use the 'follow' component in HTML, linking a target entity and setting the speed. ```html

``` -------------------------------- ### Basic and Textured a-box Examples Source: https://github.com/aframevr/aframe/blob/master/docs/primitives/a-box.md Demonstrates how to create a basic colored box with specified dimensions and a textured box using an image asset. ```html

``` -------------------------------- ### Registering a Cursor Component with init() Source: https://github.com/aframevr/aframe/blob/master/docs/core/component.md Example of initializing a cursor component. It sets up initial state, binds methods, and attaches an event listener. ```javascript AFRAME.registerComponent('cursor', { // ... init: function () { // Set up initial state and variables. this.intersection = null; // Bind methods. this.onIntersection = this.onIntersection.bind(this); // Attach event listener. this.el.addEventListener('raycaster-intersection', this.onIntersection); } // ... }) ``` -------------------------------- ### Configuring Animation to Start on Custom Event Source: https://github.com/aframevr/aframe/blob/master/docs/components/animation.md Set up an animation to respond to a custom start event. Configuring `startEvents` on an animation automatically disables autoplay, ensuring the animation only begins when the specified event is emitted. ```javascript el.setAttribute('animation__001', {'property': 'position', 'to': {x: 1, y: 1, z: 1}, 'startEvents': 'startanim001'}); ``` -------------------------------- ### Wikipedia Configuration Setup Source: https://github.com/aframevr/aframe/blob/master/examples/showcase/wikipedia/indexMobile.html Initializes and configures various settings for the MediaWiki environment on Wikipedia. This includes setting up internationalization, user preferences, and feature flags. ```javascript (window.RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Burj_Khalifa","wgTitle":"Burj Khalifa","wgCurRevisionId":722672578,"wgRevisionId":722672578,"wgArticleId":794957,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgBreakFrames":false,"wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgMonthNamesShort":["","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"wgRelevantPageName":"Burj_Khalifa","wgRelevantArticleId":794957,"wgRequestId":"V08ACwpAMFcAAFxfcRYAAABL","wgIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgWikiEditorEnabledModules":{"toolbar":true,"dialogs":true,"preview":false,"publish":false},"wgBetaFeaturesFeatures":[],"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","usePageImages":true,"usePageDescriptions":true},"wgMFMode":"stable","wgMFLazyLoadImages":false,"wgMFLazyLoadReferences":false,"wgPreferredVariant":"en","wgRelatedArticles":null,"wgRelatedArticlesUseCirrusSearch":true,"wgRelatedArticlesOnlyUseCirrusSearch":false,"wgULSAcceptLanguageList":["en-us","en"],"wgULSCurrentAutonym":"English","wgFlaggedRevsParams":{"tags":{"status":{"levels":1,"quality":2,"pristine":3}}},"wgStableRevisionId":null,"wgCategoryTreePageCategoryOptions":"{\"mode\":0,\"hideprefix\":20,\"showcount\":true,\"namespaces\":false}","wgNoticeProject":"wikipedia","wgCentralNoticeCategoriesUsingLegacy":["Fundraising","fundraising"],"wgCoordinates":{"lat":25.197138888889,"lon":55.274111111111},"wgWikibaseItemId":"Q12495","wgCentralAuthMobileDomain":true,"wgVisualEditorToolbarScrollOffset":0,"wgMinervaMenuData":{"discovery":[{"name":"home","components":[{"text":"Home","href":"/wiki/Main_Page","class":"mw-ui-icon mw-ui-icon-before mw-ui-icon-mf-home-invert ","data-event-name":"home"}]},{"name":"random","components":[{"text":"Random","href":"/wiki/Special:Random/#/random","class":"mw-ui-icon mw-ui-icon-before mw-ui-icon-mf-random-invert ","id":"randomButton","data-event-name":"random"}]},{"name":"nearby","components":[{"text":"Nearby","href":"/wiki/Special:Nearby","class":"mw-ui-icon mw-ui-icon-before mw-ui-icon-mf-nearby-invert nearby","data-event-name":"nearby"}],"class":"jsonly"}],"personal":[{"name":"watchlist","components":[{"text":"Watchlist","href":"/w/index.php?title=Special:UserLogin\u0026returnto=Special%3AWatchlist\u0026warning=mobile-frontend-watchlist-purpose","c ``` -------------------------------- ### Basic WASD Controls Setup Source: https://github.com/aframevr/aframe/blob/master/docs/components/wasd-controls.md Attach this component to an entity with a camera to enable WASD or arrow key movement. Customize acceleration for faster or slower movement. ```html ``` -------------------------------- ### Reading Thumbstick Values Source: https://github.com/aframevr/aframe/blob/master/docs/components/meta-touch-controls.md This example demonstrates how to listen for thumbstick movement events and log the direction. ```APIDOC ## Read thumbstick values Listen to the `thumbstickmoved` event and the values are available in the object passed to the handler. ### Usage ```html ``` ### JavaScript ```javascript AFRAME.registerComponent('thumbstick-logging',{ init: function () { this.el.addEventListener('thumbstickmoved', this.logThumbstick); }, logThumbstick: function (evt) { if (evt.detail.y > 0.95) { console.log("DOWN"); } if (evt.detail.y < -0.95) { console.log("UP"); } if (evt.detail.x < -0.95) { console.log("LEFT"); } if (evt.detail.x > 0.95) { console.log("RIGHT"); } } }); ``` ``` -------------------------------- ### Create an Empty Entity Source: https://github.com/aframevr/aframe/blob/master/docs/guides/building-a-360-image-gallery.md Start with an empty entity. Without any components, an empty entity does nothing and renders nothing. ```html ``` -------------------------------- ### Basic Laser Controls Setup Source: https://github.com/aframevr/aframe/blob/master/docs/components/laser-controls.md Attach laser-controls to an entity to enable controller input with a laser cursor. Specify the hand ('left' or 'right') for the controller. ```html ``` -------------------------------- ### Basic Hand Tracking Setup Source: https://github.com/aframevr/aframe/blob/master/docs/components/hand-tracking-controls.md Add hand-tracking-controls to your scene to visualize left and right hands. The component is only active when hand tracking is available. ```html ``` -------------------------------- ### Registering a Custom Geometry with Vertices Source: https://github.com/aframevr/aframe/blob/master/docs/components/geometry.md Register a custom geometry named 'example' that takes a 'vertices' array. The init function parses these vertices to create a THREE.BufferGeometry. ```javascript AFRAME.registerGeometry('example', { schema: { vertices: { default: ['-10 10 0', '-10 -10 0', '10 -10 0'], } }, init: function (data) { var geometry = new THREE.BufferGeometry(); const pointsArray = new Array(); data.vertices.map(function (vertex) { var points = vertex.split(' ').map(function(x){return parseInt(x);}); pointsArray.push(new THREE.Vector3(points[0], points[1], points[2])); }); geometry.setFromPoints(pointsArray); geometry.computeBoundingBox(); geometry.computeVertexNormals(); this.geometry = geometry; } }); ``` -------------------------------- ### Basic Reflection Setup with Lighting Estimation Source: https://github.com/aframevr/aframe/blob/master/docs/components/reflection.md Use this snippet to enable the reflection component and link it to a specific directional light for AR lighting estimation. Ensure the directional light is configured for shadow casting. ```html

``` -------------------------------- ### Initialize Logitech MX Ink Controls Source: https://github.com/aframevr/aframe/blob/master/docs/components/logitech-mx-ink-controls.md Attach the logitech-mx-ink-controls component to an entity to enable tracking for either the left or right hand. This is the basic setup required to start receiving input from the pen. ```html ``` -------------------------------- ### Registering a System Source: https://github.com/aframevr/aframe/blob/master/docs/core/systems.md Demonstrates how to register a system using AFRAME.registerSystem. If the system name matches a component name, the component will have a reference to the system. ```APIDOC ## AFRAME.registerSystem(name, system) ### Description Registers a new system with A-Frame. Systems provide global scope, services, and management to classes of components. ### Parameters - **name** (string) - The name of the system. - **system** (object) - The system definition object, which can include schema, lifecycle handlers (init, pause, play, tick), and custom methods. ### Example ```js AFRAME.registerSystem('my-system', { schema: {}, init: function () { // Called on scene initialization. }, // Other handlers and methods. }); AFRAME.registerComponent('my-component', { init: function () { console.log(this.system); } }); ``` ``` -------------------------------- ### Install A-Frame via npm Source: https://github.com/aframevr/aframe/blob/master/README.md Install A-Frame as a project dependency using npm or yarn. ```sh npm install --save aframe # Or yarn add aframe ``` -------------------------------- ### Example A-Frame Scene for Querying Source: https://github.com/aframevr/aframe/blob/master/docs/introduction/javascript-events-dom-apis.md An HTML structure representing an A-Frame scene with various entities. This serves as a target for DOM querying and traversal examples. ```html

``` -------------------------------- ### Install A-Frame via npm Source: https://github.com/aframevr/aframe/blob/master/docs/introduction/installation.md Install A-Frame using npm for use in projects managed with bundlers like Webpack or Vite. This allows A-Frame to be imported directly into your JavaScript modules. ```bash npm install aframe ``` ```javascript import AFRAME from 'aframe'; ``` -------------------------------- ### Create Basic and Textured Rings Source: https://github.com/aframevr/aframe/blob/master/docs/primitives/a-ring.md Demonstrates how to create a basic colored ring and a textured ring. Ensure assets are preloaded using . ```html

``` -------------------------------- ### Inline Embedded A-Scene Example Source: https://github.com/aframevr/aframe/blob/master/docs/components/embedded.md An inline example demonstrating an embedded A-Frame scene. This scene includes basic shapes and shadows, styled by CSS to fit within a specific div. ```html

``` -------------------------------- ### Creating Basic and Textured Planes Source: https://github.com/aframevr/aframe/blob/master/docs/primitives/a-plane.md Demonstrates how to create a basic colored plane and a textured plane with specified dimensions and rotation. Ensure assets are preloaded in . ```html

``` -------------------------------- ### getCanvas() Method Source: https://github.com/aframevr/aframe/blob/master/docs/components/screenshot.md Programmatically take a screenshot and get the resulting canvas element. ```APIDOC ## Methods To take a screenshot programmatically and get a canvas, call `getCanvas()`: ```js // `screenshot.projection` property can be `equirectangular` or `perspective`. document.querySelector('a-scene').components.screenshot.getCanvas('equirectangular'); ``` ``` -------------------------------- ### AFRAME.utils.entity Source: https://github.com/aframevr/aframe/blob/master/docs/core/utils.md Utilities for interacting with A-Frame entities, including getting and setting component properties. ```APIDOC ## `AFRAME.utils.entity.getComponentProperty(entity, componentName, delimiter='.')` ### Description Performs like `Entity.getAttribute`, but with support for returning an individual property for a multi-property component. `componentName` is a string that can either be a component name, or a component name delimited with a property name. ### Parameters #### Path Parameters - **entity** (Element) - The A-Frame entity. - **componentName** (string) - The name of the component or component.property. - **delimiter** (string, optional) - The delimiter to use if `componentName` includes a property. Defaults to '.'. ### Response #### Success Response (any) - Returns the component's data object or a specific property value. ### Example ```javascript // var entity = document.querySelector('#box'); AFRAME.utils.entity.getComponentProperty(entity, 'geometry.primitive'); AFRAME.utils.entity.getComponentProperty(entity, 'geometry|primitive', '|'); // >> 'box' AFRAME.utils.entity.getComponentProperty(entity, 'geometry'); // >> {primitive: 'box', width: 1, ...} ``` ``` ```APIDOC ## `AFRAME.utils.entity.setComponentProperty(entity, componentName, value, delimiter)` ### Description Performs like `Entity.setAttribute`, but with support for setting an individual property for a multi-property component. `componentName` is a string that can either be a component name, or a component name delimited with a property name. ### Parameters #### Path Parameters - **entity** (Element) - The A-Frame entity. - **componentName** (string) - The name of the component or component.property. - **value** (any) - The value to set. - **delimiter** (string, optional) - The delimiter to use if `componentName` includes a property. ### Example ```javascript // var entity = document.querySelector('#box'); AFRAME.utils.entity.setComponentProperty(entity, 'geometry.width', 1); AFRAME.utils.entity.setComponentProperty(entity, 'geometry|height', 2, '|'); AFRAME.utils.entity.setComponentProperty(entity, 'geometry', {depth: 3}); ``` ``` -------------------------------- ### Vive Focus Controls Component Usage Source: https://github.com/aframevr/aframe/blob/master/docs/components/vive-focus-controls.md Examples of how to use the vive-focus-controls component in an A-Frame scene. ```APIDOC ## Basic Usage ```html ``` ## Hand Specific Usage ```html ``` ``` -------------------------------- ### Relative Rotation Example Source: https://github.com/aframevr/aframe/blob/master/docs/components/rotation.md Demonstrates how child entities inherit world-space rotations from parent entities. ```html

``` -------------------------------- ### .init() Source: https://github.com/aframevr/aframe/blob/master/docs/core/component.md Called once at the beginning of the component's lifecycle to set up initial state, bind methods, and attach event listeners. ```APIDOC ## .init () `.init ()` is called once at the beginning of the component's lifecycle. An entity can call the component's `init` handler: - When the component is statically set on the entity in the HTML file and the page is loaded. - When the component is set on an attached entity via `setAttribute`. - When the component is set on an unattached entity, and the entity is then attached to the scene via `appendChild`. The `init` handler is often used to: - Set up initial state and variables - Bind methods - Attach event listeners For example, a cursor component's `init` would set state variables, bind methods, and add event listeners: ```js AFRAME.registerComponent('cursor', { // ... init: function () { // Set up initial state and variables. this.intersection = null; // Bind methods. this.onIntersection = this.onIntersection.bind(this); // Attach event listener. this.el.addEventListener('raycaster-intersection', this.onIntersection); } // ... ``` ``` -------------------------------- ### Red Directional Light Example Source: https://github.com/aframevr/aframe/blob/master/docs/primitives/a-light.md Configures a red directional light positioned at the top left of the scene. ```html ``` -------------------------------- ### Creating and Customizing a-cone Source: https://github.com/aframevr/aframe/blob/master/docs/primitives/a-cone.md Demonstrates how to create a basic cone with specified colors and radii, and how to apply a texture. Ensure assets are preloaded using . ```html

``` -------------------------------- ### Accessing a System Source: https://github.com/aframevr/aframe/blob/master/docs/core/systems.md Shows how to access an instantiated system through the scene element or registered system prototypes. ```APIDOC ## Accessing a System ### Description Instantiated systems can be accessed through the scene element, and registered system prototypes can be accessed through `AFRAME.systems`. ### Usage Accessing an instantiated system: ```js document.querySelector('a-scene').systems[systemName]; ``` Accessing registered system prototypes: ```js AFRAME.systems[systemName]; ``` ``` -------------------------------- ### Set up Player Entity with Camera and Hands Source: https://github.com/aframevr/aframe/blob/master/docs/guides/building-a-minecraft-demo.md Structure the scene by defining a 'player' entity that encapsulates the camera and hand controllers. This setup is necessary for components like 'blink-controls' to function correctly. ```html

``` -------------------------------- ### Listen to A-Frame Synthetic Events Source: https://github.com/aframevr/aframe/blob/master/docs/introduction/interactions-and-controllers.md Example of listening to a custom synthetic event, such as 'collide', emitted by an A-Frame component. ```javascript // `collide` event emitted by a component such as some collider or physics component. document.querySelector('a-entity').addEventListener('collide', function (evt) { console.log('This A-Frame entity collided with another entity!'); }); ``` -------------------------------- ### Playing Videos with a-video Source: https://github.com/aframevr/aframe/blob/master/docs/primitives/a-video.md Demonstrates how to use the a-video primitive to play videos, either by referencing assets loaded via a-assets or by providing a direct URL. Ensure videos are properly sized to maintain aspect ratio. ```html

``` ```html ``` -------------------------------- ### Playing Sound on an Event Source: https://github.com/aframevr/aframe/blob/master/docs/components/sound.md Example of configuring the sound component to play audio in response to a specific entity event. ```APIDOC ## Playing on an Event The `sound` component can also listen to an event before playing as well. For example, we might have a laughing sound play every time we click a monster: ```html ``` ``` -------------------------------- ### Creating a-triangle Primitives Source: https://github.com/aframevr/aframe/blob/master/docs/primitives/a-triangle.md Demonstrates how to create basic and textured triangles using the a-triangle primitive. Includes setting color, vertex coordinates, and applying textures. ```html

``` -------------------------------- ### Basic a-image Usage Source: https://github.com/aframevr/aframe/blob/master/docs/primitives/a-image.md Demonstrates how to use the a-image primitive with both the asset management system and inline image URLs. Using the asset management system is recommended for better performance and organization. ```html

``` -------------------------------- ### Dim Ambient Light Example Source: https://github.com/aframevr/aframe/blob/master/docs/primitives/a-light.md Creates dim, overall ambient lighting for the scene using a dark gray color. ```html ``` -------------------------------- ### Entity with Light Component Source: https://github.com/aframevr/aframe/blob/master/docs/core/entity.md Attach a light component to an entity to make it emit light. This example shows a point light. ```html ``` -------------------------------- ### Preloading Sound Assets Source: https://github.com/aframevr/aframe/blob/master/docs/components/sound.md Demonstrates how to preload sound assets using the A-Frame asset management system for improved performance. ```APIDOC ## Preloading a Sound Asset For performance, we recommend to block the scene on the sound asset to preload and cache. We can do so through the asset management system: ```html

``` ``` -------------------------------- ### Displaying an OBJ Model with Assets Source: https://github.com/aframevr/aframe/blob/master/docs/primitives/a-obj-model.md Use the asset management system to pre-load OBJ and MTL files. This is the recommended approach for better performance and organization. ```html

``` -------------------------------- ### Tracked Controls Configuration Source: https://github.com/aframevr/aframe/blob/master/docs/components/tracked-controls.md Example of how to use the tracked-controls component with an entity, specifying controller index and an ID prefix for identification. ```APIDOC ## tracked-controls Component Configuration ### Description This example shows how to attach and configure the `tracked-controls` component to an A-Frame entity. It demonstrates setting the `controller` index and using `idPrefix` to reliably identify specific controllers, such as Vive controllers. ### Component Usage ```html ``` ### Properties - `autoHide` (boolean): Whether to toggle visibility automatically when controller is connected or disconnected. Default: `true`. - `controller` (number): Index of the controller in the array returned by the Gamepad API. Default: `0`. - `id` (string): Selects the controller from the Gamepad API using an exact match. - `idPrefix` (string): Selects the controller from the Gamepad API using a prefix match. - `headElement` (Element): Head element for the arm model if needed (if not the active camera). - `hand` (string): Which hand to use for the arm model (e.g., 'left' negates X-axis). Default: `right`. - `space` (string): Specifies whether to use `targetRaySpace` or `gripSpace` to determine controller pose. Default: `targetRaySpace`. ``` -------------------------------- ### Create an Ocean using the a-ocean Primitive Source: https://github.com/aframevr/aframe/blob/master/docs/introduction/html-and-primitives.md Demonstrates how to create an ocean entity using the registered `a-ocean` primitive with custom color and dimensions specified via HTML attributes. ```html ``` -------------------------------- ### Pool Component Configuration Source: https://github.com/aframevr/aframe/blob/master/docs/components/pool.md Example of configuring the pool component on an A-Scene element. This preallocates 10 entities with the 'enemy' mixin. ```APIDOC ## Pool Component Configuration ### Description Configure the pool component to preallocate a specific number of entities with a given mixin. ### HTML Example ```html ``` ### Properties - **container** (string) - Selector to store pooled entities. Defaults to the scene. - **dynamic** (boolean) - Grow the pool automatically if more entities are requested after reaching the `size`. Defaults to `false`. - **mixin** (string) - Mixin required to initialize the entities of the pool. - **size** (number) - Number of preallocated entities in the pool. Defaults to `0`. ``` -------------------------------- ### Import A-Frame and Three.js Modules Source: https://github.com/aframevr/aframe/blob/master/examples/showcase/post-processing/index.html Imports necessary A-Frame and Three.js modules for post-processing. Ensure the paths are correct for your project setup. ```javascript import AFRAME from 'aframe'; // Assuming Three.js is available globally or imported separately // If using modules, you might need: // import * as THREE from 'three'; // import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; // import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; // import { BloomPass } from 'three/addons/postprocessing/BloomPass.js'; // import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; // import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; // import { BloomPass } from 'three/addons/postprocessing/BloomPass.js'; ``` -------------------------------- ### Include A-Frame and Custom Component in HTML Source: https://github.com/aframevr/aframe/blob/master/docs/guides/building-a-minecraft-demo.md Set up an HTML file to use A-Frame and a custom component. This includes the A-Frame library, the custom component's JavaScript file, and an example entity with the custom component attached. ```html

``` -------------------------------- ### Initialize Box Component Source: https://github.com/aframevr/aframe/blob/master/docs/introduction/writing-a-component.md Creates a three.js box mesh, material, and geometry, then attaches it to the A-Frame entity. Use this for initial setup. ```javascript AFRAME.registerComponent('box', { schema: { width: {type: 'number', default: 1}, height: {type: 'number', default: 1}, depth: {type: 'number', default: 1}, color: {type: 'color', default: '#AAA'} }, /** * Initial creation and setting of the mesh. */ init: function () { var data = this.data; var el = this.el; // Create geometry. this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth); // Create material. this.material = new THREE.MeshStandardMaterial({color: data.color}); // Create mesh. this.mesh = new THREE.Mesh(this.geometry, this.material); // Set mesh on entity. el.setObject3D('mesh', this.mesh); } }); ``` -------------------------------- ### Basic A-Frame Scene with Cursor Source: https://github.com/aframevr/aframe/blob/master/docs/guides/building-a-basic-scene.md Sets up a basic A-Frame scene including assets, a box with an animation, and a camera with a cursor for interaction. ```html

``` -------------------------------- ### Add Gaze-Based Interaction with A-Cursor Source: https://github.com/aframevr/aframe/blob/master/docs/introduction/interactions-and-controllers.md Basic A-Frame scene setup to enable gaze-based interactions by attaching an A-cursor component to the camera. ```html

``` -------------------------------- ### Animate Box Hovering Source: https://github.com/aframevr/aframe/blob/master/docs/guides/building-a-basic-scene.md Use the `animation` component to create motion. This example makes a box hover up and down by animating its `object3D.position.y` property. ```html

``` -------------------------------- ### Using the Box Component in HTML Source: https://github.com/aframevr/aframe/blob/master/docs/introduction/writing-a-component.md Illustrates how to use the 'box' component in HTML, configuring its properties like width, height, depth, and color, along with its position. ```html

``` -------------------------------- ### Create a Yellow Sphere Source: https://github.com/aframevr/aframe/blob/master/docs/primitives/a-sphere.md Use the a-sphere primitive to create a sphere with a specified color and radius. This is a basic example of how to instantiate a sphere. ```html ``` -------------------------------- ### Initialize A-Frame Component Template Source: https://github.com/aframevr/aframe/blob/master/docs/introduction/writing-a-component.md Use the 'angle' CLI to set up a new A-Frame component project. This command initializes a template for publishing to GitHub and npm. ```sh npm install -g angle && angle initcomponent ``` -------------------------------- ### Single-Property Component Usage in HTML Source: https://github.com/aframevr/aframe/blob/master/docs/core/component.md Example of using a single-property component in HTML. The value is passed directly as the component's attribute. ```html

``` -------------------------------- ### Configure Scene Shadow System Source: https://github.com/aframevr/aframe/blob/master/docs/components/light.md Set global shadow properties for the entire scene using the `shadow` system on the `` element. This example sets the shadow type to `pcfsoft` for softer shadows. ```html ``` -------------------------------- ### Single-Property Component HTML Source: https://github.com/aframevr/aframe/blob/master/docs/core/component.md Example of how to use a single-property component in HTML. The attribute value directly represents the component's data. ```html ``` -------------------------------- ### Composing an Entity with Multiple Components Source: https://github.com/aframevr/aframe/blob/master/docs/introduction/entity-component-system.md This example demonstrates how to attach multiple components to an to define its appearance, behavior, and functionality. Each component adds specific features without needing to know about others. ```html ``` -------------------------------- ### Windows Motion Controls Component Usage Source: https://github.com/aframevr/aframe/blob/master/docs/components/windows-motion-controls.md Example of how to use the windows-motion-controls component on an A-Frame entity to track left and right hands. ```APIDOC ## windows-motion-controls Component ### Description Interfaces with any spatial controllers exposed through Windows Mixed Reality as Spatial Input Sources (such as Motion Controllers). It wraps the `tracked-controls` component while adding button mappings, events, and a controller model that highlights applies position/rotation transforms to the pressed buttons (trigger, grip, menu, thumbstick, trackpad) and moved axes (thumbstick and trackpad). ### Properties | Property | Description | Default Value | |---|---|---| | hand | The hand that will be tracked (i.e., right, left). | right | | pair | Which pair of controllers, if > 2 are connected. | 0 | | model | Whether the controller model is loaded. | true | ### Events | Event Name | Description | |---|---| | thumbstickdown | Thumbstick button pressed. | | thumbstickup | Thumbstick button released. | | thumbstickchanged | Thumbstick button changed. | | thumbstickmoved | Thumbstick axis moved. | | triggerdown | Trigger pressed. | | triggerup | Trigger released. | | triggerchanged | Trigger changed. | | gripdown | Grip button pressed. | | gripup | Grip button released. | | gripchanged | Grip button changed. | | menudown | Menu button pressed. | | menuup | Menu button released. | | menuchanged | Menu button changed. | | trackpaddown | Trackpad pressed. | | trackpadup | Trackpad released. | | trackpadchanged | Trackpad button changed. | | trackpadmoved | Trackpad axis moved. | | controllermodelready | The model file is loaded and completed parsing. | ### Example ```html ``` ``` -------------------------------- ### Using Multiple Component Instances in HTML Source: https://github.com/aframevr/aframe/blob/master/docs/introduction/writing-a-component.md Shows how to attach multiple instances of the 'log' component to a single entity using the `__` syntax in HTML. ```html

```