Community Components Example

### Install dependencies and start development server Source: https://github.com/8thwall/8frame/blob/master/CONTRIBUTING.md Run these commands to install project dependencies and launch the local development server for testing examples. ```bash npm install ``` ```bash npm start ``` -------------------------------- ### Basic Camera Implementation Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-camera.md A standard camera setup within an a-scene. ```html

``` -------------------------------- ### play() Source: https://github.com/8thwall/8frame/blob/master/docs/core/entity.md Starts dynamic behavior of the entity. ```APIDOC ## play() ### Description Starts any dynamic behavior as defined by animations and components. ``` -------------------------------- ### Initialize Local Development Environment Source: https://github.com/8thwall/8frame/blob/master/README.md Commands to clone the repository, install dependencies, and launch 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. ``` -------------------------------- ### Define Component with Members and Methods Source: https://github.com/8thwall/8frame/blob/master/docs/core/component.md Example of registering a component with custom properties and functions. ```javascript AFRAME.registerComponent('foo', { init: function () { this.bar = 'baz'; }, qux: function () { // ... } }); ``` -------------------------------- ### Define scene lights with Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-light.md Examples of configuring different light types and using a cubemap for probe lighting. ```html

``` -------------------------------- ### Basic A-Frame Scene Setup Source: https://github.com/8thwall/8frame/blob/master/README.md A minimal HTML structure to initialize an A-Frame scene with basic geometric primitives. ```html

``` -------------------------------- ### Install Cordova Plugin Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/installation.md Install the required plugin to enable XHR requests for local file assets. ```bash cordova plugin add cordova-plugin-xhr-local-file ``` -------------------------------- ### Start a local development server Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/installation.md Commands to serve files locally for development. Use these to avoid issues with the file:// protocol. ```bash npm i -g five-server@latest && five-server --port=8000 ``` ```bash python -m SimpleHTTPServer ``` ```bash python -m http.server ``` -------------------------------- ### Project Structure Example Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/entity-component-system.md A typical directory layout for an A-Frame project organized by modular components. ```text index.html components/ ball.js collidable.js grabbable.js enemy.js scoreboard.js throwable.js ``` -------------------------------- ### Initialize a component template with angle Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/writing-a-component.md Installs the angle CLI globally and initializes a new component project structure. ```sh npm install -g angle && angle initcomponent ``` -------------------------------- ### Initialize Vive Focus Controls Source: https://github.com/8thwall/8frame/blob/master/docs/components/vive-focus-controls.md Use these examples to attach the Vive Focus controller component to an entity, optionally specifying the hand. ```html

``` -------------------------------- ### Inline embedded scene example Source: https://github.com/8thwall/8frame/blob/master/docs/components/embedded.md A complete example showing the inclusion of the A-Frame library, CSS styling for the container, and an embedded scene with basic primitives. ```html

``` -------------------------------- ### Define Material Properties Source: https://github.com/8thwall/8frame/blob/master/docs/components/material.md Example of defining basic material properties in the schema. ```js AFRAME.registerShader('custom', { schema: { emissive: {default: '#000'}, wireframe: {default: false} } }); ``` -------------------------------- ### Install A-Frame via npm Source: https://github.com/8thwall/8frame/blob/master/README.md Commands and syntax for adding A-Frame as a dependency in a Node.js project. ```sh npm install --save aframe # Or yarn add aframe ``` ```js require('aframe') // e.g., with Browserify or Webpack. ``` -------------------------------- ### Run ngrok with a reserved subdomain Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/visual-inspector-and-dev-tools.md Starts an ngrok tunnel using a pre-reserved subdomain for consistent URL access. ```bash ./ngrok http --subdomain=abc 8080 ``` -------------------------------- ### Default Lighting Configuration Source: https://github.com/8thwall/8frame/blob/master/docs/components/light.md Example of the ambient and directional lights that A-Frame injects by default. ```html

``` -------------------------------- ### Initialize Oculus Touch Controllers Source: https://github.com/8thwall/8frame/blob/master/docs/components/oculus-touch-controls.md Basic setup for left and right Oculus Touch controllers using a-entity. ```html ``` -------------------------------- ### Convert video to GIF with gifpardy Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/hosting-and-publishing.md Use these command-line examples to convert MP4 files into GIFs using the gifpardy tool. ```bash gifpardy in.mp4 gifpardy in.mp4 out.gif gifpardy -r 320x240 --delay 8 in.mp4 ``` -------------------------------- ### Reference component CDN link Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/entity-component-system.md Example of a specific CDN URL for the particle system component. ```text https://unpkg.com/aframe-particle-system-component@1.0.9/dist/aframe-particle-system-component.min.js ``` -------------------------------- ### Integrate Community Components via JSDELIVR Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/entity-component-system.md A complete HTML example demonstrating the inclusion of A-Frame and various community components using JSDELIVR CDN links. ```html Community Components Example

