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...

As an introductory example, to define a 5-meter orbit on an entity about the Y-axis that takes 10 seconds, we can offset the position and animate the rotation. This animation starts with the initial rotation about the Y-axis of 0 degrees, and goes around 360 degrees. It’s defined with a duration of ...

A-Frame's animation system can animate different types of properties. vec3 Properties A-Frame has standard vec3 components (i.e., position, rotation, and scale). These components consist of three factors: X, Y, and Z. We can pass three space-delimited numbers to the from and to attributes just a...

<a-scene> <a-assets> <a-mixin id="red" material="color: red"></a-mixin> <a-mixin id="blue" material="color: blue"></a-mixin> <a-mixin id="cube" geometry="primitive: box"></a-mix...

Properties of a multi-property component will merge if defined by multiple mixins and/or the entity. For example: <a-scene> <a-assets> <a-mixin id="box" geometry="primitive: box"></a-mixin> <a-mixin id="tall" geometry="heigh...

When an entity includes multiple mixins that define the same component properties, the right-most mixin takes precedence. In the example below, the entity includes both red and blue mixins, and since the blue mixin is included last, the final color of the cube will be blue. <a-scene> &l...

One common use of variable-length argument lists is to implement functions that are a thin wrapper around the printf() family of functions. One such example is a set of error reporting functions. errmsg.h #ifndef ERRMSG_H_INCLUDED #define ERRMSG_H_INCLUDED #include <stdarg.h> #include...

using System; using System.IO; using System.IO.Compression; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { string zipPath = @"c:\example\start.zip"; string extractPath = @"c:\example\extract...

We can load the model by pointing using the ID to an that specifies the src to a file: <a-scene> <a-assets> <!-- At first we load skeletal animation blending JSON as asset --> <a-asset-item id="hand" src="/path/to/hand.json"></a-asset-i...

If you want to use WebVR content mixed with HTML content, for example when you're making a extended showcase key content, you could use the embedded tag. When you're using this, it's possible to look around inside 360° content using the gyroscope of your smartphone or click and drag on computer. &l...

We can register our own primitives (i.e., register an element) using AFRAME.registerPrimitive(name, definition). definition is a JavaScript object defining these properties: PropertyDescriptiondefaultComponentsObject specifying default components of the primitive. The keys are the components' nam...

my_var = 'bla'; api_key = 'key'; ...lots of code here... params = {"language": "en", my_var: api_key} If you are used to JavaScript, variable evaluation in Python dictionaries won't be what you expect it to be. This statement in JavaScript would result in the params object ...

Using a format string provides information about the expected number and type of the subsequent variadic arguments in such a way as to avoid the need for an explicit count argument or a terminator value. The example below shows a a function that wraps the standard printf() function, only allowing f...

Step 1: Add ScriptManager to your page <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> Step 2: Add UpdatePanel to your page just after ScriptManager. <asp:UpdatePanel ID="UpdatePanel1" runat="server"...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <p> <input id="cbGroup1" type="checkbox">Select all <input name="cbGroup1" type="checkbox" value="value1_1">Group1 v...