Tutorial by Examples

We place assets within <a-assets>, and we place <a-assets> within <a-scene>. Assets include: <a-asset-item> - Miscellaneous assets such as 3D models and materials <audio> - Sound files <img> - Image textures <video> - Video textures The scene won't...

Since A-Frame fetches assets using XHRs, browser security requires the browser to serve assets with cross-origin resource sharing (CORS) headers if the asset is on a different domain. Otherwise, we'd have to host assets on the same origin as the scene. For some options, GitHub Pages serves every...

Audio and video assets will only block the scene if we set autoplay or if we set preload="auto": <a-scene> <a-assets> <!-- These will not block. --> <audio src="blockus.mp3"></audio> <video src="loadofblocks.mp4">&...

We can set a timeout that when reached, the scene will begin rendering and entities will begin initializing regardless of whether all the assets have loaded. The default timeout is 3 seconds. To set a different timeout, we just pass in the number of milliseconds to the timeout attribute: If some...

Content fetched by <a-asset-item> will be returned as plain text. If we want to use a different response type such as arraybuffer, use <a-asset-item>'s response-type attribute: <a-asset-item response-type="arraybuffer" src="model.gltf"></a-asset-item> ...

Every element in A-Frame inherits from <a-node>, the AFRAME.ANode prototype. ANode controls load and initialization order. For an element to initialize (whether it be <a-assets>, <a-asset-item>, <a-scene>, or <a-entity>), its children must have already initialized. N...