``` -------------------------------- ### Camera Rig Setup Source: https://github.com/8thwall/8frame/blob/master/docs/components/camera.md Uses a parent entity as a rig to move or rotate the camera relative to the scene while maintaining height offsets. ```html

``` -------------------------------- ### Configure WebXR Session Features Source: https://github.com/8thwall/8frame/blob/master/docs/components/webxr.md Example of setting required and optional WebXR features along with an overlay element on an A-Frame scene. ```html ``` -------------------------------- ### Set Default Values from Property Types Source: https://github.com/8thwall/8frame/blob/master/docs/core/component.md Examples of how the schema system assigns default values when only the property type is specified. ```js schema: {type: 'number'} // default: 0 schema: {type: 'string'} // default: '' schema: {type: 'vec3'} // default: {x: 0, y: 0, z: 0} ``` -------------------------------- ### Structure a test suite Source: https://github.com/8thwall/8frame/blob/master/tests/README.md Standard structure for test suites, including setup hooks and both synchronous and asynchronous test cases. ```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. }); }); }); }); ``` -------------------------------- ### Initialize Scene with React Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/installation.md Use the deviceready event to trigger rendering when using a framework like React. ```javascript document.addEventListener('deviceready', () => { ReactDOM.render(, document.getElementById('root')) }) ``` -------------------------------- ### MediaWiki Loader Implementation Source: https://github.com/8thwall/8frame/blob/master/examples/showcase/wikipedia/index.html Sets user options and tokens, then loads required MediaWiki modules. ```javascript mw.loader.implement("user.options",function($,jQuery,require,module){mw.user.options.set({"variant":"en"});});mw.loader.implement("user.tokens",function ( $, jQuery, require, module ) { mw.user.tokens.set({"editToken":"+\\","patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"});/*@nomin*/; });mw.loader.load(["mw.MediaWikiPlayer.loader","mw.PopUpMediaTransform","mw.TMHGalleryHook.js","mediawiki.page.startup","mediawiki.legacy.wikibits","ext.centralauth.centralautologin","mmv.head","ext.visualEditor.desktopArticleTarget.init","ext.uls.init","ext.uls.interface","ext.quicksurveys.init","ext.centralNotice.bannerController","skins.vector.js"]);}); ``` -------------------------------- ### Configure index.html for A-Frame Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/installation.md Update the Content Security Policy and initialize the scene after the deviceready event. ```html ...

... ``` -------------------------------- ### Define an A-Frame scene with a component Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/writing-a-component.md Example of declaring an entity with the custom log component in HTML. ```html

``` -------------------------------- ### Initialize Windows Motion Controllers Source: https://github.com/8thwall/8frame/blob/master/docs/components/windows-motion-controls.md Basic implementation of left and right hand motion controllers using A-Frame entities. ```html ``` -------------------------------- ### Register a basic component Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/writing-a-component.md Defines a component named 'hello-world' that logs a message upon initialization. ```js AFRAME.registerComponent('hello-world', { init: function () { console.log('Hello, World!'); } }); ``` -------------------------------- ### Physically-Based Shading Material Source: https://github.com/8thwall/8frame/blob/master/docs/components/material.md Example of configuring a material with physically-based properties like roughness and metalness. ```html ``` -------------------------------- ### Accessing Systems Source: https://github.com/8thwall/8frame/blob/master/docs/core/systems.md Methods for retrieving instantiated systems or system prototypes. ```APIDOC ## Accessing Systems ### Description Instantiated systems can be accessed via the scene element, while registered system prototypes are available through the AFRAME global object. ### Accessing an Instance `document.querySelector('a-scene').systems[systemName];` ### Accessing Prototypes `AFRAME.systems;` ``` -------------------------------- ### Get Entity Component Properties Source: https://github.com/8thwall/8frame/blob/master/docs/core/utils.md Retrieves specific properties from multi-property components using a delimiter. ```js // 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, ...} ``` -------------------------------- ### Set visibility on hover Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/interactions-and-controllers.md A simple example of using event-set to toggle visibility when the cursor enters an entity. ```html ``` -------------------------------- ### Adding a Videosphere Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-videosphere.md Demonstrates how to define a videosphere using the asset management system or an inline URL. ```html

``` -------------------------------- ### Phong-Based Shading Material Source: https://github.com/8thwall/8frame/blob/master/docs/components/material.md Example of using the Phong shader model for a material with specific reflectivity and shininess. ```html ``` -------------------------------- ### Initialize Vive Controllers Source: https://github.com/8thwall/8frame/blob/master/docs/components/vive-controls.md Add left and right Vive controller entities to the scene. ```html ``` -------------------------------- ### Define A-Frame scene structure Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/developing-with-threejs.md Example of an A-Frame scene hierarchy that maps to a three.js scene graph. ```html

``` -------------------------------- ### Read Thumbstick Values Source: https://github.com/8thwall/8frame/blob/master/docs/components/oculus-touch-controls.md Example of attaching a custom component to read thumbstick movement data from the controller. ```html ``` ```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"); } } }); ``` -------------------------------- ### Using the a-ocean primitive in HTML Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/html-and-primitives.md Shows how to instantiate the registered a-ocean primitive using standard HTML syntax. ```html ``` -------------------------------- ### Set Basis transcoder path via CDN Source: https://github.com/8thwall/8frame/blob/master/docs/components/gltf-model.md Example of providing a CDN URL for the basisTranscoderPath configuration. ```text basisTranscoderPath:https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/libs/basis/; ``` -------------------------------- ### Basic Camera Setup Source: https://github.com/8thwall/8frame/blob/master/docs/components/camera.md Positions the camera at human eye level, which is typically 1.6 meters above the ground. ```html ``` -------------------------------- ### Gathering Components in a System Source: https://github.com/8thwall/8frame/blob/master/docs/core/systems.md Implement a subscription pattern where components register themselves with the system during initialization. ```js AFRAME.registerSystem('my-component', { init: function () { this.entities = []; }, registerMe: function (el) { this.entities.push(el); }, unregisterMe: function (el) { var index = this.entities.indexOf(el); this.entities.splice(index, 1); } }); AFRAME.registerComponent('my-component', { init: function () { this.system.registerMe(this.el); }, remove: function () { this.system.unregisterMe(this.el); } }); ``` -------------------------------- ### Configure Asset Preloading Source: https://github.com/8thwall/8frame/blob/master/docs/core/asset-management-system.md Demonstrates how to control asset loading behavior using autoplay and preload attributes within a-assets. ```html

``` -------------------------------- ### Initialize Resource Loader and Load Modules Source: https://github.com/8thwall/8frame/blob/master/examples/showcase/wikipedia/index.html Initializes the Resource Loader queue and loads essential MediaWiki modules for site functionality. ```javascript (window.RLQ=window.RLQ||[]).push(function(){mw.loader.state({"ext.globalCssJs.site":"ready","ext.globalCssJs.user":"ready","user":"ready","user.groups":"ready"});mw.loader.load(["ext.cite.a11y","mediawiki.toc","mediawiki.action.view.postEdit","site","mediawiki.user","mediawiki.hidpi","mediawiki.page.ready","mediawiki.searchSuggest","ext.eventLogging.subscriber","ext.gadget.teahouse","ext.gadget.ReferenceTooltips","ext.gadget.DRN-wizard","ext.gadget.charinsert","ext.gadget.refToolbar","ext.gadget.switcher","ext.gadget.featured-articles-links","mmv.bootstrap.autostart","ext.visualEditor.targetLoader","ext.wikimediaEvents","ext.navigationTiming","schema.UniversalLanguageSelector","ext.uls.eventlogger","ext.uls.interlanguage"]);}); ``` -------------------------------- ### Listen to A-Frame Synthetic Events Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/interactions-and-controllers.md Example of listening for a custom synthetic event emitted by an A-Frame component, such as a collision. ```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!'); }); ``` -------------------------------- ### Initialize component state with init Source: https://github.com/8thwall/8frame/blob/master/docs/core/component.md Use the init method to set up initial variables, bind methods, and attach event listeners when a component is first created. ```js AFRAME.registerComponent('cursor', { // ... init: function () { // Set up initial state and variables. this.intersection = null; // Bind methods. this.onIntersection = AFRAME.utils.bind(this.onIntersection, this); // Attach event listener. this.el.addEventListener('raycaster-intersection', this.onIntersection); } // ... ``` -------------------------------- ### Create a box primitive Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-box.md Basic implementation showing how to define a colored box with specific dimensions and a textured box using an asset reference. ```html

``` -------------------------------- ### Define Nested A-Frame Entities Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/developing-with-threejs.md Example of a parent-child entity structure where the child's position is relative to the parent. ```html

``` -------------------------------- ### Initialize hand-tracking-grab-controls Source: https://github.com/8thwall/8frame/blob/master/docs/components/hand-tracking-grab-controls.md Attach the component to hand entities to enable tracking for specific hands. ```html ``` -------------------------------- ### Add custom lighting to the scene Source: https://github.com/8thwall/8frame/blob/master/docs/guides/building-a-basic-scene.md Configures ambient and point lights to replace the default A-Frame lighting setup. ```html

``` -------------------------------- ### Initialize Real-World Meshing Source: https://github.com/8thwall/8frame/blob/master/docs/components/real-world-meshing.md Apply the component to the a-scene element to enable environment surface detection. ```html ``` -------------------------------- ### Infer Property Types from Defaults Source: https://github.com/8thwall/8frame/blob/master/docs/core/component.md Examples of how the schema system infers the property type based on the provided default value. ```js schema: {default: 10} // type: "number" schema: {default: "foo"} // type: "string" schema: {default: [1, 2, 3]} // type: "array" ``` -------------------------------- ### enterVR() Source: https://github.com/8thwall/8frame/blob/master/docs/core/scene.md Switches the scene to stereo rendering and pushes content to the headset. Must be triggered by a user-generated event like a click. ```APIDOC ## enterVR() ### Description Switches to stereo render and pushes content to the headset. This method must be called within a user-generated event handler (e.g., click) the first time a page enters VR. ``` -------------------------------- ### Displaying a 3D Wavefront model Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-obj-model.md Demonstrates loading an OBJ model and its associated MTL file using both the asset management system and direct inline URLs. ```html

``` -------------------------------- ### Compare primitive and entity-component syntax Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/html-and-primitives.md Demonstrates how a primitive element maps to its underlying entity-component representation. ```html ``` ```html ``` -------------------------------- ### Create a cone primitive in HTML Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-cone.md Demonstrates basic usage of the a-cone element, including setting colors, radii, and applying textures via assets. ```html

``` -------------------------------- ### Accessing an Instantiated System Source: https://github.com/8thwall/8frame/blob/master/docs/core/systems.md Retrieve an active system instance from the scene element. ```js document.querySelector('a-scene').systems[systemName]; ``` -------------------------------- ### Chained Animation Setup Source: https://github.com/8thwall/8frame/blob/master/docs/guides/building-a-360-image-gallery.md Defines two animations on an a-sky element to handle fading to black and back to normal, triggered by proxied and completion events. ```html ``` -------------------------------- ### Set Backend Configuration Source: https://github.com/8thwall/8frame/blob/master/examples/showcase/wikipedia/index.html Sets global configuration parameters for the MediaWiki backend, including response time and hostname. ```javascript (window.RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgBackendResponseTime":129,"wgHostname":"mw1171"});}); ``` -------------------------------- ### Run unit tests Source: https://github.com/8thwall/8frame/blob/master/CONTRIBUTING.md Execute the test suite to ensure your changes do not break existing functionality. ```bash npm test ``` -------------------------------- ### Define lines on an entity Source: https://github.com/8thwall/8frame/blob/master/docs/components/line.md Use the line component to specify start and end coordinates with colors. Multiple lines can be added to a single entity using IDs. ```html ``` -------------------------------- ### Basic laser-controls implementation Source: https://github.com/8thwall/8frame/blob/master/docs/components/laser-controls.md Initializes a laser-controlled entity for a specific hand. ```html ``` -------------------------------- ### line component Source: https://github.com/8thwall/8frame/blob/master/docs/components/line.md The line component draws a line between a start and end coordinate. It can be applied to entities and supports multiple lines per entity using the line__ID syntax. ```APIDOC ## line component ### Description The line component draws a line given a start coordinate and end coordinate using THREE.Line. ### Properties - **start** (vec3) - Optional - Start point coordinate. Default: 0 0 0 - **end** (vec3) - Optional - End coordinate. Default: 0 0 0 - **color** (color) - Optional - Line color. Default: #74BEC1 - **opacity** (number) - Optional - Line opacity. Default: 1 - **visible** (boolean) - Optional - Whether the material is visible. Default: true ### Usage Example ``` -------------------------------- ### Basic Video Primitive Usage Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-video.md Demonstrates using the asset management system for optimized video loading and inline URL definition. ```html

``` -------------------------------- ### Implement Non-ASCII Characters with Custom MSDF Fonts Source: https://github.com/8thwall/8frame/blob/master/docs/components/text.md Example of setting up a scene with a custom MSDF font to support non-ASCII characters, ensuring the correct meta charset is defined. ```html

``` -------------------------------- ### Generate Project Builds Source: https://github.com/8thwall/8frame/blob/master/README.md Command to trigger the distribution build process. ```sh npm run dist ``` -------------------------------- ### .update(oldData) Source: https://github.com/8thwall/8frame/blob/master/docs/core/component.md The .update() method is called whenever the component's properties change, including at the start of the lifecycle. It allows for granular updates by comparing current data with the previous state. ```APIDOC ## .update(oldData) ### Description Called after initialization and whenever component properties are updated via setAttribute. Use this to apply changes to the entity based on this.data. ### Parameters - **oldData** (Object) - The state of the component data before the update occurred. ``` -------------------------------- ### Configure tracked-controls with idPrefix Source: https://github.com/8thwall/8frame/blob/master/docs/components/tracked-controls.md Use idPrefix to ensure compatibility with Vive/OpenVR controllers that may report varying id strings. ```html ``` -------------------------------- ### Define component initialization order with dependencies Source: https://github.com/8thwall/8frame/blob/master/docs/core/component.md Use the dependencies array to ensure specific components are initialized before the current one. ```javascript // Initializes last. AFRAME.registerComponent('a', { dependencies: ['b'] }); // Initializes second. AFRAME.registerComponent('b', { dependencies: ['c'] }); // Initializes first. AFRAME.registerComponent('c', {}); ``` -------------------------------- ### Attaching Components in HTML Source: https://github.com/8thwall/8frame/blob/master/docs/guides/building-a-minecraft-demo.md Demonstrates how to include a custom component script and apply it to an entity within an A-Frame scene. ```html

``` -------------------------------- ### Initialize A-Frame scene with angle Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/installation.md Use the angle CLI to quickly initialize a new A-Frame scene template. ```sh npm install -g angle && angle initscene ``` -------------------------------- ### Registering a System and Component Source: https://github.com/8thwall/8frame/blob/master/docs/core/systems.md Register a system to provide shared logic to components. If names match, components access the system via this.system. ```js AFRAME.registerSystem('my-component', { schema: {}, // System schema. Parses into `this.data`. init: function () { // Called on scene initialization. }, // Other handlers and methods. }); AFRAME.registerComponent('my-component', { init: function () { console.log(this.system); } }); ``` -------------------------------- ### Configure Lights for Shadows Source: https://github.com/8thwall/8frame/blob/master/docs/components/light.md Sets up an ambient light for base illumination and a directional light configured to cast shadows. ```html

``` -------------------------------- ### Attach physics components to primitives Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/html-and-primitives.md Demonstrates including the physics system script and applying dynamic-body and static-body components to A-Frame primitives. ```html

``` -------------------------------- ### Initialize and manage pooled entities Source: https://github.com/8thwall/8frame/blob/master/docs/components/pool.md Configure the pool component via HTML and manage entity lifecycle using JavaScript methods. ```html ``` ```js var el = sceneEl.components.pool__enemy.requestEntity(); el.play(); sceneEl.components.pool__enemy.returnEntity(el); ``` -------------------------------- ### .init() Source: https://github.com/8thwall/8frame/blob/master/docs/core/component.md The .init() method is called once at the beginning of the component's lifecycle. It is typically used for setting up initial state, binding methods, and attaching event listeners. ```APIDOC ## .init() ### Description Called once when the component is initialized on an entity. Used for setup tasks like variable initialization and event binding. ### Usage ```js AFRAME.registerComponent('my-component', { init: function () { // Setup logic here } }); ``` ``` -------------------------------- ### Define an entity with component properties Source: https://github.com/8thwall/8frame/blob/master/docs/introduction/entity-component-system.md Demonstrates the syntax for attaching multiple components with specific property values to an a-entity. ```html ``` -------------------------------- ### Displaying a glTF model in A-Frame Source: https://github.com/8thwall/8frame/blob/master/docs/primitives/a-gltf-model.md Demonstrates loading a glTF model using the asset management system and via an inline URL. ```html

```