diff --git a/blog/aframe-v1.0.0/index.html b/blog/aframe-v1.0.0/index.html index 9198205fe..1be9ac096 100644 --- a/blog/aframe-v1.0.0/index.html +++ b/blog/aframe-v1.0.0/index.html @@ -1847,7 +1847,7 @@

A-Frame v1.0.0 - WebXR Support, AR Mode

We're still at it! Today marks the exact date of @aframevr's fourth birthday, and we're excited to release v1 with the help of the #WebVR community. https://t.co/rlvFSpjBvu https://t.co/DHgRoEgb9f

— Supermedium (@supermediumvr) December 16, 2019 -

For those who are using AR.js with #aframe in WebAR apps, please import latest #aframe, v1.0.0 has been shipped 🚀

This will avoid problems with new Chrome 79 that has WebXR Device API enabled by default.

Thanks to @aframevr team for the great work. It's outstanding.

— Nicolò Carpignoli (@nicolocarp)

For those who are using AR.js with #aframe in WebAR apps, please import latest #aframe, v1.0.0 has been shipped 🚀

This will avoid problems with new Chrome 79 that has WebXR Device API enabled by default.

Thanks to @aframevr team for the great work. It's outstanding.

— Nicolò Carpignoli (@nicolocarp) December 15, 2019
+

For those who are using AR.js with #aframe in WebAR apps, please import latest #aframe, v1.0.0 has been shipped 🚀

This will avoid problems with new Chrome 79 that has WebXR Device API enabled by default.

Thanks to @aframevr team for the great work. It's outstanding.

— Nicolò Carpignoli (@nicolocarp)

For those who are using AR.js with #aframe in WebAR apps, please import latest #aframe, v1.0.0 has been shipped 🚀

This will avoid problems with new Chrome 79 that has WebXR Device API enabled by default.

Thanks to @aframevr team for the great work. It's outstanding.

— Nicolò Carpignoli (@nicolocarp) December 15, 2019

?ref_src=twsrc%5Etfw”>December 15, 2019

Hey devs! 👋 Remember to serve your content over HTTPS to enter VR mode in Chrome with A-Frame 1.0.0. WebXR is not available over HTTP.

— A-Frame (@aframevr) December 16, 2019
diff --git a/blog/awoa-120-123/index.html b/blog/awoa-120-123/index.html index 49b06bfeb..901bfc965 100644 --- a/blog/awoa-120-123/index.html +++ b/blog/awoa-120-123/index.html @@ -1905,7 +1905,7 @@

  • In-App Browser

    • Articles

    -

    D2: Wrote an article on using a webcam as a texture for @aframevr, with instructions on how to set the camera side! #webvr #100DaysOfCodehttps://t.co/SGxRHIEjJ3 pic.twitter.com/DBYXc560AP

    — Outrunify (@outrunify)

    D2: Wrote an article on using a webcam as a texture for @aframevr, with instructions on how to set the camera side! #webvr #100DaysOfCodehttps://t.co/SGxRHIEjJ3 pic.twitter.com/DBYXc560AP

    — Outrunify (@outrunify) August 1, 2018
    +

    D2: Wrote an article on using a webcam as a texture for @aframevr, with instructions on how to set the camera side! #webvr #100DaysOfCodehttps://t.co/SGxRHIEjJ3 pic.twitter.com/DBYXc560AP

    — Outrunify (@outrunify)

    D2: Wrote an article on using a webcam as a texture for @aframevr, with instructions on how to set the camera side! #webvr #100DaysOfCodehttps://t.co/SGxRHIEjJ3 pic.twitter.com/DBYXc560AP

    — Outrunify (@outrunify) August 1, 2018

    Wrote an article on using webcams within @aframevr #WebVR context. Use cases:
    - Seeing yourself/environment when you have VR gear on
    - Attaching your face to a model
    - Computer Vision for those w/o controllers
    - Mixed reality livestreams https://t.co/uOYAysrU1X pic.twitter.com/rNZQkMKJKj

    — Oz Ramos 🧙 (@LabOfOz) August 7, 2018
    diff --git a/blog/awoa-162-163/index.html b/blog/awoa-162-163/index.html index 6a2c61daf..1a6a0c465 100644 --- a/blog/awoa-162-163/index.html +++ b/blog/awoa-162-163/index.html @@ -1840,7 +1840,7 @@

    Pr - + diff --git a/blog/awoa-47/index.html b/blog/awoa-47/index.html index 63b0b9fce..973c54374 100644 --- a/blog/awoa-47/index.html +++ b/blog/awoa-47/index.html @@ -1815,7 +1815,7 @@

    A Week of A-Frame 47

    Work in progress: Physical interfaces for VR based upon Verlet Integration, currently made a radio selector and a button. @aframevr pic.twitter.com/lpxonf0j2W

    — Ada Rose 🏳️‍🌈✊🏾🌍 (@Lady_Ada_King) February 10, 2017
    -

    Finally I've released A-Frame rain effect component! https://t.co/I6dWNJiGrV #aframevr #threejs pic.twitter.com/Cj3hvt3G1G

    — takahiro(John Smith) (@superhoge)

    Finally I've released A-Frame rain effect component! https://t.co/I6dWNJiGrV #aframevr #threejs pic.twitter.com/Cj3hvt3G1G

    — takahiro(John Smith) (@superhoge) February 6, 2017
    +

    Finally I've released A-Frame rain effect component! https://t.co/I6dWNJiGrV #aframevr #threejs pic.twitter.com/Cj3hvt3G1G

    — takahiro(John Smith) (@superhoge)

    Finally I've released A-Frame rain effect component! https://t.co/I6dWNJiGrV #aframevr #threejs pic.twitter.com/Cj3hvt3G1G

    — takahiro(John Smith) (@superhoge) February 6, 2017
    diff --git a/blog/awoa-59/index.html b/blog/awoa-59/index.html index 6b41d8a48..c0c7d22d5 100644 --- a/blog/awoa-59/index.html +++ b/blog/awoa-59/index.html @@ -1823,7 +1823,7 @@

    A Week of A-Frame 59

    Projects

    -

    VR Remote Control - Use your mobile phone or a daydream controller as a WebVR remote controller by @polats - https://t.co/KDre5eGzbQ pic.twitter.com/7ubQAezMQV

    — Kevin Ngo (@andgokevin)

    VR Remote Control - Use your mobile phone or a daydream controller as a WebVR remote controller by @polats - https://t.co/KDre5eGzbQ pic.twitter.com/7ubQAezMQV

    — Kevin Ngo (@andgokevin) May 12, 2017
    +

    VR Remote Control - Use your mobile phone or a daydream controller as a WebVR remote controller by @polats - https://t.co/KDre5eGzbQ pic.twitter.com/7ubQAezMQV

    — Kevin Ngo (@andgokevin)

    VR Remote Control - Use your mobile phone or a daydream controller as a WebVR remote controller by @polats - https://t.co/KDre5eGzbQ pic.twitter.com/7ubQAezMQV

    — Kevin Ngo (@andgokevin) May 12, 2017

    @aframevr "SAP IoT experience In VR" https://t.co/kKNgQJGuK8 … #VR #IoT #google #cardboard #Aframe #Fiori #sap #sapiot #sapleonardo @SAP

    — deepan (@deepanigi) May 4, 2017
    diff --git a/blog/awoa-87/index.html b/blog/awoa-87/index.html index d7ef85be1..489340cda 100644 --- a/blog/awoa-87/index.html +++ b/blog/awoa-87/index.html @@ -1888,7 +1888,7 @@

    Events

    Here’s my 15 min talk about @cimmerse_com, #WebVR and @aframevr I did at #AWE2017 in October: https://t.co/u99pFtk8I4

    — Casper Fabricius (@fabricius) November 13, 2017 - + diff --git a/blog/newsletter2/index.html b/blog/newsletter2/index.html index f7d744598..fbb13a864 100644 --- a/blog/newsletter2/index.html +++ b/blog/newsletter2/index.html @@ -1854,7 +1854,7 @@

    A-Frame Newsletter 2

    #3D #website created by Planet Voodoo using @aframevr technology to introduce an interactive VR story about a real life #UFO encounter https://t.co/K4iSkxTWYl pic.twitter.com/eorEag9TvP

    — Planet Voodoo (@PlanetVoodoo) January 4, 2020
    -

    https://t.co/Mx7VSz0MQp is a web based virtual museum prototype we are working on @augmersive !

    It's built with @aframevr & viewable on @oculus quest, @magicleap, desktop & mobile browsers!

    If any museum wants to hire us for a custom VR experience my DM is open 😀 pic.twitter.com/b8a9TfB2PM

    — Tamrat (@tamrrat)

    https://t.co/Mx7VSz0MQp is a web based virtual museum prototype we are working on @augmersive !

    It's built with @aframevr & viewable on @oculus quest, @magicleap, desktop & mobile browsers!

    If any museum wants to hire us for a custom VR experience my DM is open 😀 pic.twitter.com/b8a9TfB2PM

    — Tamrat (@tamrrat) April 27, 2020
    +

    https://t.co/Mx7VSz0MQp is a web based virtual museum prototype we are working on @augmersive !

    It's built with @aframevr & viewable on @oculus quest, @magicleap, desktop & mobile browsers!

    If any museum wants to hire us for a custom VR experience my DM is open 😀 pic.twitter.com/b8a9TfB2PM

    — Tamrat (@tamrrat)

    https://t.co/Mx7VSz0MQp is a web based virtual museum prototype we are working on @augmersive !

    It's built with @aframevr & viewable on @oculus quest, @magicleap, desktop & mobile browsers!

    If any museum wants to hire us for a custom VR experience my DM is open 😀 pic.twitter.com/b8a9TfB2PM

    — Tamrat (@tamrrat) April 27, 2020

    ?ref_src=twsrc%5Etfw”>April 27, 2020

    first draft of my new website, not even sure if i wanna spill this drip on it. uses ur webcam for immersive ascii art via @p5xjs, interactive 3D scene using a star wars x-wing for testing with @aframevr, UI with @jquery... bet pic.twitter.com/hvXtabrFB2

    — RAREGEMS (@_RAREGEMS) April 22, 2020
    diff --git a/docs/0.2.0/components/canvas.html b/docs/0.2.0/components/canvas.html index d495912e4..0519a8cc1 100644 --- a/docs/0.2.0/components/canvas.html +++ b/docs/0.2.0/components/canvas.html @@ -828,7 +828,7 @@

    -

    The canvas component allows us to specify our own canvas or the size of the injected canvas. The canvas component applies only to the <a-scene> element.

    +

    The canvas component allows us to specify our own canvas or the size of the injected canvas. The canvas component applies only to the <a-scene> element.

    Example

    We can specify our own canvas.

    <a-scene canvas="canvas: #mycanvas"></a-scene>
    diff --git a/docs/0.2.0/components/cursor.html b/docs/0.2.0/components/cursor.html index e656ec4b2..07efc689d 100644 --- a/docs/0.2.0/components/cursor.html +++ b/docs/0.2.0/components/cursor.html @@ -828,7 +828,7 @@

    -

    The cursor component defines interaction with other entities through clicking and gazing, by using the raycaster component to determine which object has been clicked. When the mouse is clicked, the closest visible entity intersecting the cursor will have a DOM click event triggered. Note the cursor component only defines the behavior. To define the appearance, you might apply the geometry component.

    +

    The cursor component defines interaction with other entities through clicking and gazing, by using the raycaster component to determine which object has been clicked. When the mouse is clicked, the closest visible entity intersecting the cursor will have a DOM click event triggered. Note the cursor component only defines the behavior. To define the appearance, you might apply the geometry component.

    Example

    For example, we define a cursor in the shape of a ring positioned on the center of the screen. To have the cursor fixed on the screen, we place it as a child of a camera entity. Whenever the cursor clicks on the cube, we can listen the the click event. This might feel familiar to web developers.

    <a-entity camera>
      <a-entity cursor="fuse: true; maxDistance: 30; timeout: 500"
                position="0 0 -5"
                geometry="primitive: ring"
                material="color: white; shader: flat">
      </a-entity>
    </a-entity>

    <a-entity id="cube" geometry="primitive: box" material="color: blue"></a-entity>
    diff --git a/docs/0.2.0/components/fog.html b/docs/0.2.0/components/fog.html index ce928d5e9..dbe48319e 100644 --- a/docs/0.2.0/components/fog.html +++ b/docs/0.2.0/components/fog.html @@ -828,7 +828,7 @@

    -

    The fog component obscures entities in fog given distance from the camera. The fog component applies only to the <a-scene> element.

    +

    The fog component obscures entities in fog given distance from the camera. The fog component applies only to the <a-scene> element.

    Example

    <a-scene fog="type: linear; color: #AAA"></a-scene>

    Properties

    Given the type of fog distribution, different properties will apply.

    diff --git a/docs/0.2.0/components/keyboard-shortcuts.html b/docs/0.2.0/components/keyboard-shortcuts.html index 1681c89ac..5f1367240 100644 --- a/docs/0.2.0/components/keyboard-shortcuts.html +++ b/docs/0.2.0/components/keyboard-shortcuts.html @@ -828,7 +828,7 @@

    -

    The keyboard-shortcuts component toggles global keyboard shortcuts. The keyboard-shortcuts component applies only to the <a-scene> element

    +

    The keyboard-shortcuts component toggles global keyboard shortcuts. The keyboard-shortcuts component applies only to the <a-scene> element

    Example

    <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

    Properties

    diff --git a/docs/0.2.0/components/look-controls.html b/docs/0.2.0/components/look-controls.html index b82839147..79f4425de 100644 --- a/docs/0.2.0/components/look-controls.html +++ b/docs/0.2.0/components/look-controls.html @@ -841,7 +841,7 @@

    |———–|—————————————————– | enabled | Whether look controls are enabled. | true |

    Caveats

    If you want to create your own component for look controls, you will have to copy and paste the HMD-tracking bits into your component. In the future, we may have a system for people to more easily implement their controls.

    -

    components-camera

    +

    components-camera

    diff --git a/docs/0.2.0/components/material.html b/docs/0.2.0/components/material.html index 47417620b..3255f4cfe 100644 --- a/docs/0.2.0/components/material.html +++ b/docs/0.2.0/components/material.html @@ -828,8 +828,8 @@

    -

    The material component defines the appearance of an entity. The built-in shaders allow us to define properties such as color, opacity, or textures. Custom shaders can be registered to extend the material component to allow for a wide range of visual effects. The geometry component can be defined alongside to provide a shape alongside the appearance to create a complete mesh.

    -

    The material component is coupled to shaders. Some of the built-in shading models will provide properties like color or texture to the material component.

    +

    The material component defines the appearance of an entity. The built-in shaders allow us to define properties such as color, opacity, or textures. Custom shaders can be registered to extend the material component to allow for a wide range of visual effects. The geometry component can be defined alongside to provide a shape alongside the appearance to create a complete mesh.

    +

    The material component is coupled to shaders. Some of the built-in shading models will provide properties like color or texture to the material component.

    Example

    Here is an example defining a red material using the default standard shading model:

    <a-entity geometry="primitive: box" material="color: red"></a-entity>
    @@ -860,7 +860,7 @@

    shader -Which shader or shading model to use. Defaults to the built-in standard shading model. Can be set to the built-in flat shading model or to a registered custom shader +Which shader or shading model to use. Defaults to the built-in standard shading model. Can be set to the built-in flat shading model or to a registered custom shader standard diff --git a/docs/0.2.0/components/obj-model.html b/docs/0.2.0/components/obj-model.html index ba0c6e103..86b183785 100644 --- a/docs/0.2.0/components/obj-model.html +++ b/docs/0.2.0/components/obj-model.html @@ -845,7 +845,7 @@

    mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

    Events

    diff --git a/docs/0.2.0/components/raycaster.html b/docs/0.2.0/components/raycaster.html index 6a6496f6b..ab625e316 100644 --- a/docs/0.2.0/components/raycaster.html +++ b/docs/0.2.0/components/raycaster.html @@ -828,7 +828,7 @@

    -

    The raycaster component provides for an entity the ability to do intersection testing with a raycaster. The raycaster component is a helper component. By itself, it does not do anything, but it can be and is used by components such as the cursor component. The raycaster component will poll for intersections with other entities and set this.intersectedEl to the closest intersected entity.

    +

    The raycaster component provides for an entity the ability to do intersection testing with a raycaster. The raycaster component is a helper component. By itself, it does not do anything, but it can be and is used by components such as the cursor component. The raycaster component will poll for intersections with other entities and set this.intersectedEl to the closest intersected entity.

    Members

    diff --git a/docs/0.2.0/components/sound.html b/docs/0.2.0/components/sound.html index 7fd9fb10c..79531103d 100644 --- a/docs/0.2.0/components/sound.html +++ b/docs/0.2.0/components/sound.html @@ -828,7 +828,7 @@

    -

    The sound component defines the entity as a source of sound or audio. The sound component is positional and is therefore affected by the components-position.

    +

    The sound component defines the entity as a source of sound or audio. The sound component is positional and is therefore affected by the components-position.

    Example

    <a-entity id="river" geometry="primitive: plane" material="color: blue"
              position="-10 0 0" sound="src: river.mp3; autoplay: true"></a-entity>

    Properties

    diff --git a/docs/0.2.0/components/stats.html b/docs/0.2.0/components/stats.html index 1d203aebf..55aff9d75 100644 --- a/docs/0.2.0/components/stats.html +++ b/docs/0.2.0/components/stats.html @@ -828,7 +828,7 @@

    -

    The stats component displays a UI that displays performance measurements such as framerate. The stats component applies only to the <a-scene> element.

    +

    The stats component displays a UI that displays performance measurements such as framerate. The stats component applies only to the <a-scene> element.

    Example

    <a-scene stats></a-scene>
    diff --git a/docs/0.2.0/components/vr-mode-ui.html b/docs/0.2.0/components/vr-mode-ui.html index 66a01884b..6fe4360e6 100644 --- a/docs/0.2.0/components/vr-mode-ui.html +++ b/docs/0.2.0/components/vr-mode-ui.html @@ -828,7 +828,7 @@

    -

    The vr-mode-ui component toggles UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only to the <a-scene> element.

    +

    The vr-mode-ui component toggles UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only to the <a-scene> element.

    Example

    <a-scene vr-mode-ui="enabled: false"></a-scene>

    Properties

    diff --git a/docs/0.2.0/components/wasd-controls.html b/docs/0.2.0/components/wasd-controls.html index 7b9dcebbb..bf219d54a 100644 --- a/docs/0.2.0/components/wasd-controls.html +++ b/docs/0.2.0/components/wasd-controls.html @@ -828,7 +828,7 @@

    -

    The wasd-controls component defines the behavior of an entity to be controlled by the WASD keyboard keys. It is usually used alongside the camera component.

    +

    The wasd-controls component defines the behavior of an entity to be controlled by the WASD keyboard keys. It is usually used alongside the camera component.

    Example

    <a-entity camera look-controls wasd-controls></a-entity>

    Properties

    diff --git a/docs/0.2.0/core/AFRAME.html b/docs/0.2.0/core/AFRAME.html index d72f49ca6..aee942e89 100644 --- a/docs/0.2.0/core/AFRAME.html +++ b/docs/0.2.0/core/AFRAME.html @@ -838,7 +838,7 @@

    - + @@ -846,7 +846,7 @@

    - + @@ -854,15 +854,15 @@

    - + - + - + diff --git a/docs/0.2.0/core/asset-management-system.html b/docs/0.2.0/core/asset-management-system.html index ac3e675d1..09ebc57e0 100644 --- a/docs/0.2.0/core/asset-management-system.html +++ b/docs/0.2.0/core/asset-management-system.html @@ -832,7 +832,7 @@

    Assets are placed within <a-assets>, and <a-assets> is placed within <a-scene>. Assets include:

    AEntityEntity prototype.Entity prototype.
    ANode
    ASceneScene prototype.Scene prototype.
    components
    registerComponentFunction to register a component.Function to register a component.
    registerPrimitiveFunction to register a primitive.Function to register a primitive.
    registerShaderFunction to register a shader.Function to register a shader.
    shaders
    <a-entity position="0 1 4"></a-entity>
    -

    Under the Hood

    A component is registered using AFRAME.registerComponent, which we pass a component name to register a component under and a component definition. Below is the outer skeleton for the position component:

    +

    Under the Hood

    A component is registered using AFRAME.registerComponent, which we pass a component name to register a component under and a component definition. Below is the outer skeleton for the position component:

    AFRAME.registerComponent('position', {
      // ...
    });

    A component defines a schema that defines its properties, giving anatomy to the component. The position component takes a flat vec3, or an {x, y, z} object.

    @@ -902,7 +902,7 @@

    el -Reference to the entity element. +Reference to the entity element. schema @@ -958,10 +958,10 @@ 

    schema: {
      type: 'vec3'
    }

    // Will process to:

    schema: {
      type: 'vec3',
      default: { x: 0, y: 0, z: 0 },
      parse: AFRAME.utils.coordinates.parse,
      stringify: AFRAME.utils.coordinates.stringify
    }

    Single-Property Schemas

    Single-property schemas define only a single anonymous flat property. They must define either a type or a default value to be able to infer an appropriate parser and stringifier.

    -

    For example, the rotation component takes a vec3:

    +

    For example, the rotation component takes a vec3:

    AFRAME.registerComponent('rotation', {
      schema: {
        // Default value will be 0, 0, 0 as defined by the vec3 property type.
        type: 'vec3'
      }

      // ...
    });
    -

    And for example, the visible component takes a boolean:

    +

    And for example, the visible component takes a boolean:

    AFRAME.registerComponent('visible', {
      schema: {
        // Type will be inferred to be boolean.
        default: true
      },

      // ...
    });

    Multi-Property Schemas

    Multi-property schemas it consists of one or more named property definitions. Unlike single-property schemas, each property has a name. When a component has properties then the HTML usage syntax will look like physics="mass: 2; velocity: 1 1 1".

    @@ -969,9 +969,9 @@ 

    AFRAME.registerComponent('physics-body', {
      schema: {
        boundingBox: {
          type: 'vec3',
          default: { x: 1, y: 1, z: 1 }
        },
        mass: {
          default: 0
        },
        velocity: {
          type: 'vec3'
        }
      }
    }

    Lifecycle Methods

    With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the data, the lifecycle methods use the data. A component has access to this.data which in a single-property schema is a value and in a multi-property schema is an object.

    -

    The handlers will almost always interact with the entity. We recommend checking out the Entity documentation.

    +

    The handlers will almost always interact with the entity. We recommend checking out the Entity documentation.

    Component.init()

    init is called once in a component’s lifecycle when it is attached to the entity. The init handler is generally used to set up state and instantiate variables that may used throughout a component. Not every component will need to define init. It is similar to createdCallback or React.ComponentDidMount.

    -

    For example, the look-at component‘s init handler sets the state of the target to null and instantiates a Vector object:

    +

    For example, the look-at component‘s init handler sets the state of the target to null and instantiates a Vector object:

    init: function () {
      this.target3D = null;
      this.vector = new THREE.Vector3();
    },

    // ...

    Example uses of init by some A-Frame components:

    @@ -1008,7 +1008,7 @@

    Component.update(oldData)

    update is called both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The update handler often uses this.data to modify the entity. The update handler has access to the previous state of a component’s data via its first argument. The previous state of a component can be used to tell exactly which properties changed in order to do granular updates.

    -

    For example, the visible component’s update handler toggles the visibility of the entity:

    +

    For example, the visible component’s update handler toggles the visibility of the entity:

    update: function () {
      this.el.object3D.visible = this.data;
    }

    Example uses of update by some A-Frame components:

    @@ -1037,7 +1037,7 @@

    Component.remove()

    remove is called when a component detaches from the entity (e.g., as a result of removeAttribute). This is used to remove all modifications, listeners, and behaviors to the entity that a component has added in its lifetime.

    -

    For example, when the light component detaches, it removes the light it previously attached to the entity:

    +

    For example, when the light component detaches, it removes the light it previously attached to the entity:

    remove: function () {
      this.el.removeObject3D('light');
    }

    Example uses of remove by some A-Frame components:

    @@ -1066,7 +1066,7 @@

    Component.tick(time)

    tick is called on every single tick or render loop of the scene. Expect it to run on the order of 60-90 times per second. The global uptime of the scene in seconds is passed into the tick handler, which is used to calculate time deltas.

    -

    For example, the look-at component’s tick handler updates the entity’s rotation to face towards a potentially moving target entity:

    +

    For example, the look-at component’s tick handler updates the entity’s rotation to face towards a potentially moving target entity:

    tick: function (t) {
      // target3D and vector are set from the update handler.
      if (this.target3D) {
        this.el.object3D.lookAt(this.vector.setFromMatrixPosition(target3D.matrixWorld));
      }
    }

    Example uses of tick by some A-Frame components:

    @@ -1125,7 +1125,7 @@

    Update
    update: function (oldData) {
      // Set color with material.
      var material = new THREE.LineBasicMaterial({
        color: this.data.color
      });

      // Add vertices to geometry.
      var geometry = new THREE.Geometry();
      this.data.path.forEach(function (vec3) {
        geometry.vertices.push(
          new THREE.Vector3(vec3.x, vec3.y, vec3.z)
        );
      });

      // Apply mesh.
      this.el.setObject3D('mesh', new THREE.Line(geometry, material));
    },

    // ...

    Here, we update the line by completely replacing it. Though sometimes, we might want to more granularly update objects for better performance.

    -

    Remove

    For removal of the line mesh from the entity, we use Entity.removeObject3D:

    +

    Remove

    For removal of the line mesh from the entity, we use Entity.removeObject3D:

    remove: function () {
      this.el.removeObject3D('mesh');
    }

    This will remove the object from the entity’s scene graph.

    diff --git a/docs/0.2.0/core/entity.html b/docs/0.2.0/core/entity.html index 9e56db7f8..7b677c55b 100644 --- a/docs/0.2.0/core/entity.html +++ b/docs/0.2.0/core/entity.html @@ -829,14 +829,14 @@

    An entity is represented by the <a-entity> element. As defined in the entity-component-system pattern, entities are placeholder objects to which we plug in components to in order to provide them apperance, behavior, and functionality.

    -

    In A-Frame, entities have inherently have attached the position, rotation, and scale components.

    +

    In A-Frame, entities have inherently have attached the position, rotation, and scale components.

    Example

    Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

    <a-entity>
    -

    We can attach components to it to make it render something or do something. To give it shape and appearance, we can attach the geometry and material components:

    +

    We can attach components to it to make it render something or do something. To give it shape and appearance, we can attach the geometry and material components:

    <a-entity geometry="primitive: box" material="color: red">
    -

    Or to make it emit light, we can further attach the light component:

    +

    Or to make it emit light, we can further attach the light component:

    <a-entity geometry="primitive: box" material="color: red"
              light="type: point; intensity: 2.0">

    Retrieving an Entity

    We can simply retrieve an entity using DOM APIs.

    @@ -858,7 +858,7 @@

    The different types Object3Ds can be accessed through object3DMap.

    object3DMap

    An entity’s object3DMap is an JavaScript object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that may have been registered by components.

    -

    For an entity with a geometry and light components attached, object3DMap might look like:

    +

    For an entity with a geometry and light components attached, object3DMap might look like:

    {
      light: <THREE.Light Object>,
      mesh: <THREE.Mesh Object>
    }

    An entity’s THREE.Object3Ds can be managed using getOrCreateObject3D, setObject3D, and removeObject3D.

    @@ -869,7 +869,7 @@

    Metho 
    entity.addEventListener('stateadded', function (evt) {
      if (evt.state === 'selected') {
        console.log('Entity now selected!');
      }
    });

    entity.addState('selected');
    entity.is('selected');  // >> true

    emit (name, detail, bubbles)

    emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

    +trigger an animation:

    // <a-entity>
    //   <a-animation attribute="rotation" begin="rotate" to="0 360 0"></a-animation>
    // </a-entity>
    entity.emit('rotate');

    We can also pass event detail or data as the second argument:

    @@ -898,15 +898,15 @@

    pause ()

    pause will stop any dynamic behavior as defined by animations and components. When an entity is paused, it will stop all of its animations and call Component.pause on each of its components. It is up to the components to implement how they paused, but they generally remove event listeners and background behavior. An entity will call pause on all of its children when it is paused itself.

    // <a-entity id="spinning-jumping-ball">
    entity.pause();
    -

    For example, the look-controls component on pause will remove event handlers that listen for input.

    +

    For example, the look-controls component on pause will remove event handlers that listen for input.

    play ()

    play will start any dynamic behavior as defined by animations and components. This is automatically called when the entity is attached. When an entity calls play, it will call play on all of its children.

    entity.pause();
    entity.play();
    -

    For example, the sound component on play will begin playing the sound.

    +

    For example, the sound component on play will begin playing the sound.

    setAttribute (attr, value, componentAttrValue)

    If attr is not the name of a registered component or the component is a single-property component, setAttribute behaves mostly as it normally would:

    entity.setAttribute('visible', false);
    -

    Though if attr is the name of a registered component, it may handle special parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    +

    Though if attr is the name of a registered component, it may handle special parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    entity.setAttribute('position', { x: 1, y: 2, z: 3 });

    Putting Multi-Property Component Data

    To set or replace component data for a multi-property component, we can pass the name of a registered component as the attr, and pass an object of properties as the value:

    diff --git a/docs/0.2.0/core/index.html b/docs/0.2.0/core/index.html index 184582f4c..3eea04ba1 100644 --- a/docs/0.2.0/core/index.html +++ b/docs/0.2.0/core/index.html @@ -830,9 +830,9 @@

    A-Frame is based on an entity-component-system pattern (ECS), a pattern common in game development that emphasizes composability over inheritance:

      -
    • An entity is a general-purpose object that inherently does and renders nothing.
      • -
    • A component is a reusable module that is plugged into entities in order to provide appearance, behavior, and/or functionality. They are plug-and-play for objects.
      • -
    • A system provides global scope, services, and management to classes of components.
      • +
    • An entity is a general-purpose object that inherently does and renders nothing.
      • +
    • A component is a reusable module that is plugged into entities in order to provide appearance, behavior, and/or functionality. They are plug-and-play for objects.
      • +
    • A system provides global scope, services, and management to classes of components.

    ECS lets us build complex entities with rich behavior by plugging different reusable components into the sockets on the entity. Contrast this to traditional inheritance where if we want extend an object, we would have to manually create a new class to do so.

    ECS grants developers the key to permissionless innovation. Developers can write, share, and plug in components that extend new features or iterate upon existing features.

    @@ -849,10 +849,10 @@

    geometry and material components. Since the components take multiple properties, we define the property values using an inline-style syntax:

    +

    For example, to compose a tomato-colored sphere starting with an entity, we can attach the geometry and material components. Since the components take multiple properties, we define the property values using an inline-style syntax:

    <a-entity geometry="primitive: sphere; radius: 1.5"
              material="color: tomato; metalness: 0.7"></a-entity>
    -

    From there, we can attach more and more components to add whatever appearance, behavior, or funtionality we want. Attach the light component to have it emit light. Attach the sound component to have it play sound. Attach the physics component to have it be affected by gravity and collision detection:

    +

    From there, we can attach more and more components to add whatever appearance, behavior, or funtionality we want. Attach the light component to have it emit light. Attach the sound component to have it play sound. Attach the physics component to have it be affected by gravity and collision detection:

    Composing an Entity

    We can even attach third-party components that other people have created. If someone writes a component that enables a mesh to explode, or a component that enables the mesh to use a canvas as its material texture, we could just drop the component into our A-Frame experience and use it immediately in HTML. The entity-component-system pattern enables great flexibility and extensibility.

    diff --git a/docs/0.2.0/core/mixins.html b/docs/0.2.0/core/mixins.html index 5001f3863..8e5d573a3 100644 --- a/docs/0.2.0/core/mixins.html +++ b/docs/0.2.0/core/mixins.html @@ -828,7 +828,7 @@

    -

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in <a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    +

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in <a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    <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-mixin>
      </a-assets>

      <a-entity mixin="red cube"></a-entity>
      <a-entity mixin="blue cube"></a-entity>
    </a-scene>

    The entity with red cube will take the properties from the red mixin and the cube mixin in that order. Likewise with the blue cube. Conceptually, the entities above expand to:

    diff --git a/docs/0.2.0/core/scene.html b/docs/0.2.0/core/scene.html index 3988545f8..f4411771c 100644 --- a/docs/0.2.0/core/scene.html +++ b/docs/0.2.0/core/scene.html @@ -828,8 +828,8 @@

    -

    A scene is represented by the <a-scene> element. The scene is the global root object, and all entities are contained within the scene.

    -

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    +

    A scene is represented by the <a-scene> element. The scene is the global root object, and all entities are contained within the scene.

    +

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    Example

    <a-scene>
      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <a-box src="#texture"></a-box>
    </a-scene>

    Properties

    @@ -873,7 +873,7 @@

    - + @@ -929,11 +929,11 @@

    canvas - Configure which canvas to render to, or the width/height of the injected canvas. -
  • fog - Scene fog.
    • -
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • -
  • stats - Toggle performance stats.
    • -
  • vr-mode-ui - Toggle UI for entering and exiting VR.
    • +
  • canvas - Configure which canvas to render to, or the width/height of the injected canvas.
    • +
  • fog - Scene fog.
    • +
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • +
  • stats - Toggle performance stats.
    • +
  • vr-mode-ui - Toggle UI for entering and exiting VR.

    • Running Content Scripts on the Scene

    When running JavaScript on the scene, wait for it to finish loading first:

    systemsInstantiated systems.Instantiated systems.
    time 
    var scene = document.querySelector('a-scene');

    if (scene.hasLoaded) {
      run();
    } else {
      scene.addEventListener('loaded', run);
    }

    function run () {
      var entity = scene.querySelector('a-entity');
      entity.setAttribute('material', 'color', 'red');
    }
    diff --git a/docs/0.2.0/core/shaders.html b/docs/0.2.0/core/shaders.html index 85ab18a4b..865c96a3e 100644 --- a/docs/0.2.0/core/shaders.html +++ b/docs/0.2.0/core/shaders.html @@ -828,8 +828,8 @@

    -

    Shaders (in A-Frame) are responsible for creating the material for the base material component. A-Frame ships with a couple of built-in shading models: standard and flat.

    -

    We can register custom shaders to implement different visual effects and materials. We have available the materials provided by three.js, including THREE.ShaderMaterial. With THREE.ShaderMaterial, we can provide our own GLSL vertex and fragment shaders (small programs that run on the GPU), and we can define a schema for their uniforms and attributes just as we would with component schemas. The shader’s schema will extend the base material component’s schema, and as a result we can pass values from markup directly to the shader.

    +

    Shaders (in A-Frame) are responsible for creating the material for the base material component. A-Frame ships with a couple of built-in shading models: standard and flat.

    +

    We can register custom shaders to implement different visual effects and materials. We have available the materials provided by three.js, including THREE.ShaderMaterial. With THREE.ShaderMaterial, we can provide our own GLSL vertex and fragment shaders (small programs that run on the GPU), and we can define a schema for their uniforms and attributes just as we would with component schemas. The shader’s schema will extend the base material component’s schema, and as a result we can pass values from markup directly to the shader.

    Built-in Shading Models

    A-Frame ships with a couple of built-in shading models.

    Standard Shading Model

    The standard shading model is the default shader for the material component. It is a physically-based shading model that uses THREE.MeshStandardMaterial under the hood. The standard shading model can be explicitly specified by setting the shader to be standard in the material component (i.e., material="shader: standard").

    Properties

    @@ -857,7 +857,7 @@

    - + @@ -914,7 +914,7 @@

    fog. +

    @@ -939,7 +939,7 @@

    Registering a Custom Shader

    We register a shader with AFRAME.registerShader, passing in a schema. We can then either pass vertex and fragment shaders for use with THREE.ShaderMaterial, or we can override the A-Frame shader initialization and pass in our own material.

    -

    Schema

    Shader schemas are similar to component schemas. The schema will extend the base material component schema. If we are creating a custom shader by passing in vertex and fragment shaders, we can specify uniforms and attributes:

    +

    Schema

    Shader schemas are similar to component schemas. The schema will extend the base material component schema. If we are creating a custom shader by passing in vertex and fragment shaders, we can specify uniforms and attributes:

    fogWhether or not material is affected by fog.Whether or not material is affected by fog. true
    Whether or not material is affected by fog. true 
    AFRAME.registerShader('hello-world-shader', {
      schema: {
        sunPosition: { type: 'vec3', is: 'uniform' },
        time: { type: 'time', is: 'uniform' }
      }
    });

    Shader Uniform and Attribute Types

    diff --git a/docs/0.2.0/core/systems.html b/docs/0.2.0/core/systems.html index 97794d1fa..d454a2814 100644 --- a/docs/0.2.0/core/systems.html +++ b/docs/0.2.0/core/systems.html @@ -831,9 +831,9 @@

    Note: the systems API is new and may be unstable.

    -

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -

    Registering a System

    A system is registered similarly to a component. If the system name matches a component name, then the component will have a reference to the system as this.system:

    +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    +

    Registering a System

    A system is registered similarly to a component. If the system name matches a component name, then the component will have a reference to the system as this.system:

    AFRAME.registerSystem('my-component', {
      // System handlers and methods.
    });

    AFRAME.registerComponent('my-component', {
      init: function () {
        console.log(this.system);
      }
    });

    Methods

    A system, like a component, defines lifecycle handlers. It can also define methods intended to be public API.

    diff --git a/docs/0.2.0/guide/building-a-basic-scene.html b/docs/0.2.0/guide/building-a-basic-scene.html index 7e0ead292..3232ea12d 100644 --- a/docs/0.2.0/guide/building-a-basic-scene.html +++ b/docs/0.2.0/guide/building-a-basic-scene.html @@ -828,11 +828,11 @@

    -

    Let’s first start building a scene using primitives, the basic building blocks of A-Frame with familiar HTML syntax. Under the hood, primitives are aliases entities that proxy HTML attribute values to component property values. A-Frame is bundled with a handful of primitives for common use cases such as backgrounds, images, meshes, models, images, and videos.

    +

    Let’s first start building a scene using primitives, the basic building blocks of A-Frame with familiar HTML syntax. Under the hood, primitives are aliases entities that proxy HTML attribute values to component property values. A-Frame is bundled with a handful of primitives for common use cases such as backgrounds, images, meshes, models, images, and videos.

    Adding a Box

    The simplest scene would be a scene containing a box primitive:

    <a-scene>
      <a-box color="#6173F4" width="4" height="10" depth="2"></a-box>
    </a-scene>
    -

    Just like with regular HTML elements, each attribute of the entity maps to one value. We can define a color, width, height, and depth of <a-box>. To see more attributes that <a-box> and other geometric primitives can accept, check out the common mesh attributes.

    +

    Just like with regular HTML elements, each attribute of the entity maps to one value. We can define a color, width, height, and depth of <a-box>. To see more attributes that <a-box> and other geometric primitives can accept, check out the common mesh attributes.

    Once we open up our scene, the default control setup allows us to look and walk around. To look around, we can drag the mouse or just look around with a mobile device or a Rift. To walk around, we can use the WASD keys. Then to enter VR, click on the Enter VR button.

    Transforming the Box

    A-Frame uses a right-handed coordinate system which can be roughly thought of:

      @@ -842,16 +842,16 @@

      The basic distance unit in is defined in meters. When designing a scene for virtual reality, it is important to consider the real world scale of the objects we create. A box with height="100" may look ordinary on our computer screens, but in virtual reality it will look like a massive 100-meter tall monolith.

      And the basic rotational unit is defined in degrees. To determine the positive direction of rotation, we can point our thumbs down the direction of a positive axis, and the direction which our fingers curl is the positive direction of rotation.

      -

      To translate, rotate, and scale the box, we can plug in the position, rotation, and scale components. The example below (assuming we are positioned on the origin looking down the negative Z-axis) will translate the box left/up/back, rotate the box to the right, stretches the box left-and-right and back-and-front, and shrinks the box up-and-down:

      +

      To translate, rotate, and scale the box, we can plug in the position, rotation, and scale components. The example below (assuming we are positioned on the origin looking down the negative Z-axis) will translate the box left/up/back, rotate the box to the right, stretches the box left-and-right and back-and-front, and shrinks the box up-and-down:

      <a-scene>
        <a-box color="#6173F4" width="4" height="10" depth="2"
               position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"></a-box>
      </a-scene>

      Applying a Texture to the Box

      The box doesn’t have to be just a flat color. We can wrap a texture around the box with an image or video using src. To make sure the color does not mix with the texture, we set the color to white:

      <a-scene>
        <a-box color="#FFF" width="4" height="10" depth="2"
               position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
               src="texture.png"></a-box>
      </a-scene>
      -

      To cache the texture and have the scene wait for it to load before rendering, we can move the texture into the asset management system. We define it as an <img> tag, give it an ID, and point to it using a selector:

      +

      To cache the texture and have the scene wait for it to load before rendering, we can move the texture into the asset management system. We define it as an <img> tag, give it an ID, and point to it using a selector:

      <a-scene>
        <a-assets>
          <img id="texture" src="texture.png">
        </a-assets>

        <a-box color="#FFF" width="4" height="10" depth="2"
               position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
               src="#texture"></a-box>
      </a-scene>
      -

      Animating the Box

      We can add an animation to the box using the built-in animation system. An animation is defined by placing an <a-animation> tag as a child of the entity to animate. Let’s have the box rotate indefinitely to get some motion into our scene:

      +

      Animating the Box

      We can add an animation to the box using the built-in animation system. An animation is defined by placing an <a-animation> tag as a child of the entity to animate. Let’s have the box rotate indefinitely to get some motion into our scene:

      <a-scene>
        <a-assets>
          <img id="texture" src="texture.png">
        </a-assets>

        <a-box color="#FFF" width="4" height="10" depth="2"
               position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
               src="#texture">
          <a-animation attribute="rotation" repeat="indefinite" to="0 360 0"></a-animation>
        </a-box>
      </a-scene>

      Interacting with the Box

      To interact with the box via clicking or gazing, we can use a cursor which we place as a child of the camera such that it is fixed to the screen. When we don’t define a camera, the scene will inject a default camera, but in this case to add a cursor, we will need to define one. Then what we can do is to tell the animation only to start when the cursor clicks the box, by having the box emit the click event, using the animation’s begin attribute which takes an event name:

      @@ -860,16 +860,16 @@ 

      var box = document.querySelector('a-box');
      box.addEventListener('mouseenter', function () {
        box.setAttribute('scale', {
          x: 4,
          y: 1,
          z: 6
        });
      });
      -

      Or alternatively, we can use helper element to declaratively register an event handler:

      +

      Or alternatively, we can use helper element to declaratively register an event handler:

      <a-scene>
        <a-assets>
          <img id="texture" src="texture.png">
        </a-assets>

        <a-box color="#FFF" width="4" height="10" depth="2"
               position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
               src="#texture">
          <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
          <!-- The box will change scale when it emits the mouseenter event. -->
          <a-event name="mouseenter" scale="4 1 6"></a-event>
        </a-box>

        <a-camera position="0 1.8 0">
          <a-cursor color="#2E3A87">
        </a-camera>
      </a-scene>
      -

      Lighting the Box

      We can change how the scene is lit using the light primitive, <a-light>. By default, the scene will inject an ambient light and a directional light (like the sun). Let’s adjust the lighting conditions of the scene adding different kinds of light:

      +

      Lighting the Box

      We can change how the scene is lit using the light primitive, <a-light>. By default, the scene will inject an ambient light and a directional light (like the sun). Let’s adjust the lighting conditions of the scene adding different kinds of light:

      <a-scene>
        <a-assets>
          <img id="texture" src="texture.png">
        </a-assets>

        <a-box color="#FFF" width="4" height="10" depth="2"
               position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
               src="#texture">
          <!-- Animation will only play when the box is clicked. -->
          <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
          <a-event name="mouseenter" scale="4 1 6"></a-event>
        </a-box>

        <!-- New lights. -->
        <a-light type="spot" color="#333" position="-20 0 0" look-at="a-box"></a-light>
        <a-light type="point" color="#AAA" position="0 5 0"></a-light>

        <a-camera position="0 1.8 0">
          <a-cursor color="#2E3A87">
        </a-camera>
      </a-scene>
      -

      Adding a Background to the Scene

      Finally, we can add a background to the scene using the sky primitive, <a-sky>. The background can be a color or even a 360-degree image or video. But let’s just keep it simple and use a color:

      +

      Adding a Background to the Scene

      Finally, we can add a background to the scene using the sky primitive, <a-sky>. The background can be a color or even a 360-degree image or video. But let’s just keep it simple and use a color:

      <a-scene>
        <a-assets>
          <img id="texture" src="texture.png">
        </a-assets>

        <a-box color="#FFF" width="4" height="10" depth="2"
               position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
               src="#texture">
          <!-- Animation will only play when the box is clicked. -->
          <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
          <a-event name="mouseenter" scale="4 1 6"></a-event>
        </a-box>

        <!-- New lights. -->
        <a-light type="spot" color="#333" position="-20 0 0" look-at="a-box"></a-light>
        <a-light type="point" color="#AAA" position="0 5 0"></a-light>

        <a-sky color="#73F7DD"></a-sky>

        <a-camera position="0 1.8 0">
          <a-cursor color="#2E3A87">
        </a-camera>
      </a-scene>
      -

      And that wraps up our basic scene. Once we get past the novelty of placing static objects in a 3D space in HTML, we want to be able to add complex appearance, behavior, and functionality. We can do so by using and writing components.

      +

      And that wraps up our basic scene. Once we get past the novelty of placing static objects in a 3D space in HTML, we want to be able to add complex appearance, behavior, and functionality. We can do so by using and writing components.

      diff --git a/docs/0.2.0/guide/building-an-advanced-scene.html b/docs/0.2.0/guide/building-an-advanced-scene.html index 164664ef6..8e30f4ea7 100644 --- a/docs/0.2.0/guide/building-an-advanced-scene.html +++ b/docs/0.2.0/guide/building-an-advanced-scene.html @@ -833,7 +833,7 @@

      Play with the [finished example on CodePen][http://codepen.io/team/mozvr/pen/PNoWEz/?editors=1000].

      -

      We built a basic scene, but how can we do more? A-Frame is just an abstraction on top of three.js, and with A-Frame components (not to be confused with Web Components), we can do just about anything three.js can, which is a lot. Let’s go through an example building a scene where the workflow revolves around writing components. We’ll build an interactive scene in which we fire lasers at enemies surrounding us. We can use the standard components that ship with A-Frame, or use components that A-Frame developers have published to the ecosystem. Better yet, we can write our own components to do whatever we want!

      +

      We built a basic scene, but how can we do more? A-Frame is just an abstraction on top of three.js, and with A-Frame components (not to be confused with Web Components), we can do just about anything three.js can, which is a lot. Let’s go through an example building a scene where the workflow revolves around writing components. We’ll build an interactive scene in which we fire lasers at enemies surrounding us. We can use the standard components that ship with A-Frame, or use components that A-Frame developers have published to the ecosystem. Better yet, we can write our own components to do whatever we want!

      Let’s start by adding an enemy target:

      See the Pen Laser Shooter - Step 1 by MozVR (@mozvr) on CodePen.

      @@ -841,13 +841,13 @@

      Using Components

      The awesome-aframe repository is a great place to find components that the community has created to enable new features. Many of these components are started from the [Component Boilerplate][boilerplate and should provide builds in the dist/ folders in their repositories. Take the layout component for example. We can grab the build, drop it into our scene, and immediately be able to use a 3D layout system to automatically position entities. Instead of having one enemy, let’s have ten enemies positioned in a circle around the player:

      See the Pen Laser Shooter - Step 2 by MozVR (@mozvr) on CodePen.

      -

      It is messy in markup to have the enemy entity duplicated ten times. We can drop in the template component to clean that up. We can also use the animation system to have enemies march in a circle around us:

      +

      It is messy in markup to have the enemy entity duplicated ten times. We can drop in the template component to clean that up. We can also use the animation system to have enemies march in a circle around us:

      See the Pen Laser Shooter - Step 3 by MozVR (@mozvr) on CodePen.

      By mixing and matching the layout and template components, we now have ten enemies surrounding us in a circle. Let’s enable gameplay by writing our own components.

      -

      Writing Components

      Developers that are comfortable with JavaScript and three.js can write components to add appearance, behavior, and functionality to the experience. As we’ve seen these components can then be reused and shared with the community. Though not all components have to be shared; they can be ad-hoc or one-off. Since A-Frame is based on an entity-component-system pattern, most logic should be implemented within components. The development workflow within A-Frame should try to revolve around components. The component documentation goes into much more detail on what a component looks like and how to write one.

      +

      Writing Components

      Developers that are comfortable with JavaScript and three.js can write components to add appearance, behavior, and functionality to the experience. As we’ve seen these components can then be reused and shared with the community. Though not all components have to be shared; they can be ad-hoc or one-off. Since A-Frame is based on an entity-component-system pattern, most logic should be implemented within components. The development workflow within A-Frame should try to revolve around components. The component documentation goes into much more detail on what a component looks like and how to write one.

      We want to be able to fire lasers at the enemies and have them disappear. We will need a component to create lasers on click, a component to generate clicks, a component to propel those lasers, a component to check when a laser comes in contact with an enemy.

      -

      spawner Component

      Let’s start by being able to create lasers. We want to be able to spawn a laser entity that starts at the player’s current position. We’ll create a spawner component that listens to an event on the entity, and when that event is emitted, we’ll spawn an entity with a predefined mixin of components:

      +

      spawner Component

      Let’s start by being able to create lasers. We want to be able to spawn a laser entity that starts at the player’s current position. We’ll create a spawner component that listens to an event on the entity, and when that event is emitted, we’ll spawn an entity with a predefined mixin of components:

      AFRAME.registerComponent('spawner', {
        schema: {
          on: { default: 'click' },
          mixin: { default: '' }
        },

        /**
         * Add event listener.
         */
        update: function (oldData) {
          this.el.addEventListener(this.data.on, this.spawn.bind(this));
        },

        /**
         * Spawn new entity at entity's current position.
         */
        spawn: function () {
          var el = this.el;
          var entity = document.createElement('a-entity');
          var matrixWorld = el.object3D.matrixWorld;
          var position = new THREE.Vector3();
          var rotation = el.getAttribute('rotation');
          var entityRotation;

          position.setFromMatrixPosition(matrixWorld);
          entity.setAttribute('position', position);

          // Have the spawned entity face the same direction as the entity.
          // Allow the entity to further modify the inherited rotation.
          position.setFromMatrixPosition(matrixWorld);
          entity.setAttribute('position', position);
          entity.setAttribute('mixin', this.data.mixin);
          entity.addEventListener('loaded', function () {
            entityRotation = entity.getComputedAttribute('rotation');
            entity.setAttribute('rotation', {
              x: entityRotation.x + rotation.x,
              y: entityRotation.y + rotation.y,
              z: entityRotation.z + rotation.z
            });
          });
          el.sceneEl.appendChild(entity);
        }
      });

      click-listener Component

      Now we need to a way to generate a click event on the player entity in order to spawn the laser. We could just write a vanilla JavaScript event handler in a content script, but it is more reusable to write a component that can allow any entity to listen for clicks:

      diff --git a/docs/0.2.0/guide/index.html b/docs/0.2.0/guide/index.html index ef6a0902c..cebe7e1b8 100644 --- a/docs/0.2.0/guide/index.html +++ b/docs/0.2.0/guide/index.html @@ -831,10 +831,10 @@

      A-Frame is a open-source framework for creating 3D and virtual reality experiences on the web. It was built by the MozVR team to more quickly prototype WebVR experiences as we asked ourselves “what would the virtual reality on the web look like?”. Just as today on the web, we click on links to jump from page to page, one day we will walk through portals to jump from world to world. And to have worlds to jump between, we need WebVR content. Unfortunately, there are only a handful of WebGL developers in the world, but there are millions of web developers, web designers, and 3D artists. A-Frame puts VR content creation into hands of everyone. A “Hello World” A-Frame scene might look like:

      <html>
        <head>
          <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
        </head>
        <body>
          <a-scene>
            <a-box color="#6173F4" width="4" height="10" depth="2"></a-box>

            <a-collada-model src="monster.dae" position="-1 0.5 1" rotation="0 45 0 "></a-collada-model>

            <a-image src="fox.png"></a-image>

            <a-sky color="#ECECEC"></a-sky>
          </a-scene>
        </body>
      </html>
      -

      A-Frame allows us to create VR scenes that works across desktop, the Oculus Rift, and mobile with just HTML. We can drop in the library and have a VR scene running in just a few lines of markup. Since it based on HTML, we can manipulate scenes with JavaScript like we would with normal HTML elements, and we can continue using our favorite JavaScript libraries and frameworks (e.g., d3, React). But the key factor is that A-Frame introduces the entity-component-system pattern, a pattern commonly used in 3D and game development, to HTML for composability, extensibility, and flexibility. If we are to bring 3D to the web, we need to adopt existing patterns from the industry. The scene in the example above actually uses convenience elements; at A-Frame’s core, it translates to:

      +

      A-Frame allows us to create VR scenes that works across desktop, the Oculus Rift, and mobile with just HTML. We can drop in the library and have a VR scene running in just a few lines of markup. Since it based on HTML, we can manipulate scenes with JavaScript like we would with normal HTML elements, and we can continue using our favorite JavaScript libraries and frameworks (e.g., d3, React). But the key factor is that A-Frame introduces the entity-component-system pattern, a pattern commonly used in 3D and game development, to HTML for composability, extensibility, and flexibility. If we are to bring 3D to the web, we need to adopt existing patterns from the industry. The scene in the example above actually uses convenience elements; at A-Frame’s core, it translates to:

      <html>
        <body>
          <a-scene>
            <a-entity geometry="primitive: box; depth: 1; height: 1; width: 1"
                      material="color: #4CC3D9"
                      position="-1 0.5 1" rotation="0 45 0"></a-entity>

            <a-entity collada-model="monster.dae"></a-entity>

            <a-entity geometry="primitive: plane" material="src: url(fox.png)"></a-entity>

            <a-entity geometry="primitive: sphere; radius: 5000"
                      material="color: #EF2D5E"
                      scale="-1 1 1"></a-entity>
          </a-scene>
        </body>
      </html>
      -

      Under the hood, A-Frame is built on top of Custom Elements and is powered by three.js. Although A-Frame at first looks like only a handful of custom HTML elements like <a-cube>, A-Frame at its heart is a entity-component-system-based three.js framework with a DOM interface. Everything in an A-Frame scene is an entity which we plug components into in order to compose appearance, behavior, and functionality. This allows experienced developers share reusable components that other developers can drop into their scene and use immediately. The scene above looks needlessly verbose, but we see its true power when we’re able to attach and compose appearance and behavior at whim:

      +

      Under the hood, A-Frame is built on top of Custom Elements and is powered by three.js. Although A-Frame at first looks like only a handful of custom HTML elements like <a-cube>, A-Frame at its heart is a entity-component-system-based three.js framework with a DOM interface. Everything in an A-Frame scene is an entity which we plug components into in order to compose appearance, behavior, and functionality. This allows experienced developers share reusable components that other developers can drop into their scene and use immediately. The scene above looks needlessly verbose, but we see its true power when we’re able to attach and compose appearance and behavior at whim:

      <html>
        <body>
          <a-scene>
            <!-- Configure entity object by adding more components. -->
            <a-entity geometry="primitive: box; depth: 1; height: 1; width: 1"
                      material="color: #4CC3D9"
                      position="-1 0.5 1" rotation="0 45 0"
                      physics="boundingBox: 1 1 1; mass: 2"
                      explode="on: collide"
                      template="src: butterflies.template; type: nunjucks"
                      speech-controls="trigger: siri"></a-entity>

            <a-entity collada-model="monster.dae"></a-entity>

            <a-entity geometry="primitive: plane" material="src: url(fox.png)"></a-entity>

            <a-entity geometry="primitive: sphere; radius: 5000"
                      material="color: #EF2D5E"
                      scale="-1 1 1"></a-entity>
          </a-scene>
        </body>
      </html>

      Read through the documentation front-to-back for more details, and if you have any questions, join the other hundreds of developers on Slack! Welcome to the future of the web.

      diff --git a/docs/0.2.0/primitives/a-box.html b/docs/0.2.0/primitives/a-box.html index 8b9f69097..1dd352dcb 100644 --- a/docs/0.2.0/primitives/a-box.html +++ b/docs/0.2.0/primitives/a-box.html @@ -828,10 +828,10 @@

      -

      The box primitive, formerly called <a-cube>, creates shapes such as boxes, cubes, or walls. It is an entity that prescribes the geometry with its geometric primitive set to box.

      +

      The box primitive, formerly called <a-cube>, creates shapes such as boxes, cubes, or walls. It is an entity that prescribes the geometry with its geometric primitive set to box.

      Example

      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <!-- Basic box. -->
      <a-box color="tomato" depth="2" height="4" width="0.5"></a-box>

      <!-- Textured box. -->
      <a-box src="#texture"></a-box>
      -

      Attributes

      Note that the box primitive inherits common mesh attributes.

      +

      Attributes

      Note that the box primitive inherits common mesh attributes.

      diff --git a/docs/0.2.0/primitives/a-collada-model.html b/docs/0.2.0/primitives/a-collada-model.html index 2314937f6..4ab2dc924 100644 --- a/docs/0.2.0/primitives/a-collada-model.html +++ b/docs/0.2.0/primitives/a-collada-model.html @@ -828,10 +828,10 @@

      -

      The COLLADA model primitive displays a 3D COLLADA model created from a 3D modeling program or downloaded from the web. It is an entity that maps the src attribute to the collada-model component.

      +

      The COLLADA model primitive displays a 3D COLLADA model created from a 3D modeling program or downloaded from the web. It is an entity that maps the src attribute to the collada-model component.

      Example

      <a-scene>
        <a-assets>
          <a-asset-item id="tree" src="tree.dae">
        </a-assets>

        <!-- Using the asset management system. -->
        <a-collada-model src="#tree"></a-collada-model>

        <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
        <a-collada-model src="tree.dae"></a-collada-model>
      </a-scene>
      -

      Attribute

      Note that the COLLADA model primitive inherits common mesh attributes.

      +

      Attribute

      Note that the COLLADA model primitive inherits common mesh attributes.

      diff --git a/docs/0.2.0/primitives/a-cone.html b/docs/0.2.0/primitives/a-cone.html index 463a77d15..27312e323 100644 --- a/docs/0.2.0/primitives/a-cone.html +++ b/docs/0.2.0/primitives/a-cone.html @@ -828,10 +828,10 @@

      -

      The cone primitive creates a cone shape. It is an entity that prescribes the geometry with its geometric primitive set to cone.

      +

      The cone primitive creates a cone shape. It is an entity that prescribes the geometry with its geometric primitive set to cone.

      Example

      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <!-- Basic cone. -->
      <a-cone color="tomato" radius-bottom="2" radius-top="0.5"></a-cone>

      <!-- Textured box. -->
      <a-cone src="#texture"></a-cone>
      -

      Attributes

      Note that the cone primitive inherits common mesh attributes.

      +

      Attributes

      Note that the cone primitive inherits common mesh attributes.

      diff --git a/docs/0.2.0/primitives/a-cursor.html b/docs/0.2.0/primitives/a-cursor.html index 3f3bf196a..e03c1ca1a 100644 --- a/docs/0.2.0/primitives/a-cursor.html +++ b/docs/0.2.0/primitives/a-cursor.html @@ -828,8 +828,8 @@

      -

      The cursor primitive places a reticle or crosshair to add clicking and interactivity with the scene. It is an entity that prescribes the cursor component and a default ring-shaped geometry. The cursor is usually placed as a child of the camera.

      -

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      +

      The cursor primitive places a reticle or crosshair to add clicking and interactivity with the scene. It is an entity that prescribes the cursor component and a default ring-shaped geometry. The cursor is usually placed as a child of the camera.

      +

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      Example

      <a-scene>
        <a-camera>
          <a-cursor></a-cursor>
        </a-camera>

        <a-box></a-box>
      </a-scene>

      Attributes

      diff --git a/docs/0.2.0/primitives/a-curvedimage.html b/docs/0.2.0/primitives/a-curvedimage.html index 5155cafb6..8d5df5051 100644 --- a/docs/0.2.0/primitives/a-curvedimage.html +++ b/docs/0.2.0/primitives/a-curvedimage.html @@ -828,10 +828,10 @@

      -

      The curved image primitive creates images that bend around the user. Curved images arranged around the camera can be pleasing for legibility since each pixel sits at the same distance from the user. They can be a better choice than angled flat planes for complex layouts because they ensure a smooth surface rather than a series of awkward seams between planes. It is an entity that prescribes a double-sided open-ended cylinder with the geometry component and rendering textures on the inside of the cylinder with the material component.

      +

      The curved image primitive creates images that bend around the user. Curved images arranged around the camera can be pleasing for legibility since each pixel sits at the same distance from the user. They can be a better choice than angled flat planes for complex layouts because they ensure a smooth surface rather than a series of awkward seams between planes. It is an entity that prescribes a double-sided open-ended cylinder with the geometry component and rendering textures on the inside of the cylinder with the material component.

      Example

      <a-scene>
        <a-assets>
          <img id="my-image" src="image.png">
        </a-assets>

        <!-- Using the asset management system. -->
        <a-curvedimage src="#my-image" height="3.0" radius="5.7" theta-length="72"
                       rotation="0 100 0" scale="0.8 0.8 0.8"></a-curvedimage>

        <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
        <a-curvedimage src="another-image.png"></a-curved-image>
      </a-scene>
      -

      Attributes

      Note that the curved image primitive inherits common mesh attributes.

      +

      Attributes

      Note that the curved image primitive inherits common mesh attributes.

      diff --git a/docs/0.2.0/primitives/a-cylinder.html b/docs/0.2.0/primitives/a-cylinder.html index df519f62c..0405b4837 100644 --- a/docs/0.2.0/primitives/a-cylinder.html +++ b/docs/0.2.0/primitives/a-cylinder.html @@ -828,11 +828,11 @@

      -

      The cylinder primitive is an entity that prescribes the geometry with its geometric primitive set to cylinder. It can be used to create tubes and curved surfaces.

      +

      The cylinder primitive is an entity that prescribes the geometry with its geometric primitive set to cylinder. It can be used to create tubes and curved surfaces.

      Examples

      The cylinder primitive is versatile and can actually be used to create various shapes:

      <!-- Basic cylinder. -->
      <a-cylinder color="crimson" height="3" radius="1.5"></a-cylinder>

      <!-- Hexagon. -->
      <a-cylinder color="cyan" segments-radial="8"></a-cylinder>

      <!-- Pac-man. -->
      <a-cylinder color="yellow" theta-start="50" theta-length="280" side="double"></a-cylinder>

      <!-- Green pipe. -->
      <a-cylinder color="green" open-ended="true"></a-cylinder>
      -

      Attributes

      Note that the cylinder primitive inherits common mesh attributes.

      +

      Attributes

      Note that the cylinder primitive inherits common mesh attributes.

      diff --git a/docs/0.2.0/primitives/a-image.html b/docs/0.2.0/primitives/a-image.html index 060ab7bbf..dc9eb1d4a 100644 --- a/docs/0.2.0/primitives/a-image.html +++ b/docs/0.2.0/primitives/a-image.html @@ -828,10 +828,10 @@

      -

      The image primitive displays an image on a flat plane. It is an entity that prescribes the geometry with its geometric primitive set to plane.

      +

      The image primitive displays an image on a flat plane. It is an entity that prescribes the geometry with its geometric primitive set to plane.

      Example

      <a-scene>
        <a-assets>
          <img id="my-image src="image.png">
        </a-assets>

        <!-- Using the asset management system. -->
        <a-image src="#my-image"></a-image>

        <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
        <a-image src="another-image.png"></a-image>
      </a-scene>
      -

      Attributes

      Note that the image primitive inherits common mesh attributes.

      +

      Attributes

      Note that the image primitive inherits common mesh attributes.

      diff --git a/docs/0.2.0/primitives/a-light.html b/docs/0.2.0/primitives/a-light.html index 820a66d70..da2cfb440 100644 --- a/docs/0.2.0/primitives/a-light.html +++ b/docs/0.2.0/primitives/a-light.html @@ -828,7 +828,7 @@

      -

      The light primitive adjusts the lighting setup of the scene. It is an entity that maps attributes to properties of the light component.

      +

      The light primitive adjusts the lighting setup of the scene. It is an entity that maps attributes to properties of the light component.

      Examples

      <!-- Red directional light shining from the top left. -->
      <a-light color="red" position="-1 1 0"></a-light>

      <!-- Blue point light, 5 meters in the air. -->
      <a-light type="point" color="blue" position="0 5 0"></a-light>

      <!-- Dim ambient lighting. -->
      <a-light type="ambient" color="#222"></a-light>

      Attributes

      diff --git a/docs/0.2.0/primitives/a-obj-model.html b/docs/0.2.0/primitives/a-obj-model.html index 0ae692f2a..45b894e32 100644 --- a/docs/0.2.0/primitives/a-obj-model.html +++ b/docs/0.2.0/primitives/a-obj-model.html @@ -828,10 +828,10 @@

      -

      The .OBJ model primitive displays a 3D Wavefront model. It is an entity that maps the src and mtl attributes to the obj-model component’s obj and mtl properties respectively.

      +

      The .OBJ model primitive displays a 3D Wavefront model. It is an entity that maps the src and mtl attributes to the obj-model component’s obj and mtl properties respectively.

      Example

      <a-scene>
        <a-assets>
          <a-asset-item id="crate-obj" src="crate.obj"></a-asset-item>
          <a-asset-item id="crate-mtl" src="crate.mtl"></a-asset-item>
        </a-assets>

        <!-- Using the asset management system. -->
        <a-obj-model src="#crate-obj" mtl="#crate-mtl"></a-obj-model>

        <!-- Defining the URL inline. Not recommended but may be more comfortable. -->
        <a-obj-model src="crate.obj" mtl="crate.mtl"></a-obj-model>
      </a-scene>
      -

      Attribute

      Note that the .OBJ model primitive inherits common mesh attributes:

      +

      Attribute

      Note that the .OBJ model primitive inherits common mesh attributes:

      diff --git a/docs/0.2.0/primitives/a-plane.html b/docs/0.2.0/primitives/a-plane.html index 8a7bd940d..ff7e52a60 100644 --- a/docs/0.2.0/primitives/a-plane.html +++ b/docs/0.2.0/primitives/a-plane.html @@ -828,10 +828,10 @@

      -

      The plane primitive creates flat surfaces. It is an entity that prescribes the geometry with its geometric primitive set to plane.

      +

      The plane primitive creates flat surfaces. It is an entity that prescribes the geometry with its geometric primitive set to plane.

      Example

      <a-scene>
        <a-assets>
          <img id="ground" src="ground.jpg">
        </a-assets>

        <!-- Basic plane. -->
        <a-plane color="#CCC" height="20" width="20"></a-plane>

        <!-- Textured plane. -->
        <a-plane src="#ground" height="100" width="100"></a-plane>
      </a-scene>
      -

      Attributes

      Note that the plane primitive inherits common mesh attributes.

      +

      Attributes

      Note that the plane primitive inherits common mesh attributes.

      diff --git a/docs/0.2.0/primitives/a-ring.html b/docs/0.2.0/primitives/a-ring.html index ad04f5965..3d8b62255 100644 --- a/docs/0.2.0/primitives/a-ring.html +++ b/docs/0.2.0/primitives/a-ring.html @@ -828,10 +828,10 @@

      -

      The ring primitive creates a ring or disc shape. It is an entity that prescribes the geometry with its geometric primitive set to ring.

      +

      The ring primitive creates a ring or disc shape. It is an entity that prescribes the geometry with its geometric primitive set to ring.

      Example

      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <!-- Basic ring. -->
      <a-ring color="teal" radius-inner="1" radius-outer="2"></a-ring>

      <!-- Textured ring. -->
      <a-ring src="#texture"></a-ring>
      -

      Attributes

      Note that the ring primitive inherits common mesh attributes.

      +

      Attributes

      Note that the ring primitive inherits common mesh attributes.

      | Attribute | Component Mapping | |—————-|————————+ | radius-inner | geometry.radiusInner | diff --git a/docs/0.2.0/primitives/a-sky.html b/docs/0.2.0/primitives/a-sky.html index 263d95116..3d26415d0 100644 --- a/docs/0.2.0/primitives/a-sky.html +++ b/docs/0.2.0/primitives/a-sky.html @@ -835,7 +835,7 @@

      Examp

      A plain color as a background:

      <a-sky color="#6EBAA7"></a-sky>
      -

      Attributes

      Note that the sky primitive inherits common mesh attributes.

      +

      Attributes

      Note that the sky primitive inherits common mesh attributes.

      diff --git a/docs/0.2.0/primitives/a-sphere.html b/docs/0.2.0/primitives/a-sphere.html index 85efe4840..dc74c066a 100644 --- a/docs/0.2.0/primitives/a-sphere.html +++ b/docs/0.2.0/primitives/a-sphere.html @@ -828,10 +828,10 @@

      -

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      +

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      Example

      <a-sphere color="yellow" radius="5"></a-sphere>
      -

      Attributes

      Note that the sphere primitive inherits common mesh attributes.

      +

      Attributes

      Note that the sphere primitive inherits common mesh attributes.

      diff --git a/docs/0.2.0/primitives/a-torus.html b/docs/0.2.0/primitives/a-torus.html index 54906a0df..efb0b1510 100644 --- a/docs/0.2.0/primitives/a-torus.html +++ b/docs/0.2.0/primitives/a-torus.html @@ -828,10 +828,10 @@

      -

      The torus primitive creates a donut or circular tube shape. It is an entity that prescribes the geometry with its geometric primitive set to torus.

      +

      The torus primitive creates a donut or circular tube shape. It is an entity that prescribes the geometry with its geometric primitive set to torus.

      Example

      <a-torus color="blue" position="0 0 0" segments-radial="50" segments-tubular="200" radius="5"
               radius-tubular="0.1"></a-torus>
      -

      Attributes

      Note that the torus primitive inherits common mesh attributes.

      +

      Attributes

      Note that the torus primitive inherits common mesh attributes.

      diff --git a/docs/0.2.0/primitives/a-video.html b/docs/0.2.0/primitives/a-video.html index bb56d8e1a..42621b83a 100644 --- a/docs/0.2.0/primitives/a-video.html +++ b/docs/0.2.0/primitives/a-video.html @@ -828,10 +828,10 @@

      -

      The video primitive displays a video on a flat plane as a texture. It is an entity that prescribes the geometry with its geometric primitive set to plane.

      +

      The video primitive displays a video on a flat plane as a texture. It is an entity that prescribes the geometry with its geometric primitive set to plane.

      Example

      <a-scene>
        <a-assets>
          <video id="penguin-sledding" autoplay loop="true" src="penguin-sledding.mp4">
        </a-assets>

        <!-- Using the asset management system. -->
        <a-video src="#penguin-sledding" width="16" height="9" position="0 0 -20"></a-video>

        <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
        <a-video src="airbending.mp4"></a-video>
      </a-scene>
      -

      Attributes

      Note that the video primitive inherits common mesh attributes.

      +

      Attributes

      Note that the video primitive inherits common mesh attributes.

      diff --git a/docs/0.2.0/primitives/a-videosphere.html b/docs/0.2.0/primitives/a-videosphere.html index 092deb2d0..c0809d981 100644 --- a/docs/0.2.0/primitives/a-videosphere.html +++ b/docs/0.2.0/primitives/a-videosphere.html @@ -831,7 +831,7 @@

      The videosphere primitive easily adds a 360-degree video background to a scene or display a 360-degree video. It is an entity that prescribes a large sphere with the video texture mapped to the inside.

      Examples

      <a-scene>
        <a-assets>
          <video id="antarctica" autoplay loop="true" src="antarctica.mp4">
        </a-assets>

        <!-- Using the asset management system. -->
        <a-videosphere src="#antarctica"></a-videosphere>

        <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
        <a-videosphere src="africa.mp4"></a-videosphere>
      </a-scene>
      -

      Attributes

      Note that the videosphere primitive inherits common mesh attributes.

      +

      Attributes

      Note that the videosphere primitive inherits common mesh attributes.

      diff --git a/docs/0.2.0/primitives/index.html b/docs/0.2.0/primitives/index.html index 649f05cae..90f6db8a9 100644 --- a/docs/0.2.0/primitives/index.html +++ b/docs/0.2.0/primitives/index.html @@ -828,7 +828,7 @@

      -

      Primitives alias A-Frame entities and map HTML attributes to component properties. They are a convenience layer on top of the core API and are meant to:

      +

      Primitives alias A-Frame entities and map HTML attributes to component properties. They are a convenience layer on top of the core API and are meant to:

      • Ease us into the concept of the entity-component-system pattern.
      • Provide a more familiar interface with HTML attributes mapping to only a single value.
        • @@ -851,9 +851,9 @@

        Primitives are Entities

        Since primitives extends <a-entity>s, operations that can be done upon entities can be done upon primitives. These operations include:

        • Positioning, rotating, and scaling
          • -
        • Attaching additional components to define additional appearance, behavior, or functionality
          • -
        • Applying animations
          • -
        • Specifying mixins
          • +
        • Attaching additional components to define additional appearance, behavior, or functionality
          • +
        • Applying animations
          • +
        • Specifying mixins

        Primitives are Helpers

        Note that primitives are a helper layer on top of A-Frame’s core API. Thus it is still extremely valuable to grasp the following:

          @@ -866,10 +866,10 @@

          material component) +
        • Describe which component properties the attributes proxy the value to (e.g., color maps to material.color, meaning the color property of the material component)
        • Describe any techniques or caveats

        -

        A lot of the primitives represent geometric meshes (i.e., shapes with an appearance). Thus, many of them inherit the common mesh attributes. So while attributes such as color or src are not listed in the attributes table for primitives such as <a-box> or <a-plane>, they are there. Remember to refer to common mesh attributes table when noted.

        +

        A lot of the primitives represent geometric meshes (i.e., shapes with an appearance). Thus, many of them inherit the common mesh attributes. So while attributes such as color or src are not listed in the attributes table for primitives such as <a-box> or <a-plane>, they are there. Remember to refer to common mesh attributes table when noted.

        diff --git a/docs/0.2.0/primitives/mesh-attributes.html b/docs/0.2.0/primitives/mesh-attributes.html index 410c6a9b8..9d2b23e49 100644 --- a/docs/0.2.0/primitives/mesh-attributes.html +++ b/docs/0.2.0/primitives/mesh-attributes.html @@ -828,7 +828,7 @@

        -

        Many of the primitives are entities that compose a geometric mesh, meaning they primarily prescribe the geometry and material components. Most of the mesh primitives share common attributes, especially for mapping to the material component. These common attributes won’t be described in individual documentation pages for each primitive so they will be listed here.

        +

        Many of the primitives are entities that compose a geometric mesh, meaning they primarily prescribe the geometry and material components. Most of the mesh primitives share common attributes, especially for mapping to the material component. These common attributes won’t be described in individual documentation pages for each primitive so they will be listed here.

        Example

        <a-box>, <a-cylinder>, <a-sphere> are some primitives that prescribe a geometric mesh. They share common attributes relating to the material component:

      <a-box opacity="0.5" shader="flat" src="dirt.png"></a-box>
      <a-cylinder opacity="0.75" shader="flat" src="soda.png"></a-cylinder>
      <a-sphere opacity="1.0" shader="standard" src="sun.png"></a-sphere>
      diff --git a/docs/0.3.0/components/cursor.html b/docs/0.3.0/components/cursor.html index 54f3582b4..86f7ef772 100644 --- a/docs/0.3.0/components/cursor.html +++ b/docs/0.3.0/components/cursor.html @@ -938,15 +938,15 @@

      -

      The cursor component lets us interact with entities through clicking and gazing. It is a specific application of the raycaster component in that it:

      +

      The cursor component lets us interact with entities through clicking and gazing. It is a specific application of the raycaster component in that it:

      • Listens for mouse clicks and gaze-based fuses.
      • Captures only the first intersected entity.
      • Emits special mouse and hover events (e.g., relating to mouse down/up/enter/leave).
      • Has additional states for hovering.
      -

      When the mouse is clicked, the closest visible entity intersecting the cursor, if any, will emit a click event. Note the cursor component only applies the raycasting behavior. To provide a shape or appearance to the cursor, you could apply the geometry and material components.

      -

      Example

      For example, we can create a ring-shaped cursor that is fixed to the center of the screen. To fix it to the screen such that it is always present no matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

      +

      When the mouse is clicked, the closest visible entity intersecting the cursor, if any, will emit a click event. Note the cursor component only applies the raycasting behavior. To provide a shape or appearance to the cursor, you could apply the geometry and material components.

      +

      Example

      For example, we can create a ring-shaped cursor that is fixed to the center of the screen. To fix it to the screen such that it is always present no matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

      <a-entity camera>
        <a-entity cursor="fuse: true; fuseTimeout: 500"
                  position="0 0 -1"
                  geometry="primitive: ring"
                  material="color: black; shader: flat">
        </a-entity>
      </a-entity>

      <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
      // Component to change to random color on click.
      AFRAME.registerComponent('cursor-listener', {
        init: function () {
          var COLORS = ['red', 'green', 'blue'];
          this.el.addEventListener('click', function () {
            var randomIndex = Math.floor(Math.random() * COLORS.length);
            this.setAttribute('material', 'color', COLORS[randomIndex]);
            console.log('I was clicked!');
          });
        }
      });
      @@ -1031,14 +1031,14 @@

      States

      Configuring the Cursor through the Raycaster Component

      The cursor is built on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

      <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>

      Fuse-Based Cursor

      Also known as gaze-based cursor. If the cursor is set to be fuse-based, the cursor will trigger a click if the user gazes at an entity for a set amount of time. Imagine a laser strapped to the user’s head, and the laser extends out into the scene. If the user stares at an entity long enough (i.e., the fuseTimeout), then the cursor will trigger a click.

      The advantage of fuse-based interactions for VR is that it does not require additional input devices other than the headset. It is primarily intended for Google Cardboard applications. The disadvantage of fuse-based interactions is that it requires the user to turn their head a lot.

      -

      Adding Visual Feedback

      To add visual feedback to the cursor in order to display indication when the cursor is clicking or fusing, we can use the animation system. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

      +

      Adding Visual Feedback

      To add visual feedback to the cursor in order to display indication when the cursor is clicking or fusing, we can use the animation system. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

      <a-entity cursor="fuse: true; fuseTimeout: 500"
                position="0 0 -1"
                geometry="primitive: ring"
                material="color: black; shader: flat">
        <a-animation begin="click" easing="ease-in" attribute="scale"
                     fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
        <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                     fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
      </a-entity>

      To play with an example of a cursor with visual feedback, check out the Cursor with Visual Feedback example on CodePen.

      diff --git a/docs/0.3.0/components/debug.html b/docs/0.3.0/components/debug.html index 656268da3..287eb2d39 100644 --- a/docs/0.3.0/components/debug.html +++ b/docs/0.3.0/components/debug.html @@ -955,8 +955,8 @@ 

      <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

      Make sure that this component is not active in production.

      -

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM.

      +

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM.

      diff --git a/docs/0.3.0/components/fog.html b/docs/0.3.0/components/fog.html index 2a7735a4e..06ff72c42 100644 --- a/docs/0.3.0/components/fog.html +++ b/docs/0.3.0/components/fog.html @@ -938,7 +938,7 @@

      -

      The fog component obscures entities in fog given distance from the camera. The fog component applies only to the <a-scene> element.

      +

      The fog component obscures entities in fog given distance from the camera. The fog component applies only to the <a-scene> element.

      Example

      <a-scene fog="type: linear; color: #AAA"></a-scene>

      Properties

      Given the type of fog distribution, different properties will apply.

      diff --git a/docs/0.3.0/components/geometry.html b/docs/0.3.0/components/geometry.html index 2bba8cbdd..78b21c035 100644 --- a/docs/0.3.0/components/geometry.html +++ b/docs/0.3.0/components/geometry.html @@ -944,7 +944,7 @@

      additional properties are used to further define the geometry. A material component is usually defined to provide a appearance alongside the shape to create a complete mesh.

      -
      +

      Base Properties

      Every geometry type will have these properties:

      @@ -1429,7 +1429,7 @@ 

      AFRAME.registerGeometry('box', {
        schema: {
          depth: {default: 1, min: 0},
          height: {default: 1, min: 0},
          width: {default: 1, min: 0},
          segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
        },

        init: function (data) {
          this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
        }
      });

      Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then the geometry needs to be created and set on this.geometry through the init and update lifecycle methods.

      When a geometry component sets its primitive property to the custom geometry diff --git a/docs/0.3.0/components/hand-controls.html b/docs/0.3.0/components/hand-controls.html index de94103f9..b1211d95e 100644 --- a/docs/0.3.0/components/hand-controls.html +++ b/docs/0.3.0/components/hand-controls.html @@ -939,8 +939,8 @@

      The hand-controls gives tracked hands (using a prescribed model) with animated -gestures. It wraps the vive-controls component, which wraps the -tracked-controls component. It adds additional events, semantically +gestures. It wraps the vive-controls component, which wraps the +tracked-controls component. It adds additional events, semantically named, and handles hand animations.

      Example

      <a-entity hand-controls="left"></a-entity>
      <a-entity hand-controls="right"></a-entity>
      diff --git a/docs/0.3.0/components/keyboard-shortcuts.html b/docs/0.3.0/components/keyboard-shortcuts.html index 8b73cda77..7b0bf8a78 100644 --- a/docs/0.3.0/components/keyboard-shortcuts.html +++ b/docs/0.3.0/components/keyboard-shortcuts.html @@ -938,7 +938,7 @@

      -

      The keyboard-shortcuts component toggles global keyboard shortcuts. The keyboard-shortcuts component applies only to the <a-scene> element.

      +

      The keyboard-shortcuts component toggles global keyboard shortcuts. The keyboard-shortcuts component applies only to the <a-scene> element.

      Example

      <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

      Properties

      diff --git a/docs/0.3.0/components/material.html b/docs/0.3.0/components/material.html index 435e1263a..d5935a11c 100644 --- a/docs/0.3.0/components/material.html +++ b/docs/0.3.0/components/material.html @@ -939,11 +939,11 @@

      The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

      Custom materials and shaders can be registered to extend the material component in order to provide a wide range of visual effects.

      -
      +

      Example

      Defining a red material using the default standard material:

      <a-entity geometry="primitive: box" material="color: red"></a-entity>
      @@ -1045,7 +1045,7 @@

      fog. +Whether or not material is affected by fog. true @@ -1113,7 +1113,7 @@

      fog. +Whether or not material is affected by fog. true @@ -1139,7 +1139,7 @@

      Textures

      To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

      +asset management system:

      <a-scene>
        <a-assets>
          <img id="my-texture" src="texture.png">
        </a-assets>

        <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
      </a-scene>

      src can also be an inline URL. Note that we do not get browser caching or @@ -1218,7 +1218,7 @@

      THREE.ShaderMaterials to create custom shaders.

      We can provide our own GLSL vertex and fragment shaders (small programs that run on the GPU), and we can define a schema for their uniforms and -attributes just as we would with component schemas. The +attributes just as we would with component schemas. The shader’s schema will extend the base material component’s schema, and as a result we can pass values from HTML directly to the shader.

      Schema

      THREE.ShaderMaterial-based schemas pass uniforms to shaders. To specify a diff --git a/docs/0.3.0/components/obj-model.html b/docs/0.3.0/components/obj-model.html index 5360d7bcf..349c055c0 100644 --- a/docs/0.3.0/components/obj-model.html +++ b/docs/0.3.0/components/obj-model.html @@ -956,7 +956,7 @@

      mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

      Events

      diff --git a/docs/0.3.0/components/raycaster.html b/docs/0.3.0/components/raycaster.html index 183efc73e..5c8de701b 100644 --- a/docs/0.3.0/components/raycaster.html +++ b/docs/0.3.0/components/raycaster.html @@ -939,7 +939,7 @@

      The raycaster component does general intersection testing with a raycaster. Raycasting is the method of extending a line from an origin towards a direction, and checking whether that line intersects with other entites. The raycaster component is a wrapper on top of the three.js raycaster. It checks for intersections at a certain interval against a list of objects, and will emit events on the entity when it detects intersections or clearing of intersections (i.e., when the raycaster is no longer intersecting an entity).

      -

      The raycaster component is what the cursor component is built upon.

      +

      The raycaster component is what the cursor component is built upon.

      Example

      <a-entity id="player" collider-check>
        <a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
      </a-entity>
      <a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
      AFRAME.registerComponent('collider-check', {
        dependencies: ['raycaster'],

        init: function () {
          this.el.addEventListener('raycaster-intersected', function () {
            console.log('Player hit something!');
          });
        }
      });
      @@ -1036,8 +1036,8 @@

      Metho

      Setting the Origin and Direction of the Raycaster

      The raycaster has an origin, where its ray starts, and a direction, where the ray goes.

      -

      The origin of the raycaster is at the raycaster entity’s position. The origin of the raycaster can be changed by setting the position component of the raycaster entity (or parent entities of the raycaster entity).

      -

      The direction of the raycaster is in “front” of the raycaster entity (i.e., 0 0 -1, on the negative Z-axis). The direction of the raycaster can be changed by setting the rotation component of the raycaster entity (or parent entities of the raycaster entity).

      +

      The origin of the raycaster is at the raycaster entity’s position. The origin of the raycaster can be changed by setting the position component of the raycaster entity (or parent entities of the raycaster entity).

      +

      The direction of the raycaster is in “front” of the raycaster entity (i.e., 0 0 -1, on the negative Z-axis). The direction of the raycaster can be changed by setting the rotation component of the raycaster entity (or parent entities of the raycaster entity).

      For example, here is applying a raycaster along the length of a rotated bullet:

      <!-- Bullet, rotated to be parallel with the ground. -->
      <a-entity id="bullet" geometry="primitive: cylinder; height: 0.1" rotation="-90 0 0">
        <!-- Raycaster, targets enemies, made to be as long as the bullet, positioned to the start of the bullet, rotated to align with the bullet. -->
        <a-entity raycaster="objects: .enemies; far: 0.1" position="0 -0.5 0" rotation="90 0 0"></a-entity>
      </a-entity>
      diff --git a/docs/0.3.0/components/stats.html b/docs/0.3.0/components/stats.html index 11f21e295..8a28903d5 100644 --- a/docs/0.3.0/components/stats.html +++ b/docs/0.3.0/components/stats.html @@ -939,7 +939,7 @@

      The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

      +component applies only to the <a-scene> element.

      Example

      <a-scene stats></a-scene>

      Metrics

        diff --git a/docs/0.3.0/components/tracked-controls.html b/docs/0.3.0/components/tracked-controls.html index fe335e3d7..febfd6387 100644 --- a/docs/0.3.0/components/tracked-controls.html +++ b/docs/0.3.0/components/tracked-controls.html @@ -940,7 +940,7 @@

        The tracked-controls component interfaces with tracked controllers. It uses the Gamepad API to handle tracked controllers, -and is abstracted by the hand-controls component & the vive-controls component. +and is abstracted by the hand-controls component & the vive-controls component. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events.

        Example

        <a-entity tracked-controls="controller: 0; id: OpenVR Gamepad"></a-entity>
        diff --git a/docs/0.3.0/components/vive-controls.html b/docs/0.3.0/components/vive-controls.html index 3b9f21ae6..c90e86456 100644 --- a/docs/0.3.0/components/vive-controls.html +++ b/docs/0.3.0/components/vive-controls.html @@ -939,7 +939,7 @@

        The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

        Example

        <a-entity vive-controls="hand: left"></a-entity>
        <a-entity vive-controls="hand: right"></a-entity>
        diff --git a/docs/0.3.0/components/vr-mode-ui.html b/docs/0.3.0/components/vr-mode-ui.html index 1f6f7bccb..d5fb4c84b 100644 --- a/docs/0.3.0/components/vr-mode-ui.html +++ b/docs/0.3.0/components/vr-mode-ui.html @@ -938,7 +938,7 @@

        -

        The vr-mode-ui component toggles UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only to the <a-scene> element.

        +

        The vr-mode-ui component toggles UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only to the <a-scene> element.

        Example

        <a-scene vr-mode-ui="enabled: false"></a-scene>

        Properties

        diff --git a/docs/0.3.0/components/wasd-controls.html b/docs/0.3.0/components/wasd-controls.html index c0180d15b..9054b7c45 100644 --- a/docs/0.3.0/components/wasd-controls.html +++ b/docs/0.3.0/components/wasd-controls.html @@ -938,7 +938,7 @@

        -

        The wasd-controls component defines the behavior of an entity to be controlled by the WASD keyboard keys. It is usually used alongside the camera component.

        +

        The wasd-controls component defines the behavior of an entity to be controlled by the WASD keyboard keys. It is usually used alongside the camera component.

        Example

        <a-entity camera look-controls wasd-controls></a-entity>

        Properties

        diff --git a/docs/0.3.0/core/AFRAME.html b/docs/0.3.0/core/AFRAME.html index cdf1b4cbd..4faef280c 100644 --- a/docs/0.3.0/core/AFRAME.html +++ b/docs/0.3.0/core/AFRAME.html @@ -950,7 +950,7 @@

        - + @@ -958,7 +958,7 @@

        - + @@ -974,7 +974,7 @@

        - + @@ -982,15 +982,15 @@

        - + - + - + @@ -1014,7 +1014,7 @@

        - + diff --git a/docs/0.3.0/core/animations.html b/docs/0.3.0/core/animations.html index f98344163..7920e4f8c 100644 --- a/docs/0.3.0/core/animations.html +++ b/docs/0.3.0/core/animations.html @@ -953,7 +953,7 @@

        the animation, and loops indefinitely.

        AEntityEntity prototype.Entity prototype.
        ANode
        ASceneScene prototype.Scene prototype.
        components
        registerComponentFunction to register a component.Function to register a component.
        registerElement
        registerGeometryFunction to register a geometry.Function to register a geometry.
        registerPrimitiveFunction to register a primitive.Function to register a primitive.
        registerShaderFunction to register a material or shader.Function to register a material or shader.
        schema
        utilsA-Frame utility modules.A-Frame utility modules.
        version
        <a-entity>
          <a-entity position="5 0 0"></a-entity>
          <a-animation attribute="rotation"
                       dur="10000"
                       fill="forwards"
                       to="0 360 0"
                       repeat="indefinite"></a-animation>
        </a-entity>
        -
        +

        Attributes

        Here is an overview of animation attributes. We’ll go into more detail below.

        diff --git a/docs/0.3.0/core/asset-management-system.html b/docs/0.3.0/core/asset-management-system.html index 20afae337..8e7e88d88 100644 --- a/docs/0.3.0/core/asset-management-system.html +++ b/docs/0.3.0/core/asset-management-system.html @@ -954,7 +954,7 @@

        The scene and all entities will block (i.e., the scene won’t render) until all of these types of assets are fetched (or error out) before playing.

        -
        +

        Example

        We can define all of our assets in <a-assets> and point to those assets from our entities using selectors:

        diff --git a/docs/0.3.0/core/component.html b/docs/0.3.0/core/component.html index 93b7c80ea..84cc281cd 100644 --- a/docs/0.3.0/core/component.html +++ b/docs/0.3.0/core/component.html @@ -938,7 +938,7 @@

        -

        In the entity-component-system pattern, a component is a reusable and +

        In the entity-component-system pattern, a component is a reusable and modular chunk of data that is plugged into an entity to add appearance, behavior, and/or functionality.

        In A-Frame, components modify entities which are 3D objects in the scene. We @@ -952,7 +952,7 @@

        Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

        -
        +

        What a Component Looks Like

        A component holds a bucket of data in the form of one or more component properties. This data is used to modify the entity. Consider an engine @@ -976,7 +976,7 @@

        Under the Hood

        A component is registered using AFRAME.registerComponent, which we pass a component name to register a component under and a component definition. Below -is the outer skeleton for the position component:

        +is the outer skeleton for the position component:

        AFRAME.registerComponent('position', {
          // ...
        });

        A component defines a schema that defines its properties, giving anatomy @@ -1014,7 +1014,7 @@

        el -Reference to the entity element. +Reference to the entity element. id @@ -1074,7 +1074,7 @@ 

        // Initializes last.
        AFRAME.registerComponent('a', {
          dependencies: ['b']
        });

        // Initializes second.
        AFRAME.registerComponent('b', {
          dependencies: ['c']
        });

        // Initializes first.
        AFRAME.registerComponent('c', {});

        Multiple Instancing

        By default, a component can only have one instance. For example, an entity can -only have one geometry component attached. But some components like the sound +only have one geometry component attached. But some components like the sound component can have multiple instances on a single entity. We use double underscores (i.e., __) to separate the component name and the ID of individual instances of the component

        @@ -1188,10 +1188,10 @@

        Single-Property Schemas

        Single-property schemas define only a single anonymous flat property. They must define either a type or a default value to be able to infer an appropriate parser and stringifier.

        -

        For example, the rotation component takes a vec3:

        +

        For example, the rotation component takes a vec3:

        AFRAME.registerComponent('rotation', {
          schema: {
            // Default value will be 0, 0, 0 as defined by the vec3 property type.
            type: 'vec3'
          }

          // ...
        });
        -

        And for example, the visible component takes a boolean:

        +

        And for example, the visible component takes a boolean:

        AFRAME.registerComponent('visible', {
          schema: {
            // Type will be inferred to be boolean.
            default: true
          },

          // ...
        });

        Multi-Property Schemas

        Multi-property schemas it consists of one or more named property definitions. @@ -1207,13 +1207,13 @@

        this.data which in a single-property schema is a value and in a multi-property schema is an object.

        The handlers will almost always interact with the entity. Read about the -entity API if you have not already.

        +entity API if you have not already.

        .init()

        .init is called once in a component’s lifecycle when it is attached to the entity. The init handler is generally used to set up state and instantiate variables that may used throughout a component. Not every component will need to define .init. It is similar to createdCallback or React.ComponentDidMount.

        -

        For example, the camera component‘s init creates +

        For example, the camera component‘s init creates and sets the camera.

        init: function () {
          var camera = this.camera = new THREE.PerspectiveCamera();
          this.el.setObject3D('camera', camera);
        },

        // ...
        @@ -1248,8 +1248,8 @@

        visible component’s update handler toggles the -visibility of the entity.

        +

        For example, the visible component’s update handler toggles the +visibility of the entity.

        update: function () {
          this.el.object3D.visible = this.data;
        }

        Example uses of update by some A-Frame components:

        @@ -1276,7 +1276,7 @@

        .remove()

        .remove is called when a component detaches from the entity (e.g., as a result of removeAttribute). This is used to remove all modifications, listeners, and behaviors to the entity that a component has added in its lifetime.

        -

        For example, when the light component detaches, it removes the light +

        For example, when the light component detaches, it removes the light it previously attached to the entity:

        remove: function () {
          this.el.removeObject3D('light');
        }
        @@ -1352,7 +1352,7 @@

        M 
        AFRAME.registerComponent('example', {
          updateSchema: (data) {
            var newSchema;
            if (data.type !== this.data.type) {
              newSchema = getNewSchema(data.type);
              this.extendSchema(newSchema);
            }
          }
        });

        .flushToDOM()

        flushToDOM will manually serialize the component’s data and update the DOM. -Read more about component-to-DOM serialization.

        +Read more about component-to-DOM serialization.

        Write a Component

        Line Component

        Let’s build an example line component that renders a line. We want to make the property API flexible enough to be able to specify the color and vertices:

        <a-entity line="color: red; path: -1 1 0, -1 0.5 0, -1 0 0"></a-entity>
        @@ -1381,7 +1381,7 @@

        UpdateHere, we update the line by completely replacing it. Though sometimes, we might want to more granularly update objects for better performance.

        Remove

        For removal of the line mesh from the entity, we use -Entity.removeObject3D:

        +Entity.removeObject3D:

        remove: function () {
          this.el.removeObject3D('mesh');
        }

        This will remove the object from the entity’s scene graph.

        diff --git a/docs/0.3.0/core/entity.html b/docs/0.3.0/core/entity.html index d7f2badcc..35c582c3a 100644 --- a/docs/0.3.0/core/entity.html +++ b/docs/0.3.0/core/entity.html @@ -941,23 +941,23 @@ 

                   .

        An entity is represented by the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components in order to provide them apperance, behavior, and functionality.

        -

        In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

        -
        +

        In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

        +

        Example

        Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

        <a-entity>

        We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

        +give it shape and appearance, we can attach the geometry and +material components:

        <a-entity geometry="primitive: box" material="color: red">
        -

        Or to make it emit light, we can further attach the light component:

        +

        Or to make it emit light, we can further attach the light component:

        <a-entity geometry="primitive: box" material="color: red"
                  light="type: point; intensity: 2.0">

        Retrieving an Entity

        We can simply retrieve an entity using DOM APIs.

        @@ -989,7 +989,7 @@

        object3DMap

        An entity’s object3DMap is a JavaScript object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that may have been registered by components.

        -

        For an entity with a geometry and light components +

        For an entity with a geometry and light components attached, object3DMap might look like:

        {
          light: <THREE.Light Object>,
          mesh: <THREE.Mesh Object>
        }
        @@ -1003,7 +1003,7 @@

        Metho 
        entity.addEventListener('stateadded', function (evt) {
          if (evt.detail.state === 'selected') {
            console.log('Entity now selected!');
          }
        });

        entity.addState('selected');
        entity.is('selected');  // >> true

        emit (name, detail, bubbles)

        emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

        +trigger an animation:

        // <a-entity>
        //   <a-animation attribute="rotation" begin="rotate" to="0 360 0"></a-animation>
        // </a-entity>
        entity.emit('rotate');

        We can also pass event detail or data as the second argument:

        @@ -1014,7 +1014,7 @@ 

        entity.emit('sink', null, false);

        flushToDOM (recursive)

        flushToDOM will manually serialize all of the entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

        +Read more about component-to-DOM serialization.

        getAttribute (attr)

        getAttribute can be used to retrieve parsed component data. If attr is the name of a registered component, getAttribute will return only the component data defined in the HTML as a parsed object. getAttribute for components is the partial form of getComputedAttribute since the returned component data does not include applied mixins or default values:

        // <a-entity geometry="primitive: box; width: 3">

        entity.getAttribute('geometry');
        // >> { primitive: "box", width: 3 }

        entity.getAttribute('geometry').primitive;
        // >> "box"

        entity.getAttribute('geometry').height;
        // >> undefined
        @@ -1044,19 +1044,19 @@

        pa is paused itself.

        // <a-entity id="spinning-jumping-ball">
        entity.pause();
        -

        For example, the look-controls component on pause will remove event handlers that listen for input.

        +

        For example, the look-controls component on pause will remove event handlers that listen for input.

        play ()

        play will start any dynamic behavior as defined by animations and components. This is automatically called when the entity is attached. When an entity calls play, it will call play on all of its children.

        entity.pause();
        entity.play();
        -

        For example, the sound component on play will begin playing the sound.

        +

        For example, the sound component on play will begin playing the sound.

        setAttribute (attr, value, componentAttrValue)

        If attr is not the name of a registered component or the component is a single-property component, setAttribute behaves mostly as it normally would:

        entity.setAttribute('visible', false);

        Though if attr is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

        entity.setAttribute('position', { x: 1, y: 2, z: 3 });
        diff --git a/docs/0.3.0/core/index.html b/docs/0.3.0/core/index.html index a4818eb5c..e0099d1a9 100644 --- a/docs/0.3.0/core/index.html +++ b/docs/0.3.0/core/index.html @@ -942,9 +942,9 @@

        pattern common in game development that emphasizes composability over inheritance:

          -
        • An entity is a general-purpose object that inherently does and renders nothing.
          • -
        • A component is a reusable module that is plugged into entities in order to provide appearance, behavior, and/or functionality. They are plug-and-play for objects.
          • -
        • A system provides global scope, services, and management to classes of components.
          • +
        • An entity is a general-purpose object that inherently does and renders nothing.
          • +
        • A component is a reusable module that is plugged into entities in order to provide appearance, behavior, and/or functionality. They are plug-and-play for objects.
          • +
        • A system provides global scope, services, and management to classes of components.

        ECS lets us build complex entities with rich behavior by plugging different reusable components into the sockets on the entity. Contrast this to @@ -953,7 +953,7 @@

        ECS grants developers the key to permissionless innovation. Developers can write, share, and plug in components that extend new features or iterate upon existing features.

        -
        +

        Concept

        As an abstract example, imagine a car is an entity:

          @@ -968,10 +968,10 @@

          geometry and material components. Since the components take multiple properties, we define the property values using an inline-style syntax:

          +

          For example, to compose a tomato-colored sphere starting with an entity, we can attach the geometry and material components. Since the components take multiple properties, we define the property values using an inline-style syntax:

          <a-entity geometry="primitive: sphere; radius: 1.5"
                    material="color: tomato; metalness: 0.7"></a-entity>
          -

          From there, we can attach more and more components to add whatever appearance, behavior, or funtionality we want. Attach the light component to have it emit light. Attach the sound component to have it play sound. Attach the physics component to have it be affected by gravity and collision detection:

          +

          From there, we can attach more and more components to add whatever appearance, behavior, or funtionality we want. Attach the light component to have it emit light. Attach the sound component to have it play sound. Attach the physics component to have it be affected by gravity and collision detection:

          Composing an Entity

          We can even attach third-party components that other people have created. If someone writes a component that enables a mesh to explode, or a component that enables the mesh to use a canvas as its material texture, we could just drop the component into our A-Frame experience and use it immediately in HTML. The entity-component-system pattern enables great flexibility and extensibility.

          diff --git a/docs/0.3.0/core/mixins.html b/docs/0.3.0/core/mixins.html index 49cafe8f0..031eed26f 100644 --- a/docs/0.3.0/core/mixins.html +++ b/docs/0.3.0/core/mixins.html @@ -940,7 +940,7 @@

          Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

          <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-mixin>
            </a-assets>

            <a-entity mixin="red cube"></a-entity>
            <a-entity mixin="blue cube"></a-entity>
          </a-scene>
          @@ -950,7 +950,7 @@

          the entities above expand to:

          <a-entity material="color: red" geometry="primitive: box"></a-entity>
          <a-entity material="color: blue" geometry="primitive: box"></a-entity>
          -
          +

          Merging Component Properties

          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="height: 10"></a-mixin>
              <a-mixin id="wide" geometry="width: 10"></a-mixin>
            </a-assets>

            <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
          </a-scene>
          diff --git a/docs/0.3.0/core/scene.html b/docs/0.3.0/core/scene.html index e13ea6afa..96a17ce63 100644 --- a/docs/0.3.0/core/scene.html +++ b/docs/0.3.0/core/scene.html @@ -939,8 +939,8 @@

          A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

          -

          The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

          +

          The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

          @@ -951,7 +951,7 @@

        • Set up webvr-polyfill, VREffect
        • Add UI to Enter VR that calls WebVR API

        -
        +

        Example

        <a-scene>
          <a-assets>
            <img id="texture" src="texture.png">
          </a-assets>

          <a-box src="#texture"></a-box>
        </a-scene>
        @@ -996,7 +996,7 @@

        systems -Instantiated systems. +Instantiated systems. time @@ -1052,12 +1052,12 @@

        embedded - Remove fullscreen styles from the canvas. -
      • fog - Add fog.
        • -
      • keyboard-shortcuts - Toggle keyboard shortcuts.
        • -
      • inspector - Inject the A-Frame Inspector.
        • -
      • stats - Toggle performance stats.
        • -
      • vr-mode-ui - Toggle UI for entering and exiting VR.
        • +
      • embedded - Remove fullscreen styles from the canvas.
        • +
      • fog - Add fog.
        • +
      • keyboard-shortcuts - Toggle keyboard shortcuts.
        • +
      • inspector - Inject the A-Frame Inspector.
        • +
      • stats - Toggle performance stats.
        • +
      • vr-mode-ui - Toggle UI for entering and exiting VR.

      Running Content Scripts on the Scene

      We usually need to wait for the scene to finish initializing and attaching:

      var scene = document.querySelector('a-scene');

      if (scene.hasLoaded) {
        run();
      } else {
        scene.addEventListener('loaded', run);
      }

      function run () {
        var entity = scene.querySelector('a-entity');
        entity.setAttribute('material', 'color', 'red');
      }
      diff --git a/docs/0.3.0/core/systems.html b/docs/0.3.0/core/systems.html index bfa9e08fe..adb24f79b 100644 --- a/docs/0.3.0/core/systems.html +++ b/docs/0.3.0/core/systems.html @@ -938,16 +938,16 @@

      -

      A system, of the entity-component-system pattern, provides global scope, +

      A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

      -

      For example, the camera system manages all entities with the camera +

      For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

      -
      + -

      Registering a System

      A system is registered similarly to a component.

      +

      Registering a System

      A system is registered similarly to a component.

      If the system name matches a component name, then the component will have a reference to the system as this.system:

      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);
        }
      });
      @@ -961,7 +961,7 @@

      schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data. data diff --git a/docs/0.3.0/core/utils.html b/docs/0.3.0/core/utils.html index 8afdebdd3..16d379d4f 100644 --- a/docs/0.3.0/core/utils.html +++ b/docs/0.3.0/core/utils.html @@ -939,7 +939,7 @@

      A-Frame’s utility modules are public through AFRAME.utils.

      -
      +

      AFRAME.utils.coordinates

      Module for handling vec3 and vec4 types.

      .isCoordinate(value)

      Tests whether a string is a vec3.

      @@ -951,7 +951,7 @@

      .stringify(data)

      Stringifies an {x, y, z} vec3 object to an “x y z” string.

      AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
      // >> "1 2 -3"
      -

      AFRAME.utils.entity

      .getComponentProperty(entity, componentName, delimiter='.')

      Performs like Entity.getAttribute, but with support for +

      AFRAME.utils.entity

      .getComponentProperty(entity, componentName, delimiter='.')

      Performs like Entity.getAttribute, but with support for return 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.

      @@ -959,7 +959,7 @@

      This is useful for components that need a way to reference a property of a multi-property component.

      -

      .setComponentProperty(entity, componentName, value, delimiter)

      Performs like Entity.setAttribute, but with support for setting an +

      .setComponentProperty(entity, componentName, value, delimiter)

      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.

      diff --git a/docs/0.3.0/guides/building-with-components.html b/docs/0.3.0/guides/building-with-components.html index 12e7f629c..0e6711a95 100644 --- a/docs/0.3.0/guides/building-with-components.html +++ b/docs/0.3.0/guides/building-with-components.html @@ -943,34 +943,34 @@

      360° Image Viewer

      Let’s create an example of building a scene using an -entity-component-system workflow. This guide will introduce three +entity-component-system workflow. This guide will introduce three concepts:

        -
      1. Using the standard components that ship with A-Frame.
        2. +
      2. Using the standard components that ship with A-Frame.
      3. Using third-party components from the ecosystem.
      4. Writing custom components to accomplish whatever we want.

      The scene we will build is a 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

      -
      +

      Skeleton

      This is the starting point for our scene:

      <a-scene>
        <a-assets>
          <audio id="click-sound" src="audio/click.ogg"></audio>

          <!-- Images. -->
          <img id="city" src="img/city.jpg">
          <img id="city-thumb" src="img/thumb-city.png">
          <img id="cubes" src="img/cubes.jpg">
          <img id="cubes-thumb" src="img/thumb-cubes.png">
          <img id="sechelt" src="img/sechelt.jpg">
          <img id="sechelt-thumb" src="img/thumb-sechelt.png">
        </a-assets>

        <!-- 360-degree image. -->
        <a-sky id="image-360" radius="10" src="#city"></a-sky>

        <!-- Link. -->
        <a-plane class="link" height="1" width="1"></a-plane>

        <!-- Camera + Cursor. -->
        <a-camera>
          <a-cursor id="cursor">
            <a-animation begin="click" easing="ease-in" attribute="scale"
                         fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
            <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                         from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
          </a-cursor>
        </a-camera>
      </a-scene>

      We have predefined:

      Using Standard Components

      Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure them from HTML.

      -

      We want to add an image texture to <a-plane> link using the material +

      We want to add an image texture to <a-plane> link using the material component.

      -

      The material component is a multi-property component. To +

      The material component is a multi-property component. To attach the material component to the plane, we set the component name as an HTML attribute:

      <a-plane class="link" height="1" width="1"
               material></a-plane>
      @@ -978,10 +978,10 @@

      Asset Management System.

      +of the images defined in the Asset Management System.

      <a-plane class="link" height="1" width="1"
               material="shader: flat; src: #cubes-thumb"></a-plane>
      -

      Let’s attach one more standard component, the sound component. We want +

      Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1038,22 +1038,22 @@

      Event-Set Component

      Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

      Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We are mimicking CSS :hover states. We can specify event names with _event properties, and the rest of the properties define the -setAttribute calls. Notice that the event-set component can have multiple +setAttribute calls. Notice that the event-set component can have multiple instances:

      <a-assets>
        <!-- ... -->
        <script id="link" type="text/nunjucks">
          <a-plane class="link" height="1" width="1"
                   material="shader: flat; src: {{ thumb }}"
                   sound="on: click; src: #click-sound"
                   event-set__1="_event: mousedown; scale: 1 1 1"
                   event-set__2="_event: mouseup; scale: 1.2 1.2 1"
                   event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
                   event-set__4="_event: mouseleave; scale: 1 1 1"></a-plane>
        </script>
      </a-assets>

      Wielding components, we were able to do a lot with just a few more lines of HTML. Though the ecosystem has a lot to offer, your scenes will often require writing your own simple components.

      -

      Writing Components

      The component documentation has detailed information on writing a +

      Writing Components

      The component documentation has detailed information on writing a component. The most basic component takes the form of:

      AFRAME.registerComponent('component-name', {
        // Define component properties.
        schema: {},

        /**
         * Run when component is attached.
         * @member {Element} el - Entity.
         * @member data - Component data.
         */
        init: function () {
          // Do stuff using `this.el` and `this.data`.
        }
      });
      diff --git a/docs/0.3.0/guides/building-with-magicavoxel.html b/docs/0.3.0/guides/building-with-magicavoxel.html index 135033851..9a7ff5573 100644 --- a/docs/0.3.0/guides/building-with-magicavoxel.html +++ b/docs/0.3.0/guides/building-with-magicavoxel.html @@ -942,7 +942,7 @@

      3D scenes and models using voxels (i.e., blocks). MagicaVoxel makes modeling super easy, similar to building in Minecraft.

      magicavoxel

      -
      +

      Installation

      MagicaVoxel works on Windows and OS X. On the MagicaVoxel homepage, click the Download button and install the application:

      diff --git a/docs/0.3.0/guides/index.html b/docs/0.3.0/guides/index.html index 92e3f9fe4..9f334cbfe 100644 --- a/docs/0.3.0/guides/index.html +++ b/docs/0.3.0/guides/index.html @@ -940,14 +940,14 @@

      Let’s build a scene using A-Frame’s basic primitive HTML building blocks!

      -
      +

      Adding a Box

      This sample Hello World scene starts with a box:

      <a-scene>
        <a-box color="#6173F4" width="4" height="10" depth="2"></a-box>
      </a-scene>

      Just like with regular HTML elements, we can configure the element by setting HTML attributes. Here, we define the color, width, height, depth of <a-box>. -See the <a-box> documentation to see the available attributes.

      +See the <a-box> documentation to see the available attributes.

      For flat displays, the default control scheme lets us look around by click-dragging the mouse and move with the WASD keys. Upon entering VR, the default control scheme lets us look around with a VR @@ -967,8 +967,8 @@

      To translate, rotate, and scale the box, we can configure the -position, rotation, and scale -components:

      +position, rotation, and scale +components:

      <a-scene>
        <a-box color="#6173F4" width="4" height="10" depth="2"
               position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"></a-box>
      </a-scene>

      The example above (assuming we are positioned on the origin looking down the @@ -981,7 +981,7 @@ 

      <a-scene>
        <a-box color="#FFF" width="4" height="10" depth="2"
               position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
               src="texture.png"></a-box>
      </a-scene>

      It is best to cache the texture and block the scene from rendering until -the texture has loaded. To do so we must move the texture into the asset management +the texture has loaded. To do so we must move the texture into the asset management system by:

      • Defining the asset as an <img>
        • @@ -990,7 +990,7 @@ 

        <a-scene>
          <a-assets>
            <img id="texture" src="texture.png">
          </a-assets>

          <a-box color="#FFF" width="4" height="10" depth="2"
                 position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
                 src="#texture"></a-box>
        </a-scene>
        -

        Animating the Box

        We can add an animation to the box using the built-in animation +

        Animating the Box

        We can add an animation to the box using the built-in animation system. We can place an <a-animation> element as a child of the entity to interpolate values. Let’s have the box rotate indefinitely to add some motion to the scene:

        @@ -1012,18 +1012,18 @@ 

        <a-box color="#FFF" width="4" height="10" depth="2"
               position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
               src="#texture" scale-on-click="to: 3 3 3">
          <!-- Animation will only play when the box is clicked. -->
          <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
        </a-box>
        -

        Lighting the Box

        We can change how the scene is lit with <a-light>. By default the +

        Lighting the Box

        We can change how the scene is lit with <a-light>. By default the scene will inject an ambient light and a directional light (which acts like the sun). Once we add lights of our own, however, the default lighting setup is removed:

        <a-scene>
          <a-assets>
            <img id="texture" src="texture.png">
          </a-assets>

          <a-box color="#FFF" width="4" height="10" depth="2"
                 position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
                 src="#texture">
            <!-- Animation will only play when the box is clicked. -->
            <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
          </a-box>

          <!-- New lights. -->
          <a-light type="spot" color="#333" position="-20 0 0" look-at="a-box"></a-light>
          <a-light type="point" color="#AAA" position="0 5 0"></a-light>

          <a-camera position="0 1.8 0">
            <a-cursor color="#2E3A87">
          </a-camera>
        </a-scene>
        -

        Adding a Background to the Scene

        Lastly, we can add a background to the scene using <a-sky>. The +

        Adding a Background to the Scene

        Lastly, we can add a background to the scene using <a-sky>. The background can be a color, a 360° image, or even a 360° video:

        <a-scene>
          <a-assets>
            <img id="texture" src="texture.png">
          </a-assets>

          <a-box color="#FFF" width="4" height="10" depth="2"
                 position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
                 src="#texture">
            <!-- Animation will only play when the box is clicked. -->
            <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
            <a-event name="mouseenter" scale="4 1 6"></a-event>
          </a-box>

          <!-- New lights. -->
          <a-light type="spot" color="#333" position="-20 0 0" look-at="a-box"></a-light>
          <a-light type="point" color="#AAA" position="0 5 0"></a-light>

          <!-- Background. -->
          <a-sky color="#73F7DD"></a-sky>

          <a-camera position="0 1.8 0">
            <a-cursor color="#2E3A87">
          </a-camera>
        </a-scene>

        That is all it takes to create a very basic scene which places static objects in a 3D space using HTML. A good VR experience requires rich interaction and dynamic behavior. With -the help of A-Frame components, we can build a more advanced +the help of A-Frame components, we can build a more advanced scene.

        diff --git a/docs/0.3.0/introduction/best-practices.html b/docs/0.3.0/introduction/best-practices.html index 9576c0f64..45acf20a0 100644 --- a/docs/0.3.0/introduction/best-practices.html +++ b/docs/0.3.0/introduction/best-practices.html @@ -958,14 +958,14 @@

        recommended hardware specifications. -
      • Use the stats component to keep an eye on various metrics (FPS, +
      • Use recommended hardware specifications.
        • +
      • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities. We want to maximize FPS and minimize everything else.
        • -
      • Make use of the asset management system to benefit from browser +
      • Make use of the asset management system to benefit from browser caching and preloading. Trying to fetch assets while rendering is slower than fetching all assets before rendering.
        • -
      • Look to make use of geometry merging to limit draw calls when +
      • Look to make use of geometry merging to limit draw calls when multiple geometries are sharing the same material.
      • If using models, look to bake your lights into textures rather than relying on real-time lighting and shadows.
        • @@ -976,10 +976,10 @@

        A-Frame

        Some best practices for the framework:

        diff --git a/docs/0.3.0/introduction/device-and-platform-support.html b/docs/0.3.0/introduction/device-and-platform-support.html index 16da2da13..c76ae0923 100644 --- a/docs/0.3.0/introduction/device-and-platform-support.html +++ b/docs/0.3.0/introduction/device-and-platform-support.html @@ -942,7 +942,7 @@

        devices and APIs. A-Frame supports both flat (3D on a normal screen) and WebVR experiences, though its focus is heavily VR. We will break up support into two categories: flat and VR.

        -
        +

        Support for Flat Experiences

        Support for flat experiences primarily depends on a browser’s WebGL support. We can see which browsers support WebGL at Can I use WebGL?.

        diff --git a/docs/0.3.0/introduction/faq.html b/docs/0.3.0/introduction/faq.html index e2dee9b2d..f6186b471 100644 --- a/docs/0.3.0/introduction/faq.html +++ b/docs/0.3.0/introduction/faq.html @@ -938,19 +938,19 @@

        -
        +

        What is A-Frame?

        A-Frame is an open-source web framework for building virtual reality experiences. We can build VR web pages that we can walk inside with just HTML. Under the hood, it is a three.js framework that brings the -entity-component-system pattern to the DOM.

        +entity-component-system pattern to the DOM.

        Why was A-Frame built?

        A-Frame was built to make virtual reality more accessible to the web community and to kick-start the WebVR content ecosystem. It is easy to learn and fast to develop, allowing us to quickly prototype patterns and experiences. A-Frame is a vehicle in which to make WebVR successful.

        -

        How can I get started?

        Read the Introduction to get a deeper feel of what A-Frame is.

        -

        See the Getting Started guide to get set up.

        -

        Check out the guides for basic tutorials.

        +

        How can I get started?

        Read the Introduction to get a deeper feel of what A-Frame is.

        +

        See the Getting Started guide to get set up.

        +

        Check out the guides for basic tutorials.

        Past that, you can browse the resources on the awesome-aframe repository. If you need additional support, ask on StackOverflow.

        @@ -974,7 +974,7 @@

        best performance practices and guidelines to help get you +best performance practices and guidelines to help get you started.

        Why does my asset (e.g., image, video, model) not load?

        If you are loading the asset from a different domain, make sure that the asset is served with cross-origin resource sharing (CORS) headers. You could @@ -1039,12 +1039,12 @@

        How is A-Frame different from VRML?

        A-Frame is a JavaScript framework, not a 3D or web standard. It embraces the Extensible Web Manifesto. Only look at standardization as winning ideas emerge.

        -

        More technically, A-Frame is built on top of an entity-component-system +

        More technically, A-Frame is built on top of an entity-component-system pattern, is fully extensible, and integrates well with all of the existing web development frameworks and tools.

        Does A-Frame support X feature?

        A-Frame ships with a handful of components and primitives. However being based -on top of an entity-component-system pattern, if a feature doesn’t -exist, you can write a component to enable it. Or if one of the +on top of an entity-component-system pattern, if a feature doesn’t +exist, you can write a component to enable it. Or if one of the standard components is too limiting, you can fork it.

        Check out what the features that the ecosystem has enabled at awesome-aframe’s collection of components.

        @@ -1061,8 +1061,8 @@

        medical education project that also features Leap Motion controls code.

        -

        Which devices, headsets, platforms does A-Frame support?

        See Device and Platform Support.

        -

        How do I improve performance?

        See Best Practices.

        +

        Which devices, headsets, platforms does A-Frame support?

        See Device and Platform Support.

        +

        How do I improve performance?

        See Best Practices.

        How can I share my work?

        If you make something with A-Frame, please share it with us! Any of the channels below are great:

          diff --git a/docs/0.3.0/introduction/getting-started.html b/docs/0.3.0/introduction/getting-started.html index 8b3f214df..73ed121ff 100644 --- a/docs/0.3.0/introduction/getting-started.html +++ b/docs/0.3.0/introduction/getting-started.html @@ -940,9 +940,9 @@

          -

          Welcome! Make sure to read the introduction. If you’re ready to +

          Welcome! Make sure to read the introduction. If you’re ready to go, we have several ways of getting started.

          -
          +

          Play with CodePen

          CodePen is a playground for front-end web development. We can edit HTML and JavaScript directly in the browser with its text editor, see changes diff --git a/docs/0.3.0/introduction/index.html b/docs/0.3.0/introduction/index.html index 5116b388d..913874779 100644 --- a/docs/0.3.0/introduction/index.html +++ b/docs/0.3.0/introduction/index.html @@ -944,7 +944,7 @@ 

          <html>
            <head>
              <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
            </head>
            <body>
              <a-scene>
                <a-box color="#6173F4" opacity="0.8" depth="2"></a-box>
                <a-sphere radius="2" src="texture.png" position="1 1 0"></a-sphere>
                <a-sky color="#ECECEC"></a-sky>
              </a-scene>
            </body>
          </html>

          Entity-Component-System

          Diving deeper, A-Frame is a three.js framework that brings the -entity-component-system pattern to the DOM; everything in a scene is an +entity-component-system pattern to the DOM; everything in a scene is an entity which we compose and attach components to add any appearance, behavior, and functionality. Under the hood, <a-box> actually looks like:

          <a-entity geometry="primitive: box; depth: 2"
                    material="color: #6173F4; opacity: 0.8"></a-entity>
          @@ -986,7 +986,7 @@

          Have Fun!

          It is recommended to read through the Guides and the Core +

          Have Fun!

          It is recommended to read through the Guides and the Core sections of the documentation. If you have any questions, join the other hundreds of developers on Slack!

          diff --git a/docs/0.3.0/primitives/a-box.html b/docs/0.3.0/primitives/a-box.html index 712b4fc9f..ad94a02dd 100644 --- a/docs/0.3.0/primitives/a-box.html +++ b/docs/0.3.0/primitives/a-box.html @@ -938,7 +938,7 @@

          -

          The box primitive, formerly called <a-cube>, creates shapes such as boxes, cubes, or walls. It is an entity that prescribes the geometry with its geometric primitive set to box.

          +

          The box primitive, formerly called <a-cube>, creates shapes such as boxes, cubes, or walls. It is an entity that prescribes the geometry with its geometric primitive set to box.

          Example

          <a-assets>
            <img id="texture" src="texture.png">
          </a-assets>

          <!-- Basic box. -->
          <a-box color="tomato" depth="2" height="4" width="0.5"></a-box>

          <!-- Textured box. -->
          <a-box src="#texture"></a-box>

          Attributes

          diff --git a/docs/0.3.0/primitives/a-camera.html b/docs/0.3.0/primitives/a-camera.html index 6fe734519..dab873f36 100644 --- a/docs/0.3.0/primitives/a-camera.html +++ b/docs/0.3.0/primitives/a-camera.html @@ -942,7 +942,7 @@

          entity that prescribes the camera component with mappings to controls-related components.

          Note that by default, the camera origin will be at 0 1.6 0 in desktop mode -and 0 0 0 in VR mode. Read about the camera.userHeight property.

          +and 0 0 0 in VR mode. Read about the camera.userHeight property.

          Example

          <a-scene>
            <a-box></a-box>
            <a-camera></a-camera>
          </a-scene>

          Attributes

          diff --git a/docs/0.3.0/primitives/a-circle.html b/docs/0.3.0/primitives/a-circle.html index c4af45569..891dfcf90 100644 --- a/docs/0.3.0/primitives/a-circle.html +++ b/docs/0.3.0/primitives/a-circle.html @@ -938,7 +938,7 @@

          -

          The circle primitive creates circles surfaces using the geometry +

          The circle primitive creates circles surfaces using the geometry component with the type set to circle.

          Example

          <a-scene>
            <a-assets>
              <img id="platform" src="platform.jpg">
            </a-assets>

            <!-- Basic circle. -->
            <a-circle color="#CCC" radius="20"></a-circle>

            <!-- Textured circle parallel to ground. -->
            <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
          </a-scene>
          diff --git a/docs/0.3.0/primitives/a-collada-model.html b/docs/0.3.0/primitives/a-collada-model.html index 1bae6ac1e..6509306f1 100644 --- a/docs/0.3.0/primitives/a-collada-model.html +++ b/docs/0.3.0/primitives/a-collada-model.html @@ -940,7 +940,7 @@

          The COLLADA model primitive displays a 3D COLLADA model created from a 3D modeling program or downloaded from the web. It is an entity that maps the -src attribute to the collada-model component

          +src attribute to the collada-model component

          Example

          <a-scene>
            <a-assets>
              <a-asset-item id="tree" src="tree.dae">
            </a-assets>

            <!-- Using the asset management system. -->
            <a-collada-model src="#tree"></a-collada-model>

            <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
            <a-collada-model src="tree.dae"></a-collada-model>
          </a-scene>

          Attribute

          diff --git a/docs/0.3.0/primitives/a-cone.html b/docs/0.3.0/primitives/a-cone.html index 33b4ce9ab..dd9e1f9f1 100644 --- a/docs/0.3.0/primitives/a-cone.html +++ b/docs/0.3.0/primitives/a-cone.html @@ -938,7 +938,7 @@

          -

          The cone primitive creates a cone shape. It is an entity that prescribes the geometry with its geometric primitive set to cone.

          +

          The cone primitive creates a cone shape. It is an entity that prescribes the geometry with its geometric primitive set to cone.

          Example

          <a-assets>
            <img id="texture" src="texture.png">
          </a-assets>

          <!-- Basic cone. -->
          <a-cone color="tomato" radius-bottom="2" radius-top="0.5"></a-cone>

          <!-- Textured box. -->
          <a-cone src="#texture"></a-cone>

          Attributes

          diff --git a/docs/0.3.0/primitives/a-cursor.html b/docs/0.3.0/primitives/a-cursor.html index 94eb04c65..57a4e0214 100644 --- a/docs/0.3.0/primitives/a-cursor.html +++ b/docs/0.3.0/primitives/a-cursor.html @@ -938,8 +938,8 @@

          -

          The cursor primitive places a reticle or crosshair to add clicking and interactivity with the scene. It is an entity that prescribes the cursor component and a default ring-shaped geometry. The cursor is usually placed as a child of the camera.

          -

          Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

          +

          The cursor primitive places a reticle or crosshair to add clicking and interactivity with the scene. It is an entity that prescribes the cursor component and a default ring-shaped geometry. The cursor is usually placed as a child of the camera.

          +

          Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

          Example

          <a-scene>
            <a-camera>
              <a-cursor></a-cursor>
            </a-camera>

            <a-box></a-box>
          </a-scene>

          Attributes

          diff --git a/docs/0.3.0/primitives/a-curvedimage.html b/docs/0.3.0/primitives/a-curvedimage.html index 6964d74cc..077ad0a6a 100644 --- a/docs/0.3.0/primitives/a-curvedimage.html +++ b/docs/0.3.0/primitives/a-curvedimage.html @@ -943,9 +943,9 @@

          pixel sits at the same distance from the user. They can be a better choice than angled flat planes for complex layouts because they ensure a smooth surface rather than a series of awkward seams between planes. It is an entity that -prescribes a double-sided open-ended cylinder with the geometry +prescribes a double-sided open-ended cylinder with the geometry component and rendering textures on the inside of -the cylinder with the material component.

          +the cylinder with the material component.

          Example

          <a-scene>
            <a-assets>
              <img id="my-image" src="image.png">
            </a-assets>

            <!-- Using the asset management system. -->
            <a-curvedimage src="#my-image" height="3.0" radius="5.7" theta-length="72"
                           rotation="0 100 0" scale="0.8 0.8 0.8"></a-curvedimage>

            <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
            <a-curvedimage src="another-image.png"></a-curvedimage>
          </a-scene>

          Attributes

          diff --git a/docs/0.3.0/primitives/a-cylinder.html b/docs/0.3.0/primitives/a-cylinder.html index 8691cfd9d..de68142f1 100644 --- a/docs/0.3.0/primitives/a-cylinder.html +++ b/docs/0.3.0/primitives/a-cylinder.html @@ -938,7 +938,7 @@

          -

          The cylinder primitive is an entity that prescribes the geometry with its geometric primitive set to cylinder. It can be used to create tubes and curved surfaces.

          +

          The cylinder primitive is an entity that prescribes the geometry with its geometric primitive set to cylinder. It can be used to create tubes and curved surfaces.

          Examples

          The cylinder primitive is versatile and can actually be used to create various shapes:

          <!-- Basic cylinder. -->
          <a-cylinder color="crimson" height="3" radius="1.5"></a-cylinder>

          <!-- Hexagon. -->
          <a-cylinder color="cyan" segments-radial="8"></a-cylinder>

          <!-- Pac-man. -->
          <a-cylinder color="yellow" theta-start="50" theta-length="280" side="double"></a-cylinder>

          <!-- Green pipe. -->
          <a-cylinder color="green" open-ended="true"></a-cylinder>
          diff --git a/docs/0.3.0/primitives/a-image.html b/docs/0.3.0/primitives/a-image.html index 69624baa6..d1fafc47f 100644 --- a/docs/0.3.0/primitives/a-image.html +++ b/docs/0.3.0/primitives/a-image.html @@ -939,7 +939,7 @@

          The image primitive displays an image on a flat plane. It is an entity that -prescribes the geometry with its geometric +prescribes the geometry with its geometric primitive set to plane.

          Example

          <a-scene>
            <a-assets>
              <img id="my-image" src="image.png">
            </a-assets>

            <!-- Using the asset management system. -->
            <a-image src="#my-image"></a-image>

            <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
            <a-image src="another-image.png"></a-image>
          </a-scene>
          diff --git a/docs/0.3.0/primitives/a-light.html b/docs/0.3.0/primitives/a-light.html index 3e50dbcbf..fc2ea2cfc 100644 --- a/docs/0.3.0/primitives/a-light.html +++ b/docs/0.3.0/primitives/a-light.html @@ -938,7 +938,7 @@

          -

          The light primitive adjusts the lighting setup of the scene. It is an entity that maps attributes to properties of the light component.

          +

          The light primitive adjusts the lighting setup of the scene. It is an entity that maps attributes to properties of the light component.

          Examples

          <!-- Red directional light shining from the top left. -->
          <a-light color="red" position="-1 1 0"></a-light>

          <!-- Blue point light, 5 meters in the air. -->
          <a-light type="point" color="blue" position="0 5 0"></a-light>

          <!-- Dim ambient lighting. -->
          <a-light type="ambient" color="#222"></a-light>

          Attributes

          diff --git a/docs/0.3.0/primitives/a-obj-model.html b/docs/0.3.0/primitives/a-obj-model.html index a0e6e0ba4..96711ff95 100644 --- a/docs/0.3.0/primitives/a-obj-model.html +++ b/docs/0.3.0/primitives/a-obj-model.html @@ -946,7 +946,7 @@

          converter.

          The .OBJ model primitive displays a 3D Wavefront model. It is an entity that -maps the src and mtl attributes to the obj-model +maps the src and mtl attributes to the obj-model component’s obj and mtl properties respectively.

          Example

          <a-scene>
            <a-assets>
              <a-asset-item id="crate-obj" src="crate.obj"></a-asset-item>
              <a-asset-item id="crate-mtl" src="crate.mtl"></a-asset-item>
            </a-assets>

            <!-- Using the asset management system. -->
            <a-obj-model src="#crate-obj" mtl="#crate-mtl"></a-obj-model>

            <!-- Defining the URL inline. Not recommended but may be more comfortable. -->
            <a-obj-model src="crate.obj" mtl="crate.mtl"></a-obj-model>
          </a-scene>
          diff --git a/docs/0.3.0/primitives/a-plane.html b/docs/0.3.0/primitives/a-plane.html index 748200fde..4a400f17c 100644 --- a/docs/0.3.0/primitives/a-plane.html +++ b/docs/0.3.0/primitives/a-plane.html @@ -938,7 +938,7 @@

          -

          The plane primitive creates flat surfaces using the geometry +

          The plane primitive creates flat surfaces using the geometry component with the type set to plane.

          Example

          <a-scene>
            <a-assets>
              <img id="ground" src="ground.jpg">
            </a-assets>

            <!-- Basic plane. -->
            <a-plane color="#CCC" height="20" width="20"></a-plane>

            <!-- Textured plane parallel to ground. -->
            <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
          </a-scene>
          diff --git a/docs/0.3.0/primitives/a-ring.html b/docs/0.3.0/primitives/a-ring.html index f9f2a7533..8731d5e13 100644 --- a/docs/0.3.0/primitives/a-ring.html +++ b/docs/0.3.0/primitives/a-ring.html @@ -938,7 +938,7 @@

          -

          The ring primitive creates a ring or disc shape. It is an entity that prescribes the geometry with its geometric primitive set to ring.

          +

          The ring primitive creates a ring or disc shape. It is an entity that prescribes the geometry with its geometric primitive set to ring.

          Example

          <a-assets>
            <img id="texture" src="texture.png">
          </a-assets>

          <!-- Basic ring. -->
          <a-ring color="teal" radius-inner="1" radius-outer="2"></a-ring>

          <!-- Textured ring. -->
          <a-ring src="#texture"></a-ring>

          Attributes

          diff --git a/docs/0.3.0/primitives/a-sound.html b/docs/0.3.0/primitives/a-sound.html index a4a4f4782..536d3c5d3 100644 --- a/docs/0.3.0/primitives/a-sound.html +++ b/docs/0.3.0/primitives/a-sound.html @@ -938,7 +938,7 @@

          -

          The sound primitive wraps the sound component.

          +

          The sound primitive wraps the sound component.

          Example

          <a-scene>
            <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
          </a-scene>

          Attributes

          diff --git a/docs/0.3.0/primitives/a-sphere.html b/docs/0.3.0/primitives/a-sphere.html index 05b08b72e..8f14461ac 100644 --- a/docs/0.3.0/primitives/a-sphere.html +++ b/docs/0.3.0/primitives/a-sphere.html @@ -938,7 +938,7 @@

          -

          The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

          +

          The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

          Example

          <a-sphere color="yellow" radius="5"></a-sphere>

          Attributes

          diff --git a/docs/0.3.0/primitives/a-torus-knot.html b/docs/0.3.0/primitives/a-torus-knot.html index 27a482f02..3b50835d7 100644 --- a/docs/0.3.0/primitives/a-torus-knot.html +++ b/docs/0.3.0/primitives/a-torus-knot.html @@ -938,7 +938,7 @@

          -

          The torus knot primitive creates pretzel shapes using the geometry +

          The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

          Example

          <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
          diff --git a/docs/0.3.0/primitives/a-torus.html b/docs/0.3.0/primitives/a-torus.html index 138183990..d4e8db8bf 100644 --- a/docs/0.3.0/primitives/a-torus.html +++ b/docs/0.3.0/primitives/a-torus.html @@ -938,7 +938,7 @@

          -

          The torus primitive creates donut or tube shapes using the geometry +

          The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

          Example

          <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
          diff --git a/docs/0.3.0/primitives/a-video.html b/docs/0.3.0/primitives/a-video.html index 920d2ef0e..37e05b7dc 100644 --- a/docs/0.3.0/primitives/a-video.html +++ b/docs/0.3.0/primitives/a-video.html @@ -939,7 +939,7 @@

          The video primitive displays a video on a flat plane as a texture. It is an -entity that prescribes the geometry with its +entity that prescribes the geometry with its geometric primitive set to plane.

          Example

          <a-scene>
            <a-assets>
              <video id="penguin-sledding" autoplay loop="true" src="penguin-sledding.mp4">
            </a-assets>

            <!-- Using the asset management system. -->
            <a-video src="#penguin-sledding" width="16" height="9" position="0 0 -20"></a-video>

            <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
            <a-video src="airbending.mp4"></a-video>
          </a-scene>
          diff --git a/docs/0.3.0/primitives/a-videosphere.html b/docs/0.3.0/primitives/a-videosphere.html index 8fe211ce1..528ac2a8b 100644 --- a/docs/0.3.0/primitives/a-videosphere.html +++ b/docs/0.3.0/primitives/a-videosphere.html @@ -941,7 +941,7 @@

          The videosphere primitive easily adds a 360-degree video background to a scene or display a 360-degree video. It is an entity that prescribes a large sphere with the video texture mapped to the inside.

          Examples

          <a-scene>
            <a-assets>
              <video id="antarctica" autoplay loop="true" src="antarctica.mp4">
            </a-assets>

            <!-- Using the asset management system. -->
            <a-videosphere src="#antarctica"></a-videosphere>

            <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
            <a-videosphere src="africa.mp4"></a-videosphere>
          </a-scene>
          -

          Attributes

          Note that the videosphere primitive inherits common attributes.

          +

          Attributes

          Note that the videosphere primitive inherits common attributes.

          diff --git a/docs/0.3.0/primitives/index.html b/docs/0.3.0/primitives/index.html index 06021b9ea..31e03dc3a 100644 --- a/docs/0.3.0/primitives/index.html +++ b/docs/0.3.0/primitives/index.html @@ -938,12 +938,12 @@

          -

          Primitives are entities that:

          +

          Primitives are entities that:

          • Have a semantic name (e.g., <a-box>)
          • Have a preset assemblage of components
          • Have default component property values
            • -
          • Map HTML attributes to component properties
            • +
          • Map HTML attributes to component properties

          They are a convenience layer on top of the core API and are meant to:

            @@ -953,7 +953,7 @@

          They are sort of like Prefabs in Unity. Some literature on the entity-component-system pattern refer to these as assemblages.

          -
          +

          Example

          Here is an assortment of various primitives in use:

          <a-scene>
            <!-- Using the asset management system for caching. -->
            <a-assets>
              <a-asset-item id="fox-obj" src="fox.obj"></a-asset-item>
              <a-asset-item id="fox-mtl" src="fox.mtl"></a-asset-item>
              <img id="texture" src="texture.png">
              <video id="video" src="video.mp4"></video>
            </a-assets>

            <a-camera fov="80"><a-cursor></a-cursor></a-camera>
            <a-box src="#texture" depth="2" height="5" width="1"></a-box>
            <a-image src="fireball.jpg"></a-image>
            <a-video src="#video"></a-video>
            <a-sky color="#432FA0"></a-sky>
          </a-scene>
          @@ -962,8 +962,8 @@

          components and mixins -
        • Applying animations
          • +
        • Attaching components and mixins
          • +
        • Applying animations

        For example, let’s take <a-box> primitive, and say someone writes a third-party physics component. We can attach it to <a-box> just as we would diff --git a/docs/0.4.0/components/cursor.html b/docs/0.4.0/components/cursor.html index 5e71fd62a..f86da949e 100644 --- a/docs/0.4.0/components/cursor.html +++ b/docs/0.4.0/components/cursor.html @@ -988,7 +988,7 @@

        The cursor component lets us interact with entities through clicking and -gazing. The cursor is a specific application of the raycaster +gazing. The cursor is a specific application of the raycaster component in that it:

        • Listens for mouse clicks and gaze-based fuses.
          • @@ -999,10 +999,10 @@

          When the mouse clicks, the closest visible entity intersecting the cursor, if any, will emit a click event. Note the cursor component only applies the raycasting behavior. To provide a shape or appearance to the cursor, you could -apply the geometry and material components.

          +apply the geometry and material components.

          Example

          For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no -matter where we look, we place it as a child of the active camera +matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

          <a-entity camera>
            <a-entity cursor="fuse: true; fuseTimeout: 500"
                      position="0 0 -1"
                      geometry="primitive: ring"
                      material="color: black; shader: flat">
            </a-entity>
          </a-entity>

          <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
          @@ -1094,7 +1094,7 @@

          States

          Configuring the Cursor through the Raycaster Component

          The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

          <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>
          @@ -1109,7 +1109,7 @@

          Adding Visual Feedback

          To add visual feedback to the cursor to show when the cursor is clicking or -fusing, we can use the animation system. When the cursor +fusing, we can use the animation system. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

          <a-entity cursor="fuse: true; fuseTimeout: 500"
                    position="0 0 -1"
                    geometry="primitive: ring"
                    material="color: black; shader: flat">
            <a-animation begin="click" easing="ease-in" attribute="scale"
                         fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
            <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                         fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
          </a-entity>
          diff --git a/docs/0.4.0/components/debug.html b/docs/0.4.0/components/debug.html index 71c097ce1..71a92ee7c 100644 --- a/docs/0.4.0/components/debug.html +++ b/docs/0.4.0/components/debug.html @@ -1003,8 +1003,8 @@ 

          <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

          Make sure that this component is not active in production.

          -

          Manually Serializing to DOM

          To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM:

          +

          Manually Serializing to DOM

          To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM:

          document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
          document.querySelector('a-entity').flushToDOM();  // Flush an entity.
          document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
          document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.
          diff --git a/docs/0.4.0/components/fog.html b/docs/0.4.0/components/fog.html index fe96531ba..ec56d0bf9 100644 --- a/docs/0.4.0/components/fog.html +++ b/docs/0.4.0/components/fog.html @@ -988,7 +988,7 @@

          The fog component obscures entities in fog given distance from the camera. The -fog component applies only to the <a-scene> element.

          +fog component applies only to the <a-scene> element.

          Example

          <a-scene fog="type: linear; color: #AAA"></a-scene>

          Properties

          Given the fog distribution type, different properties will apply.

          diff --git a/docs/0.4.0/components/geometry.html b/docs/0.4.0/components/geometry.html index 09d7c6aeb..18e65b9de 100644 --- a/docs/0.4.0/components/geometry.html +++ b/docs/0.4.0/components/geometry.html @@ -991,7 +991,7 @@

          property defines the general shape. Geometric primitives, in computer graphics, are irreducible basic shapes. A material component is commonly defined to provide a appearance alongside the shape to create a complete mesh.

          -
          +

          Base Properties

          Every geometry type will have these properties:

          @@ -1473,7 +1473,7 @@ 

          AFRAME.registerGeometry('box', {
            schema: {
              depth: {default: 1, min: 0},
              height: {default: 1, min: 0},
              width: {default: 1, min: 0},
              segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
              segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
              segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
            },

            init: function (data) {
              this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
            }
          });

          Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then we need to create the geometry and set on this.geometry through the init and update lifecycle methods.

          When a geometry component sets its primitive property to the custom geometry diff --git a/docs/0.4.0/components/hand-controls.html b/docs/0.4.0/components/hand-controls.html index 02f2c82a5..aca335de7 100644 --- a/docs/0.4.0/components/hand-controls.html +++ b/docs/0.4.0/components/hand-controls.html @@ -988,9 +988,9 @@

          The hand-controls gives tracked hands (using a prescribed model) with animated -gestures. hand-controls wraps the vive-controls and -oculus-touch-controls components, which in turn wrap the -tracked-controls component. The component gives extra events and +gestures. hand-controls wraps the vive-controls and +oculus-touch-controls components, which in turn wrap the +tracked-controls component. The component gives extra events and handles hand animations and poses.

          Example

          <a-entity hand-controls="left"></a-entity>
          <a-entity hand-controls="right"></a-entity>
          diff --git a/docs/0.4.0/components/keyboard-shortcuts.html b/docs/0.4.0/components/keyboard-shortcuts.html index f2698ad99..7fe2fc1b4 100644 --- a/docs/0.4.0/components/keyboard-shortcuts.html +++ b/docs/0.4.0/components/keyboard-shortcuts.html @@ -987,7 +987,7 @@

          -

          The keyboard-shortcuts component toggles global keyboard shortcuts. The keyboard-shortcuts component applies only to the <a-scene> element.

          +

          The keyboard-shortcuts component toggles global keyboard shortcuts. The keyboard-shortcuts component applies only to the <a-scene> element.

          Example

          <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

          Properties

          diff --git a/docs/0.4.0/components/look-controls.html b/docs/0.4.0/components/look-controls.html index 108ee90dc..e12b4b927 100644 --- a/docs/0.4.0/components/look-controls.html +++ b/docs/0.4.0/components/look-controls.html @@ -993,7 +993,7 @@

        • Rotates the entity when we click-drag mouse.
        • Rotates the entity when we touch-drag the touchscreen.
          • -

          Example

          The look-controls component is usually used alongside the camera +

          Example

          The look-controls component is usually used alongside the camera component.

          <a-entity camera look-controls></a-entity>
          diff --git a/docs/0.4.0/components/material.html b/docs/0.4.0/components/material.html index 3acc3026a..8ae909689 100644 --- a/docs/0.4.0/components/material.html +++ b/docs/0.4.0/components/material.html @@ -988,11 +988,11 @@

          The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

          We can register custom materials to extend the material component to provide a wide range of visual effects.

          -
          +

          Example

          Defining a red material using the default standard material:

          <a-entity geometry="primitive: box" material="color: red"></a-entity>
          @@ -1143,7 +1143,7 @@

          fog. +Whether or not material is affected by fog. true @@ -1257,7 +1257,7 @@

          fog. +Whether or not material is affected by fog. true @@ -1293,7 +1293,7 @@

          Textures

          To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

          +asset management system:

          <a-scene>
            <a-assets>
              <img id="my-texture" src="texture.png">
            </a-assets>

            <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
          </a-scene>

          src can also be an inline URL. Note that we do not get browser caching or diff --git a/docs/0.4.0/components/obj-model.html b/docs/0.4.0/components/obj-model.html index fe1ebeb9e..a85014b57 100644 --- a/docs/0.4.0/components/obj-model.html +++ b/docs/0.4.0/components/obj-model.html @@ -1005,7 +1005,7 @@

          mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

          Events

          diff --git a/docs/0.4.0/components/oculus-touch-controls.html b/docs/0.4.0/components/oculus-touch-controls.html index 8fbc908f0..656f5dcb6 100644 --- a/docs/0.4.0/components/oculus-touch-controls.html +++ b/docs/0.4.0/components/oculus-touch-controls.html @@ -988,7 +988,7 @@

          The oculus-touch-controls component interfaces with the Oculus Touch controllers. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.

          Example

          <a-entity oculus-touch-controls="hand: left"></a-entity>
          <a-entity oculus-touch-controls="hand: right"></a-entity>
          diff --git a/docs/0.4.0/components/raycaster.html b/docs/0.4.0/components/raycaster.html index c3e3c270e..1576075a5 100644 --- a/docs/0.4.0/components/raycaster.html +++ b/docs/0.4.0/components/raycaster.html @@ -995,7 +995,7 @@

          list of objects, and will emit events on the entity when it detects intersections or clearing of intersections (i.e., when the raycaster is no longer intersecting an entity).

          -

          The cursor component builds on top of the raycaster +

          The cursor component builds on top of the raycaster component.

          Example

          <a-entity id="player" collider-check>
            <a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
          </a-entity>
          <a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
          @@ -1095,11 +1095,11 @@

          Metho

          Setting the Origin and Direction of the Raycaster

          The raycaster has an origin, where its ray starts, and a direction, where the ray goes.

          The origin of the raycaster is at the raycaster entity’s position. We can -change the origin of the raycaster by setting the position +change the origin of the raycaster by setting the position component of the raycaster entity (or parent entities of the raycaster entity).

          The direction of the raycaster is in “front” of the raycaster entity (i.e., 0 0 -1, on the negative Z-axis). We can change the direction of the raycaster by -setting the rotation component of the raycaster entity (or parent +setting the rotation component of the raycaster entity (or parent entities of the raycaster entity).

          For example, here is applying a raycaster along the length of a rotated bullet:

          <!-- Bullet, rotated to be parallel with the ground. -->
          <a-entity id="bullet" geometry="primitive: cylinder; height: 0.1" rotation="-90 0 0">
            <!-- Raycaster, targets enemies, made to be as long as the bullet, positioned to the start of the bullet, rotated to align with the bullet. -->
            <a-entity raycaster="objects: .enemies; far: 0.1" position="0 -0.5 0" rotation="90 0 0"></a-entity>
          </a-entity>
          diff --git a/docs/0.4.0/components/sound.html b/docs/0.4.0/components/sound.html index 5a2b9e6d6..a6e797193 100644 --- a/docs/0.4.0/components/sound.html +++ b/docs/0.4.0/components/sound.html @@ -989,7 +989,7 @@

          The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the -components-position.

          +components-position.

          Example

          <a-entity id="river" geometry="primitive: plane" material="color: blue"
                    position="-10 0 0" sound="src: url(river.mp3); autoplay: true"></a-entity>

          Properties

          diff --git a/docs/0.4.0/components/stats.html b/docs/0.4.0/components/stats.html index 4d36888f2..d7627a3ad 100644 --- a/docs/0.4.0/components/stats.html +++ b/docs/0.4.0/components/stats.html @@ -988,7 +988,7 @@

          The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

          +component applies only to the <a-scene> element.

          Example

          <a-scene stats></a-scene>

          Metrics

            diff --git a/docs/0.4.0/components/tracked-controls.html b/docs/0.4.0/components/tracked-controls.html index 28515d70c..35036506b 100644 --- a/docs/0.4.0/components/tracked-controls.html +++ b/docs/0.4.0/components/tracked-controls.html @@ -989,8 +989,8 @@

            The tracked-controls component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is -abstracted by the hand-controls component as well as the -vive-controls and oculus-touch-controls +abstracted by the hand-controls component as well as the +vive-controls and oculus-touch-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events.

            Example

            <a-entity tracked-controls="controller: 0; id: OpenVR Gamepad"></a-entity>
            diff --git a/docs/0.4.0/components/vive-controls.html b/docs/0.4.0/components/vive-controls.html index fccace590..26ec41cb0 100644 --- a/docs/0.4.0/components/vive-controls.html +++ b/docs/0.4.0/components/vive-controls.html @@ -988,7 +988,7 @@

            The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

            Example

            <a-entity vive-controls="hand: left"></a-entity>
            <a-entity vive-controls="hand: right"></a-entity>
            diff --git a/docs/0.4.0/components/vr-mode-ui.html b/docs/0.4.0/components/vr-mode-ui.html index 97d73474c..deca72b86 100644 --- a/docs/0.4.0/components/vr-mode-ui.html +++ b/docs/0.4.0/components/vr-mode-ui.html @@ -987,7 +987,7 @@

            -

            The vr-mode-ui component toggles UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only to the <a-scene> element.

            +

            The vr-mode-ui component toggles UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only to the <a-scene> element.

            Example

            <a-scene vr-mode-ui="enabled: false"></a-scene>

            Properties

            diff --git a/docs/0.4.0/components/wasd-controls.html b/docs/0.4.0/components/wasd-controls.html index 46a1adfcc..bd1fffb84 100644 --- a/docs/0.4.0/components/wasd-controls.html +++ b/docs/0.4.0/components/wasd-controls.html @@ -988,7 +988,7 @@

            The wasd-controls component controls an entity with the WASD or arrow keyboard -keys. The wasd-controls component is commonly attached to an entity with the camera +keys. The wasd-controls component is commonly attached to an entity with the camera component.

            Example

            <a-entity camera look-controls wasd-controls></a-entity>
            diff --git a/docs/0.4.0/core/AFRAME.html b/docs/0.4.0/core/AFRAME.html index b8d502f6d..0c388cf4b 100644 --- a/docs/0.4.0/core/AFRAME.html +++ b/docs/0.4.0/core/AFRAME.html @@ -999,11 +999,11 @@

            AComponent -Component prototype. +Component prototype. AEntity -Entity prototype. +Entity prototype. ANode @@ -1011,7 +1011,7 @@

            AScene -Scene prototype. +Scene prototype. components @@ -1027,7 +1027,7 @@

            registerComponent -Function to register a component. +Function to register a component. registerElement @@ -1035,15 +1035,15 @@

            registerGeometry -Function to register a geometry. +Function to register a geometry. registerPrimitive -Function to register a primitive. +Function to register a primitive. registerShader -Function to register a material or shader. +Function to register a material or shader. schema @@ -1067,7 +1067,7 @@

            utils -A-Frame utility modules. +A-Frame utility modules. version diff --git a/docs/0.4.0/core/animations.html b/docs/0.4.0/core/animations.html index 5ae0a3a9e..e3a257fe0 100644 --- a/docs/0.4.0/core/animations.html +++ b/docs/0.4.0/core/animations.html @@ -1001,7 +1001,7 @@

            the animation, and loops indefinitely.

            <a-entity>
              <a-entity position="5 0 0"></a-entity>
              <a-animation attribute="rotation"
                           dur="10000"
                           fill="forwards"
                           to="0 360 0"
                           repeat="indefinite"></a-animation>
            </a-entity>
            -
            +

            Attributes

            Here is an overview of animation attributes. We’ll go into more detail below.

            diff --git a/docs/0.4.0/core/asset-management-system.html b/docs/0.4.0/core/asset-management-system.html index 928641038..1dd8f375a 100644 --- a/docs/0.4.0/core/asset-management-system.html +++ b/docs/0.4.0/core/asset-management-system.html @@ -1003,7 +1003,7 @@

            The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

            -
            +

            Example

            We can define our assets in <a-assets> and point to those assets from our entities using selectors:

            diff --git a/docs/0.4.0/core/component.html b/docs/0.4.0/core/component.html index 01cbb89ff..d7b10073c 100644 --- a/docs/0.4.0/core/component.html +++ b/docs/0.4.0/core/component.html @@ -987,7 +987,7 @@

            -

            In the entity-component-system pattern, a component is a reusable and +

            In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

            In A-Frame, components modify entities which are 3D objects in the scene. We @@ -1001,7 +1001,7 @@

            Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

            -
            +

            Component HTML Form

            A component holds a bucket of data in the form of one or more component properties. Components use this data to modify entities. Consider an engine @@ -1150,7 +1150,7 @@

            Definition Lifecycle Handler Methods

            With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the shape of the data, the lifecycle handler methods use the data to modify the entity. The handlers will usually interact with the -Entity API.

            +Entity API.

            methodsimage Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

            Overview of Methods

            @@ -1203,11 +1203,11 @@

            entity as an HTML element. +

            - + @@ -1244,7 +1244,7 @@

            diffing the current +

            Granular modifications to the entity can be done by diffing the current dataset (this.data) with the previous dataset before the update (oldData).

            A-Frame calls .update() both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The @@ -1252,7 +1252,7 @@

            visible component’s update sets the visibility of +

            For example, the visible component’s update sets the visibility of the entity.

            Reference to the entity as an HTML element.
            this.el.sceneElReference to the scene as an HTML element.Reference to the scene as an HTML element.
            this.id
            AFRAME.registerComponent('visible', {
              /**
               * this.el is the entity element.
               * this.el.object3D is the three.js object of the entity.
               * this.data is the component's property or properties.
               */
              update: function (oldData) {
                this.el.object3D.visible = this.data;
              }
              // ...
            });
            @@ -1267,7 +1267,7 @@

            Remove, undo, or clean up all of the component’s modifications to the entity.
          • Detach event listeners.

          -

          For example, when the light component is removed, the light component +

          For example, when the light component is removed, the light component will remove the light object that it had previously set on the entity, thus removing it from the scene.

          AFRAME.registerComponent('light', {
            // ...
            remove: function () {
              this.el.removeObject3D('light');
            }
            // ...
          });
          @@ -1289,7 +1289,7 @@

          time) and the time difference in milliseconds since the last frame (timeDelta). These can be used for interpolation or to only run parts of the tick handler on a set interval.

          -

          For example, the tracked controls component will progress +

          For example, the tracked controls component will progress the controller’s animations, update the controller’s position and rotation, and check for button presses.

          AFRAME.registerComponent('tracked-controls', {
            // ...
            tick: function (time, timeDelta) {
              this.updateMeshAnimation();
              this.updatePose();
              this.updateButtons();
            }
            // ...
          });
          @@ -1305,7 +1305,7 @@

          .
        • Remove event listeners.
        • Remove any chances of dynamic behavior.

        -

        For example, the sound component will pause the sound and remove an +

        For example, the sound component will pause the sound and remove an event listener that would have played a sound on an event:

        AFRAME.registerComponent('sound', {
          // ...
          pause: function () {
            this.pauseSound();
            this.removeEventListener();
          }
          // ...
        });
        @@ -1320,7 +1320,7 @@

        .pla
        • Add event listeners.
        -

        For example, the sound component will play the sound and update the +

        For example, the sound component will play the sound and update the event listener that would play a sound on an event:

        AFRAME.registerComponent('sound', {
          // ...
          play: function () {
            if (this.data.autoplay) { this.playSound(); }
            this.updateEventListener();
          }
          // ...
        });
        @@ -1330,7 +1330,7 @@

      • Dynamically update or extend the schema, usually depending on the value of a property.

      -

      For example, the geometry component checks if the primitive +

      For example, the geometry component checks if the primitive property changed to determine whether to update the schema for a different type of geometry:

      AFRAME.registerComponent('geometry', {
        // ...
        updateSchema: (newData) {
          if (newData.primitive !== this.data.primitive) {
            this.extendSchema(GEOMETRIES[newData.primitive].schema);
          }
        }
        // ...
      });
      @@ -1371,7 +1371,7 @@ 

      document.querySelector('[geometry]').components.geometry.flushToDOM();
      -

      Read more about component-to-DOM serialization.

      +

      Read more about component-to-DOM serialization.

      Accessing a Component’s Methods and Properties

      A component’s methods and properties can be access through the entity from the .components object. Look up the component from the entity’s map of components, and we’ll have access to the component’s public API:

      diff --git a/docs/0.4.0/core/entity.html b/docs/0.4.0/core/entity.html index 1da9cf680..3c70c3d16 100644 --- a/docs/0.4.0/core/entity.html +++ b/docs/0.4.0/core/entity.html @@ -990,23 +990,23 @@ 

                 .

      A-Frame represents an entity via the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

      -

      In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

      -
      +

      In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

      +

      Example

      Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

      <a-entity>

      We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

      +give it shape and appearance, we can attach the geometry and +material components:

      <a-entity geometry="primitive: box" material="color: red">
      -

      Or to make it emit light, we can further attach the light component:

      +

      Or to make it emit light, we can further attach the light component:

      <a-entity geometry="primitive: box" material="color: red"
                light="type: point; intensity: 2.0">

      Retrieving an Entity

      We can simply retrieve an entity using DOM APIs.

      @@ -1038,7 +1038,7 @@

      object3DMap

      An entity’s object3DMap is an object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that components have set.

      -

      For an entity with a geometry and light components +

      For an entity with a geometry and light components attached, object3DMap might look like:

      {
        light: <THREE.Light Object>,
        mesh: <THREE.Mesh Object>
      }
      @@ -1052,7 +1052,7 @@

      Metho 
      entity.addEventListener('stateadded', function (evt) {
        if (evt.detail.state === 'selected') {
          console.log('Entity now selected!');
        }
      });

      entity.addState('selected');
      entity.is('selected');  // >> true

      emit (name, detail, bubbles)

      emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

      +trigger an animation:

      // <a-entity>
      //   <a-animation attribute="rotation" begin="rotate" to="0 360 0"></a-animation>
      // </a-entity>
      entity.emit('rotate');

      We can also pass event detail or data as the second argument:

      @@ -1063,7 +1063,7 @@ 

      entity.emit('sink', null, false);

      flushToDOM (recursive)

      flushToDOM will manually serialize an entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

      +Read more about component-to-DOM serialization.

      getAttribute (componentName)

      getAttribute retrieves parsed component data (including mixins and defaults).

      // <a-entity geometry="primitive: box; width: 3">

      entity.getAttribute('geometry');
      // >> {primitive: "box", depth: 2, height: 2, translate: "0 0 0", width: 3, ...}

      entity.getAttribute('geometry').primitive;
      // >> "box"

      entity.getAttribute('geometry').height;
      // >> 2

      entity.getAttribute('position');
      // >> {x: 0, y: 0, z: 0}
      @@ -1096,20 +1096,20 @@

      pa entity will call pause() on its child entities when we pause an entity.

      // <a-entity id="spinning-jumping-ball">
      entity.pause();
      -

      For example, the look-controls component on +

      For example, the look-controls component on pause will remove event handlers that listen for input.

      play ()

      play() will start any dynamic behavior as defined by animations and components. This is automatically called when the DOM attaches an entity. When an entity play(), the entity calls play() on its child entities.

      entity.pause();
      entity.play();
      -

      For example, the sound component on play will begin playing the sound.

      +

      For example, the sound component on play will begin playing the sound.

      setAttribute (attr, value, componentAttrValue)

      If attr is not the name of a registered component or the component is a single-property component, setAttribute behaves as it normally would:

      entity.setAttribute('visible', false);

      Though if attr is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

      entity.setAttribute('position', { x: 1, y: 2, z: 3 });
      diff --git a/docs/0.4.0/core/index.html b/docs/0.4.0/core/index.html index de6632102..e1a752ae9 100644 --- a/docs/0.4.0/core/index.html +++ b/docs/0.4.0/core/index.html @@ -991,11 +991,11 @@

      pattern is a pattern common in game development that favors composability over traditional inheritance and hierarchy:

        -
      • An entity is a general-purpose object that inherently does and renders nothing.
        • -
      • A component is a reusable module that we plug into entities to +
      • An entity is a general-purpose object that inherently does and renders nothing.
        • +
      • A component is a reusable module that we plug into entities to provide appearance, behavior, and/or functionality. They are plug-and-play for objects.
        • -
      • A system provides global scope, services, and management to classes of components.
        • +
      • A system provides global scope, services, and management to classes of components.

      ECS lets us build complex entities with rich behavior by plugging different reusable components into the sockets on the entity. Contrast this to @@ -1004,7 +1004,7 @@

      ECS grants developers the key to permissionless innovation. Developers can write, share, and plug in components that extend new features or iterate upon existing features.

      -
      +

      Concept

      As an abstract example, imagine a car is an entity:

        @@ -1024,14 +1024,14 @@

        geometry and material components. Since +can attach the geometry and material components. Since the components take multiple properties, we define the property values using an inline-style syntax:

        <a-entity geometry="primitive: sphere; radius: 1.5"
                  material="color: tomato; metalness: 0.7"></a-entity>

        From there, we can attach more and more components to add whatever appearance, -behavior, or funtionality we want. Attach the light component to have -it emit light. Attach the sound component to have it play sound. +behavior, or funtionality we want. Attach the light component to have +it emit light. Attach the sound component to have it play sound. Attach the physics component to affect the entity with gravity and collision detection:

        Composing an Entity

        diff --git a/docs/0.4.0/core/mixins.html b/docs/0.4.0/core/mixins.html index 49e811854..002179070 100644 --- a/docs/0.4.0/core/mixins.html +++ b/docs/0.4.0/core/mixins.html @@ -989,7 +989,7 @@

        Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

        <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-mixin>
          </a-assets>

          <a-entity mixin="red cube"></a-entity>
          <a-entity mixin="blue cube"></a-entity>
        </a-scene>
        @@ -999,7 +999,7 @@

        the entities above expand to:

        <a-entity material="color: red" geometry="primitive: box"></a-entity>
        <a-entity material="color: blue" geometry="primitive: box"></a-entity>
        -
        +

        Merging Component Properties

        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="height: 10"></a-mixin>
            <a-mixin id="wide" geometry="width: 10"></a-mixin>
          </a-assets>

          <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
        </a-scene>
        diff --git a/docs/0.4.0/core/scene.html b/docs/0.4.0/core/scene.html index 757dceb47..40387b7d5 100644 --- a/docs/0.4.0/core/scene.html +++ b/docs/0.4.0/core/scene.html @@ -988,8 +988,8 @@

        A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

        -

        The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

        +

        The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

        @@ -1000,7 +1000,7 @@

      • Set up webvr-polyfill, VREffect
      • Add UI to Enter VR that calls WebVR API

      -
      +

      Example

      <a-scene>
        <a-assets>
          <img id="texture" src="texture.png">
        </a-assets>

        <a-box src="#texture"></a-box>
      </a-scene>
      @@ -1045,7 +1045,7 @@

      systems -Instantiated systems. +Instantiated systems. time @@ -1101,12 +1101,12 @@

      embedded - Remove fullscreen styles from the canvas. -
    • fog - Add fog.
      • -
    • keyboard-shortcuts - Toggle keyboard shortcuts.
      • -
    • inspector - Inject the A-Frame Inspector.
      • -
    • stats - Toggle performance stats.
      • -
    • vr-mode-ui - Toggle UI for entering and exiting VR.
      • +
    • embedded - Remove fullscreen styles from the canvas.
      • +
    • fog - Add fog.
      • +
    • keyboard-shortcuts - Toggle keyboard shortcuts.
      • +
    • inspector - Inject the A-Frame Inspector.
      • +
    • stats - Toggle performance stats.
      • +
    • vr-mode-ui - Toggle UI for entering and exiting VR.

    Running Content Scripts on the Scene

    The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

    AFRAME.registerComponent('do-something', {
      init: function () {
        var sceneEl = this.el;
      }
    });
    diff --git a/docs/0.4.0/core/systems.html b/docs/0.4.0/core/systems.html index 48daf7657..e7951b18d 100644 --- a/docs/0.4.0/core/systems.html +++ b/docs/0.4.0/core/systems.html @@ -987,16 +987,16 @@

    -

    A system, of the entity-component-system pattern, provides global scope, +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -
    + -

    Registering a System

    A system is registered similarly to a component.

    +

    Registering a System

    A system is registered similarly to a component.

    If the system name matches a component name, then the component will have a reference to the system as this.system:

    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);
      }
    });
    @@ -1010,7 +1010,7 @@

    schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data. data diff --git a/docs/0.4.0/core/utils.html b/docs/0.4.0/core/utils.html index 301ebd152..370661087 100644 --- a/docs/0.4.0/core/utils.html +++ b/docs/0.4.0/core/utils.html @@ -988,7 +988,7 @@

    A-Frame’s utility modules are public through AFRAME.utils.

    -
    +

    AFRAME.utils.coordinates

    Module for handling vec3 and vec4 types.

    .isCoordinate (value)

    Tests whether a string is a vec3.

    @@ -1000,7 +1000,7 @@

    .stringify (data)

    Stringifies an {x, y, z} vec3 object to an “x y z” string.

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
    // >> "1 2 -3"
    -

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for +

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for return 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.

    @@ -1008,7 +1008,7 @@

    This is useful for components that need a way to reference a property of a multi-property component.

    -

    .setComponentProperty (entity, componentName, value, delimiter)

    Performs like Entity.setAttribute, but with support for setting an +

    .setComponentProperty (entity, componentName, value, delimiter)

    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.

    diff --git a/docs/0.4.0/guides/building-with-components.html b/docs/0.4.0/guides/building-with-components.html index 40b582081..10960aa98 100644 --- a/docs/0.4.0/guides/building-with-components.html +++ b/docs/0.4.0/guides/building-with-components.html @@ -992,27 +992,27 @@

    360° Image Viewer

    Let’s create an example of building a scene using an -entity-component-system workflow. This guide will introduce three +entity-component-system workflow. This guide will introduce three concepts:

      -
    1. Using the standard components that ship with A-Frame.
      2. +
    2. Using the standard components that ship with A-Frame.
    3. Using community components from the ecosystem.
    4. Writing custom components to accomplish whatever we want.

    The scene we will build is a 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

    -
    +

    Skeleton

    This is the starting point for our scene:

    <a-scene>
      <a-assets>
        <audio id="click-sound" src="audio/click.ogg"></audio>

        <!-- Images. -->
        <img id="city" src="img/city.jpg">
        <img id="city-thumb" src="img/thumb-city.png">
        <img id="cubes" src="img/cubes.jpg">
        <img id="cubes-thumb" src="img/thumb-cubes.png">
        <img id="sechelt" src="img/sechelt.jpg">
        <img id="sechelt-thumb" src="img/thumb-sechelt.png">
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Link we will build. -->
      <a-entity class="link"></a-entity>

      <!-- Camera + Cursor. -->
      <a-camera>
        <a-cursor id="cursor">
          <a-animation begin="click" easing="ease-in" attribute="scale"
                       fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
          <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                       from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
        </a-cursor>
      </a-camera>
    </a-scene>

    We have predefined:

    Using Standard Components

    Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure @@ -1022,19 +1022,19 @@ 

    <a-entity class="link"></a-entity>
    -

    To give our entity shape, we can attach the geometry component, +

    To give our entity shape, we can attach the geometry component, configured to a plane shape. We specify the component data using a syntax that resembles that of inline CSS styles:

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"></a-entity>
    -

    Then to give our entity appearance, we can attach the material +

    Then to give our entity appearance, we can attach the material component. We set shader to flat so the image isn’t affected negatively by lighting. And we set src to #cubes-thumb, a selector to one -of the images defined in the Asset Management System.

    +of the images defined in the Asset Management System.

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: #cubes-thumb"></a-entity>

    We can continue adding features to our entity by plugging in more components. -Let’s attach one more standard component, the sound component. We want +Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1109,15 +1109,15 @@

    Event-Set Component

    Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

    Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We are mimicking CSS :hover states. We can specify event names with _event properties, and the rest of the properties define the -setAttribute calls. Notice that the event-set component can have multiple +setAttribute calls. Notice that the event-set component can have multiple instances:

    <a-assets>
      <!-- ... -->
      <script id="link" type="text/nunjucks">
        <a-entity class="link"
          geometry="primitive: plane; height: 1; width: 1"
          material="shader: flat; src: ${thumb}"
          sound="on: click; src: #click-sound"
          event-set__1="_event: mousedown; scale: 1 1 1"
          event-set__2="_event: mouseup; scale: 1.2 1.2 1"
          event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
          event-set__4="_event: mouseleave; scale: 1 1 1"></a-entity>
      </script>
    </a-assets>
    @@ -1128,7 +1128,7 @@

    set-image component on GitHub.

    We want to write the component that fades the sky into a new 360° image -once one of the links are clicked. We’ll call it set-image. The component +once one of the links are clicked. We’ll call it set-image. The component API documentation provides a detailed reference for writing a component. A basic component skeleton might look like:

    Here is the skeleton for our set-image component.

    diff --git a/docs/0.4.0/guides/building-with-magicavoxel.html b/docs/0.4.0/guides/building-with-magicavoxel.html index de8eef5e8..fbd6c04c1 100644 --- a/docs/0.4.0/guides/building-with-magicavoxel.html +++ b/docs/0.4.0/guides/building-with-magicavoxel.html @@ -991,7 +991,7 @@

    3D scenes and models using voxels (i.e., blocks). MagicaVoxel makes modeling super easy, similar to building in Minecraft.

    magicavoxel

    -
    +

    Installation

    MagicaVoxel works on Windows and OS X. On the MagicaVoxel homepage, click the Download button and install the application:

    diff --git a/docs/0.4.0/guides/index.html b/docs/0.4.0/guides/index.html index 842d6ed28..cee86a117 100644 --- a/docs/0.4.0/guides/index.html +++ b/docs/0.4.0/guides/index.html @@ -995,7 +995,7 @@

    entity-component ecosystem.

    As A-Frame is accessible to people that may have not had experience with 3D or VR (or even programming), we’ll take this guide slowly step-by-step.

    -

    Below is the finished scene running live, you can open the A-Frame Inspector +

    Below is the finished scene running live, you can open the A-Frame Inspector by pressing <ctrl> + <alt> + i. Note: the CSS for the Inspector currently conflict with the A-Frame site styles, so visuals may look ugly.

    @@ -1033,7 +1033,7 @@

    -
    +

    Starting with HTML

    We start out with the minimum required HTML structure:

    <html>
      <head>
        <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
        </a-scene>
      <body>
    </html>
    @@ -1042,7 +1042,7 @@

    before <a-scene> because A-Frame registers custom HTML elements which must be defined before <a-scene> is attached or else <a-scene> will do nothing.

    -

    Next, we include <a-scene> in the <body>. <a-scene> will contain every +

    Next, we include <a-scene> in the <body>. <a-scene> will contain every entity in our scene. <a-scene> handles all of the setup that is required for 3D: setting up WebGL, the canvas, camera, lights, renderer, render loop as well as out of the box WebVR support on platforms such as HTC Vive, Oculus Rift, @@ -1053,7 +1053,7 @@

    <a-box>‘s documentation for +

    Here we define the color <a-box>, see <a-box>‘s documentation for the more attributes (e.g., width, height, depth).

    boximage Image by Ruben Mueller from vrjump.de

    @@ -1061,13 +1061,13 @@

    <a-entity> with the geometry and -material components:

    +underneath <a-box> is <a-entity> with the geometry and +material components:

    <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>
    -

    However, because the default camera and the box are positioned at the default +

    However, because the default camera and the box are positioned at the default position at the 0 0 0 origin, we won’t be able to see the box unless we move -it. We can do this by using the position component to transform the +it. We can do this by using the position component to transform the box in 3D space.

    Transforming an Entity in 3D

    Let’s first go over 3D space. A-Frame uses a right-handed coordinate system. With the default camera direction: positive X-axis extends right, positive @@ -1086,7 +1086,7 @@

    To translate, rotate, and scale the box, we can change the -position, rotation, and scale components. +position, rotation, and scale components. Let’s first apply the rotation and scale components:

    <a-scene>
      <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
    @@ -1130,13 +1130,13 @@

    Adding a Background to the Scene

    With a single line of HTML, we can add an immersive background with -<a-sky> that completely surrounds the scene. <a-sky>, which is a +<a-sky> that completely surrounds the scene. <a-sky>, which is a material applied to the inside of a sphere, can be a flat color, a 360° image, or a 360° video. For example, a dark gray background would be:

    <a-scene>
      <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky color="#222"></a-sky>
    </a-scene>

    Applying an Image Texture

    -

    Make sure you’re serving your HTML using a local server +

    Make sure you’re serving your HTML using a local server for textures to load properly.

    We can apply an image texture to the box with an image, video, or <canvas> @@ -1148,7 +1148,7 @@

    -

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The +

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The asset management system makes it easier for the browser to cache assets (e.g., images, videos, models) and A-Frame will make sure all of the assets are fetched before rendering.

    @@ -1170,7 +1170,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>
    </a-scene>
    -

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are +

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are oriented parallel to the XY axis. To make it parallel to the ground, we need to orient it along the XZ axis. We can do so by rotating the plane negative 90° on the X-axis.

    @@ -1188,7 +1188,7 @@ 

    <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
      repeat="10 10"></a-plane>
    -

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default +

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default if we don’t specify any lights, A-Frame adds an ambient light and a directional light. If A-Frame didn’t add lights for us, the scene would be black. Once we add lights of our own, however, the default lighting setup is removed and @@ -1206,7 +1206,7 @@

    Animation Component.

    -

    We can add animations to the box using A-Frame’s built-in animation +

    We can add animations to the box using A-Frame’s built-in animation system. Animations interpolate or tween a value over time. We can place an <a-animation> element as a child of the entity. Let’s have the box hover up and down to add some motion to the scene.

    @@ -1232,20 +1232,20 @@

    Given that many developers currently do not have proper VR hardware with controllers, we’ll focus this section on using basic mobile and desktop inputs -with the built-in cursor component. The cursor component by default provides +with the built-in cursor component. The cursor component by default provides the ability to “click” on entities by staring or gazing at them on mobile, or on desktop, looking at an entity and click the mouse. But know that the cursor component is just one way to add interactions, things open up if we have access to actual controllers.

    -

    To have a visible cursor fixed to the camera, we place the cursor as a child +

    To have a visible cursor fixed to the camera, we place the cursor as a child of the camera as explained above in Parent and Child Transforms. A-Frame

    Since we didn’t specifically define a camera, A-Frame included a default camera for us. But since we need to add a cursor as a child of the camera, we will -need to now define <a-camera> containing <a-cursor>:

    +need to now define <a-camera> containing <a-cursor>:

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2">
        <a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000"
          repeat="indefinite"></a-animation>
      </a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
    -

    If we check the documentation of the cursor component that +

    If we check the documentation of the cursor component that <a-cursor> wraps, we see that it emits hover events such as mouseenter, mouseleave as well as click.

    Event Listener Component (Intermediate)

    One way to manually handle the cursor events is to add an event listener with @@ -1253,7 +1253,7 @@

    Animating on Events below.

    In JavaScript, we grab the box with querySelector, use -addEventListener, and then setAttribute +addEventListener, and then setAttribute to make the box grow its scale when its hovered over. Note that A-Frame adds features to setAttribute to work with multi-property components. We can pass a full {x, y, z} object as the second argument.

    @@ -1310,12 +1310,12 @@

    Alternatively, press the button below:

    -

    Read more about using the A-Frame Inspector.

    +

    Read more about using the A-Frame Inspector.

    What’s Next?

    The core value proposition of A-Frame is its extensible entity-component architecture that allows for a declarative structure to define and compose reusable JavaScript modules. We’ll see more about components and the ecosystem in the upcoming sections. We will release a Writing an A-Frame Component -guide soon, for now the component documentation serves as a rough +guide soon, for now the component documentation serves as a rough guide.

    diff --git a/docs/0.4.0/guides/using-javascript-and-dom-apis.html b/docs/0.4.0/guides/using-javascript-and-dom-apis.html index 7aef284bd..5a1c8d06d 100644 --- a/docs/0.4.0/guides/using-javascript-and-dom-apis.html +++ b/docs/0.4.0/guides/using-javascript-and-dom-apis.html @@ -994,12 +994,12 @@

    Every element in the scene, even elements such as <a-box> or <a-sky>, are entities (represented as <a-entity>). A-Frame modifies the HTML element prototype to add some extra behavior for certain DOM APIs to tailor them to -A-Frame. See the Entity API documentation for reference on most of +A-Frame. See the Entity API documentation for reference on most of the APIs discussed below.

    -
    +

    Where to Place JavaScript Code for A-Frame

    Before we go over the different ways to use JavaScript and DOM APIs, we -recommend encapsulating your JavaScript code within A-Frame components. +recommend encapsulating your JavaScript code within A-Frame components. Components modularize code, make logic and behavior visible from HTML, and ensure that code at the correct time (e.g., after the scene and entities have attached and initialized). As the most basic example, to register a @@ -1082,28 +1082,28 @@

    Read more about +to update a single property of a component. Read more about Entity.setAttribute().

    Updating a Component with .setAttribute()

    To update a component, we also use .setAttribute(). Updating a component takes several forms.

    -

    Updating Property of Single-Property Component

    Let’s update the property of the position component, a +

    Updating Property of Single-Property Component

    Let’s update the property of the position component, a single-property component. We can pass either an object or a string. It is slightly preferred to pass an object so A-Frame doesn’t have to parse the string.

    entityEl.setAttribute('position', {x: 1, y: 2: z: -3});
    // Or entityEl.setAttribute('position', '1 2 -3');
    -

    Updating Single Property of Multi-Property Component

    Let’s update a single property of the material component, a +

    Updating Single Property of Multi-Property Component

    Let’s update a single property of the material component, a multi-property component. We do this by providing the component name, property name, and then property value to .setAttribute():

    entityEl.setAttribute('material', 'color', 'red');
    -

    Updating Multiple Properties of a Multi-Property Component

    Let’s update multiple properties at once of the light component, a +

    Updating Multiple Properties of a Multi-Property Component

    Let’s update multiple properties at once of the light component, a multi-property component. We do this by providing the component name and an object of properties to .setAttribute(). We’ll change the light’s color and intensity but leave the type the same:

    // <a-entity light="type: directional; color: #CAC; intensity: 0.5"></a-entity>
    entityEl.setAttribute('light', {color: '#ACC', intensity: 0.75});
    // <a-entity light="type: directional; color: #ACC; intensity: 0.75"></a-entity>
    -

    Replacing Properties of a Multi-Property Component

    Let’s replace all the properties of the geometry component, a +

    Replacing Properties of a Multi-Property Component

    Let’s replace all the properties of the geometry component, a multi-property component. We do this by providing the component name, an object of properties to .setAttribute(), and a flag that specifies to clobber the existing properties. We’ll change the light’s color and intensity but leave the diff --git a/docs/0.4.0/guides/using-with-threejs.html b/docs/0.4.0/guides/using-with-threejs.html index a61766c11..02bc8cf45 100644 --- a/docs/0.4.0/guides/using-with-threejs.html +++ b/docs/0.4.0/guides/using-with-threejs.html @@ -1017,7 +1017,7 @@

    And every A-Frame entity also has a reference to <a-scene> via .sceneEl:

    document.querySelector('a-entity').sceneEl.object3D;  // THREE.Scene
    -

    From a component, we access the scene through its entity +

    From a component, we access the scene through its entity (i.e., this.el):

    AFRAME.registerComponent('foo', {
      init: function () {
        var scene = this.el.sceneEl.object3D;  // THREE.Scene
      }
    });
    diff --git a/docs/0.4.0/guides/writing-a-component.html b/docs/0.4.0/guides/writing-a-component.html index 82220e371..d8a64e7be 100644 --- a/docs/0.4.0/guides/writing-a-component.html +++ b/docs/0.4.0/guides/writing-a-component.html @@ -987,7 +987,7 @@

    -

    Components of A-Frame’s entity-component framework are JavaScript +

    Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, @@ -995,7 +995,7 @@

    components.

    vehicleimage Image by Ruben Mueller from vrjump.de

    -

    This guide will take it pretty slow. We recommend skimming over the Component +

    This guide will take it pretty slow. We recommend skimming over the Component API documentation before going through this guide as that documentation will be more concise. Note that components should be defined before <a-scene> like:

    @@ -1009,12 +1009,12 @@

    Example: hello-world Component

    Let’s start with the most basic component to get a general idea. This component will log a simple message once when the component’s entity is attached using -the .init() handler.

    +the .init() handler.

    Registering the Component with AFRAME.registerComponent

    Components are registered with AFRAME.registerComponent(). We pass the name of the component, which will be used as the HTML attribute name in the component’s representation in the DOM. Then we pass the component definition which is a JavaScript object of methods and properties. Within the definition, we can -define lifecycle handler methods. One of which is .init(), which +define lifecycle handler methods. One of which is .init(), which is called once when the component is first plugged into its entity.

    In the example below, we just have our .init() handler log a simple message.

    AFRAME.registerComponent('hello-world', {
      init: function () {
        console.log('Hello, World!');
      }
    });
    @@ -1068,7 +1068,7 @@

    Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

    To demonstrate this, we’ll have our log component only log whenever its -entity emits an event. First, we’ll add an event property type that +entity emits an event. First, we’ll add an event property type that specifies which event the component should listen on.

    // ...
    schema: {
      event: {type: 'string', default: ''},
      message: {type: 'string', default: 'Hello, World!'},
    },
    // ...
    @@ -1077,7 +1077,7 @@

    add an event listener that will +

    What we want to do is add an event listener that will listen to the event before logging a message. If the event property type is not specified, we’ll just log the message:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      update: function () {
        var data = this.data;  // Component property values.
        var el = this.el;  // Reference to the component's entity.

        if (data.event) {
          // This will log the `message` when the entity emits the `event`.
          el.addEventListener(data.event, function () {
            console.log(data.message);
          });
        } else {
          // `event` not specified, just log the message.
          console.log(data.message);
        }
      }
    });
    @@ -1086,7 +1086,7 @@

    , we need a reference to the function. So +

    But to remove an event listener, we need a reference to the function. So let’s first store the function on this.eventHandlerFn whenever we attach an event listener. When we attach properties to the component via this, they’ll be available throughout all the other lifecycle handlers.

    @@ -1101,13 +1101,13 @@ 

    <a-scene>
      <a-entity log="event: anEvent; message: Hello, Metaverse!"></a-entity>
    </a-scene>
    -

    Let’s have our entity emit the event to test it out:

    +

    Let’s have our entity emit the event to test it out:

    var el = document.querySelector('a-entity');
    el.emit('anEvent');
    // >> "Hello, Metaverse!"

    Now let’s update our event to test the .update() handler:

    var el = document.querySelector('a-entity');
    el.setAttribute('log', {event: 'anotherEvent', message: 'Hello, new event!'});
    el.emit('anotherEvent');
    // >> "Hello, new event!"
    -

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity +

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity (i.e., .removeAttribute('log')). We can implement the .remove() handler which is called when the component is removed. For the log component, we remove any event listeners the component attached to the entity:

    @@ -1120,7 +1120,7 @@ 

    var el = document.querySelector('a-entity');
    el.removeAttribute('log');
    el.emit('anEvent');
    // >> Nothing should be logged...

    Allowing Multiple Instances of a Component

    Let’s allow having multiple log components attached to the same entity. To do -so, we enable multiple instancing with the .multiple flag. Let’s +so, we enable multiple instancing with the .multiple flag. Let’s set that to true:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      multiple: true,

      // ...
    });
    @@ -1137,13 +1137,13 @@

    Example: box Component

    For a less trivial example, let’s find out how we can add 3D objects and affect -the scene graph by writing a component that uses three.js. To get +the scene graph by writing a component that uses three.js. To get the idea, we’ll just make a basic box component that creates a box mesh with both geometry and material.

    boximage Image by Ruben Mueller from vrjump.de

    Note: this is just a 3D equivalent of writing a Hello, World! component. -A-Frame provides geometry and material components if we +A-Frame provides geometry and material components if we actually wanted to make a box in practice.

    Schema and API

    Let’s start with the schema. The schema defines the API of your component. We’ll make the width, height, depth, and color configurable through the @@ -1160,7 +1160,7 @@

    THREE.BoxBufferGeometry, THREE.MeshStandardMaterial, and finally a THREE.Mesh. Then we set the mesh on our entity to add the mesh to the -three.js scene graph using .setObject3D(name, object):

    +three.js scene graph using .setObject3D(name, object):

    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.BoxBufferGeometry(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);
      }
    });

    Now let’s handle updates. If the geometry-related properties (i.e., width, diff --git a/docs/0.4.0/introduction/best-practices.html b/docs/0.4.0/introduction/best-practices.html index 2dbb1aaf5..406c565a6 100644 --- a/docs/0.4.0/introduction/best-practices.html +++ b/docs/0.4.0/introduction/best-practices.html @@ -1007,14 +1007,14 @@

    recommended hardware specifications. -
  • Use the stats component to keep an eye on various metrics (FPS, +
  • Use recommended hardware specifications.
    • +
  • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities. We want to maximize FPS and minimize everything else.
    • -
  • Make use of the asset management system to benefit from browser +
  • Make use of the asset management system to benefit from browser caching and preloading. Trying to fetch assets while rendering is slower than fetching all assets before rendering.
    • -
  • Look to make use of geometry merging to limit draw calls when +
  • Look to make use of geometry merging to limit draw calls when multiple geometries are sharing the same material.
  • If using models, look to bake your lights into textures rather than relying on real-time lighting and shadows.
    • @@ -1025,10 +1025,10 @@

    A-Frame

    Some best practices for the framework:

    diff --git a/docs/0.4.0/introduction/device-and-platform-support.html b/docs/0.4.0/introduction/device-and-platform-support.html index 88334ced9..3e8377283 100644 --- a/docs/0.4.0/introduction/device-and-platform-support.html +++ b/docs/0.4.0/introduction/device-and-platform-support.html @@ -991,7 +991,7 @@

    devices and APIs. A-Frame supports both flat (3D on a normal screen) and WebVR experiences, though its focus is heavily VR. We will break up support into two categories: flat and VR.

    -
    +

    Support for Flat Experiences

    Support for flat experiences primarily depends on a browser’s WebGL support. We can see which browsers support WebGL at Can I use WebGL?.

    diff --git a/docs/0.4.0/introduction/faq.html b/docs/0.4.0/introduction/faq.html index f34cca019..2d6e8226e 100644 --- a/docs/0.4.0/introduction/faq.html +++ b/docs/0.4.0/introduction/faq.html @@ -987,19 +987,19 @@

    -
    +

    What is A-Frame?

    A-Frame is an open-source web framework for building virtual reality experiences. We can build VR web pages that we can walk inside with just HTML. Under the hood, it is a three.js framework that brings the -entity-component-system pattern to the DOM.

    +entity-component-system pattern to the DOM.

    Why was A-Frame built?

    A-Frame was built to make virtual reality more accessible to the web community and to kick-start the WebVR content ecosystem. It is easy to learn and fast to develop, allowing us to quickly prototype patterns and experiences. A-Frame is a vehicle in which to make WebVR successful.

    -

    How can I get started?

    Read the Introduction to get a deeper feel of what A-Frame is.

    -

    See the Getting Started guide to get set up.

    -

    Check out the guides for basic tutorials.

    +

    How can I get started?

    Read the Introduction to get a deeper feel of what A-Frame is.

    +

    See the Getting Started guide to get set up.

    +

    Check out the guides for basic tutorials.

    Past that, you can browse the resources on the awesome-aframe repository. If you need additional support, ask on StackOverflow.

    @@ -1023,7 +1023,7 @@

    best performance practices and guidelines to help get you +best performance practices and guidelines to help get you started.

    Why does my asset (e.g., image, video, model) not load?

    If you are loading the asset from a different domain, make sure that the asset is served with cross-origin resource sharing (CORS) headers. You could @@ -1090,12 +1090,12 @@

    How is A-Frame different from VRML?

    A-Frame is a JavaScript framework, not a 3D or web standard. It embraces the Extensible Web Manifesto. Only look at standardization as winning ideas emerge.

    -

    More technically, A-Frame is built on top of an entity-component-system +

    More technically, A-Frame is built on top of an entity-component-system pattern, is fully extensible, and integrates well with all of the existing web development frameworks and tools.

    Does A-Frame support X feature?

    A-Frame ships with a handful of components and primitives. However being based -on top of an entity-component-system pattern, if a feature doesn’t -exist, you can write a component to enable it. Or if one of the +on top of an entity-component-system pattern, if a feature doesn’t +exist, you can write a component to enable it. Or if one of the standard components is too limiting, you can fork it.

    Check out what the features that the ecosystem has enabled at awesome-aframe’s collection of components.

    @@ -1112,8 +1112,8 @@

    medical education project that also features Leap Motion controls code.

    -

    Which devices, headsets, platforms does A-Frame support?

    See Device and Platform Support.

    -

    How do I improve performance?

    See Best Practices.

    +

    Which devices, headsets, platforms does A-Frame support?

    See Device and Platform Support.

    +

    How do I improve performance?

    See Best Practices.

    How can I share my work?

    If you make something with A-Frame, please share it with us! Any of the channels below are great:

      diff --git a/docs/0.4.0/introduction/getting-started.html b/docs/0.4.0/introduction/getting-started.html index f4c57bb9c..eb114a820 100644 --- a/docs/0.4.0/introduction/getting-started.html +++ b/docs/0.4.0/introduction/getting-started.html @@ -989,9 +989,9 @@

      -

      Welcome! Make sure to read the introduction. If you’re ready to +

      Welcome! Make sure to read the introduction. If you’re ready to go, there are multiple ways of getting started.

      -
      +

      Play with CodePen

      CodePen is a playground for front-end web development. We can edit HTML and JavaScript directly in the browser with its text editor, see changes diff --git a/docs/0.4.0/primitives/a-camera.html b/docs/0.4.0/primitives/a-camera.html index 819bed920..470dc66f3 100644 --- a/docs/0.4.0/primitives/a-camera.html +++ b/docs/0.4.0/primitives/a-camera.html @@ -990,7 +990,7 @@

      The camera primitive determines what the user sees. We can change the viewport by modifying the camera entity’s position and rotation.

      Note that by default, the camera origin will be at 0 1.6 0 in desktop mode -and 0 0 0 in VR mode. Read about the camera.userHeight property.

      +and 0 0 0 in VR mode. Read about the camera.userHeight property.

      Example

      <a-scene>
        <a-box></a-box>
        <a-camera></a-camera>
      </a-scene>

      Attributes

      diff --git a/docs/0.4.0/primitives/a-circle.html b/docs/0.4.0/primitives/a-circle.html index 4300d84af..024936515 100644 --- a/docs/0.4.0/primitives/a-circle.html +++ b/docs/0.4.0/primitives/a-circle.html @@ -987,7 +987,7 @@

      -

      The circle primitive creates circles surfaces using the geometry +

      The circle primitive creates circles surfaces using the geometry component with the type set to circle.

      Example

      <a-scene>
        <a-assets>
          <img id="platform" src="platform.jpg">
        </a-assets>

        <!-- Basic circle. -->
        <a-circle color="#CCC" radius="20"></a-circle>

        <!-- Textured circle parallel to ground. -->
        <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
      </a-scene>
      diff --git a/docs/0.4.0/primitives/a-collada-model.html b/docs/0.4.0/primitives/a-collada-model.html index 102f84959..b5834059b 100644 --- a/docs/0.4.0/primitives/a-collada-model.html +++ b/docs/0.4.0/primitives/a-collada-model.html @@ -1001,7 +1001,7 @@

      src -collada-model.src +collada-model.src null diff --git a/docs/0.4.0/primitives/a-cursor.html b/docs/0.4.0/primitives/a-cursor.html index ab488505d..5b0ffc614 100644 --- a/docs/0.4.0/primitives/a-cursor.html +++ b/docs/0.4.0/primitives/a-cursor.html @@ -991,7 +991,7 @@

      interactivity with a scene on devices that do not have a hand controller. The default appearance is a ring geometry. The cursor is usually placed as a child of the camera.

      -

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      +

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      Example

      <a-scene>
        <a-camera>
          <a-cursor></a-cursor>
        </a-camera>

        <a-box></a-box>
      </a-scene>

      Attributes

      diff --git a/docs/0.4.0/primitives/a-plane.html b/docs/0.4.0/primitives/a-plane.html index bf1224456..ee081ab80 100644 --- a/docs/0.4.0/primitives/a-plane.html +++ b/docs/0.4.0/primitives/a-plane.html @@ -987,7 +987,7 @@

      -

      The plane primitive creates flat surfaces using the geometry +

      The plane primitive creates flat surfaces using the geometry component with the type set to plane.

      Example

      <a-scene>
        <a-assets>
          <img id="ground" src="ground.jpg">
        </a-assets>

        <!-- Basic plane. -->
        <a-plane color="#CCC" height="20" width="20"></a-plane>

        <!-- Textured plane parallel to ground. -->
        <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
      </a-scene>
      diff --git a/docs/0.4.0/primitives/a-sound.html b/docs/0.4.0/primitives/a-sound.html index 9ce79c7f2..a5e4ead57 100644 --- a/docs/0.4.0/primitives/a-sound.html +++ b/docs/0.4.0/primitives/a-sound.html @@ -987,7 +987,7 @@

      -

      The sound primitive wraps the sound component.

      +

      The sound primitive wraps the sound component.

      Example

      <a-scene>
        <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
      </a-scene>

      Attributes

      diff --git a/docs/0.4.0/primitives/a-sphere.html b/docs/0.4.0/primitives/a-sphere.html index a5e92cbd5..82d65871c 100644 --- a/docs/0.4.0/primitives/a-sphere.html +++ b/docs/0.4.0/primitives/a-sphere.html @@ -987,7 +987,7 @@

      -

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      +

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      Example

      <a-sphere color="yellow" radius="5"></a-sphere>

      Attributes

      diff --git a/docs/0.4.0/primitives/a-torus-knot.html b/docs/0.4.0/primitives/a-torus-knot.html index f5ebb4396..901019278 100644 --- a/docs/0.4.0/primitives/a-torus-knot.html +++ b/docs/0.4.0/primitives/a-torus-knot.html @@ -987,7 +987,7 @@

      -

      The torus knot primitive creates pretzel shapes using the geometry +

      The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

      Example

      <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
      diff --git a/docs/0.4.0/primitives/a-torus.html b/docs/0.4.0/primitives/a-torus.html index b5e52e89f..057a4f5fa 100644 --- a/docs/0.4.0/primitives/a-torus.html +++ b/docs/0.4.0/primitives/a-torus.html @@ -987,7 +987,7 @@

      -

      The torus primitive creates donut or tube shapes using the geometry +

      The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

      Example

      <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
      diff --git a/docs/0.4.0/primitives/a-videosphere.html b/docs/0.4.0/primitives/a-videosphere.html index fbaa68beb..30e19ce24 100644 --- a/docs/0.4.0/primitives/a-videosphere.html +++ b/docs/0.4.0/primitives/a-videosphere.html @@ -991,7 +991,7 @@

      Videospheres are a large sphere with the video texture mapped to the inside.

      Examples

      <a-scene>
        <a-assets>
          <video id="antarctica" autoplay loop="true" src="antarctica.mp4">
        </a-assets>

        <!-- Using the asset management system. -->
        <a-videosphere src="#antarctica"></a-videosphere>

        <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
        <a-videosphere src="africa.mp4"></a-videosphere>
      </a-scene>
      -

      Attributes

      Note that the videosphere primitive inherits common attributes.

      +

      Attributes

      Note that the videosphere primitive inherits common attributes.

      diff --git a/docs/0.4.0/primitives/index.html b/docs/0.4.0/primitives/index.html index 53645afa4..245cf602c 100644 --- a/docs/0.4.0/primitives/index.html +++ b/docs/0.4.0/primitives/index.html @@ -987,12 +987,12 @@

      -

      Primitives are entities that:

      +

      Primitives are entities that:

      • Have a semantic name (e.g., <a-box>)
      • Have a preset assemblage of components
      • Have default component property values
        • -
      • Map HTML attributes to component properties
        • +
      • Map HTML attributes to component properties

      Primitives abstract the core API to:

        @@ -1002,7 +1002,7 @@

      They are sort of like Prefabs in Unity. Some literature on the entity-component-system pattern refer to these as assemblages.

      -
      +

      Example

      Below is an assortment of primitives in use:

      <a-scene>
        <!-- Using the asset management system for caching. -->
        <a-assets>
          <a-asset-item id="fox-obj" src="fox.obj"></a-asset-item>
          <a-asset-item id="fox-mtl" src="fox.mtl"></a-asset-item>
          <img id="texture" src="texture.png">
          <video id="video" src="video.mp4"></video>
        </a-assets>

        <a-camera fov="80"><a-cursor></a-cursor></a-camera>
        <a-box src="#texture" depth="2" height="5" width="1"></a-box>
        <a-image src="fireball.jpg"></a-image>
        <a-video src="#video"></a-video>
        <a-sky color="#432FA0"></a-sky>
      </a-scene>
      @@ -1011,8 +1011,8 @@

      components and mixins -
    • Applying animations
      • +
    • Attaching components and mixins
      • +
    • Applying animations

    For example, let’s take <a-box> primitive, and say someone writes a third-party physics component. We can attach it to <a-box> just as we would diff --git a/docs/0.5.0/components/cursor.html b/docs/0.5.0/components/cursor.html index f0aa46fea..a9f40e952 100644 --- a/docs/0.5.0/components/cursor.html +++ b/docs/0.5.0/components/cursor.html @@ -1044,7 +1044,7 @@

    The cursor component lets us interact with entities through clicking and -gazing. The cursor is a specific application of the raycaster +gazing. The cursor is a specific application of the raycaster component in that it:

    • Listens for mouse clicks and gaze-based fuses.
      • @@ -1055,10 +1055,10 @@

      When the mouse clicks, the closest visible entity intersecting the cursor, if any, will emit a click event. Note the cursor component only applies the raycasting behavior. To provide a shape or appearance to the cursor, you could -apply the geometry and material components.

      +apply the geometry and material components.

      Example

      For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no -matter where we look, we place it as a child of the active camera +matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

      <a-entity camera>
        <a-entity cursor="fuse: true; fuseTimeout: 500"
                  position="0 0 -1"
                  geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                  material="color: black; shader: flat">
        </a-entity>
      </a-entity>

      <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
      @@ -1150,7 +1150,7 @@

      States

      Configuring the Cursor through the Raycaster Component

      The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

      <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>
      @@ -1165,7 +1165,7 @@

      Adding Visual Feedback

      To add visual feedback to the cursor to show when the cursor is clicking or -fusing, we can use the animation system. When the cursor +fusing, we can use the animation system. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

      <a-entity cursor="fuse: true; fuseTimeout: 500"
                position="0 0 -1"
                geometry="primitive: ring"
                material="color: black; shader: flat">
        <a-animation begin="click" easing="ease-in" attribute="scale"
                     fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
        <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                     fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
      </a-entity>
      diff --git a/docs/0.5.0/components/debug.html b/docs/0.5.0/components/debug.html index fe926f73f..b386ab3a4 100644 --- a/docs/0.5.0/components/debug.html +++ b/docs/0.5.0/components/debug.html @@ -1059,8 +1059,8 @@ 

      <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

      Make sure that this component is not active in production.

      -

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM:

      +

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM:

      document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
      document.querySelector('a-entity').flushToDOM();  // Flush an entity.
      document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
      document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.
      diff --git a/docs/0.5.0/components/fog.html b/docs/0.5.0/components/fog.html index e01586237..f977b4b90 100644 --- a/docs/0.5.0/components/fog.html +++ b/docs/0.5.0/components/fog.html @@ -1044,7 +1044,7 @@

      The fog component obscures entities in fog given distance from the camera. The -fog component applies only to the <a-scene> element.

      +fog component applies only to the <a-scene> element.

      Example

      <a-scene fog="type: linear; color: #AAA"></a-scene>

      Properties

      Given the fog distribution type, different properties will apply.

      diff --git a/docs/0.5.0/components/geometry.html b/docs/0.5.0/components/geometry.html index 62a6a8d3e..711da1980 100644 --- a/docs/0.5.0/components/geometry.html +++ b/docs/0.5.0/components/geometry.html @@ -1047,7 +1047,7 @@

      property defines the general shape. Geometric primitives, in computer graphics, are irreducible basic shapes. A material component is commonly defined to provide a appearance alongside the shape to create a complete mesh.

      -
      +

      Base Properties

      Every geometry type will have these properties:

      @@ -1529,7 +1529,7 @@ 

      AFRAME.registerGeometry('box', {
        schema: {
          depth: {default: 1, min: 0},
          height: {default: 1, min: 0},
          width: {default: 1, min: 0},
          segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
        },

        init: function (data) {
          this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
        }
      });

      Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then we need to create the geometry and set on this.geometry through the init and update lifecycle methods.

      When a geometry component sets its primitive property to the custom geometry diff --git a/docs/0.5.0/components/gltf-model.html b/docs/0.5.0/components/gltf-model.html index 98b03b364..1ffef396e 100644 --- a/docs/0.5.0/components/gltf-model.html +++ b/docs/0.5.0/components/gltf-model.html @@ -1051,9 +1051,9 @@

      Note that glTF is a fairly new specification and adoption is still growing. Work on the three.js glTF loader and converters are still active.

      -
      + -

      Why use glTF?

      In comparison to the older OBJ format, which supports only +

      Why use glTF?

      In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features. In addition to all of the above, glTF offers:

        @@ -1064,7 +1064,7 @@

        COLLADA, the supported features are very +

        In comparison to COLLADA, the supported features are very similar. However, because glTF focuses on providing a “transmission format” rather than an editor format, it is more interoperable with web technologies. By analogy, the .PSD (Adobe Photoshop) format is helpful for editing 2D images, diff --git a/docs/0.5.0/components/hand-controls.html b/docs/0.5.0/components/hand-controls.html index f94323b91..695e51ac3 100644 --- a/docs/0.5.0/components/hand-controls.html +++ b/docs/0.5.0/components/hand-controls.html @@ -1044,9 +1044,9 @@

        The hand-controls gives tracked hands (using a prescribed model) with animated -gestures. hand-controls wraps the vive-controls and -oculus-touch-controls components, which in turn wrap the -tracked-controls component. The component gives extra events and +gestures. hand-controls wraps the vive-controls and +oculus-touch-controls components, which in turn wrap the +tracked-controls component. The component gives extra events and handles hand animations and poses.

        Example

        <a-entity hand-controls="left"></a-entity>
        <a-entity hand-controls="right"></a-entity>
        diff --git a/docs/0.5.0/components/keyboard-shortcuts.html b/docs/0.5.0/components/keyboard-shortcuts.html index 2ae76c1fd..04f23b859 100644 --- a/docs/0.5.0/components/keyboard-shortcuts.html +++ b/docs/0.5.0/components/keyboard-shortcuts.html @@ -1043,7 +1043,7 @@

        -

        The keyboard-shortcuts component toggles global keyboard shortcuts. The keyboard-shortcuts component applies only to the <a-scene> element.

        +

        The keyboard-shortcuts component toggles global keyboard shortcuts. The keyboard-shortcuts component applies only to the <a-scene> element.

        Example

        <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

        Properties

        diff --git a/docs/0.5.0/components/look-controls.html b/docs/0.5.0/components/look-controls.html index 43f926254..a0e872607 100644 --- a/docs/0.5.0/components/look-controls.html +++ b/docs/0.5.0/components/look-controls.html @@ -1049,7 +1049,7 @@

      • Rotates the entity when we click-drag mouse.
      • Rotates the entity when we touch-drag the touchscreen.
        • -

        Example

        The look-controls component is usually used alongside the camera +

        Example

        The look-controls component is usually used alongside the camera component.

        <a-entity camera look-controls></a-entity>
        diff --git a/docs/0.5.0/components/material.html b/docs/0.5.0/components/material.html index d8ad7f5c5..a90c3423a 100644 --- a/docs/0.5.0/components/material.html +++ b/docs/0.5.0/components/material.html @@ -1044,11 +1044,11 @@

        The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

        We can register custom materials to extend the material component to provide a wide range of visual effects.

        -
        +

        Example

        Defining a red material using the default standard material:

        <a-entity geometry="primitive: box" material="color: red"></a-entity>
        @@ -1214,7 +1214,7 @@

        fog. +Whether or not material is affected by fog. true @@ -1328,7 +1328,7 @@

        fog. +Whether or not material is affected by fog. true @@ -1364,7 +1364,7 @@

        Textures

        To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

        +asset management system:

        <a-scene>
          <a-assets>
            <img id="my-texture" src="texture.png">
          </a-assets>

          <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
        </a-scene>

        src can also be an inline URL. Note that we do not get browser caching or diff --git a/docs/0.5.0/components/obj-model.html b/docs/0.5.0/components/obj-model.html index 4ebbcb7f6..63c5398ab 100644 --- a/docs/0.5.0/components/obj-model.html +++ b/docs/0.5.0/components/obj-model.html @@ -1061,7 +1061,7 @@

        mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

        Events

        diff --git a/docs/0.5.0/components/oculus-touch-controls.html b/docs/0.5.0/components/oculus-touch-controls.html index cb810c2f4..72a88970a 100644 --- a/docs/0.5.0/components/oculus-touch-controls.html +++ b/docs/0.5.0/components/oculus-touch-controls.html @@ -1044,7 +1044,7 @@

        The oculus-touch-controls component interfaces with the Oculus Touch controllers. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.

        Example

        <a-entity oculus-touch-controls="hand: left"></a-entity>
        <a-entity oculus-touch-controls="hand: right"></a-entity>
        diff --git a/docs/0.5.0/components/raycaster.html b/docs/0.5.0/components/raycaster.html index 6931f08ac..294ccbc76 100644 --- a/docs/0.5.0/components/raycaster.html +++ b/docs/0.5.0/components/raycaster.html @@ -1051,7 +1051,7 @@

        list of objects, and will emit events on the entity when it detects intersections or clearing of intersections (i.e., when the raycaster is no longer intersecting an entity).

        -

        The cursor component builds on top of the raycaster +

        The cursor component builds on top of the raycaster component.

        Example

        <a-entity id="player" collider-check>
          <a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
        </a-entity>
        <a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
        @@ -1151,11 +1151,11 @@

        Metho

        Setting the Origin and Direction of the Raycaster

        The raycaster has an origin, where its ray starts, and a direction, where the ray goes.

        The origin of the raycaster is at the raycaster entity’s position. We can -change the origin of the raycaster by setting the position +change the origin of the raycaster by setting the position component of the raycaster entity (or parent entities of the raycaster entity).

        The direction of the raycaster is in “front” of the raycaster entity (i.e., 0 0 -1, on the negative Z-axis). We can change the direction of the raycaster by -setting the rotation component of the raycaster entity (or parent +setting the rotation component of the raycaster entity (or parent entities of the raycaster entity).

        For example, here is applying a raycaster along the length of a rotated bullet:

        <!-- Bullet, rotated to be parallel with the ground. -->
        <a-entity id="bullet" geometry="primitive: cylinder; height: 0.1" rotation="-90 0 0">
          <!-- Raycaster, targets enemies, made to be as long as the bullet, positioned to the start of the bullet, rotated to align with the bullet. -->
          <a-entity raycaster="objects: .enemies; far: 0.1" position="0 -0.5 0" rotation="90 0 0"></a-entity>
        </a-entity>
        diff --git a/docs/0.5.0/components/sound.html b/docs/0.5.0/components/sound.html index 39290bc6b..eb4e3c75c 100644 --- a/docs/0.5.0/components/sound.html +++ b/docs/0.5.0/components/sound.html @@ -1045,7 +1045,7 @@

        The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the -components-position.

        +components-position.

        Example

        <a-entity id="river" geometry="primitive: plane" material="color: blue"
                  position="-10 0 0" sound="src: url(river.mp3); autoplay: true"></a-entity>

        Properties

        diff --git a/docs/0.5.0/components/stats.html b/docs/0.5.0/components/stats.html index bba2d2be6..5cb272c04 100644 --- a/docs/0.5.0/components/stats.html +++ b/docs/0.5.0/components/stats.html @@ -1044,7 +1044,7 @@

        The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

        +component applies only to the <a-scene> element.

        Example

        <a-scene stats></a-scene>

        Metrics

          diff --git a/docs/0.5.0/components/text.html b/docs/0.5.0/components/text.html index 2dd18e691..5cadb8e44 100644 --- a/docs/0.5.0/components/text.html +++ b/docs/0.5.0/components/text.html @@ -1045,7 +1045,7 @@

          The text component renders signed distance field (SDF) font text.

          Example Image

          -
          +

          Introduction

          Note that rendering text in 3D is hard. In 2D web development, text is the most basic thing because the browser’s renderer and layout engine handles @@ -1269,8 +1269,8 @@

          SizingChange the width.
        • Change the wrapCount (roughly how many characters to fit inside the given width).
        • Change wrapPixels.
          • -
        • Change the scale component.
          • -
        • Position the text closer or farther away.
          • +
        • Change the scale component.
          • +
        • Position the text closer or farther away.

        Sizing

        Text can be wrapped by specifying width in A-Frame units.

        diff --git a/docs/0.5.0/components/tracked-controls.html b/docs/0.5.0/components/tracked-controls.html index 0c501deff..7a75f0fd5 100644 --- a/docs/0.5.0/components/tracked-controls.html +++ b/docs/0.5.0/components/tracked-controls.html @@ -1045,8 +1045,8 @@

        The tracked-controls component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is -abstracted by the hand-controls component as well as the -vive-controls and oculus-touch-controls +abstracted by the hand-controls component as well as the +vive-controls and oculus-touch-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events.

        Example

        Note that due to recent browser-specific changes, Vive controllers may be returned diff --git a/docs/0.5.0/components/vive-controls.html b/docs/0.5.0/components/vive-controls.html index c47a16b19..86750d08e 100644 --- a/docs/0.5.0/components/vive-controls.html +++ b/docs/0.5.0/components/vive-controls.html @@ -1044,7 +1044,7 @@

        The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

        Example

        <a-entity vive-controls="hand: left"></a-entity>
        <a-entity vive-controls="hand: right"></a-entity>
        diff --git a/docs/0.5.0/components/vr-mode-ui.html b/docs/0.5.0/components/vr-mode-ui.html index a9948da36..1ad0e6866 100644 --- a/docs/0.5.0/components/vr-mode-ui.html +++ b/docs/0.5.0/components/vr-mode-ui.html @@ -1043,7 +1043,7 @@

        -

        The vr-mode-ui component toggles UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only to the <a-scene> element.

        +

        The vr-mode-ui component toggles UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only to the <a-scene> element.

        Example

        <a-scene vr-mode-ui="enabled: false"></a-scene>

        Properties

        diff --git a/docs/0.5.0/components/wasd-controls.html b/docs/0.5.0/components/wasd-controls.html index c49de35d0..ab5b64c9d 100644 --- a/docs/0.5.0/components/wasd-controls.html +++ b/docs/0.5.0/components/wasd-controls.html @@ -1044,7 +1044,7 @@

        The wasd-controls component controls an entity with the WASD or arrow keyboard -keys. The wasd-controls component is commonly attached to an entity with the camera +keys. The wasd-controls component is commonly attached to an entity with the camera component.

        Example

        <a-entity camera look-controls wasd-controls></a-entity>
        diff --git a/docs/0.5.0/core/animations.html b/docs/0.5.0/core/animations.html index 483f8bded..5b1c7c763 100644 --- a/docs/0.5.0/core/animations.html +++ b/docs/0.5.0/core/animations.html @@ -1057,7 +1057,7 @@

        the animation, and loops indefinitely.

        <a-entity>
          <a-entity position="5 0 0"></a-entity>
          <a-animation attribute="rotation"
                       dur="10000"
                       fill="forwards"
                       to="0 360 0"
                       repeat="indefinite"></a-animation>
        </a-entity>
        -
        +

        Attributes

        Here is an overview of animation attributes. We’ll go into more detail below.

        diff --git a/docs/0.5.0/core/asset-management-system.html b/docs/0.5.0/core/asset-management-system.html index d868c5d3a..c2acba5ff 100644 --- a/docs/0.5.0/core/asset-management-system.html +++ b/docs/0.5.0/core/asset-management-system.html @@ -1059,7 +1059,7 @@

        The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

        -
        +

        Example

        We can define our assets in <a-assets> and point to those assets from our entities using selectors:

        diff --git a/docs/0.5.0/core/component.html b/docs/0.5.0/core/component.html index 13682fb83..3fdb75806 100644 --- a/docs/0.5.0/core/component.html +++ b/docs/0.5.0/core/component.html @@ -1043,7 +1043,7 @@

        -

        In the entity-component-system pattern, a component is a reusable and +

        In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

        In A-Frame, components modify entities which are 3D objects in the scene. We @@ -1057,7 +1057,7 @@

        Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

        -
        +

        Component HTML Form

        A component holds a bucket of data in the form of one or more component properties. Components use this data to modify entities. Consider an engine @@ -1206,7 +1206,7 @@

        Definition Lifecycle Handler Methods

        With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the shape of the data, the lifecycle handler methods use the data to modify the entity. The handlers will usually interact with the -Entity API.

        +Entity API.

        methodsimage Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

        Overview of Methods

        @@ -1259,11 +1259,11 @@

        entity as an HTML element. +

        - + @@ -1300,7 +1300,7 @@

        diffing the current +

        Granular modifications to the entity can be done by diffing the current dataset (this.data) with the previous dataset before the update (oldData).

        A-Frame calls .update() both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The @@ -1308,7 +1308,7 @@

        visible component’s update sets the visibility of +

        For example, the visible component’s update sets the visibility of the entity.

        Reference to the entity as an HTML element.
        this.el.sceneElReference to the scene as an HTML element.Reference to the scene as an HTML element.
        this.id
        AFRAME.registerComponent('visible', {
          /**
           * this.el is the entity element.
           * this.el.object3D is the three.js object of the entity.
           * this.data is the component's property or properties.
           */
          update: function (oldData) {
            this.el.object3D.visible = this.data;
          }
          // ...
        });
        @@ -1323,7 +1323,7 @@

        Remove, undo, or clean up all of the component’s modifications to the entity.
      • Detach event listeners.

      -

      For example, when the light component is removed, the light component +

      For example, when the light component is removed, the light component will remove the light object that it had previously set on the entity, thus removing it from the scene.

      AFRAME.registerComponent('light', {
        // ...
        remove: function () {
          this.el.removeObject3D('light');
        }
        // ...
      });
      @@ -1345,7 +1345,7 @@

      time) and the time difference in milliseconds since the last frame (timeDelta). These can be used for interpolation or to only run parts of the tick handler on a set interval.

      -

      For example, the tracked controls component will progress +

      For example, the tracked controls component will progress the controller’s animations, update the controller’s position and rotation, and check for button presses.

      AFRAME.registerComponent('tracked-controls', {
        // ...
        tick: function (time, timeDelta) {
          this.updateMeshAnimation();
          this.updatePose();
          this.updateButtons();
        }
        // ...
      });
      @@ -1362,7 +1362,7 @@

      .
    • Remove event listeners.
    • Remove any chances of dynamic behavior.

    -

    For example, the sound component will pause the sound and remove an +

    For example, the sound component will pause the sound and remove an event listener that would have played a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      pause: function () {
        this.pauseSound();
        this.removeEventListener();
      }
      // ...
    });
    @@ -1377,7 +1377,7 @@

    .pla
    • Add event listeners.
    -

    For example, the sound component will play the sound and update the +

    For example, the sound component will play the sound and update the event listener that would play a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      play: function () {
        if (this.data.autoplay) { this.playSound(); }
        this.updateEventListener();
      }
      // ...
    });
    @@ -1387,7 +1387,7 @@

  • Dynamically update or extend the schema, usually depending on the value of a property.
    • -

    For example, the geometry component checks if the primitive +

    For example, the geometry component checks if the primitive property changed to determine whether to update the schema for a different type of geometry:

    AFRAME.registerComponent('geometry', {
      // ...
      updateSchema: (newData) {
        if (newData.primitive !== this.data.primitive) {
          this.extendSchema(GEOMETRIES[newData.primitive].schema);
        }
      }
      // ...
    });
    @@ -1428,7 +1428,7 @@ 

    document.querySelector('[geometry]').components.geometry.flushToDOM();
    -

    Read more about component-to-DOM serialization.

    +

    Read more about component-to-DOM serialization.

    Accessing a Component’s Members and Methods

    A component’s members and methods can be accessed through the entity from the .components object. Look up the component from the entity’s map of components, and we’ll have access to the component’s internals. Consider this diff --git a/docs/0.5.0/core/entity.html b/docs/0.5.0/core/entity.html index 1051e4995..61386081a 100644 --- a/docs/0.5.0/core/entity.html +++ b/docs/0.5.0/core/entity.html @@ -1044,23 +1044,23 @@

    A-Frame represents an entity via the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

    -

    In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

    -
    +

    In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

    +

    Example

    Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

    <a-entity>

    We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

    +give it shape and appearance, we can attach the geometry and +material components:

    <a-entity geometry="primitive: box" material="color: red">
    -

    Or to make it emit light, we can further attach the light component:

    +

    Or to make it emit light, we can further attach the light component:

    <a-entity geometry="primitive: box" material="color: red"
              light="type: point; intensity: 2.0">

    Retrieving an Entity

    We can simply retrieve an entity using DOM APIs.

    @@ -1092,7 +1092,7 @@

    object3DMap

    An entity’s object3DMap is an object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that components have set.

    -

    For an entity with a geometry and light components +

    For an entity with a geometry and light components attached, object3DMap might look like:

    {
      light: <THREE.Light Object>,
      mesh: <THREE.Mesh Object>
    }
    @@ -1106,7 +1106,7 @@

    Metho 
    entity.addEventListener('stateadded', function (evt) {
      if (evt.detail.state === 'selected') {
        console.log('Entity now selected!');
      }
    });

    entity.addState('selected');
    entity.is('selected');  // >> true

    emit (name, detail, bubbles)

    emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

    +trigger an animation:

    // <a-entity>
    //   <a-animation attribute="rotation" begin="rotate" to="0 360 0"></a-animation>
    // </a-entity>
    entity.emit('rotate');

    We can also pass event detail or data as the second argument:

    @@ -1117,7 +1117,7 @@ 

    entity.emit('sink', null, false);

    flushToDOM (recursive)

    flushToDOM will manually serialize an entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

    +Read more about component-to-DOM serialization.

    getAttribute (componentName)

    getAttribute retrieves parsed component data (including mixins and defaults).

    // <a-entity geometry="primitive: box; width: 3">

    entity.getAttribute('geometry');
    // >> {primitive: "box", depth: 2, height: 2, translate: "0 0 0", width: 3, ...}

    entity.getAttribute('geometry').primitive;
    // >> "box"

    entity.getAttribute('geometry').height;
    // >> 2

    entity.getAttribute('position');
    // >> {x: 0, y: 0, z: 0}
    @@ -1150,20 +1150,20 @@

    pa entity will call pause() on its child entities when we pause an entity.

    // <a-entity id="spinning-jumping-ball">
    entity.pause();
    -

    For example, the look-controls component on +

    For example, the look-controls component on pause will remove event handlers that listen for input.

    play ()

    play() will start any dynamic behavior as defined by animations and components. This is automatically called when the DOM attaches an entity. When an entity play(), the entity calls play() on its child entities.

    entity.pause();
    entity.play();
    -

    For example, the sound component on play will begin playing the sound.

    +

    For example, the sound component on play will begin playing the sound.

    setAttribute (attr, value, componentAttrValue)

    If attr is not the name of a registered component or the component is a single-property component, setAttribute behaves as it normally would:

    entity.setAttribute('visible', false);

    Though if attr is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    entity.setAttribute('position', { x: 1, y: 2, z: 3 });
    diff --git a/docs/0.5.0/core/globals.html b/docs/0.5.0/core/globals.html index e203c8454..cbcb8d15b 100644 --- a/docs/0.5.0/core/globals.html +++ b/docs/0.5.0/core/globals.html @@ -1055,11 +1055,11 @@

    AComponent -Component prototype. +Component prototype. AEntity -Entity prototype. +Entity prototype. ANode @@ -1067,7 +1067,7 @@

    AScene -Scene prototype. +Scene prototype. components @@ -1083,7 +1083,7 @@

    registerComponent -Function to register a component. +Function to register a component. registerElement @@ -1091,15 +1091,15 @@

    registerGeometry -Function to register a geometry. +Function to register a geometry. registerPrimitive -Function to register a primitive. +Function to register a primitive. registerShader -Function to register a material or shader. +Function to register a material or shader. schema @@ -1123,7 +1123,7 @@

    utils -A-Frame utility modules. +A-Frame utility modules. version diff --git a/docs/0.5.0/core/mixins.html b/docs/0.5.0/core/mixins.html index a2a91822c..c5d39e017 100644 --- a/docs/0.5.0/core/mixins.html +++ b/docs/0.5.0/core/mixins.html @@ -1045,7 +1045,7 @@

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    <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-mixin>
      </a-assets>

      <a-entity mixin="red cube"></a-entity>
      <a-entity mixin="blue cube"></a-entity>
    </a-scene>
    @@ -1055,7 +1055,7 @@

    the entities above expand to:

    <a-entity material="color: red" geometry="primitive: box"></a-entity>
    <a-entity material="color: blue" geometry="primitive: box"></a-entity>
    -
    +

    Merging Component Properties

    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="height: 10"></a-mixin>
        <a-mixin id="wide" geometry="width: 10"></a-mixin>
      </a-assets>

      <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
    </a-scene>
    diff --git a/docs/0.5.0/core/scene.html b/docs/0.5.0/core/scene.html index 09674247a..291c49592 100644 --- a/docs/0.5.0/core/scene.html +++ b/docs/0.5.0/core/scene.html @@ -1044,8 +1044,8 @@

    A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

    -

    The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

    +

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    @@ -1056,7 +1056,7 @@

  • Set up webvr-polyfill, VREffect
  • Add UI to Enter VR that calls WebVR API
    • -
    +

    Example

    <a-scene>
      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <a-box src="#texture"></a-box>
    </a-scene>
    @@ -1101,7 +1101,7 @@

    systems -Instantiated systems. +Instantiated systems. time @@ -1157,12 +1157,12 @@

    embedded - Remove fullscreen styles from the canvas. -
  • fog - Add fog.
    • -
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • -
  • inspector - Inject the A-Frame Inspector.
    • -
  • stats - Toggle performance stats.
    • -
  • vr-mode-ui - Toggle UI for entering and exiting VR.
    • +
  • embedded - Remove fullscreen styles from the canvas.
    • +
  • fog - Add fog.
    • +
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • +
  • inspector - Inject the A-Frame Inspector.
    • +
  • stats - Toggle performance stats.
    • +
  • vr-mode-ui - Toggle UI for entering and exiting VR.

    • Running Content Scripts on the Scene

    The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

    AFRAME.registerComponent('do-something', {
      init: function () {
        var sceneEl = this.el;
      }
    });
    diff --git a/docs/0.5.0/core/systems.html b/docs/0.5.0/core/systems.html index 8ca75bf2f..dd01bb6fa 100644 --- a/docs/0.5.0/core/systems.html +++ b/docs/0.5.0/core/systems.html @@ -1043,16 +1043,16 @@

    -

    A system, of the entity-component-system pattern, provides global scope, +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -
    + -

    Registering a System

    A system is registered similarly to a component.

    +

    Registering a System

    A system is registered similarly to a component.

    If the system name matches a component name, then the component will have a reference to the system as this.system:

    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);
      }
    });
    @@ -1066,7 +1066,7 @@

    schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data. data diff --git a/docs/0.5.0/core/utils.html b/docs/0.5.0/core/utils.html index 9a42ddc7a..98cfbcfa8 100644 --- a/docs/0.5.0/core/utils.html +++ b/docs/0.5.0/core/utils.html @@ -1044,7 +1044,7 @@

    A-Frame’s utility modules are public through AFRAME.utils.

    -
    +

    AFRAME.utils.coordinates

    Module for handling vec3 and vec4 types.

    .isCoordinate (value)

    Tests whether a string is a vec3.

    @@ -1056,7 +1056,7 @@

    .stringify (data)

    Stringifies an {x, y, z} vec3 object to an “x y z” string.

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
    // >> "1 2 -3"
    -

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for +

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for return 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.

    @@ -1064,7 +1064,7 @@

    This is useful for components that need a way to reference a property of a multi-property component.

    -

    .setComponentProperty (entity, componentName, value, delimiter)

    Performs like Entity.setAttribute, but with support for setting an +

    .setComponentProperty (entity, componentName, value, delimiter)

    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.

    diff --git a/docs/0.5.0/guides/building-a-360-image-gallery.html b/docs/0.5.0/guides/building-a-360-image-gallery.html index 31c6a5bbc..0b8142942 100644 --- a/docs/0.5.0/guides/building-a-360-image-gallery.html +++ b/docs/0.5.0/guides/building-a-360-image-gallery.html @@ -1053,23 +1053,23 @@

    Let’s build an interactive gaze-based 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

    -

    This guide will practice three concepts related to entity-component:

    +

    This guide will practice three concepts related to entity-component:

    1. Using the standard components that come with A-Frame.
    2. Using community components from the ecosystem.
    3. Writing custom components to accomplish whatever we want.
    -
    +

    Skeleton

    This is the starting point for our scene:

    <a-scene>
      <a-assets>
        <audio id="click-sound" src="audio/click.ogg"></audio>

        <!-- Images. -->
        <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
        <img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
        <img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
        <img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
        <img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Link we will build. -->
      <a-entity class="link"></a-entity>

      <!-- Camera + Cursor. -->
      <a-camera>
        <a-cursor id="cursor">
          <a-animation begin="click" easing="ease-in" attribute="scale"
                       fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
          <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                       from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
        </a-cursor>
      </a-camera>
    </a-scene>

    We have predefined:

    Using Standard Components

    Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure @@ -1079,19 +1079,19 @@ 

    <a-entity class="link"></a-entity>
    -

    To give our entity shape, we can attach the geometry component, +

    To give our entity shape, we can attach the geometry component, configured to a plane shape. We specify the component data using a syntax that resembles that of inline CSS styles:

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"></a-entity>
    -

    Then to give our entity appearance, we can attach the material +

    Then to give our entity appearance, we can attach the material component. We set shader to flat so the image isn’t affected negatively by lighting. And we set src to #cubes-thumb, a selector to one -of the images defined in the Asset Management System.

    +of the images defined in the Asset Management System.

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: #cubes-thumb"></a-entity>

    We can continue adding features to our entity by plugging in more components. -Let’s attach one more standard component, the sound component. We want +Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1166,15 +1166,15 @@

    Event-Set Component

    Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

    Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We are mimicking CSS :hover states. We can specify event names with _event properties, and the rest of the properties define the -setAttribute calls. Notice that the event-set component can have multiple +setAttribute calls. Notice that the event-set component can have multiple instances:

    <a-assets>
      <!-- ... -->
      <script id="link" type="text/html">
        <a-entity class="link"
          geometry="primitive: plane; height: 1; width: 1"
          material="shader: flat; src: ${thumb}"
          sound="on: click; src: #click-sound"
          event-set__1="_event: mousedown; scale: 1 1 1"
          event-set__2="_event: mouseup; scale: 1.2 1.2 1"
          event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
          event-set__4="_event: mouseleave; scale: 1 1 1"></a-entity>
      </script>
    </a-assets>
    diff --git a/docs/0.5.0/guides/building-a-basic-scene.html b/docs/0.5.0/guides/building-a-basic-scene.html index 422a23244..85f39776b 100644 --- a/docs/0.5.0/guides/building-a-basic-scene.html +++ b/docs/0.5.0/guides/building-a-basic-scene.html @@ -1054,7 +1054,7 @@

  • Add text

    • Remix the Basic Guide example on Glitch.

    -
    +

    Starting with HTML

    We start out with a minimal HTML structure:

    <html>
      <head>
        <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
        </a-scene>
      <body>
    </html>
    @@ -1063,7 +1063,7 @@

    before <a-scene> because A-Frame registers custom HTML elements which must be defined before <a-scene> is attached or else <a-scene> will do nothing.

    -

    Next, we include <a-scene> in the <body>. <a-scene> will contain every +

    Next, we include <a-scene> in the <body>. <a-scene> will contain every entity in our scene. <a-scene> handles all of the setup that is required for 3D: setting up WebGL, the canvas, camera, lights, renderer, render loop as well as out of the box WebVR support on platforms such as HTC Vive, Oculus Rift, @@ -1074,7 +1074,7 @@

    <a-box>‘s documentation for +

    Here we define the color <a-box>, see <a-box>‘s documentation for the more attributes (e.g., width, height, depth).

    boximage Image by Ruben Mueller from vrjump.de

    @@ -1082,13 +1082,13 @@

    <a-entity> with the geometry and -material components:

    +underneath <a-box> is <a-entity> with the geometry and +material components:

    <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>
    -

    However, because the default camera and the box are positioned at the default +

    However, because the default camera and the box are positioned at the default position at the 0 0 0 origin, we won’t be able to see the box unless we move -it. We can do this by using the position component to transform the +it. We can do this by using the position component to transform the box in 3D space.

    Transforming an Entity in 3D

    Let’s first go over 3D space. A-Frame uses a right-handed coordinate system. With the default camera direction: positive X-axis extends right, positive @@ -1107,7 +1107,7 @@

    To translate, rotate, and scale the box, we can change the -position, rotation, and scale components. +position, rotation, and scale components. Let’s first apply the rotation and scale components:

    <a-scene>
      <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
    @@ -1151,13 +1151,13 @@

    Adding a Background to the Scene

    With a single line of HTML, we can add an immersive background with -<a-sky> that completely surrounds the scene. <a-sky>, which is a +<a-sky> that completely surrounds the scene. <a-sky>, which is a material applied to the inside of a sphere, can be a flat color, a 360° image, or a 360° video. For example, a dark gray background would be:

    <a-scene>
      <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky color="#222"></a-sky>
    </a-scene>

    Applying an Image Texture

    -

    Make sure you’re serving your HTML using a local server +

    Make sure you’re serving your HTML using a local server for textures to load properly.

    We can apply an image texture to the box with an image, video, or <canvas> @@ -1169,7 +1169,7 @@

    -

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The +

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The asset management system makes it easier for the browser to cache assets (e.g., images, videos, models) and A-Frame will make sure all of the assets are fetched before rendering.

    @@ -1191,7 +1191,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>
    </a-scene>
    -

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are +

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are oriented parallel to the XY axis. To make it parallel to the ground, we need to orient it along the XZ axis. We can do so by rotating the plane negative 90° on the X-axis.

    @@ -1209,7 +1209,7 @@ 

    <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
      repeat="10 10"></a-plane>
    -

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default +

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default if we don’t specify any lights, A-Frame adds an ambient light and a directional light. If A-Frame didn’t add lights for us, the scene would be black. Once we add lights of our own, however, the default lighting setup is removed and @@ -1227,7 +1227,7 @@

    Animation Component.

    -

    We can add animations to the box using A-Frame’s built-in animation +

    We can add animations to the box using A-Frame’s built-in animation system. Animations interpolate or tween a value over time. We can place an <a-animation> element as a child of the entity. Let’s have the box hover up and down to add some motion to the scene.

    @@ -1253,19 +1253,19 @@

    Given that many developers currently do not have proper VR hardware with controllers, we’ll focus this section on using basic mobile and desktop inputs -with the built-in cursor component. The cursor component by default provides +with the built-in cursor component. The cursor component by default provides the ability to “click” on entities by staring or gazing at them on mobile, or on desktop, looking at an entity and click the mouse. But know that the cursor component is just one way to add interactions, things open up if we have access to actual controllers.

    -

    To have a visible cursor fixed to the camera, we place the cursor as a child +

    To have a visible cursor fixed to the camera, we place the cursor as a child of the camera as explained above in Parent and Child Transforms.

    Since we didn’t specifically define a camera, A-Frame included a default camera for us. But since we need to add a cursor as a child of the camera, we will -need to now define <a-camera> containing <a-cursor>:

    +need to now define <a-camera> containing <a-cursor>:

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2">
        <a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000"
          repeat="indefinite"></a-animation>
      </a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
    -

    If we check the documentation of the cursor component that +

    If we check the documentation of the cursor component that <a-cursor> wraps, we see that it emits hover events such as mouseenter, mouseleave as well as click.

    Event Listener Component (Intermediate)

    One way to manually handle the cursor events is to add an event listener with @@ -1273,7 +1273,7 @@

    Animating on Events below.

    In JavaScript, we grab the box with querySelector, use -addEventListener, and then setAttribute +addEventListener, and then setAttribute to make the box grow its scale when its hovered over. Note that A-Frame adds features to setAttribute to work with multi-property components. We can pass a full {x, y, z} object as the second argument.

    @@ -1308,7 +1308,7 @@ 

    <a-scene>
      <!-- ... -->
      <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
        position="-3 1 -4"></a-sound>
      <!-- ... -->
    </a-scene>
    -

    Adding Text

    A-Frame comes with a text component. There are several ways to render +

    Adding Text

    A-Frame comes with a text component. There are several ways to render text, each with their advantages and disadvantages, A-Frame comes with an SDF text implementation using [three-bmfont-text] that is relatively sharp and performant.

    diff --git a/docs/0.5.0/guides/building-a-minecraft-demo.html b/docs/0.5.0/guides/building-a-minecraft-demo.html index 00d04a5da..2a40b5caa 100644 --- a/docs/0.5.0/guides/building-a-minecraft-demo.html +++ b/docs/0.5.0/guides/building-a-minecraft-demo.html @@ -1049,7 +1049,7 @@

    Let’s build a basic Minecraft (voxel builder) demo that targets room scale VR with controllers (e.g., Vive, Rift). The example will be minimally usable on mobile and desktop.

    -
    +

    Example Skeleton

    We’ll start off with this skeleton HTML:

    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

    <body>
      <a-scene>
      </a-scene>
    </body>
    diff --git a/docs/0.5.0/guides/building-with-magicavoxel.html b/docs/0.5.0/guides/building-with-magicavoxel.html index 6b97adcef..cd2a961a4 100644 --- a/docs/0.5.0/guides/building-with-magicavoxel.html +++ b/docs/0.5.0/guides/building-with-magicavoxel.html @@ -1047,7 +1047,7 @@

    3D scenes and models using voxels (i.e., blocks). MagicaVoxel makes modeling super easy, similar to building in Minecraft.

    magicavoxel

    -
    +

    Installation

    MagicaVoxel works on Windows and OS X. On the MagicaVoxel homepage, click the Download button and install the application:

    diff --git a/docs/0.5.0/introduction/best-practices.html b/docs/0.5.0/introduction/best-practices.html index 9778f12e6..a8313ebfd 100644 --- a/docs/0.5.0/introduction/best-practices.html +++ b/docs/0.5.0/introduction/best-practices.html @@ -1045,23 +1045,23 @@

    A-Frame

    Some best practices for the framework:

      -
    • The core structure of A-Frame is entity-component (ECS). Place and +
    • The core structure of A-Frame is entity-component (ECS). Place and structure application code within purely A-Frame components for reusability, modularity, composability, decoupling, encapsulation, declarativeness, and testability. It’s okay to start out at first using content scripts (<script>), but look to move towards components.
      • -
    • Mixins and templating are useful to reuse and reduce +
    • Mixins and templating are useful to reuse and reduce repeated HTML.

    Performance

    Performance is critical in VR. A high framerate must be maintained in order for people to feel comfortable and as if they were in another place. Here are some ways to help improve performance of an A-Frame scene:

      -
    • Use recommended hardware specifications.
      • -
    • Use the stats component to keep an eye on various metrics (FPS, +
    • Use recommended hardware specifications.
      • +
    • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities). We want to maximize FPS and minimize everything else.
      • -
    • Make use of the asset management system to benefit from browser +
    • Make use of the asset management system to benefit from browser caching and preloading. Trying to fetch assets while rendering is slower than fetching all assets before rendering.
    • If using models, look to bake your lights into textures rather than relying diff --git a/docs/0.5.0/introduction/developing-with-threejs.html b/docs/0.5.0/introduction/developing-with-threejs.html index 0011fae41..70fac7c9f 100644 --- a/docs/0.5.0/introduction/developing-with-threejs.html +++ b/docs/0.5.0/introduction/developing-with-threejs.html @@ -1073,7 +1073,7 @@

      And every A-Frame entity also has a reference to <a-scene> via .sceneEl:

      document.querySelector('a-entity').sceneEl.object3D;  // THREE.Scene
      -

      From a component, we access the scene through its entity +

      From a component, we access the scene through its entity (i.e., this.el):

      AFRAME.registerComponent('foo', {
        init: function () {
          var scene = this.el.sceneEl.object3D;  // THREE.Scene
        }
      });
      diff --git a/docs/0.5.0/introduction/entity-component-system.html b/docs/0.5.0/introduction/entity-component-system.html index 0a602fa8f..7eb253d50 100644 --- a/docs/0.5.0/introduction/entity-component-system.html +++ b/docs/0.5.0/introduction/entity-component-system.html @@ -1072,20 +1072,20 @@

      A well-known game engine implementing ECS is Unity. Although there are pain points in cross-entity communication. But we’ll see how A-Frame, the DOM, and declarative HTML really make ECS shine.

      -
      +

      Concept

      ECS Minecraft

      A basic definition of ECS involves:

        -
      • Entities are container objects into which components can be +
      • Entities are container objects into which components can be attached. Entities are the base of all objects in the scene. Without components, entities neither do nor render anything, similar to empty <div>s.
        • -
      • Components are reusable modules or data containers that can +
      • Components are reusable modules or data containers that can be attached to entities to provide appearance, behavior, and/or functionality. Components are like plug-and-play for objects. All logic is implemented through components, and we define different types of objects by mixing, matching, and configuring components. Like alchemy!
        • -
      • Systems provide global scope, management, and services for +
      • Systems provide global scope, management, and services for classes of components. Systems are often optional, but we can use them to separate logic and data; systems handle the logic, components act as data containers.
        • @@ -1141,8 +1141,8 @@

        Syntax:) separating property names from property values, and a colon (;) separating different property declarations:

        <a-entity ${componentName}="${propertyName1}: ${propertyValue1}; ${propertyName2:}: ${propertyValue2}">

        -

        For example, we have <a-entity> and attach the geometry, material, -light, and position components with various properties and property values:

        +

        For example, we have <a-entity> and attach the geometry, material, +light, and position components with various properties and property values:

        <a-entity geometry="primitive: sphere; radius: 1.5"
                  light="type: point; color: white; intensity: 2"
                  material="color: white; shader: flat; src: glow.jpg"
                  position="0 0 -5"></a-entity>

        Composition

        From there, we could attach more components to add additional appearance, @@ -1193,7 +1193,7 @@

        write an A-Frame +

        We will later go over in detail how to write an A-Frame component. As a preview, the structure of a basic component may look like:

        AFRAME.registerComponent('foo', {
          schema: {
            bar: {type: 'number'},
            baz: {type: 'string'}
          },

          init: function () {
            // Do something when component first attached.
          },

          update: function () {
            // Do something when component's data is updated.
          },

          remove: function () {
            // Do something the component or its entity is detached.
          },

          tick: function (time, timeDelta) {
            // Do something on every scene tick or frame.
          }
        });
        @@ -1218,12 +1218,12 @@

        Higher-Order Components

        Components can set other components on the entity, making them a higher-order or higher-level component in abstraction.

        -

        For example, the cursor component sets and builds on top of the -raycaster component. Or the hand-controls -component sets and builds on top of the vive-controls -component and oculus-touch-controls +

        For example, the cursor component sets and builds on top of the +raycaster component. Or the hand-controls +component sets and builds on top of the vive-controls +component and oculus-touch-controls component which in turn build on top of the -tracked-controls component.

        +tracked-controls component.

        Community Component Ecosystem

        Components can be shared into the A-Frame ecosystem for the community to use. The wonderful thing about A-Frame’s ECS is extensibility. An experienced developer can develop a physics system or graphics shader components, and an diff --git a/docs/0.5.0/introduction/faq.html b/docs/0.5.0/introduction/faq.html index da888576f..3526c09a3 100644 --- a/docs/0.5.0/introduction/faq.html +++ b/docs/0.5.0/introduction/faq.html @@ -1043,7 +1043,7 @@

        -
        +

        How is A-Frame’s performance?

        A-Frame can achieve native-like latency and framerate with proper browsers (e.g., Firefox with WebVR). For example, A-Painter is Tilt @@ -1076,8 +1076,8 @@

        best performance practices and guidelines to get started.

        -

        Why does my asset (e.g., image, video, model) not load?

        First, if you are doing local development, make sure you are using a local +best performance practices and guidelines to get started.

        +

        Why does my asset (e.g., image, video, model) not load?

        First, if you are doing local development, make sure you are using a local server so that asset requests work properly.

        If you are loading the asset from a different domain, make sure that the asset is served with cross-origin resource sharing (CORS) headers. You could @@ -1085,13 +1085,13 @@

        Hosting and Publishing guide for more +

        Read the Hosting and Publishing guide for more information.

        Why is the HTML not updating when I check the browser inspector?

        If you open up your browser’s developer tools, you’ll see that the HTML attribute values are empty.

        HTML

        To improve performance, A-Frame does not update the HTML to save on -stringification operations. Use the debug component or .flushToDOM +stringification operations. Use the debug component or .flushToDOM methods if you need to sync to the DOM.

        Why does my video not play on mobile?

        Mobile browsers have had limitations playing inline video.

        Because of an iOS platform restriction in order to get inline video @@ -1125,7 +1125,7 @@

        Which 3D model formats work?

        The ideal format is the GL Transmission Format glTF (.gltf) since glTF is feature-rich, compact, and efficient. glTF focuses on providing a transmission format rather than an editor format and is more interoperable -with web technologies. Read more about glTF and A-Frame’s glTF +with web technologies. Read more about glTF and A-Frame’s glTF component.

        COLLADA (.dae) is an XML-based format with a rich feature set. COLLADA is more common in comparison to glTF since it is older, but more suited @@ -1189,16 +1189,16 @@

        How is A-Frame different from VRML?

        A-Frame is a JavaScript framework. Unlike VRML, A-Frame is not a 3D file format, markup language, nor a standard. A-Frame embraces the Extensible Web Manifesto. Only look at standardization as winning ideas emerge.

        -

        Technically, A-Frame is an entity-component-system game engine on top of +

        Technically, A-Frame is an entity-component-system game engine on top of three.js. As it is a JavaScript framework, coding is to be expected for more complex applications. Unlike 3D file formats, A-Frame provides power and interactivity via full access to JavaScript, three.js, and Web APIs.

        Does A-Frame support X feature?

        A-Frame ships with a number of components and primitives. Being based on top of -an entity-component-system architecture, if a feature doesn’t exist, you -can write or find a component to enable it. Or if one of +an entity-component-system architecture, if a feature doesn’t exist, you +can write or find a component to enable it. Or if one of the standard components doesn’t fit your use cases, you can copy and modify it.

        -

        Read Where to Find Components for more information.

        +

        Read Where to Find Components for more information.

        Does A-Frame support X library or framework?

        A-Frame is built on top of the DOM so most libraries and frameworks work including:

          @@ -1212,9 +1212,9 @@

          Which headsets, browsers, devices, and platforms does A-Frame support?

          Most of them. Read VR Headsets and WebVE Browsers for more +

          Which headsets, browsers, devices, and platforms does A-Frame support?

          Most of them. Read VR Headsets and WebVE Browsers for more information.

          -

          How can I improve performance?

          Read Best Practices — Performance for more information.

          +

          How can I improve performance?

          Read Best Practices — Performance for more information.

          How can I get in touch with the A-Frame team?

          We try to be responsive and helpful! We love questions, feedback, bug reports, and pull requests:

            diff --git a/docs/0.5.0/introduction/hosting-and-publishing.html b/docs/0.5.0/introduction/hosting-and-publishing.html index db1e7c428..c7a8555da 100644 --- a/docs/0.5.0/introduction/hosting-and-publishing.html +++ b/docs/0.5.0/introduction/hosting-and-publishing.html @@ -1045,7 +1045,7 @@

            This section will show several ways to deploy, host, and publish an A-Frame site and its assets onto the Web for the world to see.

            -
            +

            Publishing a Site

            There are many free services to deploy and host a site. We’ll go over some of the more easy or popular options, but there are certainly other options such @@ -1186,7 +1186,7 @@

            A-Frame Blog.

          Embedding

          If we want to embed an A-Frame scene into the layout of 2D web page, we can use -the embedded component to remove fullscreen styles +the embedded component to remove fullscreen styles and allow us to style the canvas with CSS.

          Note we can only embed one scene at a time into a page. If we need multiple scenes, we can use diff --git a/docs/0.5.0/introduction/html-and-primitives.html b/docs/0.5.0/introduction/html-and-primitives.html index 4def71422..12b4d2f57 100644 --- a/docs/0.5.0/introduction/html-and-primitives.html +++ b/docs/0.5.0/introduction/html-and-primitives.html @@ -1045,9 +1045,9 @@

          This section will go over the concepts of A-Frame’s primitive elements and their relation to the entity-component framework. If you’re looking for a guide -on using HTML and primitives, check out the Building a Basic Scene +on using HTML and primitives, check out the Building a Basic Scene guide.

          -
          +

          HTML

          A-Frame is based on top of HTML and the DOM using a polyfill for Custom Elements. HTML is the building block of the Web, providing one of the @@ -1081,7 +1081,7 @@

          component data +
        • Map or proxy HTML attributes to component data

        Primitives are similar to prefabs in Unity. Some literature on the entity-component-system pattern refer to them as assemblages. diff --git a/docs/0.5.0/introduction/index.html b/docs/0.5.0/introduction/index.html index 8006c079d..34a2d18cd 100644 --- a/docs/0.5.0/introduction/index.html +++ b/docs/0.5.0/introduction/index.html @@ -1086,7 +1086,7 @@ 

        <html>
          <head>
            <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
          </head>
          <body>
            <a-scene>
              <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
              <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
              <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
              <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
              <a-sky color="#ECECEC"></a-sky>
            </a-scene>
          </body>
        </html>
        -

        The Installation page provides more options for getting started with A-Frame. +

        The Installation page provides more options for getting started with A-Frame. To get started learning A-Frame, check out A-Frame School for visual step-by-step lessons to complement the documentation.

        Features

        eyeglasses VR Made Simple: Just drop in a <script> tag and <a-scene>. @@ -1101,7 +1101,7 @@

        Fe works on standard desktop and smartphones.

        electric_plug Entity-Component Architecture: A-Frame is a powerful three.js framework, providing a declarative, composable, reusable -entity-component structure.js. HTML is just the tip of the iceberg; +entity-component structure.js. HTML is just the tip of the iceberg; developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL.

        zap Performance: A-Frame is optimized from the ground up for WebVR. While @@ -1112,7 +1112,7 @@

        Fe

        hammer Tool Agnostic: Since the Web was built on the notion of the HTML, A-Frame is compatible with most libraries, frameworks, and tools including React, Preact, Vue.js, Angular, d3.js, Ember.js, jQuery.

        -

        mag Visual Inspector: A-Frame provides a handy built-in visual 3D +

        mag Visual Inspector: A-Frame provides a handy built-in visual 3D inspector. Open up any A-Frame scene, hit <ctrl> + <alt> + i, and fly around to peek behind the hood!

        Inspector

        diff --git a/docs/0.5.0/introduction/installation.html b/docs/0.5.0/introduction/installation.html index 8e56dc189..36bdae198 100644 --- a/docs/0.5.0/introduction/installation.html +++ b/docs/0.5.0/introduction/installation.html @@ -1046,7 +1046,7 @@

        This installation section will show several ways to get started with A-Frame. Although many of the ways don’t require any actual installation since A-Frame is primarily HTML and JavaScript.

        -
        +

        Code Editors in the Browser

        The fastest way to start playing from within the browser.

        Remix on Glitch

        Glitch

        diff --git a/docs/0.5.0/introduction/interactions-and-controllers.html b/docs/0.5.0/introduction/interactions-and-controllers.html index 77ef8b816..9a4a34cc9 100644 --- a/docs/0.5.0/introduction/interactions-and-controllers.html +++ b/docs/0.5.0/introduction/interactions-and-controllers.html @@ -1054,9 +1054,9 @@

        interactions. And we can show how these input-based and interaction-based components are built in order to give us the knowledge to build our own interactions. In a sense, learn how to fish rather than being given a fish.

        -
        + -

        Events

        In the 2D Web, input and interactions are handled through browser +

        Events

        In the 2D Web, input and interactions are handled through browser events (e.g., click, mouseenter, mouseleave, touchstart, touchend). Whenever an input-based event happens, the browser will emit an event that we can listen to and handle with @@ -1084,13 +1084,13 @@

        cursor component that provides gaze-based interaction if +comes with a cursor component that provides gaze-based interaction if attached to the camera:

          -
        1. Explicitly define <a-camera> entity. +
        2. Explicitly define <a-camera> entity. Previously, A-Frame was providing the default camera.
          3. -
        3. Add <a-cursor> entity as a child element underneath the camera entity.
          4. -
        4. Optionally, configure the raycaster used by the cursor.
          5. +
        5. Add <a-cursor> entity as a child element underneath the camera entity.
          6. +
        6. Optionally, configure the raycaster used by the cursor.
        <a-scene>
          <a-camera>
            <a-cursor></a-cursor>
            <!-- Or <a-entity cursor></a-entity> -->
          </a-camera>
        </a-scene>
        @@ -1132,7 +1132,7 @@

        A-Frame +and for A-Frame, we prescribe that code be placed within A-Frame components.

        To demonstrate what the event set component does under the hood, let’s have a box change color on hover and on leaving hover with JavaScript:

        @@ -1160,7 +1160,7 @@

        tracked-controls Component

        The tracked-controls component is A-Frame’s base controller +

        tracked-controls Component

        The tracked-controls component is A-Frame’s base controller component that provides the foundation for all of A-Frame’s controller components. The tracked-controls component:

        -

        Hosting Models

        Refer to Hosting and Publishing — Hosting +

        Hosting Models

        Refer to Hosting and Publishing — Hosting Models.

        Troubleshooting

        I Don’t See My Model

        Check your console for errors. If there are no errors, try scaling your model down. Often times there’s a mismatch in the scale when you export, and this @@ -1117,7 +1117,7 @@

        -

        Testing for Performance

        To get an idea of how our scene is performing, enable the stats component:

        +

        Testing for Performance

        To get an idea of how our scene is performing, enable the stats component:

        <a-scene stats>

        Move around our scene and test different scenarios while keeping an eye on the diff --git a/docs/0.5.0/introduction/visual-inspector-and-dev-tools.html b/docs/0.5.0/introduction/visual-inspector-and-dev-tools.html index 07e56d500..f245aad0d 100644 --- a/docs/0.5.0/introduction/visual-inspector-and-dev-tools.html +++ b/docs/0.5.0/introduction/visual-inspector-and-dev-tools.html @@ -1070,7 +1070,7 @@

      We’ll go over GUI tools built on top of A-Frame that can be used without code. And touch on other tools that can ease development across multiple machines.

      -
      +

      A-Frame Inspector

      The A-Frame Inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:

      diff --git a/docs/0.5.0/introduction/vr-headsets-and-webvr-browsers.html b/docs/0.5.0/introduction/vr-headsets-and-webvr-browsers.html index 01d9004e9..3437986f0 100644 --- a/docs/0.5.0/introduction/vr-headsets-and-webvr-browsers.html +++ b/docs/0.5.0/introduction/vr-headsets-and-webvr-browsers.html @@ -1043,7 +1043,7 @@

      -
      +

      What is Virtual Reality?

      Virtual reality (VR) is a technology that uses head-mounted headsets with displays to generate the realistic images, sounds, and other sensations to put diff --git a/docs/0.5.0/introduction/writing-a-component.html b/docs/0.5.0/introduction/writing-a-component.html index 191bc6f63..5c086b81a 100644 --- a/docs/0.5.0/introduction/writing-a-component.html +++ b/docs/0.5.0/introduction/writing-a-component.html @@ -1043,7 +1043,7 @@

      -

      Components of A-Frame’s entity-component framework are JavaScript +

      Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, @@ -1051,7 +1051,7 @@

      components.

      vehicleimage Image by Ruben Mueller from vrjump.de

      -

      This guide will take it pretty slow. We recommend skimming over the Component +

      This guide will take it pretty slow. We recommend skimming over the Component API documentation before going through this guide as that documentation will be more concise. Note that components should be defined before <a-scene> like:

      @@ -1065,12 +1065,12 @@

      Example: hello-world Component

      Let’s start with the most basic component to get a general idea. This component will log a simple message once when the component’s entity is attached using -the .init() handler.

      +the .init() handler.

      Registering the Component with AFRAME.registerComponent

      Components are registered with AFRAME.registerComponent(). We pass the name of the component, which will be used as the HTML attribute name in the component’s representation in the DOM. Then we pass the component definition which is a JavaScript object of methods and properties. Within the definition, we can -define lifecycle handler methods. One of which is .init(), which +define lifecycle handler methods. One of which is .init(), which is called once when the component is first plugged into its entity.

      In the example below, we just have our .init() handler log a simple message.

      AFRAME.registerComponent('hello-world', {
        init: function () {
          console.log('Hello, World!');
        }
      });
      @@ -1124,7 +1124,7 @@

      Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

      To demonstrate this, we’ll have our log component only log whenever its -entity emits an event. First, we’ll add an event property type that +entity emits an event. First, we’ll add an event property type that specifies which event the component should listen on.

      // ...
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'},
      },
      // ...
      @@ -1133,7 +1133,7 @@

      add an event listener that will +

      What we want to do is add an event listener that will listen to the event before logging a message. If the event property type is not specified, we’ll just log the message:

      AFRAME.registerComponent('log', {
        schema: {
          event: {type: 'string', default: ''},
          message: {type: 'string', default: 'Hello, World!'}
        },

        update: function () {
          var data = this.data;  // Component property values.
          var el = this.el;  // Reference to the component's entity.

          if (data.event) {
            // This will log the `message` when the entity emits the `event`.
            el.addEventListener(data.event, function () {
              console.log(data.message);
            });
          } else {
            // `event` not specified, just log the message.
            console.log(data.message);
          }
        }
      });
      @@ -1142,7 +1142,7 @@

      , we need a reference to the function. So +

      But to remove an event listener, we need a reference to the function. So let’s first store the function on this.eventHandlerFn whenever we attach an event listener. When we attach properties to the component via this, they’ll be available throughout all the other lifecycle handlers.

      @@ -1157,13 +1157,13 @@ 

      <a-scene>
        <a-entity log="event: anEvent; message: Hello, Metaverse!"></a-entity>
      </a-scene>
      -

      Let’s have our entity emit the event to test it out:

      +

      Let’s have our entity emit the event to test it out:

      var el = document.querySelector('a-entity');
      el.emit('anEvent');
      // >> "Hello, Metaverse!"

      Now let’s update our event to test the .update() handler:

      var el = document.querySelector('a-entity');
      el.setAttribute('log', {event: 'anotherEvent', message: 'Hello, new event!'});
      el.emit('anotherEvent');
      // >> "Hello, new event!"
      -

      Handling Component Removal

      Let’s handle the case where the component unplugs from the entity +

      Handling Component Removal

      Let’s handle the case where the component unplugs from the entity (i.e., .removeAttribute('log')). We can implement the .remove() handler which is called when the component is removed. For the log component, we remove any event listeners the component attached to the entity:

      @@ -1176,7 +1176,7 @@ 

      var el = document.querySelector('a-entity');
      el.removeAttribute('log');
      el.emit('anEvent');
      // >> Nothing should be logged...

      Allowing Multiple Instances of a Component

      Let’s allow having multiple log components attached to the same entity. To do -so, we enable multiple instancing with the .multiple flag. Let’s +so, we enable multiple instancing with the .multiple flag. Let’s set that to true:

      AFRAME.registerComponent('log', {
        schema: {
          event: {type: 'string', default: ''},
          message: {type: 'string', default: 'Hello, World!'}
        },

        multiple: true,

        // ...
      });
      @@ -1193,13 +1193,13 @@

      Example: box Component

      For a less trivial example, let’s find out how we can add 3D objects and affect -the scene graph by writing a component that uses three.js. To get +the scene graph by writing a component that uses three.js. To get the idea, we’ll just make a basic box component that creates a box mesh with both geometry and material.

      boximage Image by Ruben Mueller from vrjump.de

      Note: this is just a 3D equivalent of writing a Hello, World! component. -A-Frame provides geometry and material components if we +A-Frame provides geometry and material components if we actually wanted to make a box in practice.

      Schema and API

      Let’s start with the schema. The schema defines the API of your component. We’ll make the width, height, depth, and color configurable through the @@ -1216,7 +1216,7 @@

      THREE.BoxBufferGeometry, THREE.MeshStandardMaterial, and finally a THREE.Mesh. Then we set the mesh on our entity to add the mesh to the -three.js scene graph using .setObject3D(name, object):

      +three.js scene graph using .setObject3D(name, object):

      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.BoxBufferGeometry(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);
        }
      });

      Now let’s handle updates. If the geometry-related properties (i.e., width, diff --git a/docs/0.5.0/primitives/a-camera.html b/docs/0.5.0/primitives/a-camera.html index 688d9e904..49ad800ce 100644 --- a/docs/0.5.0/primitives/a-camera.html +++ b/docs/0.5.0/primitives/a-camera.html @@ -1046,7 +1046,7 @@

      The camera primitive determines what the user sees. We can change the viewport by modifying the camera entity’s position and rotation.

      Note that by default, the camera origin will be at 0 1.6 0 in desktop mode -and 0 0 0 in VR mode. Read about the camera.userHeight property.

      +and 0 0 0 in VR mode. Read about the camera.userHeight property.

      Example

      <a-scene>
        <a-box></a-box>
        <a-camera></a-camera>
      </a-scene>

      Attributes

      diff --git a/docs/0.5.0/primitives/a-circle.html b/docs/0.5.0/primitives/a-circle.html index 6336b3f20..296e2a545 100644 --- a/docs/0.5.0/primitives/a-circle.html +++ b/docs/0.5.0/primitives/a-circle.html @@ -1043,7 +1043,7 @@

      -

      The circle primitive creates circles surfaces using the geometry +

      The circle primitive creates circles surfaces using the geometry component with the type set to circle.

      Example

      <a-scene>
        <a-assets>
          <img id="platform" src="platform.jpg">
        </a-assets>

        <!-- Basic circle. -->
        <a-circle color="#CCC" radius="20"></a-circle>

        <!-- Textured circle parallel to ground. -->
        <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
      </a-scene>
      diff --git a/docs/0.5.0/primitives/a-collada-model.html b/docs/0.5.0/primitives/a-collada-model.html index 7cedef432..51d6f1871 100644 --- a/docs/0.5.0/primitives/a-collada-model.html +++ b/docs/0.5.0/primitives/a-collada-model.html @@ -1057,7 +1057,7 @@

      src -collada-model.src +collada-model.src null diff --git a/docs/0.5.0/primitives/a-cursor.html b/docs/0.5.0/primitives/a-cursor.html index b29ce187f..467e19bba 100644 --- a/docs/0.5.0/primitives/a-cursor.html +++ b/docs/0.5.0/primitives/a-cursor.html @@ -1047,7 +1047,7 @@

      interactivity with a scene on devices that do not have a hand controller. The default appearance is a ring geometry. The cursor is usually placed as a child of the camera.

      -

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      +

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      Example

      <a-scene>
        <a-camera>
          <a-cursor></a-cursor>
        </a-camera>

        <a-box></a-box>
      </a-scene>

      Attributes

      diff --git a/docs/0.5.0/primitives/a-gltf-model.html b/docs/0.5.0/primitives/a-gltf-model.html index 77b034fed..b8854cadf 100644 --- a/docs/0.5.0/primitives/a-gltf-model.html +++ b/docs/0.5.0/primitives/a-gltf-model.html @@ -1057,7 +1057,7 @@

      - +
      srcgltf-model.srcgltf-model.src null
      diff --git a/docs/0.5.0/primitives/a-plane.html b/docs/0.5.0/primitives/a-plane.html index 843fb7794..a4d7ef838 100644 --- a/docs/0.5.0/primitives/a-plane.html +++ b/docs/0.5.0/primitives/a-plane.html @@ -1043,7 +1043,7 @@

      -

      The plane primitive creates flat surfaces using the geometry +

      The plane primitive creates flat surfaces using the geometry component with the type set to plane.

      Example

      <a-scene>
        <a-assets>
          <img id="ground" src="ground.jpg">
        </a-assets>

        <!-- Basic plane. -->
        <a-plane color="#CCC" height="20" width="20"></a-plane>

        <!-- Textured plane parallel to ground. -->
        <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
      </a-scene>
      diff --git a/docs/0.5.0/primitives/a-sound.html b/docs/0.5.0/primitives/a-sound.html index e352260b1..b80cc1204 100644 --- a/docs/0.5.0/primitives/a-sound.html +++ b/docs/0.5.0/primitives/a-sound.html @@ -1043,7 +1043,7 @@

      -

      The sound primitive wraps the sound component.

      +

      The sound primitive wraps the sound component.

      Example

      <a-scene>
        <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
      </a-scene>

      Attributes

      diff --git a/docs/0.5.0/primitives/a-sphere.html b/docs/0.5.0/primitives/a-sphere.html index 76d584862..0550fce39 100644 --- a/docs/0.5.0/primitives/a-sphere.html +++ b/docs/0.5.0/primitives/a-sphere.html @@ -1043,7 +1043,7 @@

      -

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      +

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      Example

      <a-sphere color="yellow" radius="5"></a-sphere>

      Attributes

      diff --git a/docs/0.5.0/primitives/a-text.html b/docs/0.5.0/primitives/a-text.html index 632498aff..6ce79054c 100644 --- a/docs/0.5.0/primitives/a-text.html +++ b/docs/0.5.0/primitives/a-text.html @@ -1043,7 +1043,7 @@

      -

      Wraps the text component.

      +

      Wraps the text component.

      Example

      <a-text value="Hello, World!"></a-text>

      Attributes

      diff --git a/docs/0.5.0/primitives/a-torus-knot.html b/docs/0.5.0/primitives/a-torus-knot.html index 57345daf7..6ade54933 100644 --- a/docs/0.5.0/primitives/a-torus-knot.html +++ b/docs/0.5.0/primitives/a-torus-knot.html @@ -1043,7 +1043,7 @@

      -

      The torus knot primitive creates pretzel shapes using the geometry +

      The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

      Example

      <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
      diff --git a/docs/0.5.0/primitives/a-torus.html b/docs/0.5.0/primitives/a-torus.html index 9bc3949ae..b53cf869c 100644 --- a/docs/0.5.0/primitives/a-torus.html +++ b/docs/0.5.0/primitives/a-torus.html @@ -1043,7 +1043,7 @@

      -

      The torus primitive creates donut or tube shapes using the geometry +

      The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

      Example

      <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
      diff --git a/docs/0.5.0/primitives/a-videosphere.html b/docs/0.5.0/primitives/a-videosphere.html index f9bf52117..f820a8b8a 100644 --- a/docs/0.5.0/primitives/a-videosphere.html +++ b/docs/0.5.0/primitives/a-videosphere.html @@ -1047,7 +1047,7 @@

      Videospheres are a large sphere with the video texture mapped to the inside.

      Examples

      <a-scene>
        <a-assets>
          <video id="antarctica" autoplay loop="true" src="antarctica.mp4">
        </a-assets>

        <!-- Using the asset management system. -->
        <a-videosphere src="#antarctica"></a-videosphere>

        <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
        <a-videosphere src="africa.mp4"></a-videosphere>
      </a-scene>
      -

      Attributes

      Note that the videosphere primitive inherits common attributes.

      +

      Attributes

      Note that the videosphere primitive inherits common attributes.

      diff --git a/docs/0.6.0/components/cursor.html b/docs/0.6.0/components/cursor.html index 48f4b6a4d..117f7cb31 100644 --- a/docs/0.6.0/components/cursor.html +++ b/docs/0.6.0/components/cursor.html @@ -1086,11 +1086,11 @@

      The cursor component provides hover and click states for interaction on top of -the raycaster component. The cursor component can be used for +the raycaster component. The cursor component can be used for both gaze-based and controller-based interactions, but the appearance needs -to be configured depending on the use case. The <a-cursor> +to be configured depending on the use case. The <a-cursor> primitive provides a default reticle appearance for a gaze-based -cursor, and the laser-controls component configures the +cursor, and the laser-controls component configures the cursor for all controllers.

      The cursor component listens to events and keeps state on what’s being hovered and pressed in order to provide mousedown, mouseup, mouseenter, @@ -1100,15 +1100,15 @@

      capturing the closest visible intersected entity.

      By default, the cursor is configured to be used in a gaze-based mode. Specifying the downEvents and upEvents properties allows the cursor to work -with controllers. The laser-controls component automatically +with controllers. The laser-controls component automatically configures those.

      To provide a shape or appearance to the cursor, we should apply either the -geometry and material components or use the raycaster -component’s showLine property to draw a line using the line +geometry and material components or use the raycaster +component’s showLine property to draw a line using the line component.

      Example

      For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no -matter where we look, we place it as a child of the active camera +matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

      <a-entity camera>
        <a-entity cursor="fuse: true; fuseTimeout: 500"
                  position="0 0 -1"
                  geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                  material="color: black; shader: flat">
        </a-entity>
      </a-entity>

      <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
      @@ -1150,7 +1150,7 @@

      To further customize the cursor component, we configure the cursor’s dependency -component, the raycaster component.

      +component, the raycaster component.

      Events

      @@ -1215,7 +1215,7 @@

      States

      Configuring the Cursor through the Raycaster Component

      The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

      <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>
      @@ -1230,7 +1230,7 @@

      Adding Visual Feedback

      To add visual feedback to the cursor to show when the cursor is clicking or -fusing, we can use the animation system. When the cursor +fusing, we can use the animation system. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

      <a-entity cursor="fuse: true; fuseTimeout: 500"
                position="0 0 -1"
                geometry="primitive: ring"
                material="color: black; shader: flat">
        <a-animation begin="click" easing="ease-in" attribute="scale"
                     fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
        <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                     fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
      </a-entity>
      diff --git a/docs/0.6.0/components/daydream-controls.html b/docs/0.6.0/components/daydream-controls.html index a3a004930..330fcd119 100644 --- a/docs/0.6.0/components/daydream-controls.html +++ b/docs/0.6.0/components/daydream-controls.html @@ -1086,7 +1086,7 @@

      The daydream-controls component interfaces with the Google Daydream controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Daydream controller model that highlights the touched and/or pressed buttons (trackpad).

      Example

      <!-- Match Daydream controller if present, regardless of hand. -->
      <a-entity daydream-controls></a-entity>
      diff --git a/docs/0.6.0/components/debug.html b/docs/0.6.0/components/debug.html index 0664c8efa..22a230171 100644 --- a/docs/0.6.0/components/debug.html +++ b/docs/0.6.0/components/debug.html @@ -1102,8 +1102,8 @@ 

      <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

      Make sure that this component is not active in production.

      -

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM:

      +

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM:

      document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
      document.querySelector('a-entity').flushToDOM();  // Flush an entity.
      document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
      document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.
      diff --git a/docs/0.6.0/components/fog.html b/docs/0.6.0/components/fog.html index 23007e958..1af69b51a 100644 --- a/docs/0.6.0/components/fog.html +++ b/docs/0.6.0/components/fog.html @@ -1086,7 +1086,7 @@

      The fog component obscures entities in fog given distance from the camera. The -fog component applies only to the <a-scene> element.

      +fog component applies only to the <a-scene> element.

      Example

      <a-scene fog="type: linear; color: #AAA"></a-scene>

      Properties

      Given the fog distribution type, different properties will apply.

      diff --git a/docs/0.6.0/components/gearvr-controls.html b/docs/0.6.0/components/gearvr-controls.html index f504c543e..bdad6c41e 100644 --- a/docs/0.6.0/components/gearvr-controls.html +++ b/docs/0.6.0/components/gearvr-controls.html @@ -1086,7 +1086,7 @@

      The gearvr-controls component interfaces with the Samsung/Oculus Gear VR controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Gear VR controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

      Example

      <!-- Match Gear VR controller if present, regardless of hand. -->
      <a-entity gearvr-controls></a-entity>

      <!-- Match Gear VR controller if present and for specified hand. -->
      <a-entity gearvr-controls="hand: left"></a-entity>
      <a-entity gearvr-controls="hand: right"></a-entity>
      diff --git a/docs/0.6.0/components/geometry.html b/docs/0.6.0/components/geometry.html index fcf0a076b..888467972 100644 --- a/docs/0.6.0/components/geometry.html +++ b/docs/0.6.0/components/geometry.html @@ -1089,7 +1089,7 @@

      property defines the general shape. Geometric primitives, in computer graphics, are irreducible basic shapes. A material component is commonly defined to provide a appearance alongside the shape to create a complete mesh.

      -
      +

      Base Properties

      Every geometry type will have these properties:

      @@ -1601,7 +1601,7 @@ 

      AFRAME.registerGeometry('box', {
        schema: {
          depth: {default: 1, min: 0},
          height: {default: 1, min: 0},
          width: {default: 1, min: 0},
          segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
        },

        init: function (data) {
          this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
        }
      });

      Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then we need to create the geometry and set on this.geometry through the init lifecycle method.

      When a geometry component sets its primitive property to the custom geometry diff --git a/docs/0.6.0/components/gltf-model.html b/docs/0.6.0/components/gltf-model.html index aad4d5aba..b59add39b 100644 --- a/docs/0.6.0/components/gltf-model.html +++ b/docs/0.6.0/components/gltf-model.html @@ -1093,9 +1093,9 @@

      Note that glTF is a fairly new specification and adoption is still growing. Work on the three.js glTF loader and converters are still active.

      -
      + -

      Why use glTF?

      In comparison to the older OBJ format, which supports only +

      Why use glTF?

      In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features. In addition to all of the above, glTF offers:

        @@ -1106,7 +1106,7 @@

        COLLADA, the supported features are very +

        In comparison to COLLADA, the supported features are very similar. However, because glTF focuses on providing a “transmission format” rather than an editor format, it is more interoperable with web technologies. By analogy, the .PSD (Adobe Photoshop) format is helpful for editing 2D images, diff --git a/docs/0.6.0/components/hand-controls.html b/docs/0.6.0/components/hand-controls.html index 800ef96cd..1877e0ad6 100644 --- a/docs/0.6.0/components/hand-controls.html +++ b/docs/0.6.0/components/hand-controls.html @@ -1086,8 +1086,8 @@

        The hand-controls component provides tracked hands (using a prescribed model) -with animated gestures. hand-controls wraps the vive-controls and -oculus-touch-controls which in turn wrap the tracked-controls +with animated gestures. hand-controls wraps the vive-controls and +oculus-touch-controls which in turn wrap the tracked-controls component. By specifying just hand-controls, we have something that works well with both Vive and Rift. The component gives extra events and handles hand animations and poses.

        diff --git a/docs/0.6.0/components/keyboard-shortcuts.html b/docs/0.6.0/components/keyboard-shortcuts.html index 0cca83720..b3bcd508a 100644 --- a/docs/0.6.0/components/keyboard-shortcuts.html +++ b/docs/0.6.0/components/keyboard-shortcuts.html @@ -1086,7 +1086,7 @@

        The keyboard-shortcuts component toggles global keyboard shortcuts. The -keyboard-shortcuts component applies only to the <a-scene> element.

        +keyboard-shortcuts component applies only to the <a-scene> element.

        Example

        <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

        Properties

        diff --git a/docs/0.6.0/components/laser-controls.html b/docs/0.6.0/components/laser-controls.html index 047ec916f..0b09d9e9a 100644 --- a/docs/0.6.0/components/laser-controls.html +++ b/docs/0.6.0/components/laser-controls.html @@ -1098,16 +1098,16 @@

        configures other components, rather than implementing any logic itself. Under the hood, laser-controls sets all of the tracked controller components:

        These controller components get activated if its respective controller is connected and detected via the Gamepad API. Then the model of the actual -controller is used. laser-controls then configures the cursor +controller is used. laser-controls then configures the cursor component for listen to the appropriate events and configures the -raycaster component to draw the laser.

        +raycaster component to draw the laser.

        When the laser intersects with an entity, the length of the line gets truncated to the distance to the intersection point.

        Example

        <a-entity laser-controls="hand: left"></a-entity>
        @@ -1124,11 +1124,11 @@

        left or right. -

        Customizing the Raycaster

        Configure the raycaster properties.

        +

        Customizing the Raycaster

        Configure the raycaster properties.

        For example:

        <a-entity laser-controls raycaster="objects: .links; far: 5"></a-entity>
        -

        Customizing the Line

        See Raycaster: Customizing the Line.

        +

        Customizing the Line

        See Raycaster: Customizing the Line.

        For example:

        <a-entity laser-controls line="color: red; opacity: 0.75"></a-entity>
        diff --git a/docs/0.6.0/components/light.html b/docs/0.6.0/components/light.html index 084bfb9bb..f956ec4a1 100644 --- a/docs/0.6.0/components/light.html +++ b/docs/0.6.0/components/light.html @@ -1100,7 +1100,7 @@

        To manually disable the defaults, without adding other lights:

        <a-scene light="defaultLightsEnabled: false">
          <!-- ... -->
        </a-scene>
        -
        +

        Properties

        All light types support a few basic properties:

        @@ -1237,7 +1237,7 @@

        Spot

        Sp

        Configuring Shadows

        A-Frame includes support for realtime shadow rendering. With proper configuration, objects (both moving or stationary) will cast shadows adding depth and realism to a scene. Since shadows come with many properties, it -is very helpful to use the A-Frame Inspector to configure shadows

        +is very helpful to use the A-Frame Inspector to configure shadows

        Light types that support shadows (point, spot, and directional) include additional properties:

        diff --git a/docs/0.6.0/components/line.html b/docs/0.6.0/components/line.html index 15d72b798..b70cc6926 100644 --- a/docs/0.6.0/components/line.html +++ b/docs/0.6.0/components/line.html @@ -1087,8 +1087,8 @@

        The line component draws a line given a start coordinate and end coordinate using THREE.Line.

        -

        The raycaster component uses the line component for its showLine -property, which is then used by the laser-controls component.

        +

        The raycaster component uses the line component for its showLine +property, which is then used by the laser-controls component.

        Example

        <a-entity line="start: 0, 1, 0; end: 2 0 -5; color: red"
                  line__2="start: -2, 4, 5; end: 0 4 -3; color: green"></a-entity>

        Note an entity can have multiple lines. The line mesh is set as line or diff --git a/docs/0.6.0/components/look-controls.html b/docs/0.6.0/components/look-controls.html index 2fe24c1dc..70d119793 100644 --- a/docs/0.6.0/components/look-controls.html +++ b/docs/0.6.0/components/look-controls.html @@ -1091,7 +1091,7 @@

      • Rotates the entity when we click-drag mouse.
      • Rotates the entity when we touch-drag the touchscreen.

      -

      Example

      The look-controls component is usually used alongside the camera +

      Example

      The look-controls component is usually used alongside the camera component.

      <a-entity camera look-controls></a-entity>
      diff --git a/docs/0.6.0/components/material.html b/docs/0.6.0/components/material.html index efe6c5916..929f3850d 100644 --- a/docs/0.6.0/components/material.html +++ b/docs/0.6.0/components/material.html @@ -1086,11 +1086,11 @@

      The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

      We can register custom materials to extend the material component to provide a wide range of visual effects.

      -
      +

      Example

      Defining a red material using the default standard material:

      <a-entity geometry="primitive: box" material="color: red"></a-entity>
      @@ -1256,7 +1256,7 @@

      fog. +Whether or not material is affected by fog. true @@ -1370,7 +1370,7 @@

      fog. +Whether or not material is affected by fog. true @@ -1406,7 +1406,7 @@

      Textures

      To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

      +asset management system:

      <a-scene>
        <a-assets>
          <img id="my-texture" src="texture.png">
        </a-assets>

        <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
      </a-scene>

      src can also be an inline URL. Note that we do not get browser caching or diff --git a/docs/0.6.0/components/obj-model.html b/docs/0.6.0/components/obj-model.html index 683469ad3..585257c35 100644 --- a/docs/0.6.0/components/obj-model.html +++ b/docs/0.6.0/components/obj-model.html @@ -1103,7 +1103,7 @@

      mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

      Events

      diff --git a/docs/0.6.0/components/oculus-touch-controls.html b/docs/0.6.0/components/oculus-touch-controls.html index 3989baee8..1d6102c33 100644 --- a/docs/0.6.0/components/oculus-touch-controls.html +++ b/docs/0.6.0/components/oculus-touch-controls.html @@ -1086,7 +1086,7 @@

      The oculus-touch-controls component interfaces with the Oculus Touch controllers. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.

      Example

      <a-entity oculus-touch-controls="hand: left"></a-entity>
      <a-entity oculus-touch-controls="hand: right"></a-entity>
      diff --git a/docs/0.6.0/components/raycaster.html b/docs/0.6.0/components/raycaster.html index d7d95d737..6a2aa56a8 100644 --- a/docs/0.6.0/components/raycaster.html +++ b/docs/0.6.0/components/raycaster.html @@ -1093,7 +1093,7 @@

      checks for intersections at a certain interval against a list of objects, and will emit events on the entity when it detects intersections or clearing of intersections (i.e., when the raycaster is no longer intersecting an entity).

      -

      The cursor component and laser-controls components +

      The cursor component and laser-controls components both build on top of the raycaster component.

      Example

      <a-entity id="player" collider-check>
        <a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
      </a-entity>
      <a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
      @@ -1144,7 +1144,7 @@

      showLine -Whether or not to display the raycaster visually with the line component. +Whether or not to display the raycaster visually with the line component. false @@ -1240,7 +1240,7 @@

      Customizing the Line

      If showLine is set to true, the raycaster will configure the line given the raycaster’s origin, direction, and far properties. To customize the line -appearance provided by the showLine: true property, we configure the line +appearance provided by the showLine: true property, we configure the line component:

      <a-entity raycaster="showLine: true; far: 100" line="color: orange; opacity: 0.5"></a-entity>
      diff --git a/docs/0.6.0/components/shadow.html b/docs/0.6.0/components/shadow.html index c046962fb..144e5b8ce 100644 --- a/docs/0.6.0/components/shadow.html +++ b/docs/0.6.0/components/shadow.html @@ -1095,7 +1095,7 @@

      Examp

      IMPORTANT: Adding the shadow component alone is not enough to display shadows in your scene. We must have at least one light with castShadow: true enabled. Additionally, the light’s shadow camera (used for depth -projection) usually must be configured correctly. Refer to the light +projection) usually must be configured correctly. Refer to the light component for more information.

      Properties

      diff --git a/docs/0.6.0/components/sound.html b/docs/0.6.0/components/sound.html index f57c52a72..195bae91e 100644 --- a/docs/0.6.0/components/sound.html +++ b/docs/0.6.0/components/sound.html @@ -1087,7 +1087,7 @@

      The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the -components-position.

      +components-position.

      Example

      <a-entity id="river" geometry="primitive: plane" material="color: blue"
                position="-10 0 0" sound="src: url(river.mp3); autoplay: true"></a-entity>

      Properties

      diff --git a/docs/0.6.0/components/stats.html b/docs/0.6.0/components/stats.html index 524efd83c..2e9c27d60 100644 --- a/docs/0.6.0/components/stats.html +++ b/docs/0.6.0/components/stats.html @@ -1086,7 +1086,7 @@

      The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

      +component applies only to the <a-scene> element.

      Example

      <a-scene stats></a-scene>

      Metrics

        diff --git a/docs/0.6.0/components/text.html b/docs/0.6.0/components/text.html index 51eab02d8..0701be058 100644 --- a/docs/0.6.0/components/text.html +++ b/docs/0.6.0/components/text.html @@ -1087,7 +1087,7 @@

        The text component renders signed distance field (SDF) font text.

        Example Image

        -
        +

        Introduction

        Note that rendering text in 3D is hard. In 2D web development, text is the most basic thing because the browser’s renderer and layout engine handles @@ -1314,8 +1314,8 @@

        SizingChange the width.
      • Change the wrapCount (roughly how many characters to fit inside the given width).
      • Change wrapPixels.
        • -
      • Change the scale component.
        • -
      • Position the text closer or farther away.
        • +
      • Change the scale component.
        • +
      • Position the text closer or farther away.

      Sizing

      Text can be wrapped by specifying width in A-Frame units.

      diff --git a/docs/0.6.0/components/tracked-controls.html b/docs/0.6.0/components/tracked-controls.html index 83db2bf53..b56899586 100644 --- a/docs/0.6.0/components/tracked-controls.html +++ b/docs/0.6.0/components/tracked-controls.html @@ -1087,12 +1087,12 @@

      The tracked-controls component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is -abstracted by the hand-controls component as well as the -vive-controls, oculus-touch-controls, and -daydream-controls +abstracted by the hand-controls component as well as the +vive-controls, oculus-touch-controls, and +daydream-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events. For non-6DOF controllers -such as daydream-controls, a primitive arm model is used to emulate +such as daydream-controls, a primitive arm model is used to emulate positional data.

      Example

      Note that due to recent browser-specific changes, Vive controllers may be returned by the Gamepad API with id values of either “OpenVR Gamepad” or “OpenVR Controller”, diff --git a/docs/0.6.0/components/vive-controls.html b/docs/0.6.0/components/vive-controls.html index 4b8a80ba0..70d343ac3 100644 --- a/docs/0.6.0/components/vive-controls.html +++ b/docs/0.6.0/components/vive-controls.html @@ -1086,7 +1086,7 @@

      The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

      Example

      <a-entity vive-controls="hand: left"></a-entity>
      <a-entity vive-controls="hand: right"></a-entity>
      diff --git a/docs/0.6.0/components/vr-mode-ui.html b/docs/0.6.0/components/vr-mode-ui.html index 8b95b2813..bf31d0c65 100644 --- a/docs/0.6.0/components/vr-mode-ui.html +++ b/docs/0.6.0/components/vr-mode-ui.html @@ -1087,7 +1087,7 @@

      The vr-mode-ui component toggles UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only -to the <a-scene> element.

      +to the <a-scene> element.

      Example

      <a-scene vr-mode-ui="enabled: false"></a-scene>

      Properties

      diff --git a/docs/0.6.0/components/wasd-controls.html b/docs/0.6.0/components/wasd-controls.html index c491fb546..a502e78a2 100644 --- a/docs/0.6.0/components/wasd-controls.html +++ b/docs/0.6.0/components/wasd-controls.html @@ -1086,7 +1086,7 @@

      The wasd-controls component controls an entity with the WASD or arrow keyboard -keys. The wasd-controls component is commonly attached to an entity with the camera +keys. The wasd-controls component is commonly attached to an entity with the camera component.

      Example

      <a-entity camera look-controls wasd-controls></a-entity>
      diff --git a/docs/0.6.0/core/animations.html b/docs/0.6.0/core/animations.html index 9debc750d..fa7440558 100644 --- a/docs/0.6.0/core/animations.html +++ b/docs/0.6.0/core/animations.html @@ -1099,7 +1099,7 @@

      the animation, and loops indefinitely.

      <a-entity>
        <a-entity position="5 0 0"></a-entity>
        <a-animation attribute="rotation"
                     dur="10000"
                     fill="forwards"
                     to="0 360 0"
                     repeat="indefinite"></a-animation>
      </a-entity>
      -
      +

      Attributes

      Here is an overview of animation attributes. We’ll go into more detail below.

      diff --git a/docs/0.6.0/core/asset-management-system.html b/docs/0.6.0/core/asset-management-system.html index ec849fe20..da314affd 100644 --- a/docs/0.6.0/core/asset-management-system.html +++ b/docs/0.6.0/core/asset-management-system.html @@ -1101,7 +1101,7 @@

      The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

      -
      +

      Example

      We can define our assets in <a-assets> and point to those assets from our entities using selectors:

      diff --git a/docs/0.6.0/core/component.html b/docs/0.6.0/core/component.html index 2f9cc19c5..760e04d4c 100644 --- a/docs/0.6.0/core/component.html +++ b/docs/0.6.0/core/component.html @@ -1085,7 +1085,7 @@

      -

      In the entity-component-system pattern, a component is a reusable and +

      In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

      In A-Frame, components modify entities which are 3D objects in the scene. We @@ -1099,7 +1099,7 @@

      Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

      -
      +

      Component HTML Form

      A component holds a bucket of data in the form of one or more component properties. Components use this data to modify entities. Consider an engine @@ -1248,7 +1248,7 @@

      Definition Lifecycle Handler Methods

      With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the shape of the data, the lifecycle handler methods use the data to modify the entity. The handlers will usually interact with the -Entity API.

      +Entity API.

      methodsimage Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

      Overview of Methods

      @@ -1301,11 +1301,11 @@

      entity as an HTML element. +

      - + @@ -1342,7 +1342,7 @@

      diffing the current +

      Granular modifications to the entity can be done by diffing the current dataset (this.data) with the previous dataset before the update (oldData).

      A-Frame calls .update() both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The @@ -1350,7 +1350,7 @@

      visible component’s update sets the visibility of +

      For example, the visible component’s update sets the visibility of the entity.

      Reference to the entity as an HTML element.
      this.el.sceneElReference to the scene as an HTML element.Reference to the scene as an HTML element.
      this.id
      AFRAME.registerComponent('visible', {
        /**
         * this.el is the entity element.
         * this.el.object3D is the three.js object of the entity.
         * this.data is the component's property or properties.
         */
        update: function (oldData) {
          this.el.object3D.visible = this.data;
        }
        // ...
      });
      @@ -1365,7 +1365,7 @@

      Remove, undo, or clean up all of the component’s modifications to the entity.

    • Detach event listeners.
    -

    For example, when the light component is removed, the light component +

    For example, when the light component is removed, the light component will remove the light object that it had previously set on the entity, thus removing it from the scene.

    AFRAME.registerComponent('light', {
      // ...
      remove: function () {
        this.el.removeObject3D('light');
      }
      // ...
    });
    @@ -1387,7 +1387,7 @@

    time) and the time difference in milliseconds since the last frame (timeDelta). These can be used for interpolation or to only run parts of the tick handler on a set interval.

    -

    For example, the tracked controls component will progress +

    For example, the tracked controls component will progress the controller’s animations, update the controller’s position and rotation, and check for button presses.

    AFRAME.registerComponent('tracked-controls', {
      // ...
      tick: function (time, timeDelta) {
        this.updateMeshAnimation();
        this.updatePose();
        this.updateButtons();
      }
      // ...
    });
    @@ -1404,7 +1404,7 @@

    .
  • Remove event listeners.
  • Remove any chances of dynamic behavior.
    • -

    For example, the sound component will pause the sound and remove an +

    For example, the sound component will pause the sound and remove an event listener that would have played a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      pause: function () {
        this.pauseSound();
        this.removeEventListener();
      }
      // ...
    });
    @@ -1419,7 +1419,7 @@

    .pla
    • Add event listeners.
    -

    For example, the sound component will play the sound and update the +

    For example, the sound component will play the sound and update the event listener that would play a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      play: function () {
        if (this.data.autoplay) { this.playSound(); }
        this.updateEventListener();
      }
      // ...
    });
    @@ -1429,7 +1429,7 @@

  • Dynamically update or extend the schema, usually depending on the value of a property.
    • -

    For example, the geometry component checks if the primitive +

    For example, the geometry component checks if the primitive property changed to determine whether to update the schema for a different type of geometry:

    AFRAME.registerComponent('geometry', {
      // ...
      updateSchema: (newData) {
        if (newData.primitive !== this.data.primitive) {
          this.extendSchema(GEOMETRIES[newData.primitive].schema);
        }
      }
      // ...
    });
    @@ -1470,7 +1470,7 @@ 

    document.querySelector('[geometry]').components.geometry.flushToDOM();
    -

    Read more about component-to-DOM serialization.

    +

    Read more about component-to-DOM serialization.

    Accessing a Component’s Members and Methods

    A component’s members and methods can be accessed through the entity from the .components object. Look up the component from the entity’s map of components, and we’ll have access to the component’s internals. Consider this diff --git a/docs/0.6.0/core/entity.html b/docs/0.6.0/core/entity.html index b2b4e2fe4..214c505a7 100644 --- a/docs/0.6.0/core/entity.html +++ b/docs/0.6.0/core/entity.html @@ -1086,23 +1086,23 @@

    A-Frame represents an entity via the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

    -

    In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

    -
    +

    In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

    +

    Example

    Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

    <a-entity>

    We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

    +give it shape and appearance, we can attach the geometry and +material components:

    <a-entity geometry="primitive: box" material="color: red">
    -

    Or to make it emit light, we can further attach the light component:

    +

    Or to make it emit light, we can further attach the light component:

    <a-entity geometry="primitive: box" material="color: red"
              light="type: point; intensity: 2.0">

    Retrieving an Entity

    We can simply retrieve an entity using DOM APIs.

    @@ -1134,7 +1134,7 @@

    object3DMap

    An entity’s object3DMap is an object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that components have set.

    -

    For an entity with a geometry and light components +

    For an entity with a geometry and light components attached, object3DMap might look like:

    {
      light: <THREE.Light Object>,
      mesh: <THREE.Mesh Object>
    }
    @@ -1148,7 +1148,7 @@

    Metho 
    entity.addEventListener('stateadded', function (evt) {
      if (evt.detail.state === 'selected') {
        console.log('Entity now selected!');
      }
    });

    entity.addState('selected');
    entity.is('selected');  // >> true

    emit (name, detail, bubbles)

    emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

    +trigger an animation:

    // <a-entity>
    //   <a-animation attribute="rotation" begin="rotate" to="0 360 0"></a-animation>
    // </a-entity>
    entity.emit('rotate');

    We can also pass event detail or data as the second argument:

    @@ -1159,7 +1159,7 @@ 

    entity.emit('sink', null, false);

    flushToDOM (recursive)

    flushToDOM will manually serialize an entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

    +Read more about component-to-DOM serialization.

    getAttribute (componentName)

    getAttribute retrieves parsed component data (including mixins and defaults).

    // <a-entity geometry="primitive: box; width: 3">

    entity.getAttribute('geometry');
    // >> {primitive: "box", depth: 2, height: 2, width: 3, ...}

    entity.getAttribute('geometry').primitive;
    // >> "box"

    entity.getAttribute('geometry').height;
    // >> 2

    entity.getAttribute('position');
    // >> {x: 0, y: 0, z: 0}
    @@ -1192,20 +1192,20 @@

    pa entity will call pause() on its child entities when we pause an entity.

    // <a-entity id="spinning-jumping-ball">
    entity.pause();
    -

    For example, the look-controls component on +

    For example, the look-controls component on pause will remove event handlers that listen for input.

    play ()

    play() will start any dynamic behavior as defined by animations and components. This is automatically called when the DOM attaches an entity. When an entity play(), the entity calls play() on its child entities.

    entity.pause();
    entity.play();
    -

    For example, the sound component on play will begin playing the sound.

    +

    For example, the sound component on play will begin playing the sound.

    setAttribute (componentName, value, [propertyValue | clobber])

    If componentName is not the name of a registered component or the component is a single-property component, setAttribute behaves as it normally would:

    entity.setAttribute('visible', false);

    Though if componentName is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    entity.setAttribute('position', { x: 1, y: 2, z: 3 });
    diff --git a/docs/0.6.0/core/globals.html b/docs/0.6.0/core/globals.html index d07e37c6d..b96df3fe7 100644 --- a/docs/0.6.0/core/globals.html +++ b/docs/0.6.0/core/globals.html @@ -1097,11 +1097,11 @@

    AComponent -Component prototype. +Component prototype. AEntity -Entity prototype. +Entity prototype. ANode @@ -1109,7 +1109,7 @@

    AScene -Scene prototype. +Scene prototype. components @@ -1125,7 +1125,7 @@

    registerComponent -Function to register a component. +Function to register a component. registerElement @@ -1133,15 +1133,15 @@

    registerGeometry -Function to register a geometry. +Function to register a geometry. registerPrimitive -Function to register a primitive. +Function to register a primitive. registerShader -Function to register a material or shader. +Function to register a material or shader. schema @@ -1165,7 +1165,7 @@

    utils -A-Frame utility modules. +A-Frame utility modules. version diff --git a/docs/0.6.0/core/mixins.html b/docs/0.6.0/core/mixins.html index f36501f2b..71aa064e3 100644 --- a/docs/0.6.0/core/mixins.html +++ b/docs/0.6.0/core/mixins.html @@ -1087,7 +1087,7 @@

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    <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-mixin>
      </a-assets>

      <a-entity mixin="red cube"></a-entity>
      <a-entity mixin="blue cube"></a-entity>
    </a-scene>
    @@ -1097,7 +1097,7 @@

    the entities above expand to:

    <a-entity material="color: red" geometry="primitive: box"></a-entity>
    <a-entity material="color: blue" geometry="primitive: box"></a-entity>
    -
    +

    Merging Component Properties

    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="height: 10"></a-mixin>
        <a-mixin id="wide" geometry="width: 10"></a-mixin>
      </a-assets>

      <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
    </a-scene>
    diff --git a/docs/0.6.0/core/scene.html b/docs/0.6.0/core/scene.html index d49fa282a..28953f766 100644 --- a/docs/0.6.0/core/scene.html +++ b/docs/0.6.0/core/scene.html @@ -1086,8 +1086,8 @@

    A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

    -

    The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

    +

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    @@ -1098,7 +1098,7 @@

  • Set up webvr-polyfill, VREffect
  • Add UI to Enter VR that calls WebVR API
    • -
    +

    Example

    <a-scene>
      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <a-box src="#texture"></a-box>
    </a-scene>
    @@ -1143,7 +1143,7 @@

    systems -Instantiated systems. +Instantiated systems. time @@ -1199,12 +1199,12 @@

    embedded - Remove fullscreen styles from the canvas. -
  • fog - Add fog.
    • -
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • -
  • inspector - Inject the A-Frame Inspector.
    • -
  • stats - Toggle performance stats.
    • -
  • vr-mode-ui - Toggle UI for entering and exiting VR.
    • +
  • embedded - Remove fullscreen styles from the canvas.
    • +
  • fog - Add fog.
    • +
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • +
  • inspector - Inject the A-Frame Inspector.
    • +
  • stats - Toggle performance stats.
    • +
  • vr-mode-ui - Toggle UI for entering and exiting VR.

    • Running Content Scripts on the Scene

    The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

    AFRAME.registerComponent('do-something', {
      init: function () {
        var sceneEl = this.el;
      }
    });
    diff --git a/docs/0.6.0/core/systems.html b/docs/0.6.0/core/systems.html index 588879b86..198441e63 100644 --- a/docs/0.6.0/core/systems.html +++ b/docs/0.6.0/core/systems.html @@ -1085,16 +1085,16 @@

    -

    A system, of the entity-component-system pattern, provides global scope, +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -
    + -

    Registering a System

    A system is registered similarly to a component.

    +

    Registering a System

    A system is registered similarly to a component.

    If the system name matches a component name, then the component will have a reference to the system as this.system:

    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);
      }
    });
    @@ -1116,7 +1116,7 @@

    schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data.

    Methods

    A system, like a component, defines lifecycle handlers. It can also define diff --git a/docs/0.6.0/core/utils.html b/docs/0.6.0/core/utils.html index f03fc9fe2..d574869c1 100644 --- a/docs/0.6.0/core/utils.html +++ b/docs/0.6.0/core/utils.html @@ -1086,7 +1086,7 @@

    A-Frame’s utility modules are public through AFRAME.utils.

    -
    +

    AFRAME.utils.coordinates

    Module for handling vec3 and vec4 types.

    .isCoordinates (value)

    Tests whether a string is a vec3.

    @@ -1098,7 +1098,7 @@

    .stringify (data)

    Stringifies an {x, y, z} vec3 object to an “x y z” string.

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
    // >> "1 2 -3"
    -

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for +

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for return 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.

    @@ -1106,7 +1106,7 @@

    This is useful for components that need a way to reference a property of a multi-property component.

    -

    .setComponentProperty (entity, componentName, value, delimiter)

    Performs like Entity.setAttribute, but with support for setting an +

    .setComponentProperty (entity, componentName, value, delimiter)

    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.

    diff --git a/docs/0.6.0/guides/building-a-360-image-gallery.html b/docs/0.6.0/guides/building-a-360-image-gallery.html index f19831fa2..2fc717fee 100644 --- a/docs/0.6.0/guides/building-a-360-image-gallery.html +++ b/docs/0.6.0/guides/building-a-360-image-gallery.html @@ -1089,23 +1089,23 @@

    Let’s build an interactive gaze-based 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

    -

    This guide will practice three concepts related to entity-component:

    +

    This guide will practice three concepts related to entity-component:

    1. Using the standard components that come with A-Frame.
    2. Using community components from the ecosystem.
    3. Writing custom components to accomplish whatever we want.
    -
    +

    Skeleton

    This is the starting point for our scene:

    <a-scene>
      <a-assets>
        <audio id="click-sound" src="audio/click.ogg"></audio>

        <!-- Images. -->
        <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
        <img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
        <img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
        <img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
        <img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Link we will build. -->
      <a-entity class="link"></a-entity>

      <!-- Camera + Cursor. -->
      <a-camera>
        <a-cursor id="cursor">
          <a-animation begin="click" easing="ease-in" attribute="scale"
                       fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
          <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                       from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
        </a-cursor>
      </a-camera>
    </a-scene>

    We have predefined:

    Using Standard Components

    Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure @@ -1115,19 +1115,19 @@ 

    <a-entity class="link"></a-entity>
    -

    To give our entity shape, we can attach the geometry component, +

    To give our entity shape, we can attach the geometry component, configured to a plane shape. We specify the component data using a syntax that resembles that of inline CSS styles:

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"></a-entity>
    -

    Then to give our entity appearance, we can attach the material +

    Then to give our entity appearance, we can attach the material component. We set shader to flat so the image isn’t affected negatively by lighting. And we set src to #cubes-thumb, a selector to one -of the images defined in the Asset Management System.

    +of the images defined in the Asset Management System.

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: #cubes-thumb"></a-entity>

    We can continue adding features to our entity by plugging in more components. -Let’s attach one more standard component, the sound component. We want +Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1202,15 +1202,15 @@

    Event-Set Component

    Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

    Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We are mimicking CSS :hover states. We can specify event names with _event properties, and the rest of the properties define the -setAttribute calls. Notice that the event-set component can have multiple +setAttribute calls. Notice that the event-set component can have multiple instances:

    <a-assets>
      <!-- ... -->
      <script id="link" type="text/html">
        <a-entity class="link"
          geometry="primitive: plane; height: 1; width: 1"
          material="shader: flat; src: ${thumb}"
          sound="on: click; src: #click-sound"
          event-set__1="_event: mousedown; scale: 1 1 1"
          event-set__2="_event: mouseup; scale: 1.2 1.2 1"
          event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
          event-set__4="_event: mouseleave; scale: 1 1 1"></a-entity>
      </script>
    </a-assets>
    @@ -1221,7 +1221,7 @@

    set-image component on GitHub.

    We want to write the component that fades the sky into a new 360° image -once one of the links are clicked. We’ll call it set-image. The component +once one of the links are clicked. We’ll call it set-image. The component API documentation provides a detailed reference for writing a component. A basic component skeleton might look like:

    Here is the skeleton for our set-image component.

    diff --git a/docs/0.6.0/guides/building-a-basic-scene.html b/docs/0.6.0/guides/building-a-basic-scene.html index 4325b3294..8f11174cc 100644 --- a/docs/0.6.0/guides/building-a-basic-scene.html +++ b/docs/0.6.0/guides/building-a-basic-scene.html @@ -1098,7 +1098,7 @@

  • Add text

    • Remix the Basic Guide example on Glitch.

    -
    +

    Starting with HTML

    We start out with a minimal HTML structure:

    <html>
      <head>
        <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
        </a-scene>
      </body>
    </html>
    @@ -1107,7 +1107,7 @@

    before <a-scene> because A-Frame registers custom HTML elements which must be defined before <a-scene> is attached or else <a-scene> will do nothing.

    -

    Next, we include <a-scene> in the <body>. <a-scene> will contain every +

    Next, we include <a-scene> in the <body>. <a-scene> will contain every entity in our scene. <a-scene> handles all of the setup that is required for 3D: setting up WebGL, the canvas, camera, lights, renderer, render loop as well as out of the box WebVR support on platforms such as HTC Vive, Oculus Rift, @@ -1118,7 +1118,7 @@

    <a-box>‘s documentation for +

    Here we define the color <a-box>, see <a-box>‘s documentation for the more attributes (e.g., width, height, depth).

    boximage Image by Ruben Mueller from vrjump.de

    @@ -1126,13 +1126,13 @@

    <a-entity> with the geometry and -material components:

    +underneath <a-box> is <a-entity> with the geometry and +material components:

    <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>
    -

    However, because the default camera and the box are positioned at the default +

    However, because the default camera and the box are positioned at the default position at the 0 0 0 origin, we won’t be able to see the box unless we move -it. We can do this by using the position component to transform the +it. We can do this by using the position component to transform the box in 3D space.

    Transforming an Entity in 3D

    Let’s first go over 3D space. A-Frame uses a right-handed coordinate system. With the default camera direction: positive X-axis extends right, positive @@ -1151,7 +1151,7 @@

    To translate, rotate, and scale the box, we can change the -position, rotation, and scale components. +position, rotation, and scale components. Let’s first apply the rotation and scale components:

    <a-scene>
      <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
    @@ -1208,7 +1208,7 @@ 

    <a-scene>
      <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <!-- Out of the box environment! -->
      <a-entity environment="preset: forest; numDressing: 500"></a-entity>
    </a-scene>

    Applying an Image Texture

    -

    Make sure you’re serving your HTML using a local server +

    Make sure you’re serving your HTML using a local server for textures to load properly.

    We can apply an image texture to the box with an image, video, or <canvas> @@ -1220,7 +1220,7 @@

    -

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The +

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The asset management system makes it easier for the browser to cache assets (e.g., images, videos, models) and A-Frame will make sure all of the assets are fetched before rendering.

    @@ -1240,7 +1240,7 @@

    Creating a Custom Environment (Optional)

    Previously we had the environment component generate the environment. Though it’s good to know a bit on creating a basic environment for learning purposes.

    -

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. +

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. <a-sky>, which is a material applied to the inside of a large sphere, can be a flat color, a 360° image, or a 360° video. For example, a dark gray background would be:

    @@ -1250,7 +1250,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>
    </a-scene>
    -

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are +

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are oriented parallel to the XY axis. To make it parallel to the ground, we need to orient it along the XZ axis. We can do so by rotating the plane negative 90° on the X-axis.

    @@ -1268,7 +1268,7 @@ 

    <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
      repeat="10 10"></a-plane>
    -

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default +

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default if we don’t specify any lights, A-Frame adds an ambient light and a directional light. If A-Frame didn’t add lights for us, the scene would be black. Once we add lights of our own, however, the default lighting setup is removed and @@ -1286,7 +1286,7 @@

    Animation Component.

    -

    We can add animations to the box using A-Frame’s built-in animation +

    We can add animations to the box using A-Frame’s built-in animation system. Animations interpolate or tween a value over time. We can place an <a-animation> element as a child of the entity. Let’s have the box hover up and down to add some motion to the scene.

    @@ -1312,19 +1312,19 @@

    Given that many developers currently do not have proper VR hardware with controllers, we’ll focus this section on using basic mobile and desktop inputs -with the built-in cursor component. The cursor component by default provides +with the built-in cursor component. The cursor component by default provides the ability to “click” on entities by staring or gazing at them on mobile, or on desktop, looking at an entity and click the mouse. But know that the cursor component is just one way to add interactions, things open up if we have access to actual controllers.

    -

    To have a visible cursor fixed to the camera, we place the cursor as a child +

    To have a visible cursor fixed to the camera, we place the cursor as a child of the camera as explained above in Parent and Child Transforms.

    Since we didn’t specifically define a camera, A-Frame included a default camera for us. But since we need to add a cursor as a child of the camera, we will -need to now define <a-camera> containing <a-cursor>:

    +need to now define <a-camera> containing <a-cursor>:

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2">
        <a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000"
          repeat="indefinite"></a-animation>
      </a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
    -

    If we check the documentation of the cursor component that +

    If we check the documentation of the cursor component that <a-cursor> wraps, we see that it emits hover events such as mouseenter, mouseleave as well as click.

    Event Listener Component (Intermediate)

    One way to manually handle the cursor events is to add an event listener with @@ -1332,7 +1332,7 @@

    Animating on Events below.

    In JavaScript, we grab the box with querySelector, use -addEventListener, and then setAttribute +addEventListener, and then setAttribute to make the box grow its scale when its hovered over. Note that A-Frame adds features to setAttribute to work with multi-property components. We can pass a full {x, y, z} object as the second argument.

    @@ -1367,7 +1367,7 @@ 

    <a-scene>
      <!-- ... -->
      <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
        position="-3 1 -4"></a-sound>
      <!-- ... -->
    </a-scene>
    -

    Adding Text

    A-Frame comes with a text component. There are several ways to render +

    Adding Text

    A-Frame comes with a text component. There are several ways to render text, each with their advantages and disadvantages, A-Frame comes with an SDF text implementation using three-bmfont-text that is relatively sharp and performant.

    diff --git a/docs/0.6.0/guides/building-a-minecraft-demo.html b/docs/0.6.0/guides/building-a-minecraft-demo.html index ad68ce18d..2238dfd2b 100644 --- a/docs/0.6.0/guides/building-a-minecraft-demo.html +++ b/docs/0.6.0/guides/building-a-minecraft-demo.html @@ -1091,7 +1091,7 @@

    Let’s build a basic Minecraft (voxel builder) demo that targets room scale VR with controllers (e.g., Vive, Rift). The example will be minimally usable on mobile and desktop.

    -
    +

    Example Skeleton

    We’ll start off with this skeleton HTML:

    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>

    <body>
      <a-scene>
      </a-scene>
    </body>
    diff --git a/docs/0.6.0/guides/building-with-magicavoxel.html b/docs/0.6.0/guides/building-with-magicavoxel.html index 169c54a22..b47edb0f2 100644 --- a/docs/0.6.0/guides/building-with-magicavoxel.html +++ b/docs/0.6.0/guides/building-with-magicavoxel.html @@ -1089,7 +1089,7 @@

    3D scenes and models using voxels (i.e., blocks). MagicaVoxel makes modeling super easy, similar to building in Minecraft.

    magicavoxel

    -
    +

    Installation

    MagicaVoxel works on Windows and OS X. On the MagicaVoxel homepage, click the Download button and install the application:

    diff --git a/docs/0.6.0/introduction/best-practices.html b/docs/0.6.0/introduction/best-practices.html index b50eee1d6..c7f5ad121 100644 --- a/docs/0.6.0/introduction/best-practices.html +++ b/docs/0.6.0/introduction/best-practices.html @@ -1087,23 +1087,23 @@

    A-Frame

    Some best practices for the framework:

      -
    • The core structure of A-Frame is entity-component (ECS). Place and +
    • The core structure of A-Frame is entity-component (ECS). Place and structure application code within purely A-Frame components for reusability, modularity, composability, decoupling, encapsulation, declarativeness, and testability. It’s okay to start out at first using content scripts (<script>), but look to move towards components.
      • -
    • Mixins and templating are useful to reuse and reduce +
    • Mixins and templating are useful to reuse and reduce repeated HTML.

    Performance

    Performance is critical in VR. A high framerate must be maintained in order for people to feel comfortable and as if they were in another place. Here are some ways to help improve performance of an A-Frame scene:

      -
    • Use recommended hardware specifications.
      • -
    • Use the stats component to keep an eye on various metrics (FPS, +
    • Use recommended hardware specifications.
      • +
    • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities). We want to maximize FPS and minimize everything else.
      • -
    • Make use of the asset management system to benefit from browser +
    • Make use of the asset management system to benefit from browser caching and preloading. Trying to fetch assets while rendering is slower than fetching all assets before rendering.
    • If using models, look to bake your lights into textures rather than relying diff --git a/docs/0.6.0/introduction/developing-with-threejs.html b/docs/0.6.0/introduction/developing-with-threejs.html index c1e328e87..65f531e66 100644 --- a/docs/0.6.0/introduction/developing-with-threejs.html +++ b/docs/0.6.0/introduction/developing-with-threejs.html @@ -1115,7 +1115,7 @@

      And every A-Frame entity also has a reference to <a-scene> via .sceneEl:

      document.querySelector('a-entity').sceneEl.object3D;  // THREE.Scene
      -

      From a component, we access the scene through its entity +

      From a component, we access the scene through its entity (i.e., this.el):

      AFRAME.registerComponent('foo', {
        init: function () {
          var scene = this.el.sceneEl.object3D;  // THREE.Scene
        }
      });
      diff --git a/docs/0.6.0/introduction/entity-component-system.html b/docs/0.6.0/introduction/entity-component-system.html index c85de588c..7cc4d5378 100644 --- a/docs/0.6.0/introduction/entity-component-system.html +++ b/docs/0.6.0/introduction/entity-component-system.html @@ -1114,20 +1114,20 @@

      A well-known game engine implementing ECS is Unity. Although there are pain points in cross-entity communication. But we’ll see how A-Frame, the DOM, and declarative HTML really make ECS shine.

      -
      +

      Concept

      ECS Minecraft

      A basic definition of ECS involves:

      We’ll go over GUI tools built on top of A-Frame that can be used without code. And touch on other tools that can ease development across multiple machines.

      -
      +

      A-Frame Inspector

      The A-Frame Inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:

      diff --git a/docs/0.6.0/introduction/vr-headsets-and-webvr-browsers.html b/docs/0.6.0/introduction/vr-headsets-and-webvr-browsers.html index cd269ade3..83ab3d5e9 100644 --- a/docs/0.6.0/introduction/vr-headsets-and-webvr-browsers.html +++ b/docs/0.6.0/introduction/vr-headsets-and-webvr-browsers.html @@ -1085,7 +1085,7 @@

      -
      +

      What is Virtual Reality?

      Virtual reality (VR) is a technology that uses head-mounted headsets with displays to generate the realistic images, sounds, and other sensations to put diff --git a/docs/0.6.0/introduction/writing-a-component.html b/docs/0.6.0/introduction/writing-a-component.html index edc237eb8..e83b18a78 100644 --- a/docs/0.6.0/introduction/writing-a-component.html +++ b/docs/0.6.0/introduction/writing-a-component.html @@ -1085,7 +1085,7 @@

      -

      Components of A-Frame’s entity-component framework are JavaScript +

      Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, @@ -1093,7 +1093,7 @@

      components.

      vehicleimage Image by Ruben Mueller from vrjump.de

      -

      This guide will take it pretty slow. We recommend skimming over the Component +

      This guide will take it pretty slow. We recommend skimming over the Component API documentation before going through this guide as that documentation will be more concise. Note that components should be defined before <a-scene> like:

      @@ -1107,12 +1107,12 @@

      Example: hello-world Component

      Let’s start with the most basic component to get a general idea. This component will log a simple message once when the component’s entity is attached using -the .init() handler.

      +the .init() handler.

      Registering the Component with AFRAME.registerComponent

      Components are registered with AFRAME.registerComponent(). We pass the name of the component, which will be used as the HTML attribute name in the component’s representation in the DOM. Then we pass the component definition which is a JavaScript object of methods and properties. Within the definition, we can -define lifecycle handler methods. One of which is .init(), which +define lifecycle handler methods. One of which is .init(), which is called once when the component is first plugged into its entity.

      In the example below, we just have our .init() handler log a simple message.

      AFRAME.registerComponent('hello-world', {
        init: function () {
          console.log('Hello, World!');
        }
      });
      @@ -1166,7 +1166,7 @@

      Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

      To demonstrate this, we’ll have our log component only log whenever its -entity emits an event. First, we’ll add an event property type that +entity emits an event. First, we’ll add an event property type that specifies which event the component should listen on.

      // ...
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'},
      },
      // ...
      @@ -1175,7 +1175,7 @@

      add an event listener that will +

      What we want to do is add an event listener that will listen to the event before logging a message. If the event property type is not specified, we’ll just log the message:

      AFRAME.registerComponent('log', {
        schema: {
          event: {type: 'string', default: ''},
          message: {type: 'string', default: 'Hello, World!'}
        },

        update: function () {
          var data = this.data;  // Component property values.
          var el = this.el;  // Reference to the component's entity.

          if (data.event) {
            // This will log the `message` when the entity emits the `event`.
            el.addEventListener(data.event, function () {
              console.log(data.message);
            });
          } else {
            // `event` not specified, just log the message.
            console.log(data.message);
          }
        }
      });
      @@ -1184,7 +1184,7 @@

      , we need a reference to the function. So +

      But to remove an event listener, we need a reference to the function. So let’s first store the function on this.eventHandlerFn whenever we attach an event listener. When we attach properties to the component via this, they’ll be available throughout all the other lifecycle handlers.

      @@ -1199,13 +1199,13 @@ 

      <a-scene>
        <a-entity log="event: anEvent; message: Hello, Metaverse!"></a-entity>
      </a-scene>
      -

      Let’s have our entity emit the event to test it out:

      +

      Let’s have our entity emit the event to test it out:

      var el = document.querySelector('a-entity');
      el.emit('anEvent');
      // >> "Hello, Metaverse!"

      Now let’s update our event to test the .update() handler:

      var el = document.querySelector('a-entity');
      el.setAttribute('log', {event: 'anotherEvent', message: 'Hello, new event!'});
      el.emit('anotherEvent');
      // >> "Hello, new event!"
      -

      Handling Component Removal

      Let’s handle the case where the component unplugs from the entity +

      Handling Component Removal

      Let’s handle the case where the component unplugs from the entity (i.e., .removeAttribute('log')). We can implement the .remove() handler which is called when the component is removed. For the log component, we remove any event listeners the component attached to the entity:

      @@ -1218,7 +1218,7 @@ 

      var el = document.querySelector('a-entity');
      el.removeAttribute('log');
      el.emit('anEvent');
      // >> Nothing should be logged...

      Allowing Multiple Instances of a Component

      Let’s allow having multiple log components attached to the same entity. To do -so, we enable multiple instancing with the .multiple flag. Let’s +so, we enable multiple instancing with the .multiple flag. Let’s set that to true:

      AFRAME.registerComponent('log', {
        schema: {
          event: {type: 'string', default: ''},
          message: {type: 'string', default: 'Hello, World!'}
        },

        multiple: true,

        // ...
      });
      @@ -1235,13 +1235,13 @@

      Example: box Component

      For a less trivial example, let’s find out how we can add 3D objects and affect -the scene graph by writing a component that uses three.js. To get +the scene graph by writing a component that uses three.js. To get the idea, we’ll just make a basic box component that creates a box mesh with both geometry and material.

      boximage Image by Ruben Mueller from vrjump.de

      Note: this is just a 3D equivalent of writing a Hello, World! component. -A-Frame provides geometry and material components if we +A-Frame provides geometry and material components if we actually wanted to make a box in practice.

      Schema and API

      Let’s start with the schema. The schema defines the API of your component. We’ll make the width, height, depth, and color configurable through the @@ -1258,7 +1258,7 @@

      THREE.BoxBufferGeometry, THREE.MeshStandardMaterial, and finally a THREE.Mesh. Then we set the mesh on our entity to add the mesh to the -three.js scene graph using .setObject3D(name, object):

      +three.js scene graph using .setObject3D(name, object):

      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.BoxBufferGeometry(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);
        }
      });

      Now let’s handle updates. If the geometry-related properties (i.e., width, diff --git a/docs/0.6.0/primitives/a-camera.html b/docs/0.6.0/primitives/a-camera.html index c80eea8fb..610208493 100644 --- a/docs/0.6.0/primitives/a-camera.html +++ b/docs/0.6.0/primitives/a-camera.html @@ -1088,7 +1088,7 @@

      The camera primitive determines what the user sees. We can change the viewport by modifying the camera entity’s position and rotation.

      Note that by default, the camera origin will be at 0 1.6 0 in desktop mode -and 0 0 0 in VR mode. Read about the camera.userHeight property.

      +and 0 0 0 in VR mode. Read about the camera.userHeight property.

      Example

      <a-scene>
        <a-box></a-box>
        <a-camera></a-camera>
      </a-scene>

      Attributes

      diff --git a/docs/0.6.0/primitives/a-circle.html b/docs/0.6.0/primitives/a-circle.html index 5841fd3a7..8a48a7b5e 100644 --- a/docs/0.6.0/primitives/a-circle.html +++ b/docs/0.6.0/primitives/a-circle.html @@ -1085,7 +1085,7 @@

      -

      The circle primitive creates circles surfaces using the geometry +

      The circle primitive creates circles surfaces using the geometry component with the type set to circle.

      Example

      <a-scene>
        <a-assets>
          <img id="platform" src="platform.jpg">
        </a-assets>

        <!-- Basic circle. -->
        <a-circle color="#CCC" radius="20"></a-circle>

        <!-- Textured circle parallel to ground. -->
        <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
      </a-scene>
      diff --git a/docs/0.6.0/primitives/a-collada-model.html b/docs/0.6.0/primitives/a-collada-model.html index ba1a9e66b..39efe89a5 100644 --- a/docs/0.6.0/primitives/a-collada-model.html +++ b/docs/0.6.0/primitives/a-collada-model.html @@ -1099,7 +1099,7 @@

      src -collada-model.src +collada-model.src null diff --git a/docs/0.6.0/primitives/a-cursor.html b/docs/0.6.0/primitives/a-cursor.html index c323b098d..0b1ea1680 100644 --- a/docs/0.6.0/primitives/a-cursor.html +++ b/docs/0.6.0/primitives/a-cursor.html @@ -1089,7 +1089,7 @@

      interactivity with a scene on devices that do not have a hand controller. The default appearance is a ring geometry. The cursor is usually placed as a child of the camera.

      -

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      +

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      Example

      <a-scene>
        <a-camera>
          <a-cursor></a-cursor>
        </a-camera>

        <a-box></a-box>
      </a-scene>

      Attributes

      diff --git a/docs/0.6.0/primitives/a-gltf-model.html b/docs/0.6.0/primitives/a-gltf-model.html index e0c95a503..4128ff995 100644 --- a/docs/0.6.0/primitives/a-gltf-model.html +++ b/docs/0.6.0/primitives/a-gltf-model.html @@ -1099,7 +1099,7 @@

      - +
      srcgltf-model.srcgltf-model.src null
      diff --git a/docs/0.6.0/primitives/a-obj-model.html b/docs/0.6.0/primitives/a-obj-model.html index 910030d4c..3f329cde0 100644 --- a/docs/0.6.0/primitives/a-obj-model.html +++ b/docs/0.6.0/primitives/a-obj-model.html @@ -1087,7 +1087,7 @@

      We recommend glTF for distributing assets in production over the web. Check -out using the glTF model primitive. You can +out using the glTF model primitive. You can either instead export to COLLADA and use the converter or try out the OBJ converter.

      diff --git a/docs/0.6.0/primitives/a-plane.html b/docs/0.6.0/primitives/a-plane.html index 2659a234c..277062d02 100644 --- a/docs/0.6.0/primitives/a-plane.html +++ b/docs/0.6.0/primitives/a-plane.html @@ -1085,7 +1085,7 @@

      -

      The plane primitive creates flat surfaces using the geometry +

      The plane primitive creates flat surfaces using the geometry component with the type set to plane.

      Example

      <a-scene>
        <a-assets>
          <img id="ground" src="ground.jpg">
        </a-assets>

        <!-- Basic plane. -->
        <a-plane color="#CCC" height="20" width="20"></a-plane>

        <!-- Textured plane parallel to ground. -->
        <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
      </a-scene>
      diff --git a/docs/0.6.0/primitives/a-sound.html b/docs/0.6.0/primitives/a-sound.html index 0bb7117aa..bc8aa779b 100644 --- a/docs/0.6.0/primitives/a-sound.html +++ b/docs/0.6.0/primitives/a-sound.html @@ -1085,7 +1085,7 @@

      -

      The sound primitive wraps the sound component.

      +

      The sound primitive wraps the sound component.

      Example

      <a-scene>
        <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
      </a-scene>

      Attributes

      diff --git a/docs/0.6.0/primitives/a-sphere.html b/docs/0.6.0/primitives/a-sphere.html index a1188dddb..dbb3f3a6c 100644 --- a/docs/0.6.0/primitives/a-sphere.html +++ b/docs/0.6.0/primitives/a-sphere.html @@ -1085,7 +1085,7 @@

      -

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      +

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      Example

      <a-sphere color="yellow" radius="5"></a-sphere>

      Attributes

      diff --git a/docs/0.6.0/primitives/a-text.html b/docs/0.6.0/primitives/a-text.html index c43d865d7..6909beda4 100644 --- a/docs/0.6.0/primitives/a-text.html +++ b/docs/0.6.0/primitives/a-text.html @@ -1085,7 +1085,7 @@

      -

      Wraps the text component.

      +

      Wraps the text component.

      Example

      <a-text value="Hello, World!"></a-text>

      Attributes

      diff --git a/docs/0.6.0/primitives/a-torus-knot.html b/docs/0.6.0/primitives/a-torus-knot.html index d6f2b4590..31eab3fc0 100644 --- a/docs/0.6.0/primitives/a-torus-knot.html +++ b/docs/0.6.0/primitives/a-torus-knot.html @@ -1085,7 +1085,7 @@

      -

      The torus knot primitive creates pretzel shapes using the geometry +

      The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

      Example

      <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
      diff --git a/docs/0.6.0/primitives/a-torus.html b/docs/0.6.0/primitives/a-torus.html index 0a5efd155..991b27724 100644 --- a/docs/0.6.0/primitives/a-torus.html +++ b/docs/0.6.0/primitives/a-torus.html @@ -1085,7 +1085,7 @@

      -

      The torus primitive creates donut or tube shapes using the geometry +

      The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

      Example

      <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
      diff --git a/docs/0.6.0/primitives/a-triangle.html b/docs/0.6.0/primitives/a-triangle.html index 7ddef96f3..849339019 100644 --- a/docs/0.6.0/primitives/a-triangle.html +++ b/docs/0.6.0/primitives/a-triangle.html @@ -1085,7 +1085,7 @@

      -

      The triangle primitive creates triangle surfaces using the geometry +

      The triangle primitive creates triangle surfaces using the geometry component with the type set to triangle.

      Example

      <a-scene>
        <a-assets>
          <img id="platform" src="https://i.imgur.com/mYmmbrp.jpg">
        </a-assets>

        <!-- Basic triangle. -->
        <a-triangle color="#CCC"></a-triangle>

        <!-- Textured triangle parallel to ground. -->
        <a-triangle src="#platform" rotation="-90 0 0"></a-triangle>
      </a-scene>
      diff --git a/docs/0.6.0/primitives/a-videosphere.html b/docs/0.6.0/primitives/a-videosphere.html index b68b55ca8..9cfbe4718 100644 --- a/docs/0.6.0/primitives/a-videosphere.html +++ b/docs/0.6.0/primitives/a-videosphere.html @@ -1089,7 +1089,7 @@

      Videospheres are a large sphere with the video texture mapped to the inside.

      Examples

      <a-scene>
        <a-assets>
          <video id="antarctica" autoplay loop="true" src="antarctica.mp4">
        </a-assets>

        <!-- Using the asset management system. -->
        <a-videosphere src="#antarctica"></a-videosphere>

        <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
        <a-videosphere src="africa.mp4"></a-videosphere>
      </a-scene>
      -

      Attributes

      Note that the videosphere primitive inherits common attributes.

      +

      Attributes

      Note that the videosphere primitive inherits common attributes.

      diff --git a/docs/0.7.0/components/cursor.html b/docs/0.7.0/components/cursor.html index 96e037b19..f1fa4a188 100644 --- a/docs/0.7.0/components/cursor.html +++ b/docs/0.7.0/components/cursor.html @@ -1100,11 +1100,11 @@

      The cursor component provides hover and click states for interaction on top of -the raycaster component. The cursor component can be used for +the raycaster component. The cursor component can be used for both gaze-based and controller-based interactions, but the appearance needs -to be configured depending on the use case. The <a-cursor> +to be configured depending on the use case. The <a-cursor> primitive provides a default reticle appearance for a gaze-based -cursor, and the laser-controls component configures the +cursor, and the laser-controls component configures the cursor for all controllers.

      The cursor component listens to events and keeps state on what’s being hovered and pressed in order to provide mousedown, mouseup, mouseenter, @@ -1115,15 +1115,15 @@

      By default, the cursor is configured to be used in a gaze-based mode and will register user input via mouse or touch. Specifying the downEvents and upEvents properties allows the cursor to work with controllers. For example, -the laser-controls component automatically configures these +the laser-controls component automatically configures these properties to work with most controllers..

      To provide a shape or appearance to the cursor, we should apply either the -geometry and material components or use the raycaster -component’s showLine property to draw a line using the line +geometry and material components or use the raycaster +component’s showLine property to draw a line using the line component.

      Example

      For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no -matter where we look, we place it as a child of the active camera +matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

      <a-entity camera>
        <a-entity cursor="fuse: true; fuseTimeout: 500"
                  position="0 0 -1"
                  geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                  material="color: black; shader: flat">
        </a-entity>
      </a-entity>

      <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
      @@ -1165,7 +1165,7 @@

      To further customize the cursor component, we configure the cursor’s dependency -component, the raycaster component.

      +component, the raycaster component.

      Events

      @@ -1230,7 +1230,7 @@

      States

      Configuring the Cursor through the Raycaster Component

      The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

      <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>
      @@ -1245,7 +1245,7 @@

      Adding Visual Feedback

      To add visual feedback to the cursor to show when the cursor is clicking or -fusing, we can use the animation system. When the cursor +fusing, we can use the animation system. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

      <a-entity cursor="fuse: true;"
                position="0 0 -3"
                geometry="primitive: ring"
                material="color: black; shader: flat">
        <a-animation begin="click" easing="ease-in" attribute="scale" dur="150"
                     fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
        <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500"
                     fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
      </a-entity>
      diff --git a/docs/0.7.0/components/daydream-controls.html b/docs/0.7.0/components/daydream-controls.html index 221938502..03a81e64d 100644 --- a/docs/0.7.0/components/daydream-controls.html +++ b/docs/0.7.0/components/daydream-controls.html @@ -1100,7 +1100,7 @@

      The daydream-controls component interfaces with the Google Daydream controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Daydream controller model that highlights the touched and/or pressed buttons (trackpad).

      Example

      <!-- Match Daydream controller if present, regardless of hand. -->
      <a-entity daydream-controls></a-entity>
      diff --git a/docs/0.7.0/components/debug.html b/docs/0.7.0/components/debug.html index 27b77269d..faa593ed8 100644 --- a/docs/0.7.0/components/debug.html +++ b/docs/0.7.0/components/debug.html @@ -1116,8 +1116,8 @@ 

      <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

      Make sure that this component is not active in production.

      -

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM:

      +

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM:

      document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
      document.querySelector('a-entity').flushToDOM();  // Flush an entity.
      document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
      document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.
      diff --git a/docs/0.7.0/components/fog.html b/docs/0.7.0/components/fog.html index 7b8d23e0f..b640dc09d 100644 --- a/docs/0.7.0/components/fog.html +++ b/docs/0.7.0/components/fog.html @@ -1100,7 +1100,7 @@

      The fog component obscures entities in fog given distance from the camera. The -fog component applies only to the <a-scene> element.

      +fog component applies only to the <a-scene> element.

      Example

      <a-scene fog="type: linear; color: #AAA"></a-scene>

      Properties

      Given the fog distribution type, different properties will apply.

      diff --git a/docs/0.7.0/components/gearvr-controls.html b/docs/0.7.0/components/gearvr-controls.html index 50b85466e..a1ecb96ae 100644 --- a/docs/0.7.0/components/gearvr-controls.html +++ b/docs/0.7.0/components/gearvr-controls.html @@ -1100,7 +1100,7 @@

      The gearvr-controls component interfaces with the Samsung/Oculus Gear VR controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Gear VR controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

      Example

      <!-- Match Gear VR controller if present, regardless of hand. -->
      <a-entity gearvr-controls></a-entity>

      <!-- Match Gear VR controller if present and for specified hand. -->
      <a-entity gearvr-controls="hand: left"></a-entity>
      <a-entity gearvr-controls="hand: right"></a-entity>
      diff --git a/docs/0.7.0/components/geometry.html b/docs/0.7.0/components/geometry.html index 5f28c9067..f85f26918 100644 --- a/docs/0.7.0/components/geometry.html +++ b/docs/0.7.0/components/geometry.html @@ -1103,7 +1103,7 @@

      property defines the general shape. Geometric primitives, in computer graphics, are irreducible basic shapes. A material component is commonly defined to provide a appearance alongside the shape to create a complete mesh.

      -
      +

      Base Properties

      Every geometry type will have these properties:

      @@ -1615,7 +1615,7 @@ 

      AFRAME.registerGeometry('box', {
        schema: {
          depth: {default: 1, min: 0},
          height: {default: 1, min: 0},
          width: {default: 1, min: 0},
          segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
        },

        init: function (data) {
          this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
        }
      });

      Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then we need to create the geometry and set on this.geometry through the init lifecycle method.

      When a geometry component sets its primitive property to the custom geometry diff --git a/docs/0.7.0/components/gltf-model.html b/docs/0.7.0/components/gltf-model.html index 234e0ad45..007fa9246 100644 --- a/docs/0.7.0/components/gltf-model.html +++ b/docs/0.7.0/components/gltf-model.html @@ -1111,9 +1111,9 @@

      NOTE: A-Frame supports glTF 2.0. For models using older versions of the glTF format, use gltf-model-legacy from donmccurdy/aframe-extras.

      -
      + -

      Why use glTF?

      In comparison to the older OBJ format, which supports only +

      Why use glTF?

      In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features. In addition to all of the above, glTF offers:

        @@ -1124,7 +1124,7 @@

        COLLADA, the supported features are very +

        In comparison to COLLADA, the supported features are very similar. However, because glTF focuses on providing a “transmission format” rather than an editor format, it is more interoperable with web technologies. By analogy, the .PSD (Adobe Photoshop) format is helpful for editing 2D images, diff --git a/docs/0.7.0/components/hand-controls.html b/docs/0.7.0/components/hand-controls.html index 5547c4775..c601cfd72 100644 --- a/docs/0.7.0/components/hand-controls.html +++ b/docs/0.7.0/components/hand-controls.html @@ -1100,8 +1100,8 @@

        The hand-controls component provides tracked hands (using a prescribed model) -with animated gestures. hand-controls wraps the vive-controls and -oculus-touch-controls which in turn wrap the tracked-controls +with animated gestures. hand-controls wraps the vive-controls and +oculus-touch-controls which in turn wrap the tracked-controls component. By specifying just hand-controls, we have something that works well with both Vive and Rift. The component gives extra events and handles hand animations and poses.

        diff --git a/docs/0.7.0/components/keyboard-shortcuts.html b/docs/0.7.0/components/keyboard-shortcuts.html index f14305417..5756edb6e 100644 --- a/docs/0.7.0/components/keyboard-shortcuts.html +++ b/docs/0.7.0/components/keyboard-shortcuts.html @@ -1100,7 +1100,7 @@

        The keyboard-shortcuts component toggles global keyboard shortcuts. The -keyboard-shortcuts component applies only to the <a-scene> element.

        +keyboard-shortcuts component applies only to the <a-scene> element.

        Example

        <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

        Properties

        diff --git a/docs/0.7.0/components/laser-controls.html b/docs/0.7.0/components/laser-controls.html index 5385189c8..dbaf93a4c 100644 --- a/docs/0.7.0/components/laser-controls.html +++ b/docs/0.7.0/components/laser-controls.html @@ -1112,17 +1112,17 @@

        configures other components, rather than implementing any logic itself. Under the hood, laser-controls sets all of the tracked controller components:

        These controller components get activated if its respective controller is connected and detected via the Gamepad API. Then the model of the actual -controller is used. laser-controls then configures the cursor +controller is used. laser-controls then configures the cursor component for listen to the appropriate events and configures the -raycaster component to draw the laser.

        +raycaster component to draw the laser.

        When the laser intersects with an entity, the length of the line gets truncated to the distance to the intersection point.

        Example

        <a-entity laser-controls="hand: left"></a-entity>
        @@ -1139,11 +1139,11 @@

        left or right. -

        Customizing the Raycaster

        Configure the raycaster properties.

        +

        Customizing the Raycaster

        Configure the raycaster properties.

        For example:

        <a-entity laser-controls raycaster="objects: .links; far: 5"></a-entity>
        -

        Customizing the Line

        See Raycaster: Customizing the Line.

        +

        Customizing the Line

        See Raycaster: Customizing the Line.

        For example:

        <a-entity laser-controls line="color: red; opacity: 0.75"></a-entity>
        diff --git a/docs/0.7.0/components/light.html b/docs/0.7.0/components/light.html index 34e773681..97da2b723 100644 --- a/docs/0.7.0/components/light.html +++ b/docs/0.7.0/components/light.html @@ -1114,7 +1114,7 @@

        To manually disable the defaults, without adding other lights:

        <a-scene light="defaultLightsEnabled: false">
          <!-- ... -->
        </a-scene>
        -
        +

        Properties

        All light types support a few basic properties:

        @@ -1256,7 +1256,7 @@

        Spot

        Sp

        Configuring Shadows

        A-Frame includes support for realtime shadow rendering. With proper configuration, objects (both moving or stationary) will cast shadows adding depth and realism to a scene. Since shadows come with many properties, it -is very helpful to use the A-Frame Inspector to configure shadows

        +is very helpful to use the A-Frame Inspector to configure shadows

        Light types that support shadows (point, spot, and directional) include additional properties:

        diff --git a/docs/0.7.0/components/line.html b/docs/0.7.0/components/line.html index 392538d0a..b862bc284 100644 --- a/docs/0.7.0/components/line.html +++ b/docs/0.7.0/components/line.html @@ -1101,8 +1101,8 @@

        The line component draws a line given a start coordinate and end coordinate using THREE.Line.

        -

        The raycaster component uses the line component for its showLine -property, which is then used by the laser-controls component.

        +

        The raycaster component uses the line component for its showLine +property, which is then used by the laser-controls component.

        Example

        <a-entity line="start: 0, 1, 0; end: 2 0 -5; color: red"
                  line__2="start: -2, 4, 5; end: 0 4 -3; color: green"></a-entity>

        Note an entity can have multiple lines. The line mesh is set as line or diff --git a/docs/0.7.0/components/look-controls.html b/docs/0.7.0/components/look-controls.html index 8f812c30e..9c3f4d31d 100644 --- a/docs/0.7.0/components/look-controls.html +++ b/docs/0.7.0/components/look-controls.html @@ -1105,7 +1105,7 @@

      • Rotates the entity when we click-drag mouse.
      • Rotates the entity when we touch-drag the touchscreen.

      -

      Example

      The look-controls component is usually used alongside the camera +

      Example

      The look-controls component is usually used alongside the camera component.

      <a-entity camera look-controls></a-entity>
      diff --git a/docs/0.7.0/components/material.html b/docs/0.7.0/components/material.html index a86d567d6..00b4a3b44 100644 --- a/docs/0.7.0/components/material.html +++ b/docs/0.7.0/components/material.html @@ -1100,11 +1100,11 @@

      The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

      We can register custom materials to extend the material component to provide a wide range of visual effects.

      -
      +

      Example

      Defining a red material using the default standard material:

      <a-entity geometry="primitive: box" material="color: red"></a-entity>
      @@ -1290,7 +1290,7 @@

      fog. +Whether or not material is affected by fog. true @@ -1407,7 +1407,7 @@

      fog. +Whether or not material is affected by fog. true @@ -1443,7 +1443,7 @@

      Textures

      To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

      +asset management system:

      <a-scene>
        <a-assets>
          <img id="my-texture" src="texture.png">
        </a-assets>

        <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
      </a-scene>

      src can also be an inline URL. Note that we do not get browser caching or diff --git a/docs/0.7.0/components/obj-model.html b/docs/0.7.0/components/obj-model.html index d06909a80..9ee160e98 100644 --- a/docs/0.7.0/components/obj-model.html +++ b/docs/0.7.0/components/obj-model.html @@ -1117,7 +1117,7 @@

      mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

      Events

      @@ -1135,7 +1135,7 @@

      EventsLoading Inline

      We can also load assets by specifying the path directly within url(). Note this is less performant than going through the asset management system.

      <a-entity obj-model="obj: url(/path/to/tree.obj); mtl: url(/path/to/tree.mtl)"></a-entity>
      -

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      +

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      Additional Resources

      We can find and download models on the web to drop into our scenes:

      • Sketchup’s 3D Warehouse - Repository of models.
        • diff --git a/docs/0.7.0/components/oculus-touch-controls.html b/docs/0.7.0/components/oculus-touch-controls.html index 2f4211bc2..0b4a6c017 100644 --- a/docs/0.7.0/components/oculus-touch-controls.html +++ b/docs/0.7.0/components/oculus-touch-controls.html @@ -1100,7 +1100,7 @@

        The oculus-touch-controls component interfaces with the Oculus Touch controllers. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.

        Example

        <a-entity oculus-touch-controls="hand: left"></a-entity>
        <a-entity oculus-touch-controls="hand: right"></a-entity>
        diff --git a/docs/0.7.0/components/raycaster.html b/docs/0.7.0/components/raycaster.html index dc9a382c0..067677ab4 100644 --- a/docs/0.7.0/components/raycaster.html +++ b/docs/0.7.0/components/raycaster.html @@ -1107,7 +1107,7 @@

        checks for intersections at a certain interval against a list of objects, and will emit events on the entity when it detects intersections or clearing of intersections (i.e., when the raycaster is no longer intersecting an entity).

        -

        The cursor component and laser-controls components +

        The cursor component and laser-controls components both build on top of the raycaster component.

        Example

        <a-entity id="player" collider-check>
          <a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
        </a-entity>
        <a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
        @@ -1158,7 +1158,7 @@

        showLine -Whether or not to display the raycaster visually with the line component. +Whether or not to display the raycaster visually with the line component. false @@ -1249,7 +1249,7 @@

        Customizing the Line

        If showLine is set to true, the raycaster will configure the line given the raycaster’s origin, direction, and far properties. To customize the line -appearance provided by the showLine: true property, we configure the line +appearance provided by the showLine: true property, we configure the line component:

        <a-entity raycaster="showLine: true; far: 100" line="color: orange; opacity: 0.5"></a-entity>
        diff --git a/docs/0.7.0/components/shadow.html b/docs/0.7.0/components/shadow.html index a1f840366..66e654ea4 100644 --- a/docs/0.7.0/components/shadow.html +++ b/docs/0.7.0/components/shadow.html @@ -1109,7 +1109,7 @@

        Examp

        IMPORTANT: Adding the shadow component alone is not enough to display shadows in your scene. We must have at least one light with castShadow: true enabled. Additionally, the light’s shadow camera (used for depth -projection) usually must be configured correctly. Refer to the light +projection) usually must be configured correctly. Refer to the light component for more information.

        Properties

        diff --git a/docs/0.7.0/components/sound.html b/docs/0.7.0/components/sound.html index 55f8d3187..ad84cf96e 100644 --- a/docs/0.7.0/components/sound.html +++ b/docs/0.7.0/components/sound.html @@ -1101,7 +1101,7 @@

        The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the -components-position.

        +components-position.

        NOTE: Playing sound on iOS — in any browser — requires a physical user interaction. This is a browser limitation, and internal A-Frame events (like fusing cursors) do diff --git a/docs/0.7.0/components/stats.html b/docs/0.7.0/components/stats.html index 44587adf4..43d31f951 100644 --- a/docs/0.7.0/components/stats.html +++ b/docs/0.7.0/components/stats.html @@ -1100,7 +1100,7 @@

        The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

        +component applies only to the <a-scene> element.

        Example

        <a-scene stats></a-scene>

        Metrics

          diff --git a/docs/0.7.0/components/text.html b/docs/0.7.0/components/text.html index 55ba54720..184c12832 100644 --- a/docs/0.7.0/components/text.html +++ b/docs/0.7.0/components/text.html @@ -1101,7 +1101,7 @@

          The text component renders signed distance field (SDF) font text.

          Example Image

          -
          +

          Introduction

          Note that rendering text in 3D is hard. In 2D web development, text is the most basic thing because the browser’s renderer and layout engine handles @@ -1328,8 +1328,8 @@

          SizingChange the width.
        • Change the wrapCount (roughly how many characters to fit inside the given width).
        • Change wrapPixels.
          • -
        • Change the scale component.
          • -
        • Position the text closer or farther away.
          • +
        • Change the scale component.
          • +
        • Position the text closer or farther away.

        Sizing

        Text can be wrapped by specifying width in A-Frame units.

        diff --git a/docs/0.7.0/components/tracked-controls.html b/docs/0.7.0/components/tracked-controls.html index da47130d8..fb0147a76 100644 --- a/docs/0.7.0/components/tracked-controls.html +++ b/docs/0.7.0/components/tracked-controls.html @@ -1101,12 +1101,12 @@

        The tracked-controls component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is -abstracted by the hand-controls component as well as the -vive-controls, oculus-touch-controls, -windows-motion-controls, and daydream-controls +abstracted by the hand-controls component as well as the +vive-controls, oculus-touch-controls, +windows-motion-controls, and daydream-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events. For non-6DOF controllers -such as daydream-controls, a primitive arm model is used to emulate +such as daydream-controls, a primitive arm model is used to emulate positional data.

        Example

        Note that due to recent browser-specific changes, Vive controllers may be returned by the Gamepad API with id values of either “OpenVR Gamepad” or “OpenVR Controller”, diff --git a/docs/0.7.0/components/vive-controls.html b/docs/0.7.0/components/vive-controls.html index b63e8b5cb..04d90e45f 100644 --- a/docs/0.7.0/components/vive-controls.html +++ b/docs/0.7.0/components/vive-controls.html @@ -1100,7 +1100,7 @@

        The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

        Example

        <a-entity vive-controls="hand: left"></a-entity>
        <a-entity vive-controls="hand: right"></a-entity>
        diff --git a/docs/0.7.0/components/vr-mode-ui.html b/docs/0.7.0/components/vr-mode-ui.html index ef65b6bef..dd4383cef 100644 --- a/docs/0.7.0/components/vr-mode-ui.html +++ b/docs/0.7.0/components/vr-mode-ui.html @@ -1101,7 +1101,7 @@

        The vr-mode-ui component toggles UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only -to the <a-scene> element.

        +to the <a-scene> element.

        Example

        <a-scene vr-mode-ui="enabled: false"></a-scene>

        Properties

        diff --git a/docs/0.7.0/components/wasd-controls.html b/docs/0.7.0/components/wasd-controls.html index 15a883ec7..b700efcf3 100644 --- a/docs/0.7.0/components/wasd-controls.html +++ b/docs/0.7.0/components/wasd-controls.html @@ -1100,7 +1100,7 @@

        The wasd-controls component controls an entity with the WASD or arrow keyboard -keys. The wasd-controls component is commonly attached to an entity with the camera +keys. The wasd-controls component is commonly attached to an entity with the camera component.

        Example

        <a-entity camera look-controls wasd-controls></a-entity>
        diff --git a/docs/0.7.0/components/windows-motion-controls.html b/docs/0.7.0/components/windows-motion-controls.html index 3e61908cc..a2621f931 100644 --- a/docs/0.7.0/components/windows-motion-controls.html +++ b/docs/0.7.0/components/windows-motion-controls.html @@ -1101,7 +1101,7 @@

        The windows-motion-controls component 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 +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.)

        Example

        <a-entity windows-motion-controls="hand: left"></a-entity>
        <a-entity windows-motion-controls="hand: right"></a-entity>
        diff --git a/docs/0.7.0/core/animations.html b/docs/0.7.0/core/animations.html index 676062cd8..d28d949c4 100644 --- a/docs/0.7.0/core/animations.html +++ b/docs/0.7.0/core/animations.html @@ -1113,7 +1113,7 @@

        the animation, and loops indefinitely.

        <a-entity>
          <a-entity position="5 0 0"></a-entity>
          <a-animation attribute="rotation"
                       dur="10000"
                       fill="forwards"
                       to="0 360 0"
                       repeat="indefinite"></a-animation>
        </a-entity>
        -
        +

        Attributes

        Here is an overview of animation attributes. We’ll go into more detail below.

        diff --git a/docs/0.7.0/core/asset-management-system.html b/docs/0.7.0/core/asset-management-system.html index 2559bcfdf..da992316c 100644 --- a/docs/0.7.0/core/asset-management-system.html +++ b/docs/0.7.0/core/asset-management-system.html @@ -1115,7 +1115,7 @@

        The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

        -
        +

        Example

        We can define our assets in <a-assets> and point to those assets from our entities using selectors:

        diff --git a/docs/0.7.0/core/component.html b/docs/0.7.0/core/component.html index e1b115843..8615c433f 100644 --- a/docs/0.7.0/core/component.html +++ b/docs/0.7.0/core/component.html @@ -1099,7 +1099,7 @@

        -

        In the entity-component-system pattern, a component is a reusable and +

        In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

        In A-Frame, components modify entities which are 3D objects in the scene. We @@ -1113,7 +1113,7 @@

        Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

        -
        +

        Component HTML Form

        A component holds a bucket of data in the form of one or more component properties. Components use this data to modify entities. Consider an engine @@ -1262,7 +1262,7 @@

        Definition Lifecycle Handler Methods

        With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the shape of the data, the lifecycle handler methods use the data to modify the entity. The handlers will usually interact with the -Entity API.

        +Entity API.

        methodsimage Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

        Overview of Methods

        @@ -1315,11 +1315,11 @@

        entity as an HTML element. +

        - + @@ -1356,7 +1356,7 @@

        diffing the current +

        Granular modifications to the entity can be done by diffing the current dataset (this.data) with the previous dataset before the update (oldData).

        A-Frame calls .update() both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The @@ -1364,7 +1364,7 @@

        visible component’s update sets the visibility of +

        For example, the visible component’s update sets the visibility of the entity.

        Reference to the entity as an HTML element.
        this.el.sceneElReference to the scene as an HTML element.Reference to the scene as an HTML element.
        this.id
        AFRAME.registerComponent('visible', {
          /**
           * this.el is the entity element.
           * this.el.object3D is the three.js object of the entity.
           * this.data is the component's property or properties.
           */
          update: function (oldData) {
            this.el.object3D.visible = this.data;
          }
          // ...
        });
        @@ -1379,7 +1379,7 @@

        Remove, undo, or clean up all of the component’s modifications to the entity.
      • Detach event listeners.

      -

      For example, when the light component is removed, the light component +

      For example, when the light component is removed, the light component will remove the light object that it had previously set on the entity, thus removing it from the scene.

      AFRAME.registerComponent('light', {
        // ...
        remove: function () {
          this.el.removeObject3D('light');
        }
        // ...
      });
      @@ -1401,7 +1401,7 @@

      time) and the time difference in milliseconds since the last frame (timeDelta). These can be used for interpolation or to only run parts of the tick handler on a set interval.

      -

      For example, the tracked controls component will progress +

      For example, the tracked controls component will progress the controller’s animations, update the controller’s position and rotation, and check for button presses.

      AFRAME.registerComponent('tracked-controls', {
        // ...
        tick: function (time, timeDelta) {
          this.updateMeshAnimation();
          this.updatePose();
          this.updateButtons();
        }
        // ...
      });
      @@ -1418,7 +1418,7 @@

      .
    • Remove event listeners.
    • Remove any chances of dynamic behavior.

    -

    For example, the sound component will pause the sound and remove an +

    For example, the sound component will pause the sound and remove an event listener that would have played a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      pause: function () {
        this.pauseSound();
        this.removeEventListener();
      }
      // ...
    });
    @@ -1433,7 +1433,7 @@

    .pla
    • Add event listeners.
    -

    For example, the sound component will play the sound and update the +

    For example, the sound component will play the sound and update the event listener that would play a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      play: function () {
        if (this.data.autoplay) { this.playSound(); }
        this.updateEventListener();
      }
      // ...
    });
    @@ -1443,7 +1443,7 @@

  • Dynamically update or extend the schema, usually depending on the value of a property.
    • -

    For example, the geometry component checks if the primitive +

    For example, the geometry component checks if the primitive property changed to determine whether to update the schema for a different type of geometry:

    AFRAME.registerComponent('geometry', {
      // ...
      updateSchema: (newData) {
        if (newData.primitive !== this.data.primitive) {
          this.extendSchema(GEOMETRIES[newData.primitive].schema);
        }
      }
      // ...
    });
    @@ -1485,7 +1485,7 @@ 

    document.querySelector('[geometry]').components.geometry.flushToDOM();
    -

    Read more about component-to-DOM serialization.

    +

    Read more about component-to-DOM serialization.

    Accessing a Component’s Members and Methods

    A component’s members and methods can be accessed through the entity from the .components object. Look up the component from the entity’s map of components, and we’ll have access to the component’s internals. Consider this diff --git a/docs/0.7.0/core/entity.html b/docs/0.7.0/core/entity.html index 5983d4d5c..1be846f50 100644 --- a/docs/0.7.0/core/entity.html +++ b/docs/0.7.0/core/entity.html @@ -1100,23 +1100,23 @@

    A-Frame represents an entity via the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

    -

    In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

    -
    +

    In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

    +

    Example

    Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

    <a-entity>

    We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

    +give it shape and appearance, we can attach the geometry and +material components:

    <a-entity geometry="primitive: box" material="color: red">
    -

    Or to make it emit light, we can further attach the light component:

    +

    Or to make it emit light, we can further attach the light component:

    <a-entity geometry="primitive: box" material="color: red"
              light="type: point; intensity: 2.0">

    Retrieving an Entity

    We can simply retrieve an entity using DOM APIs.

    @@ -1148,7 +1148,7 @@

    object3DMap

    An entity’s object3DMap is an object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that components have set.

    -

    For an entity with a geometry and light components +

    For an entity with a geometry and light components attached, object3DMap might look like:

    {
      light: <THREE.Light Object>,
      mesh: <THREE.Mesh Object>
    }
    @@ -1162,7 +1162,7 @@

    Metho 
    entity.addEventListener('stateadded', function (evt) {
      if (evt.detail.state === 'selected') {
        console.log('Entity now selected!');
      }
    });

    entity.addState('selected');
    entity.is('selected');  // >> true

    emit (name, detail, bubbles)

    emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

    +trigger an animation:

    // <a-entity>
    //   <a-animation attribute="rotation" begin="rotate" to="0 360 0"></a-animation>
    // </a-entity>
    entity.emit('rotate');

    We can also pass event detail or data as the second argument:

    @@ -1173,7 +1173,7 @@ 

    entity.emit('sink', null, false);

    flushToDOM (recursive)

    flushToDOM will manually serialize an entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

    +Read more about component-to-DOM serialization.

    getAttribute (componentName)

    getAttribute retrieves parsed component data (including mixins and defaults).

    // <a-entity geometry="primitive: box; width: 3">

    entity.getAttribute('geometry');
    // >> {primitive: "box", depth: 2, height: 2, width: 3, ...}

    entity.getAttribute('geometry').primitive;
    // >> "box"

    entity.getAttribute('geometry').height;
    // >> 2

    entity.getAttribute('position');
    // >> {x: 0, y: 0, z: 0}
    @@ -1206,20 +1206,20 @@

    pa entity will call pause() on its child entities when we pause an entity.

    // <a-entity id="spinning-jumping-ball">
    entity.pause();
    -

    For example, the look-controls component on +

    For example, the look-controls component on pause will remove event handlers that listen for input.

    play ()

    play() will start any dynamic behavior as defined by animations and components. This is automatically called when the DOM attaches an entity. When an entity play(), the entity calls play() on its child entities.

    entity.pause();
    entity.play();
    -

    For example, the sound component on play will begin playing the sound.

    +

    For example, the sound component on play will begin playing the sound.

    setAttribute (componentName, value, [propertyValue | clobber])

    If componentName is not the name of a registered component or the component is a single-property component, setAttribute behaves as it normally would:

    entity.setAttribute('visible', false);

    Though if componentName is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    entity.setAttribute('position', { x: 1, y: 2, z: 3 });
    diff --git a/docs/0.7.0/core/globals.html b/docs/0.7.0/core/globals.html index 900af8510..3610276ef 100644 --- a/docs/0.7.0/core/globals.html +++ b/docs/0.7.0/core/globals.html @@ -1111,11 +1111,11 @@

    AComponent -Component prototype. +Component prototype. AEntity -Entity prototype. +Entity prototype. ANode @@ -1123,7 +1123,7 @@

    AScene -Scene prototype. +Scene prototype. components @@ -1139,7 +1139,7 @@

    registerComponent -Function to register a component. +Function to register a component. registerElement @@ -1147,15 +1147,15 @@

    registerGeometry -Function to register a geometry. +Function to register a geometry. registerPrimitive -Function to register a primitive. +Function to register a primitive. registerShader -Function to register a material or shader. +Function to register a material or shader. schema @@ -1179,7 +1179,7 @@

    utils -A-Frame utility modules. +A-Frame utility modules. version diff --git a/docs/0.7.0/core/mixins.html b/docs/0.7.0/core/mixins.html index dac814f6c..b4683c0de 100644 --- a/docs/0.7.0/core/mixins.html +++ b/docs/0.7.0/core/mixins.html @@ -1101,7 +1101,7 @@

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    <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-mixin>
      </a-assets>

      <a-entity mixin="red cube"></a-entity>
      <a-entity mixin="blue cube"></a-entity>
    </a-scene>
    @@ -1111,7 +1111,7 @@

    the entities above expand to:

    <a-entity material="color: red" geometry="primitive: box"></a-entity>
    <a-entity material="color: blue" geometry="primitive: box"></a-entity>
    -
    +

    Merging Component Properties

    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="height: 10"></a-mixin>
        <a-mixin id="wide" geometry="width: 10"></a-mixin>
      </a-assets>

      <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
    </a-scene>
    diff --git a/docs/0.7.0/core/scene.html b/docs/0.7.0/core/scene.html index 4e42c1408..4e60e0467 100644 --- a/docs/0.7.0/core/scene.html +++ b/docs/0.7.0/core/scene.html @@ -1100,8 +1100,8 @@

    A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

    -

    The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

    +

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    @@ -1112,7 +1112,7 @@

  • Set up webvr-polyfill, VREffect
  • Add UI to Enter VR that calls WebVR API
    • -
    +

    Example

    <a-scene>
      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <a-box src="#texture"></a-box>
    </a-scene>
    @@ -1157,7 +1157,7 @@

    systems -Instantiated systems. +Instantiated systems. time @@ -1213,12 +1213,12 @@

    embedded - Remove fullscreen styles from the canvas. -
  • fog - Add fog.
    • -
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • -
  • inspector - Inject the A-Frame Inspector.
    • -
  • stats - Toggle performance stats.
    • -
  • vr-mode-ui - Toggle UI for entering and exiting VR.
    • +
  • embedded - Remove fullscreen styles from the canvas.
    • +
  • fog - Add fog.
    • +
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • +
  • inspector - Inject the A-Frame Inspector.
    • +
  • stats - Toggle performance stats.
    • +
  • vr-mode-ui - Toggle UI for entering and exiting VR.

    • Running Content Scripts on the Scene

    The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

    AFRAME.registerComponent('do-something', {
      init: function () {
        var sceneEl = this.el;
      }
    });
    diff --git a/docs/0.7.0/core/systems.html b/docs/0.7.0/core/systems.html index 7abdee17d..f91e79bf9 100644 --- a/docs/0.7.0/core/systems.html +++ b/docs/0.7.0/core/systems.html @@ -1099,16 +1099,16 @@

    -

    A system, of the entity-component-system pattern, provides global scope, +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -
    + -

    Registering a System

    A system is registered similarly to a component.

    +

    Registering a System

    A system is registered similarly to a component.

    If the system name matches a component name, then the component will have a reference to the system as this.system:

    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);
      }
    });
    @@ -1130,7 +1130,7 @@

    schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data.

    Methods

    A system, like a component, defines lifecycle handlers. It can also define diff --git a/docs/0.7.0/core/utils.html b/docs/0.7.0/core/utils.html index b8a4ca5fc..fb41f64c9 100644 --- a/docs/0.7.0/core/utils.html +++ b/docs/0.7.0/core/utils.html @@ -1100,7 +1100,7 @@

    A-Frame’s utility modules are public through AFRAME.utils.

    -
    +

    AFRAME.utils.coordinates

    Module for handling vec3 and vec4 types.

    .isCoordinates (value)

    Tests whether a string is a vec3.

    @@ -1112,7 +1112,7 @@

    .stringify (data)

    Stringifies an {x, y, z} vec3 object to an “x y z” string.

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
    // >> "1 2 -3"
    -

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for +

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for return 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.

    @@ -1120,7 +1120,7 @@

    This is useful for components that need a way to reference a property of a multi-property component.

    -

    .setComponentProperty (entity, componentName, value, delimiter)

    Performs like Entity.setAttribute, but with support for setting an +

    .setComponentProperty (entity, componentName, value, delimiter)

    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.

    diff --git a/docs/0.7.0/guides/building-a-360-image-gallery.html b/docs/0.7.0/guides/building-a-360-image-gallery.html index af72582d5..85f039817 100644 --- a/docs/0.7.0/guides/building-a-360-image-gallery.html +++ b/docs/0.7.0/guides/building-a-360-image-gallery.html @@ -1103,23 +1103,23 @@

    Let’s build an interactive gaze-based 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

    -

    This guide will practice three concepts related to entity-component:

    +

    This guide will practice three concepts related to entity-component:

    1. Using the standard components that come with A-Frame.
    2. Using community components from the ecosystem.
    3. Writing custom components to accomplish whatever we want.
    -
    +

    Skeleton

    This is the starting point for our scene:

    <a-scene>
      <a-assets>
        <audio id="click-sound" src="audio/click.ogg"></audio>

        <!-- Images. -->
        <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
        <img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
        <img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
        <img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
        <img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Link we will build. -->
      <a-entity class="link"></a-entity>

      <!-- Camera + Cursor. -->
      <a-camera>
        <a-cursor id="cursor">
          <a-animation begin="click" easing="ease-in" attribute="scale"
                       fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
          <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                       from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
        </a-cursor>
      </a-camera>
    </a-scene>

    We have predefined:

    Using Standard Components

    Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure @@ -1129,19 +1129,19 @@ 

    <a-entity class="link"></a-entity>
    -

    To give our entity shape, we can attach the geometry component, +

    To give our entity shape, we can attach the geometry component, configured to a plane shape. We specify the component data using a syntax that resembles that of inline CSS styles:

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"></a-entity>
    -

    Then to give our entity appearance, we can attach the material +

    Then to give our entity appearance, we can attach the material component. We set shader to flat so the image isn’t affected negatively by lighting. And we set src to #cubes-thumb, a selector to one -of the images defined in the Asset Management System.

    +of the images defined in the Asset Management System.

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: #cubes-thumb"></a-entity>

    We can continue adding features to our entity by plugging in more components. -Let’s attach one more standard component, the sound component. We want +Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1216,15 +1216,15 @@

    Event-Set Component

    Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

    Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We are mimicking CSS :hover states. We can specify event names with _event properties, and the rest of the properties define the -setAttribute calls. Notice that the event-set component can have multiple +setAttribute calls. Notice that the event-set component can have multiple instances:

    <a-assets>
      <!-- ... -->
      <script id="link" type="text/html">
        <a-entity class="link"
          geometry="primitive: plane; height: 1; width: 1"
          material="shader: flat; src: ${thumb}"
          sound="on: click; src: #click-sound"
          event-set__1="_event: mousedown; scale: 1 1 1"
          event-set__2="_event: mouseup; scale: 1.2 1.2 1"
          event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
          event-set__4="_event: mouseleave; scale: 1 1 1"></a-entity>
      </script>
    </a-assets>
    @@ -1235,7 +1235,7 @@

    set-image component on GitHub.

    We want to write the component that fades the sky into a new 360° image -once one of the links are clicked. We’ll call it set-image. The component +once one of the links are clicked. We’ll call it set-image. The component API documentation provides a detailed reference for writing a component. A basic component skeleton might look like:

    Here is the skeleton for our set-image component.

    diff --git a/docs/0.7.0/guides/building-a-basic-scene.html b/docs/0.7.0/guides/building-a-basic-scene.html index b8f1601b2..562baf724 100644 --- a/docs/0.7.0/guides/building-a-basic-scene.html +++ b/docs/0.7.0/guides/building-a-basic-scene.html @@ -1112,7 +1112,7 @@

  • Add text

    • Remix the Basic Guide example on Glitch.

    -
    +

    Starting with HTML

    We start out with a minimal HTML structure:

    <html>
      <head>
        <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
        </a-scene>
      </body>
    </html>
    @@ -1121,7 +1121,7 @@

    before <a-scene> because A-Frame registers custom HTML elements which must be defined before <a-scene> is attached or else <a-scene> will do nothing.

    -

    Next, we include <a-scene> in the <body>. <a-scene> will contain every +

    Next, we include <a-scene> in the <body>. <a-scene> will contain every entity in our scene. <a-scene> handles all of the setup that is required for 3D: setting up WebGL, the canvas, camera, lights, renderer, render loop as well as out of the box WebVR support on platforms such as HTC Vive, Oculus Rift, @@ -1132,7 +1132,7 @@

    <a-box>‘s documentation for +

    Here we define the color <a-box>, see <a-box>‘s documentation for the more attributes (e.g., width, height, depth).

    boximage Image by Ruben Mueller from vrjump.de

    @@ -1140,13 +1140,13 @@

    <a-entity> with the geometry and -material components:

    +underneath <a-box> is <a-entity> with the geometry and +material components:

    <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>
    -

    However, because the default camera and the box are positioned at the default +

    However, because the default camera and the box are positioned at the default position at the 0 0 0 origin, we won’t be able to see the box unless we move -it. We can do this by using the position component to transform the +it. We can do this by using the position component to transform the box in 3D space.

    Transforming an Entity in 3D

    Let’s first go over 3D space. A-Frame uses a right-handed coordinate system. With the default camera direction: positive X-axis extends right, positive @@ -1165,7 +1165,7 @@

    To translate, rotate, and scale the box, we can change the -position, rotation, and scale components. +position, rotation, and scale components. Let’s first apply the rotation and scale components:

    <a-scene>
      <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
    @@ -1222,7 +1222,7 @@ 

    <a-scene>
      <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <!-- Out of the box environment! -->
      <a-entity environment="preset: forest; numDressing: 500"></a-entity>
    </a-scene>

    Applying an Image Texture

    -

    Make sure you’re serving your HTML using a local server +

    Make sure you’re serving your HTML using a local server for textures to load properly.

    We can apply an image texture to the box with an image, video, or <canvas> @@ -1234,7 +1234,7 @@

    -

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The +

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The asset management system makes it easier for the browser to cache assets (e.g., images, videos, models) and A-Frame will make sure all of the assets are fetched before rendering.

    @@ -1254,7 +1254,7 @@

    Creating a Custom Environment (Optional)

    Previously we had the environment component generate the environment. Though it’s good to know a bit on creating a basic environment for learning purposes.

    -

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. +

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. <a-sky>, which is a material applied to the inside of a large sphere, can be a flat color, a 360° image, or a 360° video. For example, a dark gray background would be:

    @@ -1264,7 +1264,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>
    </a-scene>
    -

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are +

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are oriented parallel to the XY axis. To make it parallel to the ground, we need to orient it along the XZ axis. We can do so by rotating the plane negative 90° on the X-axis.

    @@ -1282,7 +1282,7 @@ 

    <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
      repeat="10 10"></a-plane>
    -

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default +

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default if we don’t specify any lights, A-Frame adds an ambient light and a directional light. If A-Frame didn’t add lights for us, the scene would be black. Once we add lights of our own, however, the default lighting setup is removed and @@ -1300,7 +1300,7 @@

    Animation Component.

    -

    We can add animations to the box using A-Frame’s built-in animation +

    We can add animations to the box using A-Frame’s built-in animation system. Animations interpolate or tween a value over time. We can place an <a-animation> element as a child of the entity. Let’s have the box hover up and down to add some motion to the scene.

    @@ -1326,19 +1326,19 @@

    Given that many developers currently do not have proper VR hardware with controllers, we’ll focus this section on using basic mobile and desktop inputs -with the built-in cursor component. The cursor component by default provides +with the built-in cursor component. The cursor component by default provides the ability to “click” on entities by staring or gazing at them on mobile, or on desktop, looking at an entity and click the mouse. But know that the cursor component is just one way to add interactions, things open up if we have access to actual controllers.

    -

    To have a visible cursor fixed to the camera, we place the cursor as a child +

    To have a visible cursor fixed to the camera, we place the cursor as a child of the camera as explained above in Parent and Child Transforms.

    Since we didn’t specifically define a camera, A-Frame included a default camera for us. But since we need to add a cursor as a child of the camera, we will -need to now define <a-camera> containing <a-cursor>:

    +need to now define <a-camera> containing <a-cursor>:

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2">
        <a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000"
          repeat="indefinite"></a-animation>
      </a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
    -

    If we check the documentation of the cursor component that +

    If we check the documentation of the cursor component that <a-cursor> wraps, we see that it emits hover events such as mouseenter, mouseleave as well as click.

    Event Listener Component (Intermediate)

    One way to manually handle the cursor events is to add an event listener with @@ -1346,7 +1346,7 @@

    Animating on Events below.

    In JavaScript, we grab the box with querySelector, use -addEventListener, and then setAttribute +addEventListener, and then setAttribute to make the box grow its scale when its hovered over. Note that A-Frame adds features to setAttribute to work with multi-property components. We can pass a full {x, y, z} object as the second argument.

    @@ -1381,7 +1381,7 @@ 

    <a-scene>
      <!-- ... -->
      <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
        position="-3 1 -4"></a-sound>
      <!-- ... -->
    </a-scene>
    -

    Adding Text

    A-Frame comes with a text component. There are several ways to render +

    Adding Text

    A-Frame comes with a text component. There are several ways to render text, each with their advantages and disadvantages, A-Frame comes with an SDF text implementation using three-bmfont-text that is relatively sharp and performant.

    diff --git a/docs/0.7.0/guides/building-a-minecraft-demo.html b/docs/0.7.0/guides/building-a-minecraft-demo.html index 10eb5a561..dee8d7354 100644 --- a/docs/0.7.0/guides/building-a-minecraft-demo.html +++ b/docs/0.7.0/guides/building-a-minecraft-demo.html @@ -1105,7 +1105,7 @@

    Let’s build a basic Minecraft (voxel builder) demo that targets room scale VR with controllers (e.g., Vive, Rift). The example will be minimally usable on mobile and desktop.

    -
    +

    Example Skeleton

    We’ll start off with this skeleton HTML:

    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>

    <body>
      <a-scene>
      </a-scene>
    </body>
    diff --git a/docs/0.7.0/guides/building-with-magicavoxel.html b/docs/0.7.0/guides/building-with-magicavoxel.html index 7ae91acf0..7ad092223 100644 --- a/docs/0.7.0/guides/building-with-magicavoxel.html +++ b/docs/0.7.0/guides/building-with-magicavoxel.html @@ -1103,7 +1103,7 @@

    3D scenes and models using voxels (i.e., blocks). MagicaVoxel makes modeling super easy, similar to building in Minecraft.

    magicavoxel

    -
    +

    Installation

    MagicaVoxel works on Windows and OS X. On the MagicaVoxel homepage, click the Download button and install the application:

    diff --git a/docs/0.7.0/introduction/best-practices.html b/docs/0.7.0/introduction/best-practices.html index 47ea8bf02..31e425870 100644 --- a/docs/0.7.0/introduction/best-practices.html +++ b/docs/0.7.0/introduction/best-practices.html @@ -1101,23 +1101,23 @@

    A-Frame

    Some best practices for the framework:

      -
    • The core structure of A-Frame is entity-component (ECS). Place and +
    • The core structure of A-Frame is entity-component (ECS). Place and structure application code within purely A-Frame components for reusability, modularity, composability, decoupling, encapsulation, declarativeness, and testability. It’s okay to start out at first using content scripts (<script>), but look to move towards components.
      • -
    • Mixins and templating are useful to reuse and reduce +
    • Mixins and templating are useful to reuse and reduce repeated HTML.

    Performance

    Performance is critical in VR. A high framerate must be maintained in order for people to feel comfortable and as if they were in another place. Here are some ways to help improve performance of an A-Frame scene:

      -
    • Use recommended hardware specifications.
      • -
    • Use the stats component to keep an eye on various metrics (FPS, +
    • Use recommended hardware specifications.
      • +
    • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities). We want to maximize FPS and minimize everything else.
      • -
    • Make use of the asset management system to benefit from browser +
    • Make use of the asset management system to benefit from browser caching and preloading. Trying to fetch assets while rendering is slower than fetching all assets before rendering.
    • If using models, look to bake your lights into textures rather than relying diff --git a/docs/0.7.0/introduction/developing-with-threejs.html b/docs/0.7.0/introduction/developing-with-threejs.html index 60d604bbb..2912b0625 100644 --- a/docs/0.7.0/introduction/developing-with-threejs.html +++ b/docs/0.7.0/introduction/developing-with-threejs.html @@ -1129,7 +1129,7 @@

      And every A-Frame entity also has a reference to <a-scene> via .sceneEl:

      document.querySelector('a-entity').sceneEl.object3D;  // THREE.Scene
      -

      From a component, we access the scene through its entity +

      From a component, we access the scene through its entity (i.e., this.el):

      AFRAME.registerComponent('foo', {
        init: function () {
          var scene = this.el.sceneEl.object3D;  // THREE.Scene
        }
      });
      diff --git a/docs/0.7.0/introduction/entity-component-system.html b/docs/0.7.0/introduction/entity-component-system.html index 9499d75d4..77188a6d7 100644 --- a/docs/0.7.0/introduction/entity-component-system.html +++ b/docs/0.7.0/introduction/entity-component-system.html @@ -1128,20 +1128,20 @@

      A well-known game engine implementing ECS is Unity. Although there are pain points in cross-entity communication. But we’ll see how A-Frame, the DOM, and declarative HTML really make ECS shine.

      -
      +

      Concept

      ECS Minecraft

      A basic definition of ECS involves:

        -
      • Entities are container objects into which components can be +
      • Entities are container objects into which components can be attached. Entities are the base of all objects in the scene. Without components, entities neither do nor render anything, similar to empty <div>s.
        • -
      • Components are reusable modules or data containers that can +
      • Components are reusable modules or data containers that can be attached to entities to provide appearance, behavior, and/or functionality. Components are like plug-and-play for objects. All logic is implemented through components, and we define different types of objects by mixing, matching, and configuring components. Like alchemy!
        • -
      • Systems provide global scope, management, and services for +
      • Systems provide global scope, management, and services for classes of components. Systems are often optional, but we can use them to separate logic and data; systems handle the logic, components act as data containers.
        • @@ -1197,8 +1197,8 @@

        Syntax:) separating property names from property values, and a semicolon (;) separating different property declarations:

        <a-entity ${componentName}="${propertyName1}: ${propertyValue1}; ${propertyName2:}: ${propertyValue2}">

        -

        For example, we have <a-entity> and attach the geometry, material, -light, and position components with various properties and property values:

        +

        For example, we have <a-entity> and attach the geometry, material, +light, and position components with various properties and property values:

        <a-entity geometry="primitive: sphere; radius: 1.5"
                  light="type: point; color: white; intensity: 2"
                  material="color: white; shader: flat; src: glow.jpg"
                  position="0 0 -5"></a-entity>

        Composition

        From there, we could attach more components to add additional appearance, @@ -1249,7 +1249,7 @@

        write an A-Frame +

        We will later go over in detail how to write an A-Frame component. As a preview, the structure of a basic component may look like:

        AFRAME.registerComponent('foo', {
          schema: {
            bar: {type: 'number'},
            baz: {type: 'string'}
          },

          init: function () {
            // Do something when component first attached.
          },

          update: function () {
            // Do something when component's data is updated.
          },

          remove: function () {
            // Do something the component or its entity is detached.
          },

          tick: function (time, timeDelta) {
            // Do something on every scene tick or frame.
          }
        });
        @@ -1274,12 +1274,12 @@

        Higher-Order Components

        Components can set other components on the entity, making them a higher-order or higher-level component in abstraction.

        -

        For example, the cursor component sets and builds on top of the -raycaster component. Or the hand-controls -component sets and builds on top of the vive-controls -component and oculus-touch-controls +

        For example, the cursor component sets and builds on top of the +raycaster component. Or the hand-controls +component sets and builds on top of the vive-controls +component and oculus-touch-controls component which in turn build on top of the -tracked-controls component.

        +tracked-controls component.

        Community Component Ecosystem

        Components can be shared into the A-Frame ecosystem for the community to use. The wonderful thing about A-Frame’s ECS is extensibility. An experienced developer can develop a physics system or graphics shader components, and an diff --git a/docs/0.7.0/introduction/faq.html b/docs/0.7.0/introduction/faq.html index 49614f672..39280ad98 100644 --- a/docs/0.7.0/introduction/faq.html +++ b/docs/0.7.0/introduction/faq.html @@ -1099,7 +1099,7 @@

        -
        +

        How is A-Frame’s performance?

        A-Frame can achieve native-like latency and framerate with proper browsers (e.g., Firefox with WebVR). For example, A-Painter is Tilt @@ -1132,8 +1132,8 @@

        best performance practices and guidelines to get started.

        -

        Why does my asset (e.g., image, video, model) not load?

        First, if you are doing local development, make sure you are using a local +best performance practices and guidelines to get started.

        +

        Why does my asset (e.g., image, video, model) not load?

        First, if you are doing local development, make sure you are using a local server so that asset requests work properly.

        If you are loading the asset from a different domain, make sure that the asset is served with cross-origin resource sharing (CORS) headers. You could @@ -1141,14 +1141,14 @@

        Hosting and Publishing guide for more +

        Read the Hosting and Publishing guide for more information.

        Why is the HTML not updating when I check the browser inspector?

        If you open up your browser’s developer tools, you’ll see that the HTML attribute values are empty.

        HTML

        To improve performance, A-Frame does not update the HTML to save on stringification operations. This also means mutation observations will not -fire. Use the debug component or .flushToDOM methods +fire. Use the debug component or .flushToDOM methods if you need to sync to the DOM.

        Why does my video not play on mobile?

        Mobile browsers have had limitations playing inline video.

        Because of an iOS platform restriction in order to get inline video @@ -1182,7 +1182,7 @@

        Which 3D model formats work?

        The ideal format is the GL Transmission Format glTF (.gltf) since glTF is feature-rich, compact, and efficient. glTF focuses on providing a transmission format rather than an editor format and is more interoperable -with web technologies. Read more about glTF and A-Frame’s glTF +with web technologies. Read more about glTF and A-Frame’s glTF component.

        COLLADA (.dae) is an XML-based format with a rich feature set. COLLADA is more common in comparison to glTF since it is older, but more suited @@ -1247,16 +1247,16 @@

        How is A-Frame different from VRML?

        A-Frame is a JavaScript framework. Unlike VRML, A-Frame is not a 3D file format, markup language, nor a standard. A-Frame embraces the Extensible Web Manifesto. Only look at standardization as winning ideas emerge.

        -

        Technically, A-Frame is an entity-component-system game engine on top of +

        Technically, A-Frame is an entity-component-system game engine on top of three.js. As it is a JavaScript framework, coding is to be expected for more complex applications. Unlike 3D file formats, A-Frame provides power and interactivity via full access to JavaScript, three.js, and Web APIs.

        Does A-Frame support X feature?

        A-Frame ships with a number of components and primitives. Being based on top of -an entity-component-system architecture, if a feature doesn’t exist, you -can write or find a component to enable it. Or if one of +an entity-component-system architecture, if a feature doesn’t exist, you +can write or find a component to enable it. Or if one of the standard components doesn’t fit your use cases, you can copy and modify it.

        -

        Read Where to Find Components for more information.

        +

        Read Where to Find Components for more information.

        Does A-Frame support X library or framework?

        A-Frame is built on top of the DOM so most libraries and frameworks work including:

          @@ -1270,9 +1270,9 @@

          Which headsets, browsers, devices, and platforms does A-Frame support?

          Most of them. Read VR Headsets and WebVE Browsers for more +

          Which headsets, browsers, devices, and platforms does A-Frame support?

          Most of them. Read VR Headsets and WebVE Browsers for more information.

          -

          How can I improve performance?

          Read Best Practices — Performance for more information.

          +

          How can I improve performance?

          Read Best Practices — Performance for more information.

          How can I get in touch with the A-Frame team?

          We try to be responsive and helpful! We love questions, feedback, bug reports, and pull requests:

            diff --git a/docs/0.7.0/introduction/hosting-and-publishing.html b/docs/0.7.0/introduction/hosting-and-publishing.html index 1a2857d11..9b86457da 100644 --- a/docs/0.7.0/introduction/hosting-and-publishing.html +++ b/docs/0.7.0/introduction/hosting-and-publishing.html @@ -1101,7 +1101,7 @@

            This section will show several ways to deploy, host, and publish an A-Frame site and its assets onto the Web for the world to see.

            -
            +

            Publishing a Site

            There are many free services to deploy and host a site. We’ll go over some of the more easy or popular options, but there are certainly other options such @@ -1242,7 +1242,7 @@

            A-Frame Blog.

          Embedding

          If we want to embed an A-Frame scene into the layout of 2D web page, we can use -the embedded component to remove fullscreen styles +the embedded component to remove fullscreen styles and allow us to style the canvas with CSS.

          Note we can only embed one scene at a time into a page. If we need multiple scenes, we can use diff --git a/docs/0.7.0/introduction/html-and-primitives.html b/docs/0.7.0/introduction/html-and-primitives.html index bd68356fc..015838f57 100644 --- a/docs/0.7.0/introduction/html-and-primitives.html +++ b/docs/0.7.0/introduction/html-and-primitives.html @@ -1101,9 +1101,9 @@

          This section will go over the concepts of A-Frame’s primitive elements and their relation to the entity-component framework. If you’re looking for a guide -on using HTML and primitives, check out the Building a Basic Scene +on using HTML and primitives, check out the Building a Basic Scene guide.

          -
          +

          HTML

          A-Frame is based on top of HTML and the DOM using a polyfill for Custom Elements. HTML is the building block of the Web, providing one of the @@ -1137,7 +1137,7 @@

          component data +
        • Map or proxy HTML attributes to component data

        Primitives are similar to prefabs in Unity. Some literature on the entity-component-system pattern refer to them as assemblages. diff --git a/docs/0.7.0/introduction/index.html b/docs/0.7.0/introduction/index.html index ceb68ed60..f3012321d 100644 --- a/docs/0.7.0/introduction/index.html +++ b/docs/0.7.0/introduction/index.html @@ -1105,7 +1105,7 @@ 

        <html>
          <head>
            <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
          </head>
          <body>
            <a-scene>
              <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
              <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
              <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
              <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
              <a-sky color="#ECECEC"></a-sky>
            </a-scene>
          </body>
        </html>
        -

        The Installation page provides more options for getting started with A-Frame. +

        The Installation page provides more options for getting started with A-Frame. To get started learning A-Frame, check out A-Frame School for visual step-by-step lessons to complement the documentation.

        What is A-Frame?

        A-Frame

        @@ -1156,7 +1156,7 @@

        Fe works on standard desktop and smartphones.

        electric_plug Entity-Component Architecture: A-Frame is a powerful three.js framework, providing a declarative, composable, reusable -entity-component structure. HTML is just the tip of the iceberg; +entity-component structure. HTML is just the tip of the iceberg; developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL.

        zap Performance: A-Frame is optimized from the ground up for WebVR. While @@ -1167,7 +1167,7 @@

        Fe

        hammer Tool Agnostic: Since the Web was built on the notion of HTML, A-Frame is compatible with most libraries, frameworks, and tools including React, Preact, Vue.js, d3.js, Ember.js, jQuery.

        -

        mag Visual Inspector: A-Frame provides a handy built-in visual 3D +

        mag Visual Inspector: A-Frame provides a handy built-in visual 3D inspector. Open up any A-Frame scene, hit <ctrl> + <alt> + i, and fly around to peek under the hood!

        Inspector

        diff --git a/docs/0.7.0/introduction/installation.html b/docs/0.7.0/introduction/installation.html index 4cd94d5c2..75c849955 100644 --- a/docs/0.7.0/introduction/installation.html +++ b/docs/0.7.0/introduction/installation.html @@ -1102,7 +1102,7 @@

        This installation section offers several ways to get started with A-Frame, although most methods don’t require any actual installation since A-Frame is primarily HTML and JavaScript.

        -
        +

        Code Editors in the Browser

        The fastest way to start playing from within the browser.

        Remix on Glitch

        Glitch

        diff --git a/docs/0.7.0/introduction/interactions-and-controllers.html b/docs/0.7.0/introduction/interactions-and-controllers.html index 7af9e718d..78dd3977c 100644 --- a/docs/0.7.0/introduction/interactions-and-controllers.html +++ b/docs/0.7.0/introduction/interactions-and-controllers.html @@ -1110,9 +1110,9 @@

        interactions. And we can show how these input-based and interaction-based components are built in order to give us the knowledge to build our own interactions. In a sense, learn how to fish rather than being given a fish.

        -
        + -

        Events

        In the 2D Web, input and interactions are handled through browser +

        Events

        In the 2D Web, input and interactions are handled through browser events (e.g., click, mouseenter, mouseleave, touchstart, touchend). Whenever an input-based event happens, the browser will emit an event that we can listen to and handle with @@ -1140,13 +1140,13 @@

        cursor component that provides gaze-based interaction if +comes with a cursor component that provides gaze-based interaction if attached to the camera:

          -
        1. Explicitly define <a-camera> entity. +
        2. Explicitly define <a-camera> entity. Previously, A-Frame was providing the default camera.
          3. -
        3. Add <a-cursor> entity as a child element underneath the camera entity.
          4. -
        4. Optionally, configure the raycaster used by the cursor.
          5. +
        5. Add <a-cursor> entity as a child element underneath the camera entity.
          6. +
        6. Optionally, configure the raycaster used by the cursor.
        <a-scene>
          <a-camera>
            <a-cursor></a-cursor>
            <!-- Or <a-entity cursor></a-entity> -->
          </a-camera>
        </a-scene>
        @@ -1188,7 +1188,7 @@

        A-Frame +and for A-Frame, we prescribe that code be placed within A-Frame components.

        To demonstrate what the event set component does under the hood, let’s have a box change color on hover and on leaving hover with JavaScript:

        @@ -1216,7 +1216,7 @@

        tracked-controls Component

        The tracked-controls component is A-Frame’s base controller +

        tracked-controls Component

        The tracked-controls component is A-Frame’s base controller component that provides the foundation for all of A-Frame’s controller components. The tracked-controls component:

        -

        Hosting Models

        Refer to Hosting and Publishing — Hosting +

        Hosting Models

        Refer to Hosting and Publishing — Hosting Models.

        Troubleshooting

        Before anything else, check your console for errors. Common issues related to -CORS can be solved by properly hosting your models and the +CORS can be solved by properly hosting your models and the console will also tell you if your model needs additional files that are missing.

        I Don’t See My Model

        If there are no errors in the console, try scaling your model down. Often times @@ -1179,7 +1179,7 @@

        -

        Testing for Performance

        To get an idea of how our scene is performing, enable the stats component:

        +

        Testing for Performance

        To get an idea of how our scene is performing, enable the stats component:

        <a-scene stats>

        Move around our scene and test different scenarios while keeping an eye on the diff --git a/docs/0.7.0/introduction/visual-inspector-and-dev-tools.html b/docs/0.7.0/introduction/visual-inspector-and-dev-tools.html index 3e0132079..59b733fa1 100644 --- a/docs/0.7.0/introduction/visual-inspector-and-dev-tools.html +++ b/docs/0.7.0/introduction/visual-inspector-and-dev-tools.html @@ -1126,7 +1126,7 @@

      We’ll go over GUI tools built on top of A-Frame that can be used without code. And touch on other tools that can ease development across multiple machines.

      -
      +

      A-Frame Inspector

      The A-Frame Inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:

      diff --git a/docs/0.7.0/introduction/vr-headsets-and-webvr-browsers.html b/docs/0.7.0/introduction/vr-headsets-and-webvr-browsers.html index 098dcdcc6..4902eb18f 100644 --- a/docs/0.7.0/introduction/vr-headsets-and-webvr-browsers.html +++ b/docs/0.7.0/introduction/vr-headsets-and-webvr-browsers.html @@ -1099,7 +1099,7 @@

      -
      +

      What is Virtual Reality?

      Virtual reality (VR) is a technology that uses head-mounted headsets with displays to generate the realistic images, sounds, and other sensations to put diff --git a/docs/0.7.0/introduction/writing-a-component.html b/docs/0.7.0/introduction/writing-a-component.html index 1f0dafe8b..5975d88d0 100644 --- a/docs/0.7.0/introduction/writing-a-component.html +++ b/docs/0.7.0/introduction/writing-a-component.html @@ -1099,7 +1099,7 @@

      -

      Components of A-Frame’s entity-component framework are JavaScript +

      Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, @@ -1107,7 +1107,7 @@

      components.

      vehicleimage Image by Ruben Mueller from vrjump.de

      -

      This guide will take it pretty slow. We recommend skimming over the Component +

      This guide will take it pretty slow. We recommend skimming over the Component API documentation before going through this guide as that documentation will be more concise. Note that components should be defined before <a-scene> like:

      @@ -1121,12 +1121,12 @@

      Example: hello-world Component

      Let’s start with the most basic component to get a general idea. This component will log a simple message once when the component’s entity is attached using -the .init() handler.

      +the .init() handler.

      Registering the Component with AFRAME.registerComponent

      Components are registered with AFRAME.registerComponent(). We pass the name of the component, which will be used as the HTML attribute name in the component’s representation in the DOM. Then we pass the component definition which is a JavaScript object of methods and properties. Within the definition, we can -define lifecycle handler methods. One of which is .init(), which +define lifecycle handler methods. One of which is .init(), which is called once when the component is first plugged into its entity.

      In the example below, we just have our .init() handler log a simple message.

      AFRAME.registerComponent('hello-world', {
        init: function () {
          console.log('Hello, World!');
        }
      });
      @@ -1180,7 +1180,7 @@

      Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

      To demonstrate this, we’ll have our log component only log whenever its -entity emits an event. First, we’ll add an event property type that +entity emits an event. First, we’ll add an event property type that specifies which event the component should listen on.

      // ...
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'},
      },
      // ...
      @@ -1189,7 +1189,7 @@

      add an event listener that will +

      What we want to do is add an event listener that will listen to the event before logging a message. If the event property type is not specified, we’ll just log the message:

      AFRAME.registerComponent('log', {
        schema: {
          event: {type: 'string', default: ''},
          message: {type: 'string', default: 'Hello, World!'}
        },

        update: function () {
          var data = this.data;  // Component property values.
          var el = this.el;  // Reference to the component's entity.

          if (data.event) {
            // This will log the `message` when the entity emits the `event`.
            el.addEventListener(data.event, function () {
              console.log(data.message);
            });
          } else {
            // `event` not specified, just log the message.
            console.log(data.message);
          }
        }
      });
      @@ -1198,7 +1198,7 @@

      , we need a reference to the function. So +

      But to remove an event listener, we need a reference to the function. So let’s first store the function on this.eventHandlerFn whenever we attach an event listener. When we attach properties to the component via this, they’ll be available throughout all the other lifecycle handlers.

      @@ -1213,13 +1213,13 @@ 

      <a-scene>
        <a-entity log="event: anEvent; message: Hello, Metaverse!"></a-entity>
      </a-scene>
      -

      Let’s have our entity emit the event to test it out:

      +

      Let’s have our entity emit the event to test it out:

      var el = document.querySelector('a-entity');
      el.emit('anEvent');
      // >> "Hello, Metaverse!"

      Now let’s update our event to test the .update() handler:

      var el = document.querySelector('a-entity');
      el.setAttribute('log', {event: 'anotherEvent', message: 'Hello, new event!'});
      el.emit('anotherEvent');
      // >> "Hello, new event!"
      -

      Handling Component Removal

      Let’s handle the case where the component unplugs from the entity +

      Handling Component Removal

      Let’s handle the case where the component unplugs from the entity (i.e., .removeAttribute('log')). We can implement the .remove() handler which is called when the component is removed. For the log component, we remove any event listeners the component attached to the entity:

      @@ -1232,7 +1232,7 @@ 

      var el = document.querySelector('a-entity');
      el.removeAttribute('log');
      el.emit('anEvent');
      // >> Nothing should be logged...

      Allowing Multiple Instances of a Component

      Let’s allow having multiple log components attached to the same entity. To do -so, we enable multiple instancing with the .multiple flag. Let’s +so, we enable multiple instancing with the .multiple flag. Let’s set that to true:

      AFRAME.registerComponent('log', {
        schema: {
          event: {type: 'string', default: ''},
          message: {type: 'string', default: 'Hello, World!'}
        },

        multiple: true,

        // ...
      });
      @@ -1249,13 +1249,13 @@

      Example: box Component

      For a less trivial example, let’s find out how we can add 3D objects and affect -the scene graph by writing a component that uses three.js. To get +the scene graph by writing a component that uses three.js. To get the idea, we’ll just make a basic box component that creates a box mesh with both geometry and material.

      boximage Image by Ruben Mueller from vrjump.de

      Note: this is just a 3D equivalent of writing a Hello, World! component. -A-Frame provides geometry and material components if we +A-Frame provides geometry and material components if we actually wanted to make a box in practice.

      Schema and API

      Let’s start with the schema. The schema defines the API of your component. We’ll make the width, height, depth, and color configurable through the @@ -1272,7 +1272,7 @@

      THREE.BoxBufferGeometry, THREE.MeshStandardMaterial, and finally a THREE.Mesh. Then we set the mesh on our entity to add the mesh to the -three.js scene graph using .setObject3D(name, object):

      +three.js scene graph using .setObject3D(name, object):

      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.BoxBufferGeometry(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);
        }
      });

      Now let’s handle updates. If the geometry-related properties (i.e., width, diff --git a/docs/0.7.0/primitives/a-camera.html b/docs/0.7.0/primitives/a-camera.html index 1555621ff..914636542 100644 --- a/docs/0.7.0/primitives/a-camera.html +++ b/docs/0.7.0/primitives/a-camera.html @@ -1102,7 +1102,7 @@

      The camera primitive determines what the user sees. We can change the viewport by modifying the camera entity’s position and rotation.

      Note that by default, the camera origin will be at 0 1.6 0 in desktop mode -and 0 0 0 in VR mode. Read about the camera.userHeight property.

      +and 0 0 0 in VR mode. Read about the camera.userHeight property.

      Example

      <a-scene>
        <a-box></a-box>
        <a-camera></a-camera>
      </a-scene>

      Attributes

      diff --git a/docs/0.7.0/primitives/a-circle.html b/docs/0.7.0/primitives/a-circle.html index a899b0874..4f2fbc854 100644 --- a/docs/0.7.0/primitives/a-circle.html +++ b/docs/0.7.0/primitives/a-circle.html @@ -1099,7 +1099,7 @@

      -

      The circle primitive creates circles surfaces using the geometry +

      The circle primitive creates circles surfaces using the geometry component with the type set to circle.

      Example

      <a-scene>
        <a-assets>
          <img id="platform" src="platform.jpg">
        </a-assets>

        <!-- Basic circle. -->
        <a-circle color="#CCC" radius="20"></a-circle>

        <!-- Textured circle parallel to ground. -->
        <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
      </a-scene>
      diff --git a/docs/0.7.0/primitives/a-collada-model.html b/docs/0.7.0/primitives/a-collada-model.html index a34ef6e18..94d34703b 100644 --- a/docs/0.7.0/primitives/a-collada-model.html +++ b/docs/0.7.0/primitives/a-collada-model.html @@ -1113,7 +1113,7 @@

      src -collada-model.src +collada-model.src null diff --git a/docs/0.7.0/primitives/a-cursor.html b/docs/0.7.0/primitives/a-cursor.html index ba4cb5384..b8b306101 100644 --- a/docs/0.7.0/primitives/a-cursor.html +++ b/docs/0.7.0/primitives/a-cursor.html @@ -1103,7 +1103,7 @@

      interactivity with a scene on devices that do not have a hand controller. The default appearance is a ring geometry. The cursor is usually placed as a child of the camera.

      -

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      +

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      Example

      <a-scene>
        <a-camera>
          <a-cursor></a-cursor>
        </a-camera>

        <a-box></a-box>
      </a-scene>

      Attributes

      diff --git a/docs/0.7.0/primitives/a-gltf-model.html b/docs/0.7.0/primitives/a-gltf-model.html index 1dc513204..5e1b445b8 100644 --- a/docs/0.7.0/primitives/a-gltf-model.html +++ b/docs/0.7.0/primitives/a-gltf-model.html @@ -1113,7 +1113,7 @@

      - +
      srcgltf-model.srcgltf-model.src null
      diff --git a/docs/0.7.0/primitives/a-obj-model.html b/docs/0.7.0/primitives/a-obj-model.html index 377224b68..e835c26fe 100644 --- a/docs/0.7.0/primitives/a-obj-model.html +++ b/docs/0.7.0/primitives/a-obj-model.html @@ -1101,7 +1101,7 @@

      We recommend glTF for distributing assets in production over the web. Check -out using the glTF model primitive. You can +out using the glTF model primitive. You can either instead export to COLLADA and use the converter or try out the OBJ converter.

      diff --git a/docs/0.7.0/primitives/a-plane.html b/docs/0.7.0/primitives/a-plane.html index 7f7001f0c..0c316143c 100644 --- a/docs/0.7.0/primitives/a-plane.html +++ b/docs/0.7.0/primitives/a-plane.html @@ -1099,7 +1099,7 @@

      -

      The plane primitive creates flat surfaces using the geometry +

      The plane primitive creates flat surfaces using the geometry component with the type set to plane.

      Example

      <a-scene>
        <a-assets>
          <img id="ground" src="ground.jpg">
        </a-assets>

        <!-- Basic plane. -->
        <a-plane color="#CCC" height="20" width="20"></a-plane>

        <!-- Textured plane parallel to ground. -->
        <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
      </a-scene>
      diff --git a/docs/0.7.0/primitives/a-sound.html b/docs/0.7.0/primitives/a-sound.html index c588a154d..1e44edb28 100644 --- a/docs/0.7.0/primitives/a-sound.html +++ b/docs/0.7.0/primitives/a-sound.html @@ -1099,7 +1099,7 @@

      -

      The sound primitive wraps the sound component.

      +

      The sound primitive wraps the sound component.

      Example

      <a-scene>
        <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
      </a-scene>

      Attributes

      diff --git a/docs/0.7.0/primitives/a-sphere.html b/docs/0.7.0/primitives/a-sphere.html index 52a08e461..bbc74c0b2 100644 --- a/docs/0.7.0/primitives/a-sphere.html +++ b/docs/0.7.0/primitives/a-sphere.html @@ -1099,7 +1099,7 @@

      -

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      +

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      Example

      <a-sphere color="yellow" radius="5"></a-sphere>

      Attributes

      diff --git a/docs/0.7.0/primitives/a-text.html b/docs/0.7.0/primitives/a-text.html index 754944356..0d9f0d1bb 100644 --- a/docs/0.7.0/primitives/a-text.html +++ b/docs/0.7.0/primitives/a-text.html @@ -1099,7 +1099,7 @@

      -

      Wraps the text component.

      +

      Wraps the text component.

      Example

      <a-text value="Hello, World!"></a-text>

      Attributes

      diff --git a/docs/0.7.0/primitives/a-torus-knot.html b/docs/0.7.0/primitives/a-torus-knot.html index 234ad9989..9e44ccdc7 100644 --- a/docs/0.7.0/primitives/a-torus-knot.html +++ b/docs/0.7.0/primitives/a-torus-knot.html @@ -1099,7 +1099,7 @@

      -

      The torus knot primitive creates pretzel shapes using the geometry +

      The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

      Example

      <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
      diff --git a/docs/0.7.0/primitives/a-torus.html b/docs/0.7.0/primitives/a-torus.html index f4df89b48..deca96aec 100644 --- a/docs/0.7.0/primitives/a-torus.html +++ b/docs/0.7.0/primitives/a-torus.html @@ -1099,7 +1099,7 @@

      -

      The torus primitive creates donut or tube shapes using the geometry +

      The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

      Example

      <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
      diff --git a/docs/0.7.0/primitives/a-triangle.html b/docs/0.7.0/primitives/a-triangle.html index 97eaf14ab..c67b97b03 100644 --- a/docs/0.7.0/primitives/a-triangle.html +++ b/docs/0.7.0/primitives/a-triangle.html @@ -1099,7 +1099,7 @@

      -

      The triangle primitive creates triangle surfaces using the geometry +

      The triangle primitive creates triangle surfaces using the geometry component with the type set to triangle.

      Example

      <a-scene>
        <a-assets>
          <img id="platform" src="https://i.imgur.com/mYmmbrp.jpg">
        </a-assets>

        <!-- Basic triangle. -->
        <a-triangle color="#CCC"></a-triangle>

        <!-- Textured triangle parallel to ground. -->
        <a-triangle src="#platform" rotation="-90 0 0"></a-triangle>
      </a-scene>
      diff --git a/docs/0.7.0/primitives/a-videosphere.html b/docs/0.7.0/primitives/a-videosphere.html index 00c551953..dc21e449c 100644 --- a/docs/0.7.0/primitives/a-videosphere.html +++ b/docs/0.7.0/primitives/a-videosphere.html @@ -1103,7 +1103,7 @@

      Videospheres are a large sphere with the video texture mapped to the inside.

      Examples

      <a-scene>
        <a-assets>
          <video id="antarctica" autoplay loop="true" src="antarctica.mp4">
        </a-assets>

        <!-- Using the asset management system. -->
        <a-videosphere src="#antarctica"></a-videosphere>

        <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
        <a-videosphere src="africa.mp4"></a-videosphere>
      </a-scene>
      -

      Attributes

      Note that the videosphere primitive inherits common attributes.

      +

      Attributes

      Note that the videosphere primitive inherits common attributes.

      diff --git a/docs/0.8.0/components/cursor.html b/docs/0.8.0/components/cursor.html index 88df4b5cf..fdcd4688d 100644 --- a/docs/0.8.0/components/cursor.html +++ b/docs/0.8.0/components/cursor.html @@ -1107,11 +1107,11 @@

      The cursor component provides hover and click states for interaction on top of -the raycaster component. The cursor component can be used for +the raycaster component. The cursor component can be used for both gaze-based and controller-based interactions, but the appearance needs -to be configured depending on the use case. The <a-cursor> +to be configured depending on the use case. The <a-cursor> primitive provides a default reticle appearance for a gaze-based -cursor, and the laser-controls component configures the +cursor, and the laser-controls component configures the cursor for all controllers.

      The cursor component listens to events and keeps state on what’s being hovered and pressed in order to provide mousedown, mouseup, mouseenter, @@ -1122,15 +1122,15 @@

      By default, the cursor is configured to be used in a gaze-based mode and will register user input via mouse or touch. Specifying the downEvents and upEvents properties allows the cursor to work with controllers. For example, -the laser-controls component automatically configures these +the laser-controls component automatically configures these properties to work with most controllers..

      To provide a shape or appearance to the cursor, we should apply either the -geometry and material components or use the raycaster -component’s showLine property to draw a line using the line +geometry and material components or use the raycaster +component’s showLine property to draw a line using the line component.

      Example

      For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no -matter where we look, we place it as a child of the active camera +matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

      <a-entity camera look-controls>
        <a-entity cursor="fuse: true; fuseTimeout: 500"
                  position="0 0 -1"
                  geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                  material="color: black; shader: flat">
        </a-entity>
      </a-entity>

      <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
      @@ -1172,7 +1172,7 @@

      To further customize the cursor component, we configure the cursor’s dependency -component, the raycaster component.

      +component, the raycaster component.

      Events

      @@ -1242,7 +1242,7 @@

      States

      Configuring the Cursor through the Raycaster Component

      The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

      <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>
      @@ -1257,7 +1257,7 @@

      Adding Visual Feedback

      To add visual feedback to the cursor to show when the cursor is clicking or -fusing, we can use the animation system. When the cursor +fusing, we can use the animation system. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

      <a-entity cursor="fuse: true;"
                position="0 0 -3"
                geometry="primitive: ring"
                material="color: black; shader: flat">
        <a-animation begin="click" easing="ease-in" attribute="scale" dur="150"
                     fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
        <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500"
                     fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
      </a-entity>
      diff --git a/docs/0.8.0/components/daydream-controls.html b/docs/0.8.0/components/daydream-controls.html index 91bc42d07..7a1d90f7a 100644 --- a/docs/0.8.0/components/daydream-controls.html +++ b/docs/0.8.0/components/daydream-controls.html @@ -1107,7 +1107,7 @@

      The daydream-controls component interfaces with the Google Daydream controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Daydream controller model that highlights the touched and/or pressed buttons (trackpad).

      As a first time set up, to use the Daydream controller on Chrome for Android diff --git a/docs/0.8.0/components/debug.html b/docs/0.8.0/components/debug.html index 098dc29ee..afc220392 100644 --- a/docs/0.8.0/components/debug.html +++ b/docs/0.8.0/components/debug.html @@ -1123,8 +1123,8 @@ 

      <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

      Make sure that this component is not active in production.

      -

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM:

      +

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM:

      document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
      document.querySelector('a-entity').flushToDOM();  // Flush an entity.
      document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
      document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.
      diff --git a/docs/0.8.0/components/fog.html b/docs/0.8.0/components/fog.html index e406d3bc2..2c7cd06aa 100644 --- a/docs/0.8.0/components/fog.html +++ b/docs/0.8.0/components/fog.html @@ -1107,7 +1107,7 @@

      The fog component obscures entities in fog given distance from the camera. The -fog component applies only to the <a-scene> element.

      +fog component applies only to the <a-scene> element.

      Example

      <a-scene fog="type: linear; color: #AAA"></a-scene>

      Properties

      Given the fog distribution type, different properties will apply.

      diff --git a/docs/0.8.0/components/gearvr-controls.html b/docs/0.8.0/components/gearvr-controls.html index 3f80732d9..e2741c4c7 100644 --- a/docs/0.8.0/components/gearvr-controls.html +++ b/docs/0.8.0/components/gearvr-controls.html @@ -1107,7 +1107,7 @@

      The gearvr-controls component interfaces with the Samsung/Oculus Gear VR controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Gear VR controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

      Example

      <!-- Match Gear VR controller if present, regardless of hand. -->
      <a-entity gearvr-controls></a-entity>

      <!-- Match Gear VR controller if present and for specified hand. -->
      <a-entity gearvr-controls="hand: left"></a-entity>
      <a-entity gearvr-controls="hand: right"></a-entity>
      diff --git a/docs/0.8.0/components/geometry.html b/docs/0.8.0/components/geometry.html index b5ca32bd6..09284b866 100644 --- a/docs/0.8.0/components/geometry.html +++ b/docs/0.8.0/components/geometry.html @@ -1110,7 +1110,7 @@

      property defines the general shape. Geometric primitives, in computer graphics, are irreducible basic shapes. A material component is commonly defined to provide a appearance alongside the shape to create a complete mesh.

      -
      +

      Base Properties

      Every geometry type will have these properties:

      @@ -1633,7 +1633,7 @@ 

      AFRAME.registerGeometry('box', {
        schema: {
          depth: {default: 1, min: 0},
          height: {default: 1, min: 0},
          width: {default: 1, min: 0},
          segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
        },

        init: function (data) {
          this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
        }
      });

      Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then we need to create the geometry and set on this.geometry through the init lifecycle method.

      When a geometry component sets its primitive property to the custom geometry diff --git a/docs/0.8.0/components/gltf-model.html b/docs/0.8.0/components/gltf-model.html index 8fd629ede..247ed8b50 100644 --- a/docs/0.8.0/components/gltf-model.html +++ b/docs/0.8.0/components/gltf-model.html @@ -1118,9 +1118,9 @@

      NOTE: A-Frame supports glTF 2.0. For models using older versions of the glTF format, use gltf-model-legacy from donmccurdy/aframe-extras.

      -
      + -

      Why use glTF?

      In comparison to the older OBJ format, which supports only +

      Why use glTF?

      In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features. In addition to all of the above, glTF offers:

        @@ -1131,7 +1131,7 @@

        COLLADA, the supported features are very +

        In comparison to COLLADA, the supported features are very similar. However, because glTF focuses on providing a “transmission format” rather than an editor format, it is more interoperable with web technologies. By analogy, the .PSD (Adobe Photoshop) format is helpful for editing 2D images, diff --git a/docs/0.8.0/components/hand-controls.html b/docs/0.8.0/components/hand-controls.html index 01d6e34a8..8975e2d84 100644 --- a/docs/0.8.0/components/hand-controls.html +++ b/docs/0.8.0/components/hand-controls.html @@ -1107,8 +1107,8 @@

        The hand-controls component provides tracked hands (using a prescribed model) -with animated gestures. hand-controls wraps the vive-controls and -oculus-touch-controls which in turn wrap the tracked-controls +with animated gestures. hand-controls wraps the vive-controls and +oculus-touch-controls which in turn wrap the tracked-controls component. By specifying just hand-controls, we have something that works well with both Vive and Rift. The component gives extra events and handles hand animations and poses.

        diff --git a/docs/0.8.0/components/keyboard-shortcuts.html b/docs/0.8.0/components/keyboard-shortcuts.html index efe4dca06..eed438cb5 100644 --- a/docs/0.8.0/components/keyboard-shortcuts.html +++ b/docs/0.8.0/components/keyboard-shortcuts.html @@ -1107,7 +1107,7 @@

        The keyboard-shortcuts component toggles global keyboard shortcuts. The -keyboard-shortcuts component applies only to the <a-scene> element.

        +keyboard-shortcuts component applies only to the <a-scene> element.

        Example

        <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

        Properties

        diff --git a/docs/0.8.0/components/laser-controls.html b/docs/0.8.0/components/laser-controls.html index 3425ad0a3..de26d094e 100644 --- a/docs/0.8.0/components/laser-controls.html +++ b/docs/0.8.0/components/laser-controls.html @@ -1119,17 +1119,17 @@

        configures other components, rather than implementing any logic itself. Under the hood, laser-controls sets all of the tracked controller components:

        These controller components get activated if its respective controller is connected and detected via the Gamepad API. Then the model of the actual -controller is used. laser-controls then configures the cursor +controller is used. laser-controls then configures the cursor component for listen to the appropriate events and configures the -raycaster component to draw the laser.

        +raycaster component to draw the laser.

        When the laser intersects with an entity, the length of the line gets truncated to the distance to the intersection point.

        Example

        <a-entity laser-controls="hand: left"></a-entity>
        @@ -1146,11 +1146,11 @@

        left or right. -

        Customizing the Raycaster

        Configure the raycaster properties.

        +

        Customizing the Raycaster

        Configure the raycaster properties.

        For example:

        <a-entity laser-controls raycaster="objects: .links; far: 5"></a-entity>
        -

        Customizing the Line

        See Raycaster: Customizing the Line.

        +

        Customizing the Line

        See Raycaster: Customizing the Line.

        For example:

        <a-entity laser-controls line="color: red; opacity: 0.75"></a-entity>
        diff --git a/docs/0.8.0/components/light.html b/docs/0.8.0/components/light.html index 266652d27..a5a2e17b1 100644 --- a/docs/0.8.0/components/light.html +++ b/docs/0.8.0/components/light.html @@ -1121,7 +1121,7 @@

        To manually disable the defaults, without adding other lights:

        <a-scene light="defaultLightsEnabled: false">
          <!-- ... -->
        </a-scene>
        -
        +

        Properties

        All light types support a few basic properties:

        @@ -1263,7 +1263,7 @@

        Spot

        Sp

        Configuring Shadows

        A-Frame includes support for realtime shadow rendering. With proper configuration, objects (both moving or stationary) will cast shadows adding depth and realism to a scene. Since shadows come with many properties, it -is very helpful to use the A-Frame Inspector to configure shadows

        +is very helpful to use the A-Frame Inspector to configure shadows

        Light types that support shadows (point, spot, and directional) include additional properties:

        diff --git a/docs/0.8.0/components/line.html b/docs/0.8.0/components/line.html index 898457470..db465ef95 100644 --- a/docs/0.8.0/components/line.html +++ b/docs/0.8.0/components/line.html @@ -1108,8 +1108,8 @@

        The line component draws a line given a start coordinate and end coordinate using THREE.Line.

        -

        The raycaster component uses the line component for its showLine -property, which is then used by the laser-controls component.

        +

        The raycaster component uses the line component for its showLine +property, which is then used by the laser-controls component.

        Example

        <a-entity line="start: 0, 1, 0; end: 2 0 -5; color: red"
                  line__2="start: -2, 4, 5; end: 0 4 -3; color: green"></a-entity>

        Note an entity can have multiple lines. The line mesh is set as line or diff --git a/docs/0.8.0/components/look-controls.html b/docs/0.8.0/components/look-controls.html index 261596cd1..acf2724b2 100644 --- a/docs/0.8.0/components/look-controls.html +++ b/docs/0.8.0/components/look-controls.html @@ -1112,7 +1112,7 @@

      • Rotates the entity when we move the mouse.
      • Rotates the entity when we touch-drag the touchscreen.

      -

      Example

      The look-controls component is usually used alongside the camera +

      Example

      The look-controls component is usually used alongside the camera component.

      <a-entity camera look-controls></a-entity>
      diff --git a/docs/0.8.0/components/material.html b/docs/0.8.0/components/material.html index 01e82f547..100c92834 100644 --- a/docs/0.8.0/components/material.html +++ b/docs/0.8.0/components/material.html @@ -1107,11 +1107,11 @@

      The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

      We can register custom materials to extend the material component to provide a wide range of visual effects.

      -
      +

      Example

      Defining a red material using the default standard material:

      <a-entity geometry="primitive: box" material="color: red"></a-entity>
      @@ -1297,7 +1297,7 @@

      fog. +Whether or not material is affected by fog. true @@ -1414,7 +1414,7 @@

      fog. +Whether or not material is affected by fog. true @@ -1450,7 +1450,7 @@

      Textures

      To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

      +asset management system:

      <a-scene>
        <a-assets>
          <img id="my-texture" src="texture.png">
        </a-assets>

        <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
      </a-scene>

      src can also be an inline URL. Note that we do not get browser caching or diff --git a/docs/0.8.0/components/obj-model.html b/docs/0.8.0/components/obj-model.html index 81ec16e29..9070eceac 100644 --- a/docs/0.8.0/components/obj-model.html +++ b/docs/0.8.0/components/obj-model.html @@ -1124,7 +1124,7 @@

      mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

      Events

      @@ -1142,7 +1142,7 @@

      EventsLoading Inline

      We can also load assets by specifying the path directly within url(). Note this is less performant than going through the asset management system.

      <a-entity obj-model="obj: url(/path/to/tree.obj); mtl: url(/path/to/tree.mtl)"></a-entity>
      -

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      +

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      Additional Resources

      We can find and download models on the web to drop into our scenes:

      • Sketchup’s 3D Warehouse - Repository of models.
        • diff --git a/docs/0.8.0/components/oculus-touch-controls.html b/docs/0.8.0/components/oculus-touch-controls.html index 5055990dc..9c0265c85 100644 --- a/docs/0.8.0/components/oculus-touch-controls.html +++ b/docs/0.8.0/components/oculus-touch-controls.html @@ -1107,7 +1107,7 @@

        The oculus-touch-controls component interfaces with the Oculus Touch controllers. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.

        Example

        <a-entity oculus-touch-controls="hand: left"></a-entity>
        <a-entity oculus-touch-controls="hand: right"></a-entity>
        diff --git a/docs/0.8.0/components/position.html b/docs/0.8.0/components/position.html index 791f6301e..3c0c3e38d 100644 --- a/docs/0.8.0/components/position.html +++ b/docs/0.8.0/components/position.html @@ -1145,7 +1145,7 @@

        #child2‘s position would be 2 3 4.

        Updating Position

        For performance and ergonomics, we recommend updating position directly via the -three.js Object3D .position Vector3 versus via +three.js Object3D .position Vector3 versus via .setAttribute.

        This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not diff --git a/docs/0.8.0/components/raycaster.html b/docs/0.8.0/components/raycaster.html index b5567ef8c..9f8977c61 100644 --- a/docs/0.8.0/components/raycaster.html +++ b/docs/0.8.0/components/raycaster.html @@ -1114,7 +1114,7 @@

        checks for intersections at a certain interval against a list of objects, and will emit events on the entity when it detects intersections or clearing of intersections (i.e., when the raycaster is no longer intersecting an entity).

        -

        The cursor component and laser-controls components +

        The cursor component and laser-controls components both build on top of the raycaster component.

        Example

        <a-entity id="player" collider-check>
          <a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
        </a-entity>
        <a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
        @@ -1175,7 +1175,7 @@

        showLine -Whether or not to display the raycaster visually with the line component. +Whether or not to display the raycaster visually with the line component. false @@ -1307,7 +1307,7 @@

        Customizing the Line

        If showLine is set to true, the raycaster will configure the line given the raycaster’s origin, direction, and far properties. To customize the line -appearance provided by the showLine: true property, we configure the line +appearance provided by the showLine: true property, we configure the line component:

        <a-entity raycaster="showLine: true; far: 100" line="color: orange; opacity: 0.5"></a-entity>
        diff --git a/docs/0.8.0/components/rotation.html b/docs/0.8.0/components/rotation.html index 7440b84dd..9e6e010d7 100644 --- a/docs/0.8.0/components/rotation.html +++ b/docs/0.8.0/components/rotation.html @@ -1150,7 +1150,7 @@

        15 45 30.

        Updating Rotation

        For performance and ergonomics, we recommend updating rotation directly via the three.js Object3D .rotation Euler (in radians) versus -via .setAttribute.

        +via .setAttribute.

        This method is easier because we have access to all the Euler utilities, and faster by skipping .setAttribute overhead and not needing to create an object to set rotation:

        diff --git a/docs/0.8.0/components/scale.html b/docs/0.8.0/components/scale.html index b97688f21..213b0dd70 100644 --- a/docs/0.8.0/components/scale.html +++ b/docs/0.8.0/components/scale.html @@ -1149,7 +1149,7 @@

        Relative Scale

        Similar to the rotation and position components, scales are applied in the local coordinate system and multiply in nested entities.

        Updating Scale

        For performance and ergonomics, we recommend updating scale directly via the -three.js Object3D .scale Vector3 versus via +three.js Object3D .scale Vector3 versus via .setAttribute.

        This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not diff --git a/docs/0.8.0/components/shadow.html b/docs/0.8.0/components/shadow.html index bf875d56b..eff25f3ae 100644 --- a/docs/0.8.0/components/shadow.html +++ b/docs/0.8.0/components/shadow.html @@ -1116,7 +1116,7 @@

        Examp

        IMPORTANT: Adding the shadow component alone is not enough to display shadows in your scene. We must have at least one light with castShadow: true enabled. Additionally, the light’s shadow camera (used for depth -projection) usually must be configured correctly. Refer to the light +projection) usually must be configured correctly. Refer to the light component for more information.

        Properties

        diff --git a/docs/0.8.0/components/sound.html b/docs/0.8.0/components/sound.html index dea0c03c3..da61924f8 100644 --- a/docs/0.8.0/components/sound.html +++ b/docs/0.8.0/components/sound.html @@ -1108,7 +1108,7 @@

        The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the -components-position.

        +components-position.

        NOTE: Playing sound on iOS — in any browser — requires a physical user interaction. This is a browser limitation, and internal A-Frame events (like fusing cursors) do diff --git a/docs/0.8.0/components/stats.html b/docs/0.8.0/components/stats.html index dd2438cc5..68c2174df 100644 --- a/docs/0.8.0/components/stats.html +++ b/docs/0.8.0/components/stats.html @@ -1107,7 +1107,7 @@

        The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

        +component applies only to the <a-scene> element.

        Example

        <a-scene stats></a-scene>

        Metrics

          diff --git a/docs/0.8.0/components/text.html b/docs/0.8.0/components/text.html index e7935d0d3..db9845f18 100644 --- a/docs/0.8.0/components/text.html +++ b/docs/0.8.0/components/text.html @@ -1108,7 +1108,7 @@

          The text component renders signed distance field (SDF) font text.

          Example Image

          -
          +

          Introduction

          Note that rendering text in 3D is hard. In 2D web development, text is the most basic thing because the browser’s renderer and layout engine handles @@ -1338,8 +1338,8 @@

          SizingChange the width.
        • Change the wrapCount (roughly how many characters to fit inside the given width).
        • Change wrapPixels.
          • -
        • Change the scale component.
          • -
        • Position the text closer or farther away.
          • +
        • Change the scale component.
          • +
        • Position the text closer or farther away.

        Sizing

        Text can be wrapped by specifying width in A-Frame units.

        diff --git a/docs/0.8.0/components/tracked-controls.html b/docs/0.8.0/components/tracked-controls.html index e7e45f5c2..b0803b0d0 100644 --- a/docs/0.8.0/components/tracked-controls.html +++ b/docs/0.8.0/components/tracked-controls.html @@ -1108,12 +1108,12 @@

        The tracked-controls component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is -abstracted by the hand-controls component as well as the -vive-controls, oculus-touch-controls, -windows-motion-controls, and daydream-controls +abstracted by the hand-controls component as well as the +vive-controls, oculus-touch-controls, +windows-motion-controls, and daydream-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events. For non-6DOF controllers -such as daydream-controls, a primitive arm model is used to emulate +such as daydream-controls, a primitive arm model is used to emulate positional data.

        Example

        Note that due to recent browser-specific changes, Vive controllers may be returned by the Gamepad API with id values of either “OpenVR Gamepad” or “OpenVR Controller”, diff --git a/docs/0.8.0/components/visible.html b/docs/0.8.0/components/visible.html index 57e38c604..1f5f681f2 100644 --- a/docs/0.8.0/components/visible.html +++ b/docs/0.8.0/components/visible.html @@ -1128,7 +1128,7 @@

        Value

        <

        Animating Visibility

        The visible value can be “animated” to delay the visibility of an entity:

        <!-- Wait 1 second before showing the entity. -->
        <a-entity visible="false">
          <a-animation attribute="visible" begin="1000" to="true"></a-animation>
        </a-entity>
        -

        Updating Visible

        It is slightly faster to update visibility at the three.js level versus via +

        Updating Visible

        It is slightly faster to update visibility at the three.js level versus via .setAttribute.

        // With three.js
        el.object3D.visible = false;

        // With .setAttribute.
        el.setAttribute('visible', false);
        diff --git a/docs/0.8.0/components/vive-controls.html b/docs/0.8.0/components/vive-controls.html index 92bc5b832..37dfefd8a 100644 --- a/docs/0.8.0/components/vive-controls.html +++ b/docs/0.8.0/components/vive-controls.html @@ -1107,7 +1107,7 @@

        The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

        Example

        <a-entity vive-controls="hand: left"></a-entity>
        <a-entity vive-controls="hand: right"></a-entity>
        diff --git a/docs/0.8.0/components/vr-mode-ui.html b/docs/0.8.0/components/vr-mode-ui.html index 1a955ba3f..6c2d5f974 100644 --- a/docs/0.8.0/components/vr-mode-ui.html +++ b/docs/0.8.0/components/vr-mode-ui.html @@ -1108,7 +1108,7 @@

        The vr-mode-ui component toggles UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only -to the <a-scene> element.

        +to the <a-scene> element.

        Example

        <a-scene vr-mode-ui="enabled: false"></a-scene>

        Properties

        diff --git a/docs/0.8.0/components/wasd-controls.html b/docs/0.8.0/components/wasd-controls.html index f1904123c..b2811087a 100644 --- a/docs/0.8.0/components/wasd-controls.html +++ b/docs/0.8.0/components/wasd-controls.html @@ -1107,7 +1107,7 @@

        The wasd-controls component controls an entity with the WASD or arrow keyboard -keys. The wasd-controls component is commonly attached to an entity with the camera +keys. The wasd-controls component is commonly attached to an entity with the camera component.

        Example

        <a-entity camera look-controls wasd-controls></a-entity>
        diff --git a/docs/0.8.0/components/windows-motion-controls.html b/docs/0.8.0/components/windows-motion-controls.html index cf0218114..83a0fedc6 100644 --- a/docs/0.8.0/components/windows-motion-controls.html +++ b/docs/0.8.0/components/windows-motion-controls.html @@ -1108,7 +1108,7 @@

        The windows-motion-controls component 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 +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.)

        Example

        <a-entity windows-motion-controls="hand: left"></a-entity>
        <a-entity windows-motion-controls="hand: right"></a-entity>
        diff --git a/docs/0.8.0/core/animations.html b/docs/0.8.0/core/animations.html index 45238b6a9..e54951545 100644 --- a/docs/0.8.0/core/animations.html +++ b/docs/0.8.0/core/animations.html @@ -1120,7 +1120,7 @@

        the animation, and loops indefinitely.

        <a-entity>
          <a-entity position="5 0 0"></a-entity>
          <a-animation attribute="rotation"
                       dur="10000"
                       fill="forwards"
                       to="0 360 0"
                       repeat="indefinite"></a-animation>
        </a-entity>
        -
        +

        Attributes

        Here is an overview of animation attributes. We’ll go into more detail below.

        diff --git a/docs/0.8.0/core/asset-management-system.html b/docs/0.8.0/core/asset-management-system.html index 2a61d0918..9c617f163 100644 --- a/docs/0.8.0/core/asset-management-system.html +++ b/docs/0.8.0/core/asset-management-system.html @@ -1122,7 +1122,7 @@

        The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

        -
        +

        Example

        We can define our assets in <a-assets> and point to those assets from our entities using selectors:

        diff --git a/docs/0.8.0/core/component.html b/docs/0.8.0/core/component.html index 89a284f9e..a56dba702 100644 --- a/docs/0.8.0/core/component.html +++ b/docs/0.8.0/core/component.html @@ -1106,7 +1106,7 @@

        -

        In the entity-component-system pattern, a component is a reusable and +

        In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

        In A-Frame, components modify entities which are 3D objects in the scene. We @@ -1120,7 +1120,7 @@

        Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

        -
        +

        Component HTML Form

        A component holds a bucket of data in the form of one or more component properties. Components use this data to modify entities. Consider an engine @@ -1269,7 +1269,7 @@

        Definition Lifecycle Handler Methods

        With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the shape of the data, the lifecycle handler methods use the data to modify the entity. The handlers will usually interact with the -Entity API.

        +Entity API.

        methodsimage Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

        Overview of Methods

        @@ -1322,15 +1322,15 @@

        setAttribute. +

        - + - + @@ -1367,7 +1367,7 @@

        diffing the current +

        Granular modifications to the entity can be done by diffing the current dataset (this.data) with the previous dataset before the update (oldData).

        A-Frame calls .update() both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The @@ -1375,7 +1375,7 @@

        visible component’s update sets the visibility of +

        For example, the visible component’s update sets the visibility of the entity.

        Parsed component properties computed from the schema default values, mixins, and the entity’s attributes.
        Important: Do not modify the data attribute directly. It is updated internally by A-Frame. To modify a component, use setAttribute.
        this.elReference to the entity as an HTML element.Reference to the entity as an HTML element.
        this.el.sceneElReference to the scene as an HTML element.Reference to the scene as an HTML element.
        this.id
        AFRAME.registerComponent('visible', {
          /**
           * this.el is the entity element.
           * this.el.object3D is the three.js object of the entity.
           * this.data is the component's property or properties.
           */
          update: function (oldData) {
            this.el.object3D.visible = this.data;
          }
          // ...
        });
        @@ -1390,7 +1390,7 @@

        Remove, undo, or clean up all of the component’s modifications to the entity.
      • Detach event listeners.

      -

      For example, when the light component is removed, the light component +

      For example, when the light component is removed, the light component will remove the light object that it had previously set on the entity, thus removing it from the scene.

      AFRAME.registerComponent('light', {
        // ...
        remove: function () {
          this.el.removeObject3D('light');
        }
        // ...
      });
      @@ -1412,7 +1412,7 @@

      time) and the time difference in milliseconds since the last frame (timeDelta). These can be used for interpolation or to only run parts of the tick handler on a set interval.

      -

      For example, the tracked controls component will progress +

      For example, the tracked controls component will progress the controller’s animations, update the controller’s position and rotation, and check for button presses.

      AFRAME.registerComponent('tracked-controls', {
        // ...
        tick: function (time, timeDelta) {
          this.updateMeshAnimation();
          this.updatePose();
          this.updateButtons();
        }
        // ...
      });
      @@ -1431,7 +1431,7 @@

      .
    • Remove event listeners.
    • Remove any chances of dynamic behavior.

    -

    For example, the sound component will pause the sound and remove an +

    For example, the sound component will pause the sound and remove an event listener that would have played a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      pause: function () {
        this.pauseSound();
        this.removeEventListener();
      }
      // ...
    });
    @@ -1446,7 +1446,7 @@

    .pla
    • Add event listeners.
    -

    For example, the sound component will play the sound and update the +

    For example, the sound component will play the sound and update the event listener that would play a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      play: function () {
        if (this.data.autoplay) { this.playSound(); }
        this.updateEventListener();
      }
      // ...
    });
    @@ -1456,7 +1456,7 @@

  • Dynamically update or extend the schema, usually depending on the value of a property.
    • -

    For example, the geometry component checks if the primitive +

    For example, the geometry component checks if the primitive property changed to determine whether to update the schema for a different type of geometry:

    AFRAME.registerComponent('geometry', {
      // ...
      updateSchema: (newData) {
        if (newData.primitive !== this.data.primitive) {
          this.extendSchema(GEOMETRIES[newData.primitive].schema);
        }
      }
      // ...
    });
    @@ -1498,7 +1498,7 @@ 

    document.querySelector('[geometry]').components.geometry.flushToDOM();
    -

    Read more about component-to-DOM serialization.

    +

    Read more about component-to-DOM serialization.

    Accessing a Component’s Members and Methods

    A component’s members and methods can be accessed through the entity from the .components object. Look up the component from the entity’s map of components, and we’ll have access to the component’s internals. Consider this diff --git a/docs/0.8.0/core/entity.html b/docs/0.8.0/core/entity.html index 6136cc4c7..9973e2ad5 100644 --- a/docs/0.8.0/core/entity.html +++ b/docs/0.8.0/core/entity.html @@ -1107,23 +1107,23 @@

    A-Frame represents an entity via the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

    -

    In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

    -
    +

    In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

    +

    Example

    Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

    <a-entity>

    We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

    +give it shape and appearance, we can attach the geometry and +material components:

    <a-entity geometry="primitive: box" material="color: red">
    -

    Or to make it emit light, we can further attach the light component:

    +

    Or to make it emit light, we can further attach the light component:

    <a-entity geometry="primitive: box" material="color: red"
              light="type: point; intensity: 2.0">

    Retrieving an Entity

    We can simply retrieve an entity using DOM APIs.

    @@ -1158,7 +1158,7 @@

    object3DMap

    An entity’s object3DMap is an object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that components have set.

    -

    For an entity with a geometry and light components +

    For an entity with a geometry and light components attached, object3DMap might look like:

    {
      light: <THREE.Light Object>,
      mesh: <THREE.Mesh Object>
    }
    @@ -1172,7 +1172,7 @@

    Metho 
    entity.addEventListener('stateadded', function (evt) {
      if (evt.detail.state === 'selected') {
        console.log('Entity now selected!');
      }
    });

    entity.addState('selected');
    entity.is('selected');  // >> true

    emit (name, detail, bubbles)

    emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

    +trigger an animation:

    // <a-entity>
    //   <a-animation attribute="rotation" begin="rotate" to="0 360 0"></a-animation>
    // </a-entity>
    entity.emit('rotate');

    We can also pass event detail or data as the second argument:

    @@ -1183,7 +1183,7 @@ 

    entity.emit('sink', null, false);

    flushToDOM (recursive)

    flushToDOM will manually serialize an entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

    +Read more about component-to-DOM serialization.

    getAttribute (componentName)

    getAttribute retrieves parsed component data (including mixins and defaults).

    // <a-entity geometry="primitive: box; width: 3">

    entity.getAttribute('geometry');
    // >> {primitive: "box", depth: 2, height: 2, width: 3, ...}

    entity.getAttribute('geometry').primitive;
    // >> "box"

    entity.getAttribute('geometry').height;
    // >> 2

    entity.getAttribute('position');
    // >> {x: 0, y: 0, z: 0}
    @@ -1210,20 +1210,20 @@

    pa entity will call pause() on its child entities when we pause an entity.

    // <a-entity id="spinning-jumping-ball">
    entity.pause();
    -

    For example, the look-controls component on +

    For example, the look-controls component on pause will remove event handlers that listen for input.

    play ()

    play() will start any dynamic behavior as defined by animations and components. This is automatically called when the DOM attaches an entity. When an entity play(), the entity calls play() on its child entities.

    entity.pause();
    entity.play();
    -

    For example, the sound component on play will begin playing the sound.

    +

    For example, the sound component on play will begin playing the sound.

    setAttribute (componentName, value, [propertyValue | clobber])

    If componentName is not the name of a registered component or the component is a single-property component, setAttribute behaves as it normally would:

    entity.setAttribute('visible', false);

    Though if componentName is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    entity.setAttribute('position', { x: 1, y: 2, z: 3 });
    diff --git a/docs/0.8.0/core/globals.html b/docs/0.8.0/core/globals.html index e930b95b7..8a0e03f64 100644 --- a/docs/0.8.0/core/globals.html +++ b/docs/0.8.0/core/globals.html @@ -1118,11 +1118,11 @@

    AComponent -Component prototype. +Component prototype. AEntity -Entity prototype. +Entity prototype. ANode @@ -1130,7 +1130,7 @@

    AScene -Scene prototype. +Scene prototype. components @@ -1146,7 +1146,7 @@

    registerComponent -Function to register a component. +Function to register a component. registerElement @@ -1154,15 +1154,15 @@

    registerGeometry -Function to register a geometry. +Function to register a geometry. registerPrimitive -Function to register a primitive. +Function to register a primitive. registerShader -Function to register a material or shader. +Function to register a material or shader. schema @@ -1186,7 +1186,7 @@

    utils -A-Frame utility modules. +A-Frame utility modules. version diff --git a/docs/0.8.0/core/mixins.html b/docs/0.8.0/core/mixins.html index af5f17fe4..1e8131298 100644 --- a/docs/0.8.0/core/mixins.html +++ b/docs/0.8.0/core/mixins.html @@ -1108,7 +1108,7 @@

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    <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-mixin>
      </a-assets>

      <a-entity mixin="red cube"></a-entity>
      <a-entity mixin="blue cube"></a-entity>
    </a-scene>
    @@ -1118,7 +1118,7 @@

    the entities above expand to:

    <a-entity material="color: red" geometry="primitive: box"></a-entity>
    <a-entity material="color: blue" geometry="primitive: box"></a-entity>
    -
    +

    Merging Component Properties

    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="height: 10"></a-mixin>
        <a-mixin id="wide" geometry="width: 10"></a-mixin>
      </a-assets>

      <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
    </a-scene>
    diff --git a/docs/0.8.0/core/scene.html b/docs/0.8.0/core/scene.html index 0d156c4b8..38c0d4b57 100644 --- a/docs/0.8.0/core/scene.html +++ b/docs/0.8.0/core/scene.html @@ -1107,8 +1107,8 @@

    A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

    -

    The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

    +

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    @@ -1119,7 +1119,7 @@

  • Set up webvr-polyfill, VREffect
  • Add UI to Enter VR that calls WebVR API
    • -
    +

    Example

    <a-scene>
      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <a-box src="#texture"></a-box>
    </a-scene>
    @@ -1164,7 +1164,7 @@

    systems -Instantiated systems. +Instantiated systems. time @@ -1220,12 +1220,12 @@

    embedded - Remove fullscreen styles from the canvas. -
  • fog - Add fog.
    • -
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • -
  • inspector - Inject the A-Frame Inspector.
    • -
  • stats - Toggle performance stats.
    • -
  • vr-mode-ui - Toggle UI for entering and exiting VR.
    • +
  • embedded - Remove fullscreen styles from the canvas.
    • +
  • fog - Add fog.
    • +
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • +
  • inspector - Inject the A-Frame Inspector.
    • +
  • stats - Toggle performance stats.
    • +
  • vr-mode-ui - Toggle UI for entering and exiting VR.

    • Running Content Scripts on the Scene

    The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

    AFRAME.registerComponent('do-something', {
      init: function () {
        var sceneEl = this.el;
      }
    });
    diff --git a/docs/0.8.0/core/systems.html b/docs/0.8.0/core/systems.html index f26498cd6..69c06b086 100644 --- a/docs/0.8.0/core/systems.html +++ b/docs/0.8.0/core/systems.html @@ -1106,16 +1106,16 @@

    -

    A system, of the entity-component-system pattern, provides global scope, +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -
    + -

    Registering a System

    A system is registered similarly to a component.

    +

    Registering a System

    A system is registered similarly to a component.

    If the system name matches a component name, then the component will have a reference to the system as this.system:

    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);
      }
    });
    @@ -1137,7 +1137,7 @@

    schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data.

    Methods

    A system, like a component, defines lifecycle handlers. It can also define diff --git a/docs/0.8.0/core/utils.html b/docs/0.8.0/core/utils.html index c3fbca067..4ad5181b8 100644 --- a/docs/0.8.0/core/utils.html +++ b/docs/0.8.0/core/utils.html @@ -1107,7 +1107,7 @@

    A-Frame’s utility modules are public through AFRAME.utils.

    -
    +

    AFRAME.utils.coordinates

    Module for handling vec3 and vec4 types.

    .isCoordinates (value)

    Tests whether a string is a vec3 or vec4.

    @@ -1119,7 +1119,7 @@

    .stringify (data)

    Stringifies an {x, y, z} vec3 object to an “x y z” string.Or Stringifies an {x, y, z, w} vec4 object to an “x y z w” string.

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
    // >> "1 2 -3"

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3, w:4})
    // >> "1 2 -3 4"
    -

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for +

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for return 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.

    @@ -1127,7 +1127,7 @@

    This is useful for components that need a way to reference a property of a multi-property component.

    -

    .setComponentProperty (entity, componentName, value, delimiter)

    Performs like Entity.setAttribute, but with support for setting an +

    .setComponentProperty (entity, componentName, value, delimiter)

    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.

    diff --git a/docs/0.8.0/guides/building-a-360-image-gallery.html b/docs/0.8.0/guides/building-a-360-image-gallery.html index 7e97301b5..435365557 100644 --- a/docs/0.8.0/guides/building-a-360-image-gallery.html +++ b/docs/0.8.0/guides/building-a-360-image-gallery.html @@ -1110,23 +1110,23 @@

    Let’s build an interactive gaze-based 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

    -

    This guide will practice three concepts related to entity-component:

    +

    This guide will practice three concepts related to entity-component:

    1. Using the standard components that come with A-Frame.
    2. Using community components from the ecosystem.
    3. Writing custom components to accomplish whatever we want.
    -
    +

    Skeleton

    This is the starting point for our scene:

    <a-scene>
      <a-assets>
        <audio id="click-sound" src="audio/click.ogg"></audio>

        <!-- Images. -->
        <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
        <img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
        <img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
        <img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
        <img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Link we will build. -->
      <a-entity class="link"></a-entity>

      <!-- Camera + Cursor. -->
      <a-camera>
        <a-cursor id="cursor">
          <a-animation begin="click" easing="ease-in" attribute="scale"
                       fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
          <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                       from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
        </a-cursor>
      </a-camera>
    </a-scene>

    We have predefined:

    Using Standard Components

    Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure @@ -1136,19 +1136,19 @@ 

    <a-entity class="link"></a-entity>
    -

    To give our entity shape, we can attach the geometry component, +

    To give our entity shape, we can attach the geometry component, configured to a plane shape. We specify the component data using a syntax that resembles that of inline CSS styles:

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"></a-entity>
    -

    Then to give our entity appearance, we can attach the material +

    Then to give our entity appearance, we can attach the material component. We set shader to flat so the image isn’t affected negatively by lighting. And we set src to #cubes-thumb, a selector to one -of the images defined in the Asset Management System.

    +of the images defined in the Asset Management System.

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: #cubes-thumb"></a-entity>

    We can continue adding features to our entity by plugging in more components. -Let’s attach one more standard component, the sound component. We want +Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1215,15 +1215,15 @@

    Event-Set Component

    Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

    Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We are mimicking CSS :hover states. We can specify event names with _event properties, and the rest of the properties define the -setAttribute calls. Notice that the event-set component can have multiple +setAttribute calls. Notice that the event-set component can have multiple instances:

    <a-assets>
      <!-- ... -->
      <script id="link" type="text/html">
        <a-entity class="link"
          geometry="primitive: plane; height: 1; width: 1"
          material="shader: flat; src: ${thumb}"
          sound="on: click; src: #click-sound"
          event-set__1="_event: mousedown; scale: 1 1 1"
          event-set__2="_event: mouseup; scale: 1.2 1.2 1"
          event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
          event-set__4="_event: mouseleave; scale: 1 1 1"></a-entity>
      </script>
    </a-assets>
    @@ -1234,7 +1234,7 @@

    set-image component on GitHub.

    We want to write the component that fades the sky into a new 360° image -once one of the links are clicked. We’ll call it set-image. The component +once one of the links are clicked. We’ll call it set-image. The component API documentation provides a detailed reference for writing a component. A basic component skeleton might look like:

    Here is the skeleton for our set-image component.

    diff --git a/docs/0.8.0/guides/building-a-basic-scene.html b/docs/0.8.0/guides/building-a-basic-scene.html index 88f26294e..578355698 100644 --- a/docs/0.8.0/guides/building-a-basic-scene.html +++ b/docs/0.8.0/guides/building-a-basic-scene.html @@ -1119,7 +1119,7 @@

  • Add text

    • Remix the Basic Guide example on Glitch.

    -
    +

    Starting with HTML

    We start out with a minimal HTML structure:

    <html>
      <head>
        <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
        </a-scene>
      </body>
    </html>
    @@ -1128,7 +1128,7 @@

    before <a-scene> because A-Frame registers custom HTML elements which must be defined before <a-scene> is attached or else <a-scene> will do nothing.

    -

    Next, we include <a-scene> in the <body>. <a-scene> will contain every +

    Next, we include <a-scene> in the <body>. <a-scene> will contain every entity in our scene. <a-scene> handles all of the setup that is required for 3D: setting up WebGL, the canvas, camera, lights, renderer, render loop as well as out of the box WebVR support on platforms such as HTC Vive, Oculus Rift, @@ -1139,7 +1139,7 @@

    <a-box>‘s documentation for +

    Here we define the color <a-box>, see <a-box>‘s documentation for the more attributes (e.g., width, height, depth).

    boximage Image by Ruben Mueller from vrjump.de

    @@ -1147,13 +1147,13 @@

    <a-entity> with the geometry and -material components:

    +underneath <a-box> is <a-entity> with the geometry and +material components:

    <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>
    -

    However, because the default camera and the box are positioned at the default +

    However, because the default camera and the box are positioned at the default position at the 0 0 0 origin, we won’t be able to see the box unless we move -it. We can do this by using the position component to transform the +it. We can do this by using the position component to transform the box in 3D space.

    Transforming an Entity in 3D

    Let’s first go over 3D space. A-Frame uses a right-handed coordinate system. With the default camera direction: positive X-axis extends right, positive @@ -1172,7 +1172,7 @@

    To translate, rotate, and scale the box, we can change the -position, rotation, and scale components. +position, rotation, and scale components. Let’s first apply the rotation and scale components:

    <a-scene>
      <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
    @@ -1229,7 +1229,7 @@ 

    <a-scene>
      <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <!-- Out of the box environment! -->
      <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
    </a-scene>

    Applying an Image Texture

    -

    Make sure you’re serving your HTML using a local server +

    Make sure you’re serving your HTML using a local server for textures to load properly.

    We can apply an image texture to the box with an image, video, or <canvas> @@ -1241,7 +1241,7 @@

    -

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The +

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The asset management system makes it easier for the browser to cache assets (e.g., images, videos, models) and A-Frame will make sure all of the assets are fetched before rendering.

    @@ -1261,7 +1261,7 @@

    Creating a Custom Environment (Optional)

    Previously we had the environment component generate the environment. Though it’s good to know a bit on creating a basic environment for learning purposes.

    -

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. +

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. <a-sky>, which is a material applied to the inside of a large sphere, can be a flat color, a 360° image, or a 360° video. For example, a dark gray background would be:

    @@ -1271,7 +1271,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>
    </a-scene>
    -

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are +

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are oriented parallel to the XY axis. To make it parallel to the ground, we need to orient it along the XZ axis. We can do so by rotating the plane negative 90° on the X-axis.

    @@ -1289,7 +1289,7 @@ 

    <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
      repeat="10 10"></a-plane>
    -

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default +

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default if we don’t specify any lights, A-Frame adds an ambient light and a directional light. If A-Frame didn’t add lights for us, the scene would be black. Once we add lights of our own, however, the default lighting setup is removed and @@ -1307,7 +1307,7 @@

    Animation Component.

    -

    We can add animations to the box using A-Frame’s built-in animation +

    We can add animations to the box using A-Frame’s built-in animation system. Animations interpolate or tween a value over time. We can place an <a-animation> element as a child of the entity. Let’s have the box hover up and down to add some motion to the scene.

    @@ -1333,19 +1333,19 @@

    Given that many developers currently do not have proper VR hardware with controllers, we’ll focus this section on using basic mobile and desktop inputs -with the built-in cursor component. The cursor component by default provides +with the built-in cursor component. The cursor component by default provides the ability to “click” on entities by staring or gazing at them on mobile, or on desktop, looking at an entity and click the mouse. But know that the cursor component is just one way to add interactions, things open up if we have access to actual controllers.

    -

    To have a visible cursor fixed to the camera, we place the cursor as a child +

    To have a visible cursor fixed to the camera, we place the cursor as a child of the camera as explained above in Parent and Child Transforms.

    Since we didn’t specifically define a camera, A-Frame included a default camera for us. But since we need to add a cursor as a child of the camera, we will -need to now define <a-camera> containing <a-cursor>:

    +need to now define <a-camera> containing <a-cursor>:

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2">
        <a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000"
          repeat="indefinite"></a-animation>
      </a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
    -

    If we check the documentation of the cursor component that +

    If we check the documentation of the cursor component that <a-cursor> wraps, we see that it emits hover events such as mouseenter, mouseleave as well as click.

    Event Listener Component (Intermediate)

    One way to manually handle the cursor events is to add an event listener with @@ -1353,7 +1353,7 @@

    Animating on Events below.

    In JavaScript, we grab the box with querySelector, use -addEventListener, and then setAttribute +addEventListener, and then setAttribute to make the box grow its scale when its hovered over. Note that A-Frame adds features to setAttribute to work with multi-property components. We can pass a full {x, y, z} object as the second argument.

    @@ -1388,7 +1388,7 @@ 

    <a-scene>
      <!-- ... -->
      <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
        position="-3 1 -4"></a-sound>
      <!-- ... -->
    </a-scene>
    -

    Adding Text

    A-Frame comes with a text component. There are several ways to render +

    Adding Text

    A-Frame comes with a text component. There are several ways to render text, each with their advantages and disadvantages, A-Frame comes with an SDF text implementation using three-bmfont-text that is relatively sharp and performant.

    diff --git a/docs/0.8.0/guides/building-a-minecraft-demo.html b/docs/0.8.0/guides/building-a-minecraft-demo.html index a467f43c2..bf1075d24 100644 --- a/docs/0.8.0/guides/building-a-minecraft-demo.html +++ b/docs/0.8.0/guides/building-a-minecraft-demo.html @@ -1112,7 +1112,7 @@

    Let’s build a basic Minecraft (voxel builder) demo that targets room scale VR with controllers (e.g., Vive, Rift). The example will be minimally usable on mobile and desktop.

    -
    +

    Example Skeleton

    We’ll start off with this skeleton HTML:

    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

    <body>
      <a-scene>
      </a-scene>
    </body>
    diff --git a/docs/0.8.0/guides/building-with-magicavoxel.html b/docs/0.8.0/guides/building-with-magicavoxel.html index 3a1f11963..b8257c06d 100644 --- a/docs/0.8.0/guides/building-with-magicavoxel.html +++ b/docs/0.8.0/guides/building-with-magicavoxel.html @@ -1110,7 +1110,7 @@

    3D scenes and models using voxels (i.e., blocks). MagicaVoxel makes modeling super easy, similar to building in Minecraft.

    magicavoxel

    -
    +

    Installation

    MagicaVoxel works on Windows and OS X. On the MagicaVoxel homepage, click the Download button and install the application:

    diff --git a/docs/0.8.0/introduction/best-practices.html b/docs/0.8.0/introduction/best-practices.html index 5bf45b957..033899d76 100644 --- a/docs/0.8.0/introduction/best-practices.html +++ b/docs/0.8.0/introduction/best-practices.html @@ -1106,7 +1106,7 @@

    -

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and +

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and structure application code within purely A-Frame components for reusability, modularity, composability, decoupling, encapsulation, declarativeness, and testability. It’s okay to start out at first using content scripts @@ -1116,11 +1116,11 @@

    recommended hardware specifications. -
  • Use the stats component to keep an eye on various metrics (FPS, +
  • Use recommended hardware specifications.
    • +
  • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities). We want to maximize FPS and minimize everything else.
    • -
  • Make use of the asset management system to benefit from browser +
  • Make use of the asset management system to benefit from browser caching and preloading. Trying to fetch assets while rendering is slower than fetching all assets before rendering.
  • If using models, look to bake your lights into textures rather than relying @@ -1138,7 +1138,7 @@

    background component instead of a-sky to define a +
  • Use the background component instead of a-sky to define a solid color as the scene background. This prevents the creation of unnecessary geometry.
  • Update position, rotation, scale, and visible using at the three.js diff --git a/docs/0.8.0/introduction/developing-with-threejs.html b/docs/0.8.0/introduction/developing-with-threejs.html index 4fb06ebcb..ce9443e9e 100644 --- a/docs/0.8.0/introduction/developing-with-threejs.html +++ b/docs/0.8.0/introduction/developing-with-threejs.html @@ -1136,7 +1136,7 @@

    And every A-Frame entity also has a reference to <a-scene> via .sceneEl:

    document.querySelector('a-entity').sceneEl.object3D;  // THREE.Scene
    -

    From a component, we access the scene through its entity +

    From a component, we access the scene through its entity (i.e., this.el):

    AFRAME.registerComponent('foo', {
      init: function () {
        var scene = this.el.sceneEl.object3D;  // THREE.Scene
      }
    });
    diff --git a/docs/0.8.0/introduction/entity-component-system.html b/docs/0.8.0/introduction/entity-component-system.html index 5a3125bbc..ff9643e67 100644 --- a/docs/0.8.0/introduction/entity-component-system.html +++ b/docs/0.8.0/introduction/entity-component-system.html @@ -1135,20 +1135,20 @@

    A well-known game engine implementing ECS is Unity. Although there are pain points in cross-entity communication. But we’ll see how A-Frame, the DOM, and declarative HTML really make ECS shine.

    -
    +

    Concept

    ECS Minecraft

    A basic definition of ECS involves:

    We’ll go over GUI tools built on top of A-Frame that can be used without code. And touch on other tools that can ease development across multiple machines.

    -
    +

    A-Frame Inspector

    The A-Frame Inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:

    diff --git a/docs/0.8.0/introduction/vr-headsets-and-webvr-browsers.html b/docs/0.8.0/introduction/vr-headsets-and-webvr-browsers.html index 8be3658ad..95a38455e 100644 --- a/docs/0.8.0/introduction/vr-headsets-and-webvr-browsers.html +++ b/docs/0.8.0/introduction/vr-headsets-and-webvr-browsers.html @@ -1106,7 +1106,7 @@

    -
    +

    What is Virtual Reality?

    Virtual reality (VR) is a technology that uses head-mounted headsets with displays to generate the realistic images, sounds, and other sensations to put diff --git a/docs/0.8.0/introduction/writing-a-component.html b/docs/0.8.0/introduction/writing-a-component.html index a875bfd47..305be5096 100644 --- a/docs/0.8.0/introduction/writing-a-component.html +++ b/docs/0.8.0/introduction/writing-a-component.html @@ -1106,7 +1106,7 @@

    -

    Components of A-Frame’s entity-component framework are JavaScript +

    Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, @@ -1114,7 +1114,7 @@

    components.

    vehicleimage Image by Ruben Mueller from vrjump.de

    -

    This guide will take it pretty slow. We recommend skimming over the Component +

    This guide will take it pretty slow. We recommend skimming over the Component API documentation before going through this guide as that documentation will be more concise. Note that components should be defined before <a-scene> like:

    @@ -1128,12 +1128,12 @@

    Example: hello-world Component

    Let’s start with the most basic component to get a general idea. This component will log a simple message once when the component’s entity is attached using -the .init() handler.

    +the .init() handler.

    Registering the Component with AFRAME.registerComponent

    Components are registered with AFRAME.registerComponent(). We pass the name of the component, which will be used as the HTML attribute name in the component’s representation in the DOM. Then we pass the component definition which is a JavaScript object of methods and properties. Within the definition, we can -define lifecycle handler methods. One of which is .init(), which +define lifecycle handler methods. One of which is .init(), which is called once when the component is first plugged into its entity.

    In the example below, we just have our .init() handler log a simple message.

    AFRAME.registerComponent('hello-world', {
      init: function () {
        console.log('Hello, World!');
      }
    });
    @@ -1187,7 +1187,7 @@

    Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

    To demonstrate this, we’ll have our log component only log whenever its -entity emits an event. First, we’ll add an event property type that +entity emits an event. First, we’ll add an event property type that specifies which event the component should listen on.

    // ...
    schema: {
      event: {type: 'string', default: ''},
      message: {type: 'string', default: 'Hello, World!'},
    },
    // ...
    @@ -1196,7 +1196,7 @@

    add an event listener that will +

    What we want to do is add an event listener that will listen to the event before logging a message. If the event property type is not specified, we’ll just log the message:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      update: function () {
        var data = this.data;  // Component property values.
        var el = this.el;  // Reference to the component's entity.

        if (data.event) {
          // This will log the `message` when the entity emits the `event`.
          el.addEventListener(data.event, function () {
            console.log(data.message);
          });
        } else {
          // `event` not specified, just log the message.
          console.log(data.message);
        }
      }
    });
    @@ -1205,7 +1205,7 @@

    , we need a reference to the function. So +

    But to remove an event listener, we need a reference to the function. So let’s first store the function on this.eventHandlerFn whenever we attach an event listener. When we attach properties to the component via this, they’ll be available throughout all the other lifecycle handlers.

    @@ -1220,13 +1220,13 @@ 

    <a-scene>
      <a-entity log="event: anEvent; message: Hello, Metaverse!"></a-entity>
    </a-scene>
    -

    Let’s have our entity emit the event to test it out:

    +

    Let’s have our entity emit the event to test it out:

    var el = document.querySelector('a-entity');
    el.emit('anEvent');
    // >> "Hello, Metaverse!"

    Now let’s update our event to test the .update() handler:

    var el = document.querySelector('a-entity');
    el.setAttribute('log', {event: 'anotherEvent', message: 'Hello, new event!'});
    el.emit('anotherEvent');
    // >> "Hello, new event!"
    -

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity +

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity (i.e., .removeAttribute('log')). We can implement the .remove() handler which is called when the component is removed. For the log component, we remove any event listeners the component attached to the entity:

    @@ -1239,7 +1239,7 @@ 

    var el = document.querySelector('a-entity');
    el.removeAttribute('log');
    el.emit('anEvent');
    // >> Nothing should be logged...

    Allowing Multiple Instances of a Component

    Let’s allow having multiple log components attached to the same entity. To do -so, we enable multiple instancing with the .multiple flag. Let’s +so, we enable multiple instancing with the .multiple flag. Let’s set that to true:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      multiple: true,

      // ...
    });
    @@ -1256,13 +1256,13 @@

    Example: box Component

    For a less trivial example, let’s find out how we can add 3D objects and affect -the scene graph by writing a component that uses three.js. To get +the scene graph by writing a component that uses three.js. To get the idea, we’ll just make a basic box component that creates a box mesh with both geometry and material.

    boximage Image by Ruben Mueller from vrjump.de

    Note: this is just a 3D equivalent of writing a Hello, World! component. -A-Frame provides geometry and material components if we +A-Frame provides geometry and material components if we actually wanted to make a box in practice.

    Schema and API

    Let’s start with the schema. The schema defines the API of your component. We’ll make the width, height, depth, and color configurable through the @@ -1279,7 +1279,7 @@

    THREE.BoxBufferGeometry, THREE.MeshStandardMaterial, and finally a THREE.Mesh. Then we set the mesh on our entity to add the mesh to the -three.js scene graph using .setObject3D(name, object):

    +three.js scene graph using .setObject3D(name, object):

    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.BoxBufferGeometry(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);
      }
    });

    Now let’s handle updates. If the geometry-related properties (i.e., width, diff --git a/docs/0.8.0/primitives/a-circle.html b/docs/0.8.0/primitives/a-circle.html index 1cad296bd..ba9536116 100644 --- a/docs/0.8.0/primitives/a-circle.html +++ b/docs/0.8.0/primitives/a-circle.html @@ -1106,7 +1106,7 @@

    -

    The circle primitive creates circles surfaces using the geometry +

    The circle primitive creates circles surfaces using the geometry component with the type set to circle.

    Example

    <a-scene>
      <a-assets>
        <img id="platform" src="platform.jpg">
      </a-assets>

      <!-- Basic circle. -->
      <a-circle color="#CCC" radius="20"></a-circle>

      <!-- Textured circle parallel to ground. -->
      <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
    </a-scene>
    diff --git a/docs/0.8.0/primitives/a-collada-model.html b/docs/0.8.0/primitives/a-collada-model.html index c72c98945..989eb6cc9 100644 --- a/docs/0.8.0/primitives/a-collada-model.html +++ b/docs/0.8.0/primitives/a-collada-model.html @@ -1120,7 +1120,7 @@

    src -collada-model.src +collada-model.src null diff --git a/docs/0.8.0/primitives/a-cursor.html b/docs/0.8.0/primitives/a-cursor.html index 9a677af34..f9f0a0afe 100644 --- a/docs/0.8.0/primitives/a-cursor.html +++ b/docs/0.8.0/primitives/a-cursor.html @@ -1110,7 +1110,7 @@

    interactivity with a scene on devices that do not have a hand controller. The default appearance is a ring geometry. The cursor is usually placed as a child of the camera.

    -

    Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

    +

    Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

    Example

    <a-scene>
      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>

      <a-box></a-box>
    </a-scene>

    Attributes

    diff --git a/docs/0.8.0/primitives/a-gltf-model.html b/docs/0.8.0/primitives/a-gltf-model.html index d4296e8a1..da31bfde0 100644 --- a/docs/0.8.0/primitives/a-gltf-model.html +++ b/docs/0.8.0/primitives/a-gltf-model.html @@ -1120,7 +1120,7 @@

    - +
    srcgltf-model.srcgltf-model.src null
    diff --git a/docs/0.8.0/primitives/a-obj-model.html b/docs/0.8.0/primitives/a-obj-model.html index 21dc7117a..a969475e2 100644 --- a/docs/0.8.0/primitives/a-obj-model.html +++ b/docs/0.8.0/primitives/a-obj-model.html @@ -1108,7 +1108,7 @@

    We recommend glTF for distributing assets in production over the web. Check -out using the glTF model primitive. You can +out using the glTF model primitive. You can either instead export to COLLADA and use the converter or try out the OBJ converter.

    diff --git a/docs/0.8.0/primitives/a-plane.html b/docs/0.8.0/primitives/a-plane.html index cd7c110f7..3db3852d6 100644 --- a/docs/0.8.0/primitives/a-plane.html +++ b/docs/0.8.0/primitives/a-plane.html @@ -1106,7 +1106,7 @@

    -

    The plane primitive creates flat surfaces using the geometry +

    The plane primitive creates flat surfaces using the geometry component with the type set to plane.

    Example

    <a-scene>
      <a-assets>
        <img id="ground" src="ground.jpg">
      </a-assets>

      <!-- Basic plane. -->
      <a-plane color="#CCC" height="20" width="20"></a-plane>

      <!-- Textured plane parallel to ground. -->
      <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
    </a-scene>
    diff --git a/docs/0.8.0/primitives/a-sound.html b/docs/0.8.0/primitives/a-sound.html index a1b068c51..7c4c6e16c 100644 --- a/docs/0.8.0/primitives/a-sound.html +++ b/docs/0.8.0/primitives/a-sound.html @@ -1106,7 +1106,7 @@

    -

    The sound primitive wraps the sound component.

    +

    The sound primitive wraps the sound component.

    Example

    <a-scene>
      <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
    </a-scene>

    Attributes

    diff --git a/docs/0.8.0/primitives/a-sphere.html b/docs/0.8.0/primitives/a-sphere.html index 84f173896..98889f082 100644 --- a/docs/0.8.0/primitives/a-sphere.html +++ b/docs/0.8.0/primitives/a-sphere.html @@ -1106,7 +1106,7 @@

    -

    The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

    +

    The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

    Example

    <a-sphere color="yellow" radius="5"></a-sphere>

    Attributes

    diff --git a/docs/0.8.0/primitives/a-text.html b/docs/0.8.0/primitives/a-text.html index f2c2c5dde..56c655afb 100644 --- a/docs/0.8.0/primitives/a-text.html +++ b/docs/0.8.0/primitives/a-text.html @@ -1106,7 +1106,7 @@

    -

    Wraps the text component.

    +

    Wraps the text component.

    Example

    <a-text value="Hello, World!"></a-text>

    Attributes

    diff --git a/docs/0.8.0/primitives/a-torus-knot.html b/docs/0.8.0/primitives/a-torus-knot.html index ec075fa61..3ebf0362c 100644 --- a/docs/0.8.0/primitives/a-torus-knot.html +++ b/docs/0.8.0/primitives/a-torus-knot.html @@ -1106,7 +1106,7 @@

    -

    The torus knot primitive creates pretzel shapes using the geometry +

    The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

    Example

    <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
    diff --git a/docs/0.8.0/primitives/a-torus.html b/docs/0.8.0/primitives/a-torus.html index d5dd92b26..231268e0d 100644 --- a/docs/0.8.0/primitives/a-torus.html +++ b/docs/0.8.0/primitives/a-torus.html @@ -1106,7 +1106,7 @@

    -

    The torus primitive creates donut or tube shapes using the geometry +

    The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

    Example

    <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
    diff --git a/docs/0.8.0/primitives/a-triangle.html b/docs/0.8.0/primitives/a-triangle.html index 2f972f71d..734a2175f 100644 --- a/docs/0.8.0/primitives/a-triangle.html +++ b/docs/0.8.0/primitives/a-triangle.html @@ -1106,7 +1106,7 @@

    -

    The triangle primitive creates triangle surfaces using the geometry +

    The triangle primitive creates triangle surfaces using the geometry component with the type set to triangle.

    Example

    <a-scene>
      <a-assets>
        <img id="platform" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <!-- Basic triangle. -->
      <a-triangle color="#CCC" vertex-c="1 -1 0"></a-triangle>

      <!-- Textured triangle parallel to ground. -->
      <a-triangle src="#platform" rotation="-90 0 0"></a-triangle>
    </a-scene>
    diff --git a/docs/0.8.0/primitives/a-videosphere.html b/docs/0.8.0/primitives/a-videosphere.html index 0d8b8e8b9..fc2f3aee8 100644 --- a/docs/0.8.0/primitives/a-videosphere.html +++ b/docs/0.8.0/primitives/a-videosphere.html @@ -1110,7 +1110,7 @@

    Videospheres are a large sphere with the video texture mapped to the inside.

    Examples

    <a-scene>
      <a-assets>
        <video id="antarctica" autoplay loop="true" src="antarctica.mp4"> </video>
      </a-assets>

      <!-- Using the asset management system. -->
      <a-videosphere src="#antarctica"></a-videosphere>

      <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
      <a-videosphere src="africa.mp4"></a-videosphere>
    </a-scene>
    -

    Attributes

    Note that the videosphere primitive inherits common attributes.

    +

    Attributes

    Note that the videosphere primitive inherits common attributes.

    diff --git a/docs/0.9.0/components/animation.html b/docs/0.9.0/components/animation.html index 2f69ceab5..405fd1162 100644 --- a/docs/0.9.0/components/animation.html +++ b/docs/0.9.0/components/animation.html @@ -1132,7 +1132,7 @@

    Read more below for additional options and discovering how to properly animate different types of values.

    -
    +

    API

    Properties

    diff --git a/docs/0.9.0/components/cursor.html b/docs/0.9.0/components/cursor.html index 1f24b5ca0..a602c5607 100644 --- a/docs/0.9.0/components/cursor.html +++ b/docs/0.9.0/components/cursor.html @@ -1114,11 +1114,11 @@

    The cursor component provides hover and click states for interaction on top of -the raycaster component. The cursor component can be used for +the raycaster component. The cursor component can be used for both gaze-based and controller-based interactions, but the appearance needs -to be configured depending on the use case. The <a-cursor> +to be configured depending on the use case. The <a-cursor> primitive provides a default reticle appearance for a gaze-based -cursor, and the laser-controls component configures the +cursor, and the laser-controls component configures the cursor for all controllers.

    The cursor component listens to events and keeps state on what’s being hovered and pressed in order to provide mousedown, mouseup, mouseenter, @@ -1129,15 +1129,15 @@

    By default, the cursor is configured to be used in a gaze-based mode and will register user input via mouse or touch. Specifying the downEvents and upEvents properties allows the cursor to work with controllers. For example, -the laser-controls component automatically configures these +the laser-controls component automatically configures these properties to work with most controllers.

    To provide a shape or appearance to the cursor, we should apply either the -geometry and material components or use the raycaster -component’s showLine property to draw a line using the line +geometry and material components or use the raycaster +component’s showLine property to draw a line using the line component.

    Example

    For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no -matter where we look, we place it as a child of the active camera +matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

    <a-entity camera look-controls>
      <a-entity cursor="fuse: true; fuseTimeout: 500"
                position="0 0 -1"
                geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                material="color: black; shader: flat">
      </a-entity>
    </a-entity>

    <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
    @@ -1184,7 +1184,7 @@

    To further customize the cursor component, we configure the cursor’s dependency -component, the raycaster component.

    +component, the raycaster component.

    Events

    @@ -1254,7 +1254,7 @@

    States

    Configuring the Cursor through the Raycaster Component

    The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

    <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>
    @@ -1269,7 +1269,7 @@

    Adding Visual Feedback

    To add visual feedback to the cursor to show when the cursor is clicking or -fusing, we can use the animation component. When the cursor +fusing, we can use the animation component. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

    <a-entity
      animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
      animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
      animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
      cursor="fuse: true;"
      material="color: black; shader: flat"
      position="0 0 -3"
      geometry="primitive: ring"></a-entity>
    diff --git a/docs/0.9.0/components/daydream-controls.html b/docs/0.9.0/components/daydream-controls.html index 5052abf94..593c587e7 100644 --- a/docs/0.9.0/components/daydream-controls.html +++ b/docs/0.9.0/components/daydream-controls.html @@ -1114,7 +1114,7 @@

    The daydream-controls component interfaces with the Google Daydream controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Daydream controller model that highlights the touched and/or pressed buttons (trackpad).

    As a first time set up, to use the Daydream controller on Chrome for Android diff --git a/docs/0.9.0/components/debug.html b/docs/0.9.0/components/debug.html index 6c6567aca..f635e9126 100644 --- a/docs/0.9.0/components/debug.html +++ b/docs/0.9.0/components/debug.html @@ -1130,8 +1130,8 @@ 

    <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

    Make sure that this component is not active in production.

    -

    Manually Serializing to DOM

    To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM:

    +

    Manually Serializing to DOM

    To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM:

    document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
    document.querySelector('a-entity').flushToDOM();  // Flush an entity.
    document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
    document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.
    diff --git a/docs/0.9.0/components/fog.html b/docs/0.9.0/components/fog.html index 9a81129a0..6f611727a 100644 --- a/docs/0.9.0/components/fog.html +++ b/docs/0.9.0/components/fog.html @@ -1114,7 +1114,7 @@

    The fog component obscures entities in fog given distance from the camera. The -fog component applies only to the <a-scene> element.

    +fog component applies only to the <a-scene> element.

    Example

    <a-scene fog="type: linear; color: #AAA"></a-scene>

    Properties

    Given the fog distribution type, different properties will apply.

    diff --git a/docs/0.9.0/components/gearvr-controls.html b/docs/0.9.0/components/gearvr-controls.html index 8468a5d67..ed4b584f0 100644 --- a/docs/0.9.0/components/gearvr-controls.html +++ b/docs/0.9.0/components/gearvr-controls.html @@ -1114,7 +1114,7 @@

    The gearvr-controls component interfaces with the Samsung/Oculus Gear VR controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Gear VR controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

    Example

    <!-- Match Gear VR controller if present, regardless of hand. -->
    <a-entity gearvr-controls></a-entity>

    <!-- Match Gear VR controller if present and for specified hand. -->
    <a-entity gearvr-controls="hand: left"></a-entity>
    <a-entity gearvr-controls="hand: right"></a-entity>
    diff --git a/docs/0.9.0/components/geometry.html b/docs/0.9.0/components/geometry.html index dc10b26a8..fee667465 100644 --- a/docs/0.9.0/components/geometry.html +++ b/docs/0.9.0/components/geometry.html @@ -1117,7 +1117,7 @@

    property defines the general shape. Geometric primitives, in computer graphics, are irreducible basic shapes. A material component is commonly defined to provide a appearance alongside the shape to create a complete mesh.

    -
    +

    Base Properties

    Every geometry type will have these properties:

    @@ -1640,7 +1640,7 @@ 

    AFRAME.registerGeometry('box', {
      schema: {
        depth: {default: 1, min: 0},
        height: {default: 1, min: 0},
        width: {default: 1, min: 0},
        segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
        segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
        segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
      },

      init: function (data) {
        this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
      }
    });

    Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then we need to create the geometry and set on this.geometry through the init lifecycle method.

    When a geometry component sets its primitive property to the custom geometry diff --git a/docs/0.9.0/components/gltf-model.html b/docs/0.9.0/components/gltf-model.html index b0c3de314..d0374d161 100644 --- a/docs/0.9.0/components/gltf-model.html +++ b/docs/0.9.0/components/gltf-model.html @@ -1125,9 +1125,9 @@

    NOTE: A-Frame supports glTF 2.0. For models using older versions of the glTF format, use gltf-model-legacy from donmccurdy/aframe-extras.

    -
    + -

    Why use glTF?

    In comparison to the older OBJ format, which supports only +

    Why use glTF?

    In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features. In addition to all of the above, glTF offers:

      diff --git a/docs/0.9.0/components/hand-controls.html b/docs/0.9.0/components/hand-controls.html index a34e00fad..489669003 100644 --- a/docs/0.9.0/components/hand-controls.html +++ b/docs/0.9.0/components/hand-controls.html @@ -1114,8 +1114,8 @@

      The hand-controls component provides tracked hands (using a prescribed model) -with animated gestures. hand-controls wraps the vive-controls and -oculus-touch-controls which in turn wrap the tracked-controls +with animated gestures. hand-controls wraps the vive-controls and +oculus-touch-controls which in turn wrap the tracked-controls component. By specifying just hand-controls, we have something that works well with both Vive and Rift. The component gives extra events and handles hand animations and poses.

      diff --git a/docs/0.9.0/components/keyboard-shortcuts.html b/docs/0.9.0/components/keyboard-shortcuts.html index e73a773ff..c68fff34b 100644 --- a/docs/0.9.0/components/keyboard-shortcuts.html +++ b/docs/0.9.0/components/keyboard-shortcuts.html @@ -1114,7 +1114,7 @@

      The keyboard-shortcuts component toggles global keyboard shortcuts. The -keyboard-shortcuts component applies only to the <a-scene> element.

      +keyboard-shortcuts component applies only to the <a-scene> element.

      Example

      <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

      Properties

      diff --git a/docs/0.9.0/components/laser-controls.html b/docs/0.9.0/components/laser-controls.html index 13e9d1c3f..eed01e53e 100644 --- a/docs/0.9.0/components/laser-controls.html +++ b/docs/0.9.0/components/laser-controls.html @@ -1126,17 +1126,17 @@

      configures other components, rather than implementing any logic itself. Under the hood, laser-controls sets all of the tracked controller components:

      These controller components get activated if its respective controller is connected and detected via the Gamepad API. Then the model of the actual -controller is used. laser-controls then configures the cursor +controller is used. laser-controls then configures the cursor component for listen to the appropriate events and configures the -raycaster component to draw the laser.

      +raycaster component to draw the laser.

      When the laser intersects with an entity, the length of the line gets truncated to the distance to the intersection point.

      Example

      <a-entity laser-controls="hand: left"></a-entity>
      @@ -1153,11 +1153,11 @@

      left or right. -

      Customizing the Raycaster

      Configure the raycaster properties.

      +

      Customizing the Raycaster

      Configure the raycaster properties.

      For example:

      <a-entity laser-controls raycaster="objects: .links; far: 5"></a-entity>
      -

      Customizing the Line

      See Raycaster: Customizing the Line.

      +

      Customizing the Line

      See Raycaster: Customizing the Line.

      For example:

      <a-entity laser-controls line="color: red; opacity: 0.75"></a-entity>
      diff --git a/docs/0.9.0/components/light.html b/docs/0.9.0/components/light.html index d5282f553..15c6a0b86 100644 --- a/docs/0.9.0/components/light.html +++ b/docs/0.9.0/components/light.html @@ -1128,7 +1128,7 @@

      To manually disable the defaults, without adding other lights:

      <a-scene light="defaultLightsEnabled: false">
        <!-- ... -->
      </a-scene>
      -
      +

      Properties

      All light types support a few basic properties:

      @@ -1270,7 +1270,7 @@

      Spot

      Sp

      Configuring Shadows

      A-Frame includes support for realtime shadow rendering. With proper configuration, objects (both moving or stationary) will cast shadows adding depth and realism to a scene. Since shadows come with many properties, it -is very helpful to use the A-Frame Inspector to configure shadows

      +is very helpful to use the A-Frame Inspector to configure shadows

      Light types that support shadows (point, spot, and directional) include additional properties:

      diff --git a/docs/0.9.0/components/line.html b/docs/0.9.0/components/line.html index 6f71631c6..08aec20dc 100644 --- a/docs/0.9.0/components/line.html +++ b/docs/0.9.0/components/line.html @@ -1115,8 +1115,8 @@

      The line component draws a line given a start coordinate and end coordinate using THREE.Line.

      -

      The raycaster component uses the line component for its showLine -property, which is then used by the laser-controls component.

      +

      The raycaster component uses the line component for its showLine +property, which is then used by the laser-controls component.

      Example

      <a-entity line="start: 0, 1, 0; end: 2 0 -5; color: red"
                line__2="start: -2, 4, 5; end: 0 4 -3; color: green"></a-entity>

      Note an entity can have multiple lines. The line mesh is set as line or diff --git a/docs/0.9.0/components/look-controls.html b/docs/0.9.0/components/look-controls.html index 6405ef37e..a0ca9d9b8 100644 --- a/docs/0.9.0/components/look-controls.html +++ b/docs/0.9.0/components/look-controls.html @@ -1119,7 +1119,7 @@

    • Rotates the entity when we move the mouse.
    • Rotates the entity when we touch-drag the touchscreen.

    -

    Example

    The look-controls component is usually used alongside the camera +

    Example

    The look-controls component is usually used alongside the camera component.

    <a-entity camera look-controls position="0 1.6 0"></a-entity>
    diff --git a/docs/0.9.0/components/material.html b/docs/0.9.0/components/material.html index f9153e210..7eabddcd1 100644 --- a/docs/0.9.0/components/material.html +++ b/docs/0.9.0/components/material.html @@ -1114,11 +1114,11 @@

    The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

    We can register custom materials to extend the material component to provide a wide range of visual effects.

    -
    +

    Example

    Defining a red material using the default standard material:

    <a-entity geometry="primitive: box" material="color: red"></a-entity>
    @@ -1309,7 +1309,7 @@

    fog. +Whether or not material is affected by fog. true @@ -1426,7 +1426,7 @@

    fog. +Whether or not material is affected by fog. true @@ -1462,7 +1462,7 @@

    Textures

    To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

    +asset management system:

    <a-scene>
      <a-assets>
        <img id="my-texture" src="texture.png">
      </a-assets>

      <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
    </a-scene>

    src can also be an inline URL. Note that we do not get browser caching or diff --git a/docs/0.9.0/components/obj-model.html b/docs/0.9.0/components/obj-model.html index d51b40e78..1838c1c30 100644 --- a/docs/0.9.0/components/obj-model.html +++ b/docs/0.9.0/components/obj-model.html @@ -1131,7 +1131,7 @@

    mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

    Events

    @@ -1149,7 +1149,7 @@

    EventsLoading Inline

    We can also load assets by specifying the path directly within url(). Note this is less performant than going through the asset management system.

    <a-entity obj-model="obj: url(/path/to/tree.obj); mtl: url(/path/to/tree.mtl)"></a-entity>
    -

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    +

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    Additional Resources

    We can find and download models on the web to drop into our scenes:

    • Sketchup’s 3D Warehouse - Repository of models.
      • diff --git a/docs/0.9.0/components/oculus-go-controls.html b/docs/0.9.0/components/oculus-go-controls.html index f0cb7994d..d01052540 100644 --- a/docs/0.9.0/components/oculus-go-controls.html +++ b/docs/0.9.0/components/oculus-go-controls.html @@ -1114,7 +1114,7 @@

      The oculus-go-controls component interfaces with the Oculus Go controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Oculus Go controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

      Example

      <!-- Match Oculus Go controller if present, regardless of hand. -->
      <a-entity oculus-go-controls></a-entity>

      <!-- Match Oculus Go controller if present and for specified hand. -->
      <a-entity oculus-go-controls="hand: left"></a-entity>
      <a-entity oculus-go-controls="hand: right"></a-entity>
      diff --git a/docs/0.9.0/components/oculus-touch-controls.html b/docs/0.9.0/components/oculus-touch-controls.html index ffa4cc500..b9301517e 100644 --- a/docs/0.9.0/components/oculus-touch-controls.html +++ b/docs/0.9.0/components/oculus-touch-controls.html @@ -1114,7 +1114,7 @@

      The oculus-touch-controls component interfaces with the Oculus Touch controllers. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.

      Example

      <a-entity oculus-touch-controls="hand: left"></a-entity>
      <a-entity oculus-touch-controls="hand: right"></a-entity>
      diff --git a/docs/0.9.0/components/position.html b/docs/0.9.0/components/position.html index 442a215ed..166e8fbfa 100644 --- a/docs/0.9.0/components/position.html +++ b/docs/0.9.0/components/position.html @@ -1152,7 +1152,7 @@

      #child2‘s position would be 2 3 4.

      Updating Position

      For performance and ergonomics, we recommend updating position directly via the -three.js Object3D .position Vector3 versus via +three.js Object3D .position Vector3 versus via .setAttribute.

      This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1166,7 +1166,7 @@

      Getting Position

      To reflect updates done at the three.js level, A-Frame returns the actual Object3D.position vector object when doing .getAttribute('position'). Note modifying the return value will modify the entity itself.

      -

      See also reading position and rotation of the camera.

      +

      See also reading position and rotation of the camera.

      diff --git a/docs/0.9.0/components/raycaster.html b/docs/0.9.0/components/raycaster.html index 6673f78a5..10fea7b26 100644 --- a/docs/0.9.0/components/raycaster.html +++ b/docs/0.9.0/components/raycaster.html @@ -1125,7 +1125,7 @@

      is explicitly defined via the objects selector property described below. Raycasting is an expensive operation, and we should raycast against only targets that need to be interactable at any given time.

      -

      The cursor component and laser-controls components +

      The cursor component and laser-controls components both build on top of the raycaster component.

      Example

      <a-entity id="player" collider-check>
        <a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
      </a-entity>
      <a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
      @@ -1183,7 +1183,7 @@

      showLine -Whether or not to display the raycaster visually with the line component. +Whether or not to display the raycaster visually with the line component. false @@ -1332,7 +1332,7 @@

      Customizing the Line

      If showLine is set to true, the raycaster will configure the line given the raycaster’s origin, direction, and far properties. To customize the line -appearance provided by the showLine: true property, we configure the line +appearance provided by the showLine: true property, we configure the line component:

      <a-entity raycaster="showLine: true; far: 100" line="color: orange; opacity: 0.5"></a-entity>
      diff --git a/docs/0.9.0/components/rotation.html b/docs/0.9.0/components/rotation.html index cec278ad6..a2fad3fae 100644 --- a/docs/0.9.0/components/rotation.html +++ b/docs/0.9.0/components/rotation.html @@ -1157,7 +1157,7 @@

      15 45 30.

      Updating Rotation

      For performance and ergonomics, we recommend updating rotation directly via the three.js Object3D .rotation Euler (in radians) versus -via .setAttribute.

      +via .setAttribute.

      This method is easier because we have access to all the Euler utilities, and faster by skipping .setAttribute overhead and not needing to create an object to set rotation:

      @@ -1167,7 +1167,7 @@

      reading position and rotation of the camera.

      +

      See also reading position and rotation of the camera.

      diff --git a/docs/0.9.0/components/scale.html b/docs/0.9.0/components/scale.html index c0e040d65..bd8434c44 100644 --- a/docs/0.9.0/components/scale.html +++ b/docs/0.9.0/components/scale.html @@ -1156,7 +1156,7 @@

      Relative Scale

      Similar to the rotation and position components, scales are applied in the local coordinate system and multiply in nested entities.

      Updating Scale

      For performance and ergonomics, we recommend updating scale directly via the -three.js Object3D .scale Vector3 versus via +three.js Object3D .scale Vector3 versus via .setAttribute.

      This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not diff --git a/docs/0.9.0/components/shadow.html b/docs/0.9.0/components/shadow.html index 98298cb0c..1986a1118 100644 --- a/docs/0.9.0/components/shadow.html +++ b/docs/0.9.0/components/shadow.html @@ -1123,7 +1123,7 @@

      Examp

      IMPORTANT: Adding the shadow component alone is not enough to display shadows in your scene. We must have at least one light with castShadow: true enabled. Additionally, the light’s shadow camera (used for depth -projection) usually must be configured correctly. Refer to the light +projection) usually must be configured correctly. Refer to the light component for more information.

      Properties

      diff --git a/docs/0.9.0/components/sound.html b/docs/0.9.0/components/sound.html index e7eb392c4..96778ab84 100644 --- a/docs/0.9.0/components/sound.html +++ b/docs/0.9.0/components/sound.html @@ -1115,7 +1115,7 @@

      The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the -components-position.

      +components-position.

      NOTE: Playing sound on iOS — in any browser — requires a physical user interaction. This is a browser limitation, and internal A-Frame events (like fusing cursors) do diff --git a/docs/0.9.0/components/stats.html b/docs/0.9.0/components/stats.html index 4930eda0f..0e1a086da 100644 --- a/docs/0.9.0/components/stats.html +++ b/docs/0.9.0/components/stats.html @@ -1114,7 +1114,7 @@

      The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

      +component applies only to the <a-scene> element.

      Example

      <a-scene stats></a-scene>

      Metrics

        diff --git a/docs/0.9.0/components/text.html b/docs/0.9.0/components/text.html index bedae18bf..9d53716f5 100644 --- a/docs/0.9.0/components/text.html +++ b/docs/0.9.0/components/text.html @@ -1115,7 +1115,7 @@

        The text component renders signed distance field (SDF) font text.

        Example Image

        -
        +

        Introduction

        Note that rendering text in 3D is hard. In 2D web development, text is the most basic thing because the browser’s renderer and layout engine handles @@ -1359,8 +1359,8 @@

        SizingChange the width.
      • Change the wrapCount (roughly how many characters to fit inside the given width).
      • Change wrapPixels.
        • -
      • Change the scale component.
        • -
      • Position the text closer or farther away.
        • +
      • Change the scale component.
        • +
      • Position the text closer or farther away.

      Sizing

      Text can be wrapped by specifying width in A-Frame units.

      diff --git a/docs/0.9.0/components/tracked-controls.html b/docs/0.9.0/components/tracked-controls.html index c543b1a92..4ad519733 100644 --- a/docs/0.9.0/components/tracked-controls.html +++ b/docs/0.9.0/components/tracked-controls.html @@ -1115,12 +1115,12 @@

      The tracked-controls component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is -abstracted by the hand-controls component as well as the -vive-controls, oculus-touch-controls, -windows-motion-controls, and daydream-controls +abstracted by the hand-controls component as well as the +vive-controls, oculus-touch-controls, +windows-motion-controls, and daydream-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events. For non-6DOF controllers -such as daydream-controls, a primitive arm model is used to emulate +such as daydream-controls, a primitive arm model is used to emulate positional data.

      tracked-controls sets two components that handles different Web API versions for VR:

        diff --git a/docs/0.9.0/components/visible.html b/docs/0.9.0/components/visible.html index 85975f639..29f0d517e 100644 --- a/docs/0.9.0/components/visible.html +++ b/docs/0.9.0/components/visible.html @@ -1137,7 +1137,7 @@

        Value

        < The entity will not be rendered nor visible. The entity will still exist in the scene. -

        Updating Visibility

        It is slightly faster to update visibility at the three.js level versus via +

        Updating Visibility

        It is slightly faster to update visibility at the three.js level versus via .setAttribute.

        // With three.js
        el.object3D.visible = false;

        // With .setAttribute.
        el.setAttribute('visible', false);
        diff --git a/docs/0.9.0/components/vive-controls.html b/docs/0.9.0/components/vive-controls.html index cb2ca0cdb..144ce44b0 100644 --- a/docs/0.9.0/components/vive-controls.html +++ b/docs/0.9.0/components/vive-controls.html @@ -1114,7 +1114,7 @@

        The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

        Example

        <a-entity vive-controls="hand: left"></a-entity>
        <a-entity vive-controls="hand: right"></a-entity>
        diff --git a/docs/0.9.0/components/vive-focus-controls.html b/docs/0.9.0/components/vive-focus-controls.html index 65028f5bc..5d2335e8a 100644 --- a/docs/0.9.0/components/vive-focus-controls.html +++ b/docs/0.9.0/components/vive-focus-controls.html @@ -1114,7 +1114,7 @@

        The vive-focus-controls component interfaces with the Vive Focus controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Vive Focus controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

        Example

        <!-- Match Vive Focus controller if present, regardless of hand. -->
        <a-entity vive-focus-controls></a-entity>

        <!-- Match Vive Focus controller if present and for specified hand. -->
        <a-entity vive-focus-controls="hand: left"></a-entity>
        <a-entity vive-focus-controls="hand: right"></a-entity>
        diff --git a/docs/0.9.0/components/vr-mode-ui.html b/docs/0.9.0/components/vr-mode-ui.html index 6ba57a317..d577fac3c 100644 --- a/docs/0.9.0/components/vr-mode-ui.html +++ b/docs/0.9.0/components/vr-mode-ui.html @@ -1115,7 +1115,7 @@

        The vr-mode-ui component allows disabling of UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only -to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

        +to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

        Example

        <a-scene vr-mode-ui="enabled: false"></a-scene>

        Properties

        diff --git a/docs/0.9.0/components/wasd-controls.html b/docs/0.9.0/components/wasd-controls.html index 96f1403bd..556b9c36e 100644 --- a/docs/0.9.0/components/wasd-controls.html +++ b/docs/0.9.0/components/wasd-controls.html @@ -1114,7 +1114,7 @@

        The wasd-controls component controls an entity with the WASD or arrow keyboard -keys. The wasd-controls component is commonly attached to an entity with the camera +keys. The wasd-controls component is commonly attached to an entity with the camera component.

        Example

        <a-entity camera look-controls wasd-controls position="0 1.6 0"></a-entity>
        diff --git a/docs/0.9.0/components/windows-motion-controls.html b/docs/0.9.0/components/windows-motion-controls.html index 96357a907..3aba0c1bc 100644 --- a/docs/0.9.0/components/windows-motion-controls.html +++ b/docs/0.9.0/components/windows-motion-controls.html @@ -1115,7 +1115,7 @@

        The windows-motion-controls component 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 +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.)

        Example

        <a-entity windows-motion-controls="hand: left"></a-entity>
        <a-entity windows-motion-controls="hand: right"></a-entity>
        diff --git a/docs/0.9.0/core/asset-management-system.html b/docs/0.9.0/core/asset-management-system.html index 77884b1d4..cf4aa80d4 100644 --- a/docs/0.9.0/core/asset-management-system.html +++ b/docs/0.9.0/core/asset-management-system.html @@ -1131,7 +1131,7 @@

      The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

      -
      +

      Example

      We can define our assets in <a-assets> and point to those assets from our entities using selectors:

      diff --git a/docs/0.9.0/core/component.html b/docs/0.9.0/core/component.html index 3870e09d5..e05914066 100644 --- a/docs/0.9.0/core/component.html +++ b/docs/0.9.0/core/component.html @@ -1113,7 +1113,7 @@

      -

      In the entity-component-system pattern, a component is a reusable and +

      In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

      In A-Frame, components modify entities which are 3D objects in the scene. We @@ -1127,7 +1127,7 @@

      Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

      -
      +

      Component HTML Form

      A component holds a bucket of data in the form of one or more component properties. Components use this data to modify entities. Consider an engine @@ -1278,7 +1278,7 @@

      Definition Lifecycle Handler Methods

      With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the shape of the data, the lifecycle handler methods use the data to modify the entity. The handlers will usually interact with the -Entity API.

      +Entity API.

      methodsimage Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

      Overview of Methods

      @@ -1331,15 +1331,15 @@

      setAttribute. +

      - + - + @@ -1376,7 +1376,7 @@

      diffing the current +

      Granular modifications to the entity can be done by diffing the current dataset (this.data) with the previous dataset before the update (oldData).

      A-Frame calls .update() both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The @@ -1384,7 +1384,7 @@

      visible component’s update sets the visibility of +

      For example, the visible component’s update sets the visibility of the entity.

      Parsed component properties computed from the schema default values, mixins, and the entity’s attributes.
      Important: Do not modify the data attribute directly. It is updated internally by A-Frame. To modify a component, use setAttribute.
      this.elReference to the entity as an HTML element.Reference to the entity as an HTML element.
      this.el.sceneElReference to the scene as an HTML element.Reference to the scene as an HTML element.
      this.id
      AFRAME.registerComponent('visible', {
        /**
         * this.el is the entity element.
         * this.el.object3D is the three.js object of the entity.
         * this.data is the component's property or properties.
         */
        update: function (oldData) {
          this.el.object3D.visible = this.data;
        }
        // ...
      });
      @@ -1399,7 +1399,7 @@

      Remove, undo, or clean up all of the component’s modifications to the entity.
    • Detach event listeners.

    -

    For example, when the light component is removed, the light component +

    For example, when the light component is removed, the light component will remove the light object that it had previously set on the entity, thus removing it from the scene.

    AFRAME.registerComponent('light', {
      // ...
      remove: function () {
        this.el.removeObject3D('light');
      }
      // ...
    });
    @@ -1421,7 +1421,7 @@

    time) and the time difference in milliseconds since the last frame (timeDelta). These can be used for interpolation or to only run parts of the tick handler on a set interval.

    -

    For example, the tracked controls component will progress +

    For example, the tracked controls component will progress the controller’s animations, update the controller’s position and rotation, and check for button presses.

    AFRAME.registerComponent('tracked-controls', {
      // ...
      tick: function (time, timeDelta) {
        this.updateMeshAnimation();
        this.updatePose();
        this.updateButtons();
      }
      // ...
    });
    @@ -1440,7 +1440,7 @@

    .
  • Remove event listeners.
  • Remove any chances of dynamic behavior.
    • -

    For example, the sound component will pause the sound and remove an +

    For example, the sound component will pause the sound and remove an event listener that would have played a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      pause: function () {
        this.pauseSound();
        this.removeEventListener();
      }
      // ...
    });
    @@ -1455,7 +1455,7 @@

    .pla
    • Add event listeners.
    -

    For example, the sound component will play the sound and update the +

    For example, the sound component will play the sound and update the event listener that would play a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      play: function () {
        if (this.data.autoplay) { this.playSound(); }
        this.updateEventListener();
      }
      // ...
    });
    @@ -1465,7 +1465,7 @@

  • Dynamically update or extend the schema, usually depending on the value of a property.
    • -

    For example, the geometry component checks if the primitive +

    For example, the geometry component checks if the primitive property changed to determine whether to update the schema for a different type of geometry:

    AFRAME.registerComponent('geometry', {
      // ...
      updateSchema: (newData) {
        if (newData.primitive !== this.data.primitive) {
          this.extendSchema(GEOMETRIES[newData.primitive].schema);
        }
      }
      // ...
    });
    @@ -1520,7 +1520,7 @@ 

    document.querySelector('[geometry]').components.geometry.flushToDOM();
    -

    Read more about component-to-DOM serialization.

    +

    Read more about component-to-DOM serialization.

    Accessing a Component’s Members and Methods

    A component’s members and methods can be accessed through the entity from the .components object. Look up the component from the entity’s map of components, and we’ll have access to the component’s internals. Consider this diff --git a/docs/0.9.0/core/entity.html b/docs/0.9.0/core/entity.html index 2b79b7fc1..3618996d1 100644 --- a/docs/0.9.0/core/entity.html +++ b/docs/0.9.0/core/entity.html @@ -1114,23 +1114,23 @@

    A-Frame represents an entity via the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

    -

    In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

    -
    +

    In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

    +

    Example

    Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

    <a-entity>

    We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

    +give it shape and appearance, we can attach the geometry and +material components:

    <a-entity geometry="primitive: box" material="color: red">
    -

    Or to make it emit light, we can further attach the light component:

    +

    Or to make it emit light, we can further attach the light component:

    <a-entity geometry="primitive: box" material="color: red"
              light="type: point; intensity: 2.0">

    Retrieving an Entity

    We can simply retrieve an entity using DOM APIs.

    @@ -1165,7 +1165,7 @@

    object3DMap

    An entity’s object3DMap is an object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that components have set.

    -

    For an entity with a geometry and light components +

    For an entity with a geometry and light components attached, object3DMap might look like:

    {
      light: <THREE.Light Object>,
      mesh: <THREE.Mesh Object>
    }
    @@ -1179,7 +1179,7 @@

    Metho 
    entity.addEventListener('stateadded', function (evt) {
      if (evt.detail === 'selected') {
        console.log('Entity now selected!');
      }
    });

    entity.addState('selected');
    entity.is('selected');  // >> true

    emit (name, detail, bubbles)

    emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

    +trigger an animation:

    // <a-entity animation="property: rotation; to: 0 360 0; startEvents: rotate">
    entity.emit('rotate');

    We can also pass event detail or data as the second argument:

    @@ -1190,7 +1190,7 @@ 

    entity.emit('sink', null, false);

    flushToDOM (recursive)

    flushToDOM will manually serialize an entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

    +Read more about component-to-DOM serialization.

    getAttribute (componentName)

    getAttribute retrieves parsed component data (including mixins and defaults).

    // <a-entity geometry="primitive: box; width: 3">

    entity.getAttribute('geometry');
    // >> {primitive: "box", depth: 2, height: 2, width: 3, ...}

    entity.getAttribute('geometry').primitive;
    // >> "box"

    entity.getAttribute('geometry').height;
    // >> 2

    entity.getAttribute('position');
    // >> {x: 0, y: 0, z: 0}
    @@ -1217,20 +1217,20 @@

    pa entity will call pause() on its child entities when we pause an entity.

    // <a-entity id="spinning-jumping-ball">
    entity.pause();
    -

    For example, the look-controls component on +

    For example, the look-controls component on pause will remove event handlers that listen for input.

    play ()

    play() will start any dynamic behavior as defined by animations and components. This is automatically called when the DOM attaches an entity. When an entity play(), the entity calls play() on its child entities.

    entity.pause();
    entity.play();
    -

    For example, the sound component on play will begin playing the sound.

    +

    For example, the sound component on play will begin playing the sound.

    setAttribute (componentName, value, [propertyValue | clobber])

    If componentName is not the name of a registered component or the component is a single-property component, setAttribute behaves as it normally would:

    entity.setAttribute('visible', false);

    Though if componentName is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    entity.setAttribute('position', { x: 1, y: 2, z: 3 });
    @@ -1299,7 +1299,7 @@

    Events componentchanged -One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. +One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. componentinitialized diff --git a/docs/0.9.0/core/globals.html b/docs/0.9.0/core/globals.html index 95a22739f..679a07cad 100644 --- a/docs/0.9.0/core/globals.html +++ b/docs/0.9.0/core/globals.html @@ -1125,11 +1125,11 @@

    AComponent -Component prototype. +Component prototype. AEntity -Entity prototype. +Entity prototype. ANode @@ -1137,7 +1137,7 @@

    AScene -Scene prototype. +Scene prototype. components @@ -1153,7 +1153,7 @@

    registerComponent -Function to register a component. +Function to register a component. registerElement @@ -1161,15 +1161,15 @@

    registerGeometry -Function to register a geometry. +Function to register a geometry. registerPrimitive -Function to register a primitive. +Function to register a primitive. registerShader -Function to register a material or shader. +Function to register a material or shader. schema @@ -1189,7 +1189,7 @@

    utils -A-Frame utility modules. +A-Frame utility modules. version diff --git a/docs/0.9.0/core/mixins.html b/docs/0.9.0/core/mixins.html index 5943d29a9..6e44a5974 100644 --- a/docs/0.9.0/core/mixins.html +++ b/docs/0.9.0/core/mixins.html @@ -1115,7 +1115,7 @@

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    <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-mixin>
      </a-assets>

      <a-entity mixin="red cube"></a-entity>
      <a-entity mixin="blue cube"></a-entity>
    </a-scene>
    @@ -1125,7 +1125,7 @@

    the entities above expand to:

    <a-entity material="color: red" geometry="primitive: box"></a-entity>
    <a-entity material="color: blue" geometry="primitive: box"></a-entity>
    -
    +

    Merging Component Properties

    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="height: 10"></a-mixin>
        <a-mixin id="wide" geometry="width: 10"></a-mixin>
      </a-assets>

      <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
    </a-scene>
    diff --git a/docs/0.9.0/core/scene.html b/docs/0.9.0/core/scene.html index a895d1f41..20f26df24 100644 --- a/docs/0.9.0/core/scene.html +++ b/docs/0.9.0/core/scene.html @@ -1114,8 +1114,8 @@

    A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

    -

    The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

    +

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    @@ -1126,7 +1126,7 @@

  • Set up webvr-polyfill, VREffect
  • Add UI to Enter VR that calls WebVR API
    • -
    +

    Example

    <a-scene>
      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <a-box src="#texture"></a-box>
    </a-scene>
    @@ -1171,7 +1171,7 @@

    systems -Instantiated systems. +Instantiated systems. time @@ -1235,12 +1235,12 @@

    embedded - Remove fullscreen styles from the canvas.

    • -
  • fog - Add fog.
    • -
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • -
  • inspector - Inject the A-Frame Inspector.
    • -
  • stats - Toggle performance stats.
    • -
  • vr-mode-ui - Toggle UI for entering and exiting VR.
    • +
  • embedded - Remove fullscreen styles from the canvas.
    • +
  • fog - Add fog.
    • +
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • +
  • inspector - Inject the A-Frame Inspector.
    • +
  • stats - Toggle performance stats.
    • +
  • vr-mode-ui - Toggle UI for entering and exiting VR.

    • Running Content Scripts on the Scene

    The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

    AFRAME.registerComponent('do-something', {
      init: function () {
        var sceneEl = this.el;
      }
    });
    diff --git a/docs/0.9.0/core/systems.html b/docs/0.9.0/core/systems.html index 54adecf1b..da5775fc2 100644 --- a/docs/0.9.0/core/systems.html +++ b/docs/0.9.0/core/systems.html @@ -1113,16 +1113,16 @@

    -

    A system, of the entity-component-system pattern, provides global scope, +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -
    + -

    Registering a System

    A system is registered similarly to a component.

    +

    Registering a System

    A system is registered similarly to a component.

    If the system name matches a component name, then the component will have a reference to the system as this.system:

    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);
      }
    });
    @@ -1144,7 +1144,7 @@

    schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data.

    Methods

    A system, like a component, defines lifecycle handlers. It can also define diff --git a/docs/0.9.0/core/utils.html b/docs/0.9.0/core/utils.html index 8bf747626..b73bde118 100644 --- a/docs/0.9.0/core/utils.html +++ b/docs/0.9.0/core/utils.html @@ -1114,7 +1114,7 @@

    A-Frame’s utility modules are public through AFRAME.utils.

    -
    +

    AFRAME.utils.coordinates

    Module for handling vec3 and vec4 types.

    .isCoordinates (value)

    Tests whether a string is a vec3 or vec4.

    @@ -1126,7 +1126,7 @@

    .stringify (data)

    Stringifies an {x, y, z} vec3 object to an “x y z” string.Or Stringifies an {x, y, z, w} vec4 object to an “x y z w” string.

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
    // >> "1 2 -3"

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3, w:4})
    // >> "1 2 -3 4"
    -

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for +

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for return 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.

    @@ -1134,7 +1134,7 @@

    This is useful for components that need a way to reference a property of a multi-property component.

    -

    .setComponentProperty (entity, componentName, value, delimiter)

    Performs like Entity.setAttribute, but with support for setting an +

    .setComponentProperty (entity, componentName, value, delimiter)

    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.

    diff --git a/docs/0.9.0/guides/building-a-360-image-gallery.html b/docs/0.9.0/guides/building-a-360-image-gallery.html index 55c069a6f..d6caa3ec5 100644 --- a/docs/0.9.0/guides/building-a-360-image-gallery.html +++ b/docs/0.9.0/guides/building-a-360-image-gallery.html @@ -1117,7 +1117,7 @@

    Let’s build an interactive gaze-based 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

    -

    This guide will practice three concepts related to entity-component:

    +

    This guide will practice three concepts related to entity-component:

    1. Using the standard components that come with A-Frame.
    2. Using community components from the ecosystem.
      3. @@ -1125,18 +1125,18 @@

    Not to say 360° images are at all a focus use case of A-Frame, but it makes for an easy example that has a lot of demand as an early use case on the Web.

    -
    +

    Skeleton

    This is the starting point for our scene. We can also remix the Glitch.

    <a-scene>
      <a-assets>
        <audio id="click-sound" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>

        <!-- Images. -->
        <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
        <img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
        <img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
        <img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
        <img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Link template we will build. -->
      <a-entity class="link"></a-entity>

      <!-- Camera + Cursor. -->
      <a-camera>
        <a-cursor
          id="cursor"
          animation__click="property: scale; from: 0.1 0.1 0.1; to: 1 1 1; easing: easeInCubic; dur: 150; startEvents: click"
          animation__clickreset="property: scale; to: 0.1 0.1 0.1; dur: 1; startEvents: animationcomplete__click"
          animation__fusing="property: scale; from: 1 1 1; to: 0.1 0.1 0.1; easing: easeInCubic; dur: 150; startEvents: fusing"></a-cursor>
      </a-camera>
    </a-scene>

    We have predefined:

    Using Standard Components

    Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure @@ -1146,20 +1146,20 @@ 

    <a-entity class="link"></a-entity>
    -

    To give our entity shape, we can attach the geometry component, +

    To give our entity shape, we can attach the geometry component, configured to a plane shape. We specify the component data using a syntax that resembles that of inline CSS styles:

    <a-entity
      class="link"
      geometry="primitive: plane; height: 1; width: 1"></a-entity>
    -

    Then to give our entity appearance, we can attach the material +

    Then to give our entity appearance, we can attach the material component. We set shader to flat so the image isn’t affected negatively by lighting. And we set src to #cubes-thumb, a selector to one -of the images preloaded in the Asset Management System. Alternatively, +of the images preloaded in the Asset Management System. Alternatively, we could pass a URL for the image:

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: #cubes-thumb"></a-entity>

    We can continue adding features to our entity by plugging in more components. -Let’s attach one more standard component, the sound component. We want +Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1235,15 +1235,15 @@

    Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

    Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We can specify event names either the _event property or via the __<id> as shown below. The rest of the properties define the setAttribute calls. Notice that the event-set component can have -multiple instances:

    +multiple instances:

    <script id="link" type="text/html">
      <a-entity class="link"
        geometry="primitive: plane; height: 1; width: 1"
        material="shader: flat; src: ${thumb}"
        sound="on: click; src: #click-sound"
        event-set__mouseenter="scale: 1.2 1.2 1"
        event-set__mouseleave="scale: 1 1 1"
        event-set__click="_target: #360-image; _delay: 300; material.src: ${src}"></a-entity>
    </script>

    Next, we want to actually set the new background image. We’ll add a nice fade-to-black effect.

    @@ -1272,7 +1272,7 @@

    Writing a Component and +application-specific components. That is covered in Writing a Component and hopefully in later guides.

    Try it out!

    diff --git a/docs/0.9.0/guides/building-a-basic-scene.html b/docs/0.9.0/guides/building-a-basic-scene.html index d1e530b5a..d5e9b5be7 100644 --- a/docs/0.9.0/guides/building-a-basic-scene.html +++ b/docs/0.9.0/guides/building-a-basic-scene.html @@ -1126,7 +1126,7 @@

  • Add text

    • Remix the Basic Guide example on Glitch.

    -
    +

    Starting with HTML

    We start out with a minimal HTML structure:

    <html>
      <head>
        <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
        </a-scene>
      </body>
    </html>
    @@ -1135,7 +1135,7 @@

    before <a-scene> because A-Frame registers custom HTML elements which must be defined before <a-scene> is attached or else <a-scene> will do nothing.

    -

    Next, we include <a-scene> in the <body>. <a-scene> will contain every +

    Next, we include <a-scene> in the <body>. <a-scene> will contain every entity in our scene. <a-scene> handles all of the setup that is required for 3D: setting up WebGL, the canvas, camera, lights, renderer, render loop as well as out of the box WebVR support on platforms such as HTC Vive, Oculus Rift, @@ -1146,7 +1146,7 @@

    <a-box>‘s documentation for +

    Here we define the color <a-box>, see <a-box>‘s documentation for the more attributes (e.g., width, height, depth).

    boximage Image by Ruben Mueller from vrjump.de

    @@ -1154,13 +1154,13 @@

    <a-entity> with the geometry and -material components:

    +underneath <a-box> is <a-entity> with the geometry and +material components:

    <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>
    -

    However, because the default camera and the box are positioned at the default +

    However, because the default camera and the box are positioned at the default position at the 0 0 0 origin, we won’t be able to see the box unless we move -it. We can do this by using the position component to transform the +it. We can do this by using the position component to transform the box in 3D space.

    Transforming an Entity in 3D

    Let’s first go over 3D space. A-Frame uses a right-handed coordinate system. With the default camera direction: positive X-axis extends right, positive @@ -1179,7 +1179,7 @@

    To translate, rotate, and scale the box, we can change the -position, rotation, and scale components. +position, rotation, and scale components. Let’s first apply the rotation and scale components:

    <a-scene>
      <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
    @@ -1236,7 +1236,7 @@ 

    <a-scene>
      <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <!-- Out of the box environment! -->
      <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
    </a-scene>

    Applying an Image Texture

    -

    Make sure you’re serving your HTML using a local server +

    Make sure you’re serving your HTML using a local server for textures to load properly.

    We can apply an image texture to the box with an image, video, or <canvas> @@ -1248,7 +1248,7 @@

    -

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The +

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The asset management system makes it easier for the browser to cache assets (e.g., images, videos, models) and A-Frame will make sure all of the assets are fetched before rendering.

    @@ -1268,7 +1268,7 @@

    Creating a Custom Environment (Optional)

    Previously we had the environment component generate the environment. Though it’s good to know a bit on creating a basic environment for learning purposes.

    -

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. +

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. <a-sky>, which is a material applied to the inside of a large sphere, can be a flat color, a 360° image, or a 360° video. For example, a dark gray background would be:

    @@ -1278,7 +1278,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>
    </a-scene>
    -

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are +

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are oriented parallel to the XY axis. To make it parallel to the ground, we need to orient it along the XZ axis. We can do so by rotating the plane negative 90° on the X-axis.

    @@ -1296,7 +1296,7 @@ 

    <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
      repeat="10 10"></a-plane>
    -

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default +

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default if we don’t specify any lights, A-Frame adds an ambient light and a directional light. If A-Frame didn’t add lights for us, the scene would be black. Once we add lights of our own, however, the default lighting setup is removed and @@ -1309,7 +1309,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>

      <a-light type="ambient" color="#445451"></a-light>
      <a-light type="point" intensity="2" position="2 4 4"></a-light>
    </a-scene>
    -

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation +

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation system. Animations interpolate or tween a value over time. We can set the animation component on the entity. Let’s have the box hover up and down to add some motion to the scene.

    @@ -1317,7 +1317,7 @@

    entity’s object3D’s position’s Y axis.

    • +
  • Animate the entity’s object3D’s position’s Y axis.
  • Animate to 2.2 which is 20 centimeters higher.
  • Alternate the dir (direction) of the animation on each repeated cycle of the animation so it goes back and forth.
  • Last for 2000 millisecond dur (duration) on each cycle.
    • @@ -1328,19 +1328,19 @@

    Given that many developers currently do not have proper VR hardware with controllers, we’ll focus this section on using basic mobile and desktop inputs -with the built-in cursor component. The cursor component by default provides +with the built-in cursor component. The cursor component by default provides the ability to “click” on entities by staring or gazing at them on mobile, or on desktop, looking at an entity and click the mouse. But know that the cursor component is just one way to add interactions, things open up if we have access to actual controllers.

    -

    To have a visible cursor fixed to the camera, we place the cursor as a child +

    To have a visible cursor fixed to the camera, we place the cursor as a child of the camera as explained above in Parent and Child Transforms.

    Since we didn’t specifically define a camera, A-Frame included a default camera for us. But since we need to add a cursor as a child of the camera, we will -need to now define <a-camera> containing <a-cursor>:

    +need to now define <a-camera> containing <a-cursor>:

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"
             animation="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true"></a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
    -

    If we check the documentation of the cursor component that +

    If we check the documentation of the cursor component that <a-cursor> wraps, we see that it emits hover events such as mouseenter, mouseleave as well as click.

    Event Listener Component (Intermediate)

    One way to manually handle the cursor events is to add an event listener with @@ -1348,7 +1348,7 @@

    Animating on Events below.

    In JavaScript, we grab the box with querySelector, use -addEventListener, and then setAttribute +addEventListener, and then setAttribute to make the box grow its scale when its hovered over. Note that A-Frame adds features to setAttribute to work with multi-property components. We can pass a full {x, y, z} object as the second argument.

    @@ -1385,7 +1385,7 @@ 

    <a-scene>
      <!-- ... -->
      <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
        position="-3 1 -4"></a-sound>
      <!-- ... -->
    </a-scene>
    -

    Adding Text

    A-Frame comes with a text component. There are several ways to render +

    Adding Text

    A-Frame comes with a text component. There are several ways to render text, each with their advantages and disadvantages, A-Frame comes with an SDF text implementation using three-bmfont-text that is relatively sharp and performant:

    diff --git a/docs/0.9.0/guides/building-a-minecraft-demo.html b/docs/0.9.0/guides/building-a-minecraft-demo.html index 55797588d..e2ac49322 100644 --- a/docs/0.9.0/guides/building-a-minecraft-demo.html +++ b/docs/0.9.0/guides/building-a-minecraft-demo.html @@ -1119,7 +1119,7 @@

    Let’s build a basic Minecraft (voxel builder) demo that targets room scale VR with controllers (e.g., Vive, Rift). The example will be minimally usable on mobile and desktop.

    -
    +

    Example Skeleton

    We’ll start off with this skeleton HTML:

    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>

    <body>
      <a-scene>
      </a-scene>
    </body>
    diff --git a/docs/0.9.0/introduction/best-practices.html b/docs/0.9.0/introduction/best-practices.html index baa96a5b5..9a617e82d 100644 --- a/docs/0.9.0/introduction/best-practices.html +++ b/docs/0.9.0/introduction/best-practices.html @@ -1113,7 +1113,7 @@

    -

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and +

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and structure application code within purely A-Frame components for reusability, modularity, composability, decoupling, encapsulation, declarativeness, and testability.

    @@ -1127,14 +1127,14 @@

    A-Fra 
    <script>
      AFRAME.registerComponent('code-that-does-this', {
        init: function () {
          // Code here.
          console.log(this.el);
        }
      });

      AFRAME.registerComponent('code-to-attach-to-box', {
        init: function () {
          // Code here.
          console.log(this.el);
        }
      });
    </script>

    <a-scene code-that-does-this>
      <a-box code-to-attach-to-box></a-box>
      <!-- ... -->
    </a-scene>

    WebVR

    See WebVR Guidelines.

    -

    Performance

    pool +

    Performance

    pool [geometrymerger]: https://www.npmjs.com/package/aframe-geometry-merger-component

    Performance is critical in VR. A high framerate must be maintained in order for people to feel comfortable. Here are some ways to help improve performance of an A-Frame scene:

      -
    • Use recommended hardware specifications.
      • -
    • Use the stats component to keep an eye on various metrics (FPS, +
    • Use recommended hardware specifications.
      • +
    • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities). We want to maximize FPS and minimize everything else.
    • Limit draw calls as much as possible. Each geometry, object, model without @@ -1144,7 +1144,7 @@

      asset management system to browser cache and +
    • Make use of the asset management system to browser cache and preload assets.
    • If using models, look to bake your lights into textures rather than relying on real-time lighting and shadows.
      • @@ -1161,16 +1161,16 @@

      background component instead of a-sky to define a +
    • Use the background component instead of a-sky to define a solid color as the scene background. This prevents the creation of unnecessary geometry.
    • Update position, rotation, scale, and visible using at the three.js level (el.object3D.position, el.object3D.rotation, el.object3D.scale, el.object3D.visible) to avoid overhead on .setAttribute.
    • If you need to create, remove and re-create many entities of the same type, -use the pool component to pre-generate and reuse entities. This +use the pool component to pre-generate and reuse entities. This avoids the cost of creating entities on the fly and reduces garbage collection.
      • -
    • When using the animation component, animate values directly +
    • When using the animation component, animate values directly which will skip .setAttribute and animate JS values directly. For example, instead of material.opacity, animate components.material.material.opacity.
      • diff --git a/docs/0.9.0/introduction/developing-with-threejs.html b/docs/0.9.0/introduction/developing-with-threejs.html index db73c5554..88bcfa9ac 100644 --- a/docs/0.9.0/introduction/developing-with-threejs.html +++ b/docs/0.9.0/introduction/developing-with-threejs.html @@ -1143,7 +1143,7 @@

      And every A-Frame entity also has a reference to <a-scene> via .sceneEl:

      document.querySelector('a-entity').sceneEl.object3D;  // THREE.Scene
      -

      From a component, we access the scene through its entity +

      From a component, we access the scene through its entity (i.e., this.el):

      AFRAME.registerComponent('foo', {
        init: function () {
          var scene = this.el.sceneEl.object3D;  // THREE.Scene
        }
      });
      diff --git a/docs/0.9.0/introduction/entity-component-system.html b/docs/0.9.0/introduction/entity-component-system.html index 234cad964..c52186c4d 100644 --- a/docs/0.9.0/introduction/entity-component-system.html +++ b/docs/0.9.0/introduction/entity-component-system.html @@ -1142,20 +1142,20 @@

      A well-known game engine implementing ECS is Unity. Although there are pain points in cross-entity communication, we’ll see how A-Frame, the DOM, and declarative HTML really make ECS shine.

      -
      +

      Concept

      ECS Minecraft

      A basic definition of ECS involves:

      We’ll go over GUI tools built on top of A-Frame that can be used without code. And touch on other tools that can ease development across multiple machines.

      -
      +

      A-Frame Inspector

      The A-Frame Inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:

      diff --git a/docs/0.9.0/introduction/vr-headsets-and-webvr-browsers.html b/docs/0.9.0/introduction/vr-headsets-and-webvr-browsers.html index b88b3434f..05cc1d81b 100644 --- a/docs/0.9.0/introduction/vr-headsets-and-webvr-browsers.html +++ b/docs/0.9.0/introduction/vr-headsets-and-webvr-browsers.html @@ -1113,7 +1113,7 @@

      -
      +

      What is Virtual Reality?

      Virtual reality (VR) is a technology that uses head-mounted headsets with displays to generate the realistic images, sounds, and other sensations to put diff --git a/docs/0.9.0/introduction/writing-a-component.html b/docs/0.9.0/introduction/writing-a-component.html index 082810a8e..4bea17ca4 100644 --- a/docs/0.9.0/introduction/writing-a-component.html +++ b/docs/0.9.0/introduction/writing-a-component.html @@ -1113,7 +1113,7 @@

      -

      Components of A-Frame’s entity-component framework are JavaScript +

      Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, @@ -1121,7 +1121,7 @@

      components.

      vehicleimage Image by Ruben Mueller from vrjump.de

      -

      This guide will take it pretty slow. We recommend skimming over the Component +

      This guide will take it pretty slow. We recommend skimming over the Component API documentation before going through this guide as that documentation will be more concise. Note that components should be defined before <a-scene> like:

      @@ -1135,12 +1135,12 @@

      Example: hello-world Component

      Let’s start with the most basic component to get a general idea. This component will log a simple message once when the component’s entity is attached using -the .init() handler.

      +the .init() handler.

      Registering the Component with AFRAME.registerComponent

      Components are registered with AFRAME.registerComponent(). We pass the name of the component, which will be used as the HTML attribute name in the component’s representation in the DOM. Then we pass the component definition which is a JavaScript object of methods and properties. Within the definition, we can -define lifecycle handler methods. One of which is .init(), which +define lifecycle handler methods. One of which is .init(), which is called once when the component is first plugged into its entity.

      In the example below, we just have our .init() handler log a simple message.

      AFRAME.registerComponent('hello-world', {
        init: function () {
          console.log('Hello, World!');
        }
      });
      @@ -1194,7 +1194,7 @@

      Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

      To demonstrate this, we’ll have our log component only log whenever its -entity emits an event. First, we’ll add an event property type that +entity emits an event. First, we’ll add an event property type that specifies which event the component should listen on.

      // ...
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'},
      },
      // ...
      @@ -1203,7 +1203,7 @@

      add an event listener that will +

      What we want to do is add an event listener that will listen to the event before logging a message. If the event property type is not specified, we’ll just log the message:

      AFRAME.registerComponent('log', {
        schema: {
          event: {type: 'string', default: ''},
          message: {type: 'string', default: 'Hello, World!'}
        },

        update: function () {
          var data = this.data;  // Component property values.
          var el = this.el;  // Reference to the component's entity.

          if (data.event) {
            // This will log the `message` when the entity emits the `event`.
            el.addEventListener(data.event, function () {
              console.log(data.message);
            });
          } else {
            // `event` not specified, just log the message.
            console.log(data.message);
          }
        }
      });
      @@ -1212,7 +1212,7 @@

      , we need a reference to the function. So +

      But to remove an event listener, we need a reference to the function. So let’s first store the function on this.eventHandlerFn whenever we attach an event listener. When we attach properties to the component via this, they’ll be available throughout all the other lifecycle handlers.

      @@ -1227,13 +1227,13 @@ 

      <a-scene>
        <a-entity log="event: anEvent; message: Hello, Metaverse!"></a-entity>
      </a-scene>
      -

      Let’s have our entity emit the event to test it out:

      +

      Let’s have our entity emit the event to test it out:

      var el = document.querySelector('a-entity');
      el.emit('anEvent');
      // >> "Hello, Metaverse!"

      Now let’s update our event to test the .update() handler:

      var el = document.querySelector('a-entity');
      el.setAttribute('log', {event: 'anotherEvent', message: 'Hello, new event!'});
      el.emit('anotherEvent');
      // >> "Hello, new event!"
      -

      Handling Component Removal

      Let’s handle the case where the component unplugs from the entity +

      Handling Component Removal

      Let’s handle the case where the component unplugs from the entity (i.e., .removeAttribute('log')). We can implement the .remove() handler which is called when the component is removed. For the log component, we remove any event listeners the component attached to the entity:

      @@ -1246,7 +1246,7 @@ 

      var el = document.querySelector('a-entity');
      el.removeAttribute('log');
      el.emit('anEvent');
      // >> Nothing should be logged...

      Allowing Multiple Instances of a Component

      Let’s allow having multiple log components attached to the same entity. To do -so, we enable multiple instancing with the .multiple flag. Let’s +so, we enable multiple instancing with the .multiple flag. Let’s set that to true:

      AFRAME.registerComponent('log', {
        schema: {
          event: {type: 'string', default: ''},
          message: {type: 'string', default: 'Hello, World!'}
        },

        multiple: true,

        // ...
      });
      @@ -1263,13 +1263,13 @@

      Example: box Component

      For a less trivial example, let’s find out how we can add 3D objects and affect -the scene graph by writing a component that uses three.js. To get +the scene graph by writing a component that uses three.js. To get the idea, we’ll just make a basic box component that creates a box mesh with both geometry and material.

      boximage Image by Ruben Mueller from vrjump.de

      Note: this is just a 3D equivalent of writing a Hello, World! component. -A-Frame provides geometry and material components if we +A-Frame provides geometry and material components if we actually wanted to make a box in practice.

      Schema and API

      Let’s start with the schema. The schema defines the API of your component. We’ll make the width, height, depth, and color configurable through the @@ -1286,7 +1286,7 @@

      THREE.BoxBufferGeometry, THREE.MeshStandardMaterial, and finally a THREE.Mesh. Then we set the mesh on our entity to add the mesh to the -three.js scene graph using .setObject3D(name, object):

      +three.js scene graph using .setObject3D(name, object):

      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.BoxBufferGeometry(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);
        }
      });

      Now let’s handle updates. If the geometry-related properties (i.e., width, diff --git a/docs/0.9.0/primitives/a-circle.html b/docs/0.9.0/primitives/a-circle.html index de18db8f0..b1525a694 100644 --- a/docs/0.9.0/primitives/a-circle.html +++ b/docs/0.9.0/primitives/a-circle.html @@ -1113,7 +1113,7 @@

      -

      The circle primitive creates circles surfaces using the geometry +

      The circle primitive creates circles surfaces using the geometry component with the type set to circle.

      Example

      <a-scene>
        <a-assets>
          <img id="platform" src="platform.jpg">
        </a-assets>

        <!-- Basic circle. -->
        <a-circle color="#CCC" radius="20"></a-circle>

        <!-- Textured circle parallel to ground. -->
        <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
      </a-scene>
      diff --git a/docs/0.9.0/primitives/a-cursor.html b/docs/0.9.0/primitives/a-cursor.html index a69792190..aafe1701b 100644 --- a/docs/0.9.0/primitives/a-cursor.html +++ b/docs/0.9.0/primitives/a-cursor.html @@ -1117,7 +1117,7 @@

      interactivity with a scene on devices that do not have a hand controller. The default appearance is a ring geometry. The cursor is usually placed as a child of the camera.

      -

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      +

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      Example

      <a-scene>
        <a-camera>
          <a-cursor></a-cursor>
        </a-camera>

        <a-box></a-box>
      </a-scene>

      Attributes

      diff --git a/docs/0.9.0/primitives/a-gltf-model.html b/docs/0.9.0/primitives/a-gltf-model.html index 31d84f13c..1cb46b061 100644 --- a/docs/0.9.0/primitives/a-gltf-model.html +++ b/docs/0.9.0/primitives/a-gltf-model.html @@ -1127,7 +1127,7 @@

      - +
      srcgltf-model.srcgltf-model.src null
      diff --git a/docs/0.9.0/primitives/a-obj-model.html b/docs/0.9.0/primitives/a-obj-model.html index f39bb8b7a..24c8e399b 100644 --- a/docs/0.9.0/primitives/a-obj-model.html +++ b/docs/0.9.0/primitives/a-obj-model.html @@ -1115,7 +1115,7 @@

      We recommend glTF for distributing assets in production over the web. Check -out using the glTF model primitive. You can +out using the glTF model primitive. You can either instead export to COLLADA and use the converter or try out the OBJ converter.

      @@ -1142,7 +1142,7 @@

      null -

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      +

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      diff --git a/docs/0.9.0/primitives/a-plane.html b/docs/0.9.0/primitives/a-plane.html index df40f9211..f589f8d10 100644 --- a/docs/0.9.0/primitives/a-plane.html +++ b/docs/0.9.0/primitives/a-plane.html @@ -1113,7 +1113,7 @@

      -

      The plane primitive creates flat surfaces using the geometry +

      The plane primitive creates flat surfaces using the geometry component with the type set to plane.

      Example

      <a-scene>
        <a-assets>
          <img id="ground" src="ground.jpg">
        </a-assets>

        <!-- Basic plane. -->
        <a-plane color="#CCC" height="20" width="20"></a-plane>

        <!-- Textured plane parallel to ground. -->
        <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
      </a-scene>
      diff --git a/docs/0.9.0/primitives/a-sound.html b/docs/0.9.0/primitives/a-sound.html index 6ec1dbc86..38b6e4c84 100644 --- a/docs/0.9.0/primitives/a-sound.html +++ b/docs/0.9.0/primitives/a-sound.html @@ -1113,7 +1113,7 @@

      -

      The sound primitive wraps the sound component.

      +

      The sound primitive wraps the sound component.

      Example

      <a-scene>
        <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
      </a-scene>

      Attributes

      diff --git a/docs/0.9.0/primitives/a-sphere.html b/docs/0.9.0/primitives/a-sphere.html index 4074a05f0..d9fe0bb60 100644 --- a/docs/0.9.0/primitives/a-sphere.html +++ b/docs/0.9.0/primitives/a-sphere.html @@ -1113,7 +1113,7 @@

      -

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      +

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      Example

      <a-sphere color="yellow" radius="5"></a-sphere>

      Attributes

      diff --git a/docs/0.9.0/primitives/a-text.html b/docs/0.9.0/primitives/a-text.html index 086a7fec4..40d663a87 100644 --- a/docs/0.9.0/primitives/a-text.html +++ b/docs/0.9.0/primitives/a-text.html @@ -1113,7 +1113,7 @@

      -

      Wraps the text component.

      +

      Wraps the text component.

      Example

      <a-text value="Hello, World!"></a-text>

      Attributes

      diff --git a/docs/0.9.0/primitives/a-torus-knot.html b/docs/0.9.0/primitives/a-torus-knot.html index cf7e711b8..40ab69813 100644 --- a/docs/0.9.0/primitives/a-torus-knot.html +++ b/docs/0.9.0/primitives/a-torus-knot.html @@ -1113,7 +1113,7 @@

      -

      The torus knot primitive creates pretzel shapes using the geometry +

      The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

      Example

      <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
      diff --git a/docs/0.9.0/primitives/a-torus.html b/docs/0.9.0/primitives/a-torus.html index 88b42c7b0..7153b1d1e 100644 --- a/docs/0.9.0/primitives/a-torus.html +++ b/docs/0.9.0/primitives/a-torus.html @@ -1113,7 +1113,7 @@

      -

      The torus primitive creates donut or tube shapes using the geometry +

      The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

      Example

      <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
      diff --git a/docs/0.9.0/primitives/a-triangle.html b/docs/0.9.0/primitives/a-triangle.html index a0e624bec..bfba7c22f 100644 --- a/docs/0.9.0/primitives/a-triangle.html +++ b/docs/0.9.0/primitives/a-triangle.html @@ -1113,7 +1113,7 @@

      -

      The triangle primitive creates triangle surfaces using the geometry +

      The triangle primitive creates triangle surfaces using the geometry component with the type set to triangle.

      Example

      <a-scene>
        <a-assets>
          <img id="platform" src="https://i.imgur.com/mYmmbrp.jpg">
        </a-assets>

        <!-- Basic triangle. -->
        <a-triangle color="#CCC" vertex-c="1 -1 0"></a-triangle>

        <!-- Textured triangle parallel to ground. -->
        <a-triangle src="#platform" rotation="-90 0 0"></a-triangle>
      </a-scene>
      diff --git a/docs/0.9.0/primitives/a-videosphere.html b/docs/0.9.0/primitives/a-videosphere.html index 384a35662..4f6d2b0a2 100644 --- a/docs/0.9.0/primitives/a-videosphere.html +++ b/docs/0.9.0/primitives/a-videosphere.html @@ -1120,7 +1120,7 @@

      Ex

      Methods

      More indepth knowledge on the methods to alter video material can be seen over here

      // 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();
      -

      Attributes

      Note that the videosphere primitive inherits common attributes.

      +

      Attributes

      Note that the videosphere primitive inherits common attributes.

      diff --git a/docs/1.0.0/components/animation.html b/docs/1.0.0/components/animation.html index be3752c9b..2b56a3b33 100644 --- a/docs/1.0.0/components/animation.html +++ b/docs/1.0.0/components/animation.html @@ -1139,7 +1139,7 @@

      Read more below for additional options and discovering how to properly animate different types of values.

      -
      +

      API

      Properties

      diff --git a/docs/1.0.0/components/cursor.html b/docs/1.0.0/components/cursor.html index 39797cb25..cf1f0a992 100644 --- a/docs/1.0.0/components/cursor.html +++ b/docs/1.0.0/components/cursor.html @@ -1121,11 +1121,11 @@

      The cursor component provides hover and click states for interaction on top of -the raycaster component. The cursor component can be used for +the raycaster component. The cursor component can be used for both gaze-based and controller-based interactions, but the appearance needs -to be configured depending on the use case. The <a-cursor> +to be configured depending on the use case. The <a-cursor> primitive provides a default reticle appearance for a gaze-based -cursor, and the laser-controls component configures the +cursor, and the laser-controls component configures the cursor for all controllers.

      The cursor component listens to events and keeps state on what’s being hovered and pressed in order to provide mousedown, mouseup, mouseenter, @@ -1136,15 +1136,15 @@

      By default, the cursor is configured to be used in a gaze-based mode and will register user input via mouse or touch. Specifying the downEvents and upEvents properties allows the cursor to work with controllers. For example, -the laser-controls component automatically configures these +the laser-controls component automatically configures these properties to work with most controllers.

      To provide a shape or appearance to the cursor, we should apply either the -geometry and material components or use the raycaster -component’s showLine property to draw a line using the line +geometry and material components or use the raycaster +component’s showLine property to draw a line using the line component.

      Example

      For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no -matter where we look, we place it as a child of the active camera +matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

      <a-entity camera look-controls>
        <a-entity cursor="fuse: true; fuseTimeout: 500"
                  position="0 0 -1"
                  geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                  material="color: black; shader: flat">
        </a-entity>
      </a-entity>

      <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
      @@ -1191,7 +1191,7 @@

      To further customize the cursor component, we configure the cursor’s dependency -component, the raycaster component.

      +component, the raycaster component.

      Events

      @@ -1261,7 +1261,7 @@

      States

      Configuring the Cursor through the Raycaster Component

      The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

      <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>
      @@ -1276,7 +1276,7 @@

      Adding Visual Feedback

      To add visual feedback to the cursor to show when the cursor is clicking or -fusing, we can use the animation component. When the cursor +fusing, we can use the animation component. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

      <a-entity
        animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
        animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
        animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
        cursor="fuse: true;"
        material="color: black; shader: flat"
        position="0 0 -3"
        geometry="primitive: ring"></a-entity>
      diff --git a/docs/1.0.0/components/daydream-controls.html b/docs/1.0.0/components/daydream-controls.html index 8d51a399d..521441074 100644 --- a/docs/1.0.0/components/daydream-controls.html +++ b/docs/1.0.0/components/daydream-controls.html @@ -1121,7 +1121,7 @@

      The daydream-controls component interfaces with the Google Daydream controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Daydream controller model that highlights the touched and/or pressed buttons (trackpad).

      As a first time set up, to use the Daydream controller on Chrome for Android diff --git a/docs/1.0.0/components/debug.html b/docs/1.0.0/components/debug.html index e4453b017..433e0f815 100644 --- a/docs/1.0.0/components/debug.html +++ b/docs/1.0.0/components/debug.html @@ -1137,8 +1137,8 @@ 

      <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

      Make sure that this component is not active in production.

      -

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM:

      +

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM:

      document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
      document.querySelector('a-entity').flushToDOM();  // Flush an entity.
      document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
      document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.
      diff --git a/docs/1.0.0/components/device-orientation-permission-ui.html b/docs/1.0.0/components/device-orientation-permission-ui.html index 2437eddfd..441e7e87a 100644 --- a/docs/1.0.0/components/device-orientation-permission-ui.html +++ b/docs/1.0.0/components/device-orientation-permission-ui.html @@ -1121,7 +1121,7 @@

      Starting with Safari on iOS 13 browsers require sites to be served over https and request user permission to access DeviceOrientation events. This component presents a permission dialog for the user to grant or deny access. -The device-orientation-permission-ui component applies only to the <a-scene> element

      +The device-orientation-permission-ui component applies only to the <a-scene> element

      To configure the style of the dialog one can redefine the associated css styles. To change the colors of the allow, deny and ok buttons:

      .a-dialog-allow-button {
        background-color: red;
      }

      .a-dialog-deny-button {
        background-color: blue;
      }

      .a-dialog-ok-button {
         background-color: green;
       }
      diff --git a/docs/1.0.0/components/fog.html b/docs/1.0.0/components/fog.html index 14d46cf86..70a2a3b66 100644 --- a/docs/1.0.0/components/fog.html +++ b/docs/1.0.0/components/fog.html @@ -1121,7 +1121,7 @@

      The fog component obscures entities in fog given distance from the camera. The -fog component applies only to the <a-scene> element.

      +fog component applies only to the <a-scene> element.

      Example

      <a-scene fog="type: linear; color: #AAA"></a-scene>

      Properties

      Given the fog distribution type, different properties will apply.

      diff --git a/docs/1.0.0/components/gearvr-controls.html b/docs/1.0.0/components/gearvr-controls.html index 78778010b..34872b97f 100644 --- a/docs/1.0.0/components/gearvr-controls.html +++ b/docs/1.0.0/components/gearvr-controls.html @@ -1121,7 +1121,7 @@

      The gearvr-controls component interfaces with the Samsung/Oculus Gear VR controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Gear VR controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

      Example

      <!-- Match Gear VR controller if present, regardless of hand. -->
      <a-entity gearvr-controls></a-entity>

      <!-- Match Gear VR controller if present and for specified hand. -->
      <a-entity gearvr-controls="hand: left"></a-entity>
      <a-entity gearvr-controls="hand: right"></a-entity>
      diff --git a/docs/1.0.0/components/geometry.html b/docs/1.0.0/components/geometry.html index 938902af5..6495c1c74 100644 --- a/docs/1.0.0/components/geometry.html +++ b/docs/1.0.0/components/geometry.html @@ -1124,7 +1124,7 @@

      property defines the general shape. Geometric primitives, in computer graphics, are irreducible basic shapes. A material component is commonly defined to provide a appearance alongside the shape to create a complete mesh.

      -
      +

      Base Properties

      Every geometry type will have these properties:

      @@ -1647,7 +1647,7 @@ 

      AFRAME.registerGeometry('box', {
        schema: {
          depth: {default: 1, min: 0},
          height: {default: 1, min: 0},
          width: {default: 1, min: 0},
          segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
        },

        init: function (data) {
          this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
        }
      });

      Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then we need to create the geometry and set on this.geometry through the init lifecycle method.

      When a geometry component sets its primitive property to the custom geometry diff --git a/docs/1.0.0/components/gltf-model.html b/docs/1.0.0/components/gltf-model.html index 34a56d03f..300f4e398 100644 --- a/docs/1.0.0/components/gltf-model.html +++ b/docs/1.0.0/components/gltf-model.html @@ -1132,9 +1132,9 @@

      NOTE: A-Frame supports glTF 2.0. For models using older versions of the glTF format, use gltf-model-legacy from donmccurdy/aframe-extras.

      -
      + -

      Why use glTF?

      In comparison to the older OBJ format, which supports only +

      Why use glTF?

      In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features. In addition to all of the above, glTF offers:

        diff --git a/docs/1.0.0/components/hand-controls.html b/docs/1.0.0/components/hand-controls.html index b0474f6cb..b85f19180 100644 --- a/docs/1.0.0/components/hand-controls.html +++ b/docs/1.0.0/components/hand-controls.html @@ -1121,8 +1121,8 @@

        The hand-controls component provides tracked hands (using a prescribed model) -with animated gestures. hand-controls wraps the vive-controls and -oculus-touch-controls which in turn wrap the tracked-controls +with animated gestures. hand-controls wraps the vive-controls and +oculus-touch-controls which in turn wrap the tracked-controls component. By specifying just hand-controls, we have something that works well with both Vive and Rift. The component gives extra events and handles hand animations and poses.

        diff --git a/docs/1.0.0/components/keyboard-shortcuts.html b/docs/1.0.0/components/keyboard-shortcuts.html index cb7dd833e..fce9eb738 100644 --- a/docs/1.0.0/components/keyboard-shortcuts.html +++ b/docs/1.0.0/components/keyboard-shortcuts.html @@ -1121,7 +1121,7 @@

        The keyboard-shortcuts component toggles global keyboard shortcuts. The -keyboard-shortcuts component applies only to the <a-scene> element.

        +keyboard-shortcuts component applies only to the <a-scene> element.

        Example

        <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

        Properties

        diff --git a/docs/1.0.0/components/laser-controls.html b/docs/1.0.0/components/laser-controls.html index 89aa341de..707d33b44 100644 --- a/docs/1.0.0/components/laser-controls.html +++ b/docs/1.0.0/components/laser-controls.html @@ -1133,17 +1133,17 @@

        configures other components, rather than implementing any logic itself. Under the hood, laser-controls sets all of the tracked controller components:

        These controller components get activated if its respective controller is connected and detected via the Gamepad API. Then the model of the actual -controller is used. laser-controls then configures the cursor +controller is used. laser-controls then configures the cursor component for listen to the appropriate events and configures the -raycaster component to draw the laser.

        +raycaster component to draw the laser.

        When the laser intersects with an entity, the length of the line gets truncated to the distance to the intersection point.

        Example

        <a-entity laser-controls="hand: left"></a-entity>
        @@ -1168,11 +1168,11 @@

        Color for the default controller model. -

        Customizing the Raycaster

        Configure the raycaster properties.

        +

        Customizing the Raycaster

        Configure the raycaster properties.

        For example:

        <a-entity laser-controls raycaster="objects: .links; far: 5"></a-entity>
        -

        Customizing the Line

        See Raycaster: Customizing the Line.

        +

        Customizing the Line

        See Raycaster: Customizing the Line.

        For example:

        <a-entity laser-controls line="color: red; opacity: 0.75"></a-entity>
        diff --git a/docs/1.0.0/components/light.html b/docs/1.0.0/components/light.html index 13a338b04..3f2fd1386 100644 --- a/docs/1.0.0/components/light.html +++ b/docs/1.0.0/components/light.html @@ -1135,7 +1135,7 @@

        To manually disable the defaults, without adding other lights:

        <a-scene light="defaultLightsEnabled: false">
          <!-- ... -->
        </a-scene>
        -
        +

        Properties

        All light types support a few basic properties:

        @@ -1277,7 +1277,7 @@

        Spot

        Sp

        Configuring Shadows

        A-Frame includes support for realtime shadow rendering. With proper configuration, objects (both moving or stationary) will cast shadows adding depth and realism to a scene. Since shadows come with many properties, it -is very helpful to use the A-Frame Inspector to configure shadows

        +is very helpful to use the A-Frame Inspector to configure shadows

        Light types that support shadows (point, spot, and directional) include additional properties:

        diff --git a/docs/1.0.0/components/line.html b/docs/1.0.0/components/line.html index 11612e044..99b6f1074 100644 --- a/docs/1.0.0/components/line.html +++ b/docs/1.0.0/components/line.html @@ -1122,8 +1122,8 @@

        The line component draws a line given a start coordinate and end coordinate using THREE.Line.

        -

        The raycaster component uses the line component for its showLine -property, which is then used by the laser-controls component.

        +

        The raycaster component uses the line component for its showLine +property, which is then used by the laser-controls component.

        Example

        <a-entity line="start: 0, 1, 0; end: 2 0 -5; color: red"
                  line__2="start: -2, 4, 5; end: 0 4 -3; color: green"></a-entity>

        Note an entity can have multiple lines. The line mesh is set as line or diff --git a/docs/1.0.0/components/look-controls.html b/docs/1.0.0/components/look-controls.html index da6dd327a..7a501fa57 100644 --- a/docs/1.0.0/components/look-controls.html +++ b/docs/1.0.0/components/look-controls.html @@ -1126,7 +1126,7 @@

      • Rotates the entity when we move the mouse.
      • Rotates the entity when we touch-drag the touchscreen.

      -

      Example

      The look-controls component is usually used alongside the camera +

      Example

      The look-controls component is usually used alongside the camera component.

      <a-entity camera look-controls position="0 1.6 0"></a-entity>
      diff --git a/docs/1.0.0/components/material.html b/docs/1.0.0/components/material.html index c427600f7..444f797e7 100644 --- a/docs/1.0.0/components/material.html +++ b/docs/1.0.0/components/material.html @@ -1121,11 +1121,11 @@

      The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

      We can register custom materials to extend the material component to provide a wide range of visual effects.

      -
      +

      Example

      Defining a red material using the default standard material:

      <a-entity geometry="primitive: box" material="color: red"></a-entity>
      @@ -1321,7 +1321,7 @@

      fog. +Whether or not material is affected by fog. true @@ -1438,7 +1438,7 @@

      fog. +Whether or not material is affected by fog. true @@ -1474,7 +1474,7 @@

      Textures

      To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

      +asset management system:

      <a-scene>
        <a-assets>
          <img id="my-texture" src="texture.png">
        </a-assets>

        <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
      </a-scene>

      src can also be an inline URL. Note that we do not get browser caching or diff --git a/docs/1.0.0/components/obj-model.html b/docs/1.0.0/components/obj-model.html index 6cb84390f..a0ac2e9ee 100644 --- a/docs/1.0.0/components/obj-model.html +++ b/docs/1.0.0/components/obj-model.html @@ -1138,7 +1138,7 @@

      mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

      Events

      @@ -1156,7 +1156,7 @@

      EventsLoading Inline

      We can also load assets by specifying the path directly within url(). Note this is less performant than going through the asset management system.

      <a-entity obj-model="obj: url(/path/to/tree.obj); mtl: url(/path/to/tree.mtl)"></a-entity>
      -

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      +

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      Additional Resources

      We can find and download models on the web to drop into our scenes:

      • Sketchup’s 3D Warehouse - Repository of models.
        • diff --git a/docs/1.0.0/components/oculus-go-controls.html b/docs/1.0.0/components/oculus-go-controls.html index 530441d9b..8b800669c 100644 --- a/docs/1.0.0/components/oculus-go-controls.html +++ b/docs/1.0.0/components/oculus-go-controls.html @@ -1121,7 +1121,7 @@

        The oculus-go-controls component interfaces with the Oculus Go controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Oculus Go controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

        Example

        <!-- Match Oculus Go controller if present, regardless of hand. -->
        <a-entity oculus-go-controls></a-entity>

        <!-- Match Oculus Go controller if present and for specified hand. -->
        <a-entity oculus-go-controls="hand: left"></a-entity>
        <a-entity oculus-go-controls="hand: right"></a-entity>
        diff --git a/docs/1.0.0/components/oculus-touch-controls.html b/docs/1.0.0/components/oculus-touch-controls.html index 5a6cb23e0..7b88d91f0 100644 --- a/docs/1.0.0/components/oculus-touch-controls.html +++ b/docs/1.0.0/components/oculus-touch-controls.html @@ -1121,7 +1121,7 @@

        The oculus-touch-controls component interfaces with the Oculus Touch controllers. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.

        Example

        <a-entity oculus-touch-controls="hand: left"></a-entity>
        <a-entity oculus-touch-controls="hand: right"></a-entity>
        diff --git a/docs/1.0.0/components/position.html b/docs/1.0.0/components/position.html index 85f943aae..c3a82991d 100644 --- a/docs/1.0.0/components/position.html +++ b/docs/1.0.0/components/position.html @@ -1159,7 +1159,7 @@

        #child2‘s position would be 2 3 4.

        Updating Position

        For performance and ergonomics, we recommend updating position directly via the -three.js Object3D .position Vector3 versus via +three.js Object3D .position Vector3 versus via .setAttribute.

        This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1173,11 +1173,11 @@

        Getting Position

        To reflect updates done at the three.js level, A-Frame returns the actual Object3D.position vector object when doing .getAttribute('position'). Note modifying the return value will modify the entity itself.

        -

        See also reading position and rotation of the camera.

        +

        See also reading position and rotation of the camera.

        Order of Transformations

        Transformations are applied to entities in this order:

        diff --git a/docs/1.0.0/components/raycaster.html b/docs/1.0.0/components/raycaster.html index 846af346b..1fe6e4bc6 100644 --- a/docs/1.0.0/components/raycaster.html +++ b/docs/1.0.0/components/raycaster.html @@ -1132,7 +1132,7 @@

        is explicitly defined via the objects selector property described below. Raycasting is an expensive operation, and we should raycast against only targets that need to be interactable at any given time.

        -

        The cursor component and laser-controls components +

        The cursor component and laser-controls components both build on top of the raycaster component.

        Example

        <a-entity id="player" collider-check>
          <a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
        </a-entity>
        <a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
        @@ -1190,7 +1190,7 @@

        showLine -Whether or not to display the raycaster visually with the line component. +Whether or not to display the raycaster visually with the line component. false @@ -1339,7 +1339,7 @@

        Customizing the Line

        If showLine is set to true, the raycaster will configure the line given the raycaster’s origin, direction, and far properties. To customize the line -appearance provided by the showLine: true property, we configure the line +appearance provided by the showLine: true property, we configure the line component:

        <a-entity raycaster="showLine: true; far: 100" line="color: orange; opacity: 0.5"></a-entity>
        diff --git a/docs/1.0.0/components/rotation.html b/docs/1.0.0/components/rotation.html index 723a7adc8..cf83c1077 100644 --- a/docs/1.0.0/components/rotation.html +++ b/docs/1.0.0/components/rotation.html @@ -1164,7 +1164,7 @@

        15 45 30.

        Updating Rotation

        For performance and ergonomics, we recommend updating rotation directly via the three.js Object3D .rotation Euler (in radians) versus -via .setAttribute.

        +via .setAttribute.

        This method is easier because we have access to all the Euler utilities, and faster by skipping .setAttribute overhead and not needing to create an object to set rotation:

        @@ -1174,12 +1174,12 @@

        reading position and rotation of the camera.

        +

        See also reading position and rotation of the camera.

        Order of Transformations

        Transformations are applied to entities in this order:

        diff --git a/docs/1.0.0/components/scale.html b/docs/1.0.0/components/scale.html index a1860203f..37e5eb119 100644 --- a/docs/1.0.0/components/scale.html +++ b/docs/1.0.0/components/scale.html @@ -1163,7 +1163,7 @@

        Relative Scale

        Similar to the rotation and position components, scales are applied in the local coordinate system and multiply in nested entities.

        Updating Scale

        For performance and ergonomics, we recommend updating scale directly via the -three.js Object3D .scale Vector3 versus via +three.js Object3D .scale Vector3 versus via .setAttribute.

        This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1179,8 +1179,8 @@

        Order of Transformations

        Transformations are applied to entities in this order:

        diff --git a/docs/1.0.0/components/shadow.html b/docs/1.0.0/components/shadow.html index f1f98f39a..b418fbbc3 100644 --- a/docs/1.0.0/components/shadow.html +++ b/docs/1.0.0/components/shadow.html @@ -1130,7 +1130,7 @@

        Examp

        IMPORTANT: Adding the shadow component alone is not enough to display shadows in your scene. We must have at least one light with castShadow: true enabled. Additionally, the light’s shadow camera (used for depth -projection) usually must be configured correctly. Refer to the light +projection) usually must be configured correctly. Refer to the light component for more information.

        Properties

        diff --git a/docs/1.0.0/components/sound.html b/docs/1.0.0/components/sound.html index 7b7b403f0..464c88738 100644 --- a/docs/1.0.0/components/sound.html +++ b/docs/1.0.0/components/sound.html @@ -1122,7 +1122,7 @@

        The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the -components-position.

        +components-position.

        NOTE: Playing sound on iOS — in any browser — requires a physical user interaction. This is a browser limitation, and internal A-Frame events (like fusing cursors) do diff --git a/docs/1.0.0/components/stats.html b/docs/1.0.0/components/stats.html index 828735045..344826a3e 100644 --- a/docs/1.0.0/components/stats.html +++ b/docs/1.0.0/components/stats.html @@ -1121,7 +1121,7 @@

        The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

        +component applies only to the <a-scene> element.

        Example

        <a-scene stats></a-scene>

        Metrics

          diff --git a/docs/1.0.0/components/text.html b/docs/1.0.0/components/text.html index f5f5ff02e..8a325ea82 100644 --- a/docs/1.0.0/components/text.html +++ b/docs/1.0.0/components/text.html @@ -1122,7 +1122,7 @@

          The text component renders signed distance field (SDF) font text.

          Example Image

          -
          +

          Introduction

          Note that rendering text in 3D is hard. In 2D web development, text is the most basic thing because the browser’s renderer and layout engine handles @@ -1366,8 +1366,8 @@

          SizingChange the width.
        • Change the wrapCount (roughly how many characters to fit inside the given width).
        • Change wrapPixels.
          • -
        • Change the scale component.
          • -
        • Position the text closer or farther away.
          • +
        • Change the scale component.
          • +
        • Position the text closer or farther away.

        Sizing

        Text can be wrapped by specifying width in A-Frame units.

        diff --git a/docs/1.0.0/components/tracked-controls.html b/docs/1.0.0/components/tracked-controls.html index a5e787205..030a06ba7 100644 --- a/docs/1.0.0/components/tracked-controls.html +++ b/docs/1.0.0/components/tracked-controls.html @@ -1122,12 +1122,12 @@

        The tracked-controls component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is -abstracted by the hand-controls component as well as the -vive-controls, oculus-touch-controls, -windows-motion-controls, and daydream-controls +abstracted by the hand-controls component as well as the +vive-controls, oculus-touch-controls, +windows-motion-controls, and daydream-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events. For non-6DOF controllers -such as daydream-controls, a primitive arm model is used to emulate +such as daydream-controls, a primitive arm model is used to emulate positional data.

        tracked-controls sets two components that handles different Web API versions for VR:

          diff --git a/docs/1.0.0/components/visible.html b/docs/1.0.0/components/visible.html index 76379ce36..6d37a3a50 100644 --- a/docs/1.0.0/components/visible.html +++ b/docs/1.0.0/components/visible.html @@ -1144,7 +1144,7 @@

          Value

          < The entity will not be rendered nor visible. The entity will still exist in the scene. -

          Updating Visibility

          It is slightly faster to update visibility at the three.js level versus via +

          Updating Visibility

          It is slightly faster to update visibility at the three.js level versus via .setAttribute.

          // With three.js
          el.object3D.visible = false;

          // With .setAttribute.
          el.setAttribute('visible', false);
          diff --git a/docs/1.0.0/components/vive-controls.html b/docs/1.0.0/components/vive-controls.html index 3fdc2d2fe..9e94a20a6 100644 --- a/docs/1.0.0/components/vive-controls.html +++ b/docs/1.0.0/components/vive-controls.html @@ -1121,7 +1121,7 @@

          The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

          Example

          <a-entity vive-controls="hand: left"></a-entity>
          <a-entity vive-controls="hand: right"></a-entity>
          diff --git a/docs/1.0.0/components/vive-focus-controls.html b/docs/1.0.0/components/vive-focus-controls.html index d6b0f5707..2a9098975 100644 --- a/docs/1.0.0/components/vive-focus-controls.html +++ b/docs/1.0.0/components/vive-focus-controls.html @@ -1121,7 +1121,7 @@

          The vive-focus-controls component interfaces with the Vive Focus controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Vive Focus controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

          Example

          <!-- Match Vive Focus controller if present, regardless of hand. -->
          <a-entity vive-focus-controls></a-entity>

          <!-- Match Vive Focus controller if present and for specified hand. -->
          <a-entity vive-focus-controls="hand: left"></a-entity>
          <a-entity vive-focus-controls="hand: right"></a-entity>
          diff --git a/docs/1.0.0/components/vr-mode-ui.html b/docs/1.0.0/components/vr-mode-ui.html index c49340d9f..bf51ba1c2 100644 --- a/docs/1.0.0/components/vr-mode-ui.html +++ b/docs/1.0.0/components/vr-mode-ui.html @@ -1122,7 +1122,7 @@

          The vr-mode-ui component allows disabling of UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only -to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

          +to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

          Example

          <a-scene vr-mode-ui="enabled: false"></a-scene>

          Properties

          diff --git a/docs/1.0.0/components/wasd-controls.html b/docs/1.0.0/components/wasd-controls.html index a60b25de8..fb7df9f77 100644 --- a/docs/1.0.0/components/wasd-controls.html +++ b/docs/1.0.0/components/wasd-controls.html @@ -1121,7 +1121,7 @@

          The wasd-controls component controls an entity with the WASD or arrow keyboard -keys. The wasd-controls component is commonly attached to an entity with the camera +keys. The wasd-controls component is commonly attached to an entity with the camera component.

          Example

          <a-entity camera look-controls wasd-controls="acceleration:100" position="0 1.6 0"></a-entity>
          diff --git a/docs/1.0.0/components/windows-motion-controls.html b/docs/1.0.0/components/windows-motion-controls.html index df1500256..cffc76acc 100644 --- a/docs/1.0.0/components/windows-motion-controls.html +++ b/docs/1.0.0/components/windows-motion-controls.html @@ -1122,7 +1122,7 @@

          The windows-motion-controls component 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 +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.)

          Example

          <a-entity windows-motion-controls="hand: left"></a-entity>
          <a-entity windows-motion-controls="hand: right"></a-entity>
          diff --git a/docs/1.0.0/core/asset-management-system.html b/docs/1.0.0/core/asset-management-system.html index edc93c294..8354fcc16 100644 --- a/docs/1.0.0/core/asset-management-system.html +++ b/docs/1.0.0/core/asset-management-system.html @@ -1138,7 +1138,7 @@

        The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

        -
        +

        Example

        We can define our assets in <a-assets> and point to those assets from our entities using selectors:

        diff --git a/docs/1.0.0/core/component.html b/docs/1.0.0/core/component.html index 739981e81..fbd340b20 100644 --- a/docs/1.0.0/core/component.html +++ b/docs/1.0.0/core/component.html @@ -1120,7 +1120,7 @@

        -

        In the entity-component-system pattern, a component is a reusable and +

        In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

        In A-Frame, components modify entities which are 3D objects in the scene. We @@ -1134,7 +1134,7 @@

        Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

        -
        +

        Component HTML Form

        A component holds a bucket of data in the form of one or more component properties. Components use this data to modify entities. Consider an engine @@ -1285,7 +1285,7 @@

        Definition Lifecycle Handler Methods

        With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the shape of the data, the lifecycle handler methods use the data to modify the entity. The handlers will usually interact with the -Entity API.

        +Entity API.

        methodsimage Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

        Overview of Methods

        @@ -1338,15 +1338,15 @@

        setAttribute. +

        - + - + @@ -1383,7 +1383,7 @@

        diffing the current +

        Granular modifications to the entity can be done by diffing the current dataset (this.data) with the previous dataset before the update (oldData).

        A-Frame calls .update() both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The @@ -1391,7 +1391,7 @@

        visible component’s update sets the visibility of +

        For example, the visible component’s update sets the visibility of the entity.

        Parsed component properties computed from the schema default values, mixins, and the entity’s attributes.
        Important: Do not modify the data attribute directly. It is updated internally by A-Frame. To modify a component, use setAttribute.
        this.elReference to the entity as an HTML element.Reference to the entity as an HTML element.
        this.el.sceneElReference to the scene as an HTML element.Reference to the scene as an HTML element.
        this.id
        AFRAME.registerComponent('visible', {
          /**
           * this.el is the entity element.
           * this.el.object3D is the three.js object of the entity.
           * this.data is the component's property or properties.
           */
          update: function (oldData) {
            this.el.object3D.visible = this.data;
          }
          // ...
        });
        @@ -1406,7 +1406,7 @@

        Remove, undo, or clean up all of the component’s modifications to the entity.
      • Detach event listeners.

      -

      For example, when the light component is removed, the light component +

      For example, when the light component is removed, the light component will remove the light object that it had previously set on the entity, thus removing it from the scene.

      AFRAME.registerComponent('light', {
        // ...
        remove: function () {
          this.el.removeObject3D('light');
        }
        // ...
      });
      @@ -1428,7 +1428,7 @@

      time) and the time difference in milliseconds since the last frame (timeDelta). These can be used for interpolation or to only run parts of the tick handler on a set interval.

      -

      For example, the tracked controls component will progress +

      For example, the tracked controls component will progress the controller’s animations, update the controller’s position and rotation, and check for button presses.

      AFRAME.registerComponent('tracked-controls', {
        // ...
        tick: function (time, timeDelta) {
          this.updateMeshAnimation();
          this.updatePose();
          this.updateButtons();
        }
        // ...
      });
      @@ -1447,7 +1447,7 @@

      .
    • Remove event listeners.
    • Remove any chances of dynamic behavior.

    -

    For example, the sound component will pause the sound and remove an +

    For example, the sound component will pause the sound and remove an event listener that would have played a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      pause: function () {
        this.pauseSound();
        this.removeEventListener();
      }
      // ...
    });
    @@ -1462,7 +1462,7 @@

    .pla
    • Add event listeners.
    -

    For example, the sound component will play the sound and update the +

    For example, the sound component will play the sound and update the event listener that would play a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      play: function () {
        if (this.data.autoplay) { this.playSound(); }
        this.updateEventListener();
      }
      // ...
    });
    @@ -1472,7 +1472,7 @@

  • Dynamically update or extend the schema, usually depending on the value of a property.
    • -

    For example, the geometry component checks if the primitive +

    For example, the geometry component checks if the primitive property changed to determine whether to update the schema for a different type of geometry:

    AFRAME.registerComponent('geometry', {
      // ...
      updateSchema: (newData) {
        if (newData.primitive !== this.data.primitive) {
          this.extendSchema(GEOMETRIES[newData.primitive].schema);
        }
      }
      // ...
    });
    @@ -1527,7 +1527,7 @@ 

    document.querySelector('[geometry]').components.geometry.flushToDOM();
    -

    Read more about component-to-DOM serialization.

    +

    Read more about component-to-DOM serialization.

    Accessing a Component’s Members and Methods

    A component’s members and methods can be accessed through the entity from the .components object. Look up the component from the entity’s map of components, and we’ll have access to the component’s internals. Consider this diff --git a/docs/1.0.0/core/entity.html b/docs/1.0.0/core/entity.html index 8ca3c6a3e..e9a0e2527 100644 --- a/docs/1.0.0/core/entity.html +++ b/docs/1.0.0/core/entity.html @@ -1121,23 +1121,23 @@

    A-Frame represents an entity via the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

    -

    In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

    -
    +

    In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

    +

    Example

    Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

    <a-entity>

    We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

    +give it shape and appearance, we can attach the geometry and +material components:

    <a-entity geometry="primitive: box" material="color: red">
    -

    Or to make it emit light, we can further attach the light component:

    +

    Or to make it emit light, we can further attach the light component:

    <a-entity geometry="primitive: box" material="color: red"
              light="type: point; intensity: 2.0">

    Retrieving an Entity

    We can simply retrieve an entity using DOM APIs.

    @@ -1172,7 +1172,7 @@

    object3DMap

    An entity’s object3DMap is an object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that components have set.

    -

    For an entity with a geometry and light components +

    For an entity with a geometry and light components attached, object3DMap might look like:

    {
      light: <THREE.Light Object>,
      mesh: <THREE.Mesh Object>
    }
    @@ -1186,7 +1186,7 @@

    Metho 
    entity.addEventListener('stateadded', function (evt) {
      if (evt.detail === 'selected') {
        console.log('Entity now selected!');
      }
    });

    entity.addState('selected');
    entity.is('selected');  // >> true

    emit (name, detail, bubbles)

    emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

    +trigger an animation:

    // <a-entity animation="property: rotation; to: 0 360 0; startEvents: rotate">
    entity.emit('rotate');

    We can also pass event detail or data as the second argument:

    @@ -1197,7 +1197,7 @@ 

    entity.emit('sink', null, false);

    flushToDOM (recursive)

    flushToDOM will manually serialize an entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

    +Read more about component-to-DOM serialization.

    getAttribute (componentName)

    getAttribute retrieves parsed component data (including mixins and defaults).

    // <a-entity geometry="primitive: box; width: 3">

    entity.getAttribute('geometry');
    // >> {primitive: "box", depth: 2, height: 2, width: 3, ...}

    entity.getAttribute('geometry').primitive;
    // >> "box"

    entity.getAttribute('geometry').height;
    // >> 2

    entity.getAttribute('position');
    // >> {x: 0, y: 0, z: 0}
    @@ -1224,20 +1224,20 @@

    pa entity will call pause() on its child entities when we pause an entity.

    // <a-entity id="spinning-jumping-ball">
    entity.pause();
    -

    For example, the look-controls component on +

    For example, the look-controls component on pause will remove event handlers that listen for input.

    play ()

    play() will start any dynamic behavior as defined by animations and components. This is automatically called when the DOM attaches an entity. When an entity play(), the entity calls play() on its child entities.

    entity.pause();
    entity.play();
    -

    For example, the sound component on play will begin playing the sound.

    +

    For example, the sound component on play will begin playing the sound.

    setAttribute (componentName, value, [propertyValue | clobber])

    If componentName is not the name of a registered component or the component is a single-property component, setAttribute behaves as it normally would:

    entity.setAttribute('visible', false);

    Though if componentName is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    entity.setAttribute('position', { x: 1, y: 2, z: 3 });
    @@ -1306,7 +1306,7 @@

    Events componentchanged -One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. +One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. componentinitialized diff --git a/docs/1.0.0/core/globals.html b/docs/1.0.0/core/globals.html index 183706827..5dd632ab1 100644 --- a/docs/1.0.0/core/globals.html +++ b/docs/1.0.0/core/globals.html @@ -1132,11 +1132,11 @@

    AComponent -Component prototype. +Component prototype. AEntity -Entity prototype. +Entity prototype. ANode @@ -1144,7 +1144,7 @@

    AScene -Scene prototype. +Scene prototype. components @@ -1160,7 +1160,7 @@

    registerComponent -Function to register a component. +Function to register a component. registerElement @@ -1168,15 +1168,15 @@

    registerGeometry -Function to register a geometry. +Function to register a geometry. registerPrimitive -Function to register a primitive. +Function to register a primitive. registerShader -Function to register a material or shader. +Function to register a material or shader. schema @@ -1196,7 +1196,7 @@

    utils -A-Frame utility modules. +A-Frame utility modules. version diff --git a/docs/1.0.0/core/mixins.html b/docs/1.0.0/core/mixins.html index 984dcc7f4..97c257f28 100644 --- a/docs/1.0.0/core/mixins.html +++ b/docs/1.0.0/core/mixins.html @@ -1122,7 +1122,7 @@

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    <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-mixin>
      </a-assets>

      <a-entity mixin="red cube"></a-entity>
      <a-entity mixin="blue cube"></a-entity>
    </a-scene>
    @@ -1132,7 +1132,7 @@

    the entities above expand to:

    <a-entity material="color: red" geometry="primitive: box"></a-entity>
    <a-entity material="color: blue" geometry="primitive: box"></a-entity>
    -
    +

    Merging Component Properties

    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="height: 10"></a-mixin>
        <a-mixin id="wide" geometry="width: 10"></a-mixin>
      </a-assets>

      <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
    </a-scene>
    diff --git a/docs/1.0.0/core/scene.html b/docs/1.0.0/core/scene.html index 1ccf81254..1929a00d6 100644 --- a/docs/1.0.0/core/scene.html +++ b/docs/1.0.0/core/scene.html @@ -1121,8 +1121,8 @@

    A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

    -

    The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

    +

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    @@ -1133,7 +1133,7 @@

  • Set up webvr-polyfill, VREffect
  • Add UI to Enter VR that calls WebVR API
    • -
    +

    Example

    <a-scene>
      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <a-box src="#texture"></a-box>
    </a-scene>
    @@ -1178,7 +1178,7 @@

    systems -Instantiated systems. +Instantiated systems. time @@ -1242,12 +1242,12 @@

    embedded - Remove fullscreen styles from the canvas. -
  • fog - Add fog.
    • -
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • -
  • inspector - Inject the A-Frame Inspector.
    • -
  • stats - Toggle performance stats.
    • -
  • vr-mode-ui - Toggle UI for entering and exiting VR.
    • +
  • embedded - Remove fullscreen styles from the canvas.
    • +
  • fog - Add fog.
    • +
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • +
  • inspector - Inject the A-Frame Inspector.
    • +
  • stats - Toggle performance stats.
    • +
  • vr-mode-ui - Toggle UI for entering and exiting VR.

    • Running Content Scripts on the Scene

    The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

    AFRAME.registerComponent('do-something', {
      init: function () {
        var sceneEl = this.el;
      }
    });
    diff --git a/docs/1.0.0/core/systems.html b/docs/1.0.0/core/systems.html index e097ef71e..a3891965d 100644 --- a/docs/1.0.0/core/systems.html +++ b/docs/1.0.0/core/systems.html @@ -1120,16 +1120,16 @@

    -

    A system, of the entity-component-system pattern, provides global scope, +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -
    + -

    Registering a System

    A system is registered similarly to a component.

    +

    Registering a System

    A system is registered similarly to a component.

    If the system name matches a component name, then the component will have a reference to the system as this.system:

    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);
      }
    });
    @@ -1151,7 +1151,7 @@

    schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data.

    Methods

    A system, like a component, defines lifecycle handlers. It can also define diff --git a/docs/1.0.0/core/utils.html b/docs/1.0.0/core/utils.html index 931dcecb9..441e65a11 100644 --- a/docs/1.0.0/core/utils.html +++ b/docs/1.0.0/core/utils.html @@ -1121,7 +1121,7 @@

    A-Frame’s utility modules are public through AFRAME.utils.

    -
    +

    AFRAME.utils.coordinates

    Module for handling vec3 and vec4 types.

    .isCoordinates (value)

    Tests whether a string is a vec3 or vec4.

    @@ -1133,7 +1133,7 @@

    .stringify (data)

    Stringifies an {x, y, z} vec3 object to an “x y z” string.Or Stringifies an {x, y, z, w} vec4 object to an “x y z w” string.

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
    // >> "1 2 -3"

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3, w:4})
    // >> "1 2 -3 4"
    -

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for +

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for return 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.

    @@ -1141,7 +1141,7 @@

    This is useful for components that need a way to reference a property of a multi-property component.

    -

    .setComponentProperty (entity, componentName, value, delimiter)

    Performs like Entity.setAttribute, but with support for setting an +

    .setComponentProperty (entity, componentName, value, delimiter)

    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.

    diff --git a/docs/1.0.0/guides/building-a-360-image-gallery.html b/docs/1.0.0/guides/building-a-360-image-gallery.html index 9b2e42fcc..25a7684a4 100644 --- a/docs/1.0.0/guides/building-a-360-image-gallery.html +++ b/docs/1.0.0/guides/building-a-360-image-gallery.html @@ -1124,7 +1124,7 @@

    Let’s build an interactive gaze-based 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

    -

    This guide will practice three concepts related to entity-component:

    +

    This guide will practice three concepts related to entity-component:

    1. Using the standard components that come with A-Frame.
    2. Using community components from the ecosystem.
      3. @@ -1132,18 +1132,18 @@

    Not to say 360° images are at all a focus use case of A-Frame, but it makes for an easy example that has a lot of demand as an early use case on the Web.

    -
    +

    Skeleton

    This is the starting point for our scene. We can also remix the Glitch.

    <a-scene>
      <a-assets>
        <audio id="click-sound" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>

        <!-- Images. -->
        <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
        <img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
        <img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
        <img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
        <img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Link template we will build. -->
      <a-entity class="link"></a-entity>

      <!-- Camera + Cursor. -->
      <a-camera>
        <a-cursor
          id="cursor"
          animation__click="property: scale; from: 0.1 0.1 0.1; to: 1 1 1; easing: easeInCubic; dur: 150; startEvents: click"
          animation__clickreset="property: scale; to: 0.1 0.1 0.1; dur: 1; startEvents: animationcomplete__click"
          animation__fusing="property: scale; from: 1 1 1; to: 0.1 0.1 0.1; easing: easeInCubic; dur: 150; startEvents: fusing"></a-cursor>
      </a-camera>
    </a-scene>

    We have predefined:

    Using Standard Components

    Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure @@ -1153,20 +1153,20 @@ 

    <a-entity class="link"></a-entity>
    -

    To give our entity shape, we can attach the geometry component, +

    To give our entity shape, we can attach the geometry component, configured to a plane shape. We specify the component data using a syntax that resembles that of inline CSS styles:

    <a-entity
      class="link"
      geometry="primitive: plane; height: 1; width: 1"></a-entity>
    -

    Then to give our entity appearance, we can attach the material +

    Then to give our entity appearance, we can attach the material component. We set shader to flat so the image isn’t affected negatively by lighting. And we set src to #cubes-thumb, a selector to one -of the images preloaded in the Asset Management System. Alternatively, +of the images preloaded in the Asset Management System. Alternatively, we could pass a URL for the image:

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: #cubes-thumb"></a-entity>

    We can continue adding features to our entity by plugging in more components. -Let’s attach one more standard component, the sound component. We want +Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1242,15 +1242,15 @@

    Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

    Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We can specify event names either the _event property or via the __<id> as shown below. The rest of the properties define the setAttribute calls. Notice that the event-set component can have -multiple instances:

    +multiple instances:

    <script id="link" type="text/html">
      <a-entity class="link"
        geometry="primitive: plane; height: 1; width: 1"
        material="shader: flat; src: ${thumb}"
        sound="on: click; src: #click-sound"
        event-set__mouseenter="scale: 1.2 1.2 1"
        event-set__mouseleave="scale: 1 1 1"
        event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"></a-entity>
    </script>

    Remember to add data-src attributes to the link entities to load the full image on click:

    @@ -1282,7 +1282,7 @@

    Writing a Component and +application-specific components. That is covered in Writing a Component and hopefully in later guides.

    Try it out!

    diff --git a/docs/1.0.0/guides/building-a-basic-scene.html b/docs/1.0.0/guides/building-a-basic-scene.html index 41206406e..ef72896d5 100644 --- a/docs/1.0.0/guides/building-a-basic-scene.html +++ b/docs/1.0.0/guides/building-a-basic-scene.html @@ -1133,7 +1133,7 @@

  • Add text

    • Remix the Basic Guide example on Glitch.

    -
    +

    Starting with HTML

    We start out with a minimal HTML structure:

    <html>
      <head>
        <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
        </a-scene>
      </body>
    </html>
    @@ -1142,7 +1142,7 @@

    before <a-scene> because A-Frame registers custom HTML elements which must be defined before <a-scene> is attached or else <a-scene> will do nothing.

    -

    Next, we include <a-scene> in the <body>. <a-scene> will contain every +

    Next, we include <a-scene> in the <body>. <a-scene> will contain every entity in our scene. <a-scene> handles all of the setup that is required for 3D: setting up WebGL, the canvas, camera, lights, renderer, render loop as well as out of the box WebVR support on platforms such as HTC Vive, Oculus Rift, @@ -1153,7 +1153,7 @@

    <a-box>‘s documentation for +

    Here we define the color <a-box>, see <a-box>‘s documentation for the more attributes (e.g., width, height, depth).

    boximage Image by Ruben Mueller from vrjump.de

    @@ -1161,13 +1161,13 @@

    <a-entity> with the geometry and -material components:

    +underneath <a-box> is <a-entity> with the geometry and +material components:

    <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>
    -

    However, because the default camera and the box are positioned at the default +

    However, because the default camera and the box are positioned at the default position at the 0 0 0 origin, we won’t be able to see the box unless we move -it. We can do this by using the position component to transform the +it. We can do this by using the position component to transform the box in 3D space.

    Transforming an Entity in 3D

    Let’s first go over 3D space. A-Frame uses a right-handed coordinate system. With the default camera direction: positive X-axis extends right, positive @@ -1186,7 +1186,7 @@

    To translate, rotate, and scale the box, we can change the -position, rotation, and scale components. +position, rotation, and scale components. Let’s first apply the rotation and scale components:

    <a-scene>
      <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
    @@ -1243,7 +1243,7 @@ 

    <a-scene>
      <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <!-- Out of the box environment! -->
      <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
    </a-scene>

    Applying an Image Texture

    -

    Make sure you’re serving your HTML using a local server +

    Make sure you’re serving your HTML using a local server for textures to load properly.

    We can apply an image texture to the box with an image, video, or <canvas> @@ -1255,7 +1255,7 @@

    -

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The +

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The asset management system makes it easier for the browser to cache assets (e.g., images, videos, models) and A-Frame will make sure all of the assets are fetched before rendering.

    @@ -1275,7 +1275,7 @@

    Creating a Custom Environment (Optional)

    Previously we had the environment component generate the environment. Though it’s good to know a bit on creating a basic environment for learning purposes.

    -

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. +

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. <a-sky>, which is a material applied to the inside of a large sphere, can be a flat color, a 360° image, or a 360° video. For example, a dark gray background would be:

    @@ -1285,7 +1285,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>
    </a-scene>
    -

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are +

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are oriented parallel to the XY axis. To make it parallel to the ground, we need to orient it along the XZ axis. We can do so by rotating the plane negative 90° on the X-axis.

    @@ -1303,7 +1303,7 @@ 

    <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
      repeat="10 10"></a-plane>
    -

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default +

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default if we don’t specify any lights, A-Frame adds an ambient light and a directional light. If A-Frame didn’t add lights for us, the scene would be black. Once we add lights of our own, however, the default lighting setup is removed and @@ -1316,7 +1316,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>

      <a-light type="ambient" color="#445451"></a-light>
      <a-light type="point" intensity="2" position="2 4 4"></a-light>
    </a-scene>
    -

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation +

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation system. Animations interpolate or tween a value over time. We can set the animation component on the entity. Let’s have the box hover up and down to add some motion to the scene.

    @@ -1324,7 +1324,7 @@

    entity’s object3D’s position’s Y axis. +
  • Animate the entity’s object3D’s position’s Y axis.
  • Animate to 2.2 which is 20 centimeters higher.
  • Alternate the dir (direction) of the animation on each repeated cycle of the animation so it goes back and forth.
  • Last for 2000 millisecond dur (duration) on each cycle.
    • @@ -1335,19 +1335,19 @@

    Given that many developers currently do not have proper VR hardware with controllers, we’ll focus this section on using basic mobile and desktop inputs -with the built-in cursor component. The cursor component by default provides +with the built-in cursor component. The cursor component by default provides the ability to “click” on entities by staring or gazing at them on mobile, or on desktop, looking at an entity and click the mouse. But know that the cursor component is just one way to add interactions, things open up if we have access to actual controllers.

    -

    To have a visible cursor fixed to the camera, we place the cursor as a child +

    To have a visible cursor fixed to the camera, we place the cursor as a child of the camera as explained above in Parent and Child Transforms.

    Since we didn’t specifically define a camera, A-Frame included a default camera for us. But since we need to add a cursor as a child of the camera, we will -need to now define <a-camera> containing <a-cursor>:

    +need to now define <a-camera> containing <a-cursor>:

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"
             animation="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true"></a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
    -

    If we check the documentation of the cursor component that +

    If we check the documentation of the cursor component that <a-cursor> wraps, we see that it emits hover events such as mouseenter, mouseleave as well as click.

    Event Listener Component (Intermediate)

    One way to manually handle the cursor events is to add an event listener with @@ -1355,7 +1355,7 @@

    Animating on Events below.

    In JavaScript, we grab the box with querySelector, use -addEventListener, and then setAttribute +addEventListener, and then setAttribute to make the box grow its scale when its hovered over. Note that A-Frame adds features to setAttribute to work with multi-property components. We can pass a full {x, y, z} object as the second argument.

    @@ -1392,7 +1392,7 @@ 

    <a-scene>
      <!-- ... -->
      <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
        position="-3 1 -4"></a-sound>
      <!-- ... -->
    </a-scene>
    -

    Adding Text

    A-Frame comes with a text component. There are several ways to render +

    Adding Text

    A-Frame comes with a text component. There are several ways to render text, each with their own advantages and disadvantages. A-Frame comes with an SDF text implementation using three-bmfont-text that is relatively sharp and performant:

    diff --git a/docs/1.0.0/guides/building-a-minecraft-demo.html b/docs/1.0.0/guides/building-a-minecraft-demo.html index 9b17f7587..89516d42f 100644 --- a/docs/1.0.0/guides/building-a-minecraft-demo.html +++ b/docs/1.0.0/guides/building-a-minecraft-demo.html @@ -1126,7 +1126,7 @@

    Let’s build a basic Minecraft (voxel builder) demo that targets room scale VR with controllers (e.g., Vive, Rift). The example will be minimally usable on mobile and desktop.

    -
    +

    Example Skeleton

    We’ll start off with this skeleton HTML:

    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>

    <body>
      <a-scene>
      </a-scene>
    </body>
    diff --git a/docs/1.0.0/introduction/best-practices.html b/docs/1.0.0/introduction/best-practices.html index 315bf8950..a14403784 100644 --- a/docs/1.0.0/introduction/best-practices.html +++ b/docs/1.0.0/introduction/best-practices.html @@ -1120,7 +1120,7 @@

    -

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and +

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and structure application code within purely A-Frame components for reusability, modularity, composability, decoupling, encapsulation, declarativeness, and testability.

    @@ -1134,14 +1134,14 @@

    A-Fra 
    <script>
      AFRAME.registerComponent('code-that-does-this', {
        init: function () {
          // Code here.
          console.log(this.el);
        }
      });

      AFRAME.registerComponent('code-to-attach-to-box', {
        init: function () {
          // Code here.
          console.log(this.el);
        }
      });
    </script>

    <a-scene code-that-does-this>
      <a-box code-to-attach-to-box></a-box>
      <!-- ... -->
    </a-scene>

    WebVR

    See WebVR Guidelines.

    -

    Performance

    pool +

    Performance

    pool [geometrymerger]: https://www.npmjs.com/package/aframe-geometry-merger-component

    Performance is critical in VR. A high framerate must be maintained in order for people to feel comfortable. Here are some ways to help improve performance of an A-Frame scene:

      -
    • Use recommended hardware specifications.
      • -
    • Use the stats component to keep an eye on various metrics (FPS, +
    • Use recommended hardware specifications.
      • +
    • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities). We want to maximize FPS and minimize everything else.
    • Limit draw calls as much as possible. Each geometry, object, model without @@ -1151,7 +1151,7 @@

      asset management system to browser cache and +
    • Make use of the asset management system to browser cache and preload assets.
    • If using models, look to bake your lights into textures rather than relying on real-time lighting and shadows.
      • @@ -1168,16 +1168,16 @@

      background component instead of a-sky to define a +
    • Use the background component instead of a-sky to define a solid color as the scene background. This prevents the creation of unnecessary geometry.
    • Update position, rotation, scale, and visible using at the three.js level (el.object3D.position, el.object3D.rotation, el.object3D.scale, el.object3D.visible) to avoid overhead on .setAttribute.
    • If you need to create, remove and re-create many entities of the same type, -use the pool component to pre-generate and reuse entities. This +use the pool component to pre-generate and reuse entities. This avoids the cost of creating entities on the fly and reduces garbage collection.
      • -
    • When using the animation component, animate values directly +
    • When using the animation component, animate values directly which will skip .setAttribute and animate JS values directly. For example, instead of material.opacity, animate components.material.material.opacity.
      • diff --git a/docs/1.0.0/introduction/developing-with-threejs.html b/docs/1.0.0/introduction/developing-with-threejs.html index 8f3ebe136..d48eb6cca 100644 --- a/docs/1.0.0/introduction/developing-with-threejs.html +++ b/docs/1.0.0/introduction/developing-with-threejs.html @@ -1150,7 +1150,7 @@

      And every A-Frame entity also has a reference to <a-scene> via .sceneEl:

      document.querySelector('a-entity').sceneEl.object3D;  // THREE.Scene
      -

      From a component, we access the scene through its entity +

      From a component, we access the scene through its entity (i.e., this.el):

      AFRAME.registerComponent('foo', {
        init: function () {
          var scene = this.el.sceneEl.object3D;  // THREE.Scene
        }
      });
      diff --git a/docs/1.0.0/introduction/entity-component-system.html b/docs/1.0.0/introduction/entity-component-system.html index ee96cb245..925a7e2b1 100644 --- a/docs/1.0.0/introduction/entity-component-system.html +++ b/docs/1.0.0/introduction/entity-component-system.html @@ -1149,20 +1149,20 @@

      A well-known game engine implementing ECS is Unity. Although there are pain points in cross-entity communication, we’ll see how A-Frame, the DOM, and declarative HTML really make ECS shine.

      -
      +

      Concept

      ECS Minecraft

      A basic definition of ECS involves:

      We’ll go over GUI tools built on top of A-Frame that can be used without code. And touch on other tools that can ease development across multiple machines.

      -
      +

      A-Frame Inspector

      The A-Frame Inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:

      diff --git a/docs/1.0.0/introduction/vr-headsets-and-webvr-browsers.html b/docs/1.0.0/introduction/vr-headsets-and-webvr-browsers.html index 8a65b2545..922ba01e7 100644 --- a/docs/1.0.0/introduction/vr-headsets-and-webvr-browsers.html +++ b/docs/1.0.0/introduction/vr-headsets-and-webvr-browsers.html @@ -1120,7 +1120,7 @@

      -
      +

      What is Virtual Reality?

      Virtual reality (VR) is a technology that uses head-mounted headsets with displays to generate the realistic images, sounds, and other sensations to put diff --git a/docs/1.0.0/introduction/writing-a-component.html b/docs/1.0.0/introduction/writing-a-component.html index e25e40164..0d626050b 100644 --- a/docs/1.0.0/introduction/writing-a-component.html +++ b/docs/1.0.0/introduction/writing-a-component.html @@ -1120,7 +1120,7 @@

      -

      Components of A-Frame’s entity-component framework are JavaScript +

      Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, @@ -1128,7 +1128,7 @@

      components.

      vehicleimage Image by Ruben Mueller from vrjump.de

      -

      This guide will take it pretty slow. We recommend skimming over the Component +

      This guide will take it pretty slow. We recommend skimming over the Component API documentation before going through this guide as that documentation will be more concise. Note that components should be defined before <a-scene> like:

      @@ -1142,12 +1142,12 @@

      Example: hello-world Component

      Let’s start with the most basic component to get a general idea. This component will log a simple message once when the component’s entity is attached using -the .init() handler.

      +the .init() handler.

      Registering the Component with AFRAME.registerComponent

      Components are registered with AFRAME.registerComponent(). We pass the name of the component, which will be used as the HTML attribute name in the component’s representation in the DOM. Then we pass the component definition which is a JavaScript object of methods and properties. Within the definition, we can -define lifecycle handler methods. One of which is .init(), which +define lifecycle handler methods. One of which is .init(), which is called once when the component is first plugged into its entity.

      In the example below, we just have our .init() handler log a simple message.

      AFRAME.registerComponent('hello-world', {
        init: function () {
          console.log('Hello, World!');
        }
      });
      @@ -1201,7 +1201,7 @@

      Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

      To demonstrate this, we’ll have our log component only log whenever its -entity emits an event. First, we’ll add an event property type that +entity emits an event. First, we’ll add an event property type that specifies which event the component should listen on.

      // ...
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'},
      },
      // ...
      @@ -1210,7 +1210,7 @@

      add an event listener that will +

      What we want to do is add an event listener that will listen to the event before logging a message. If the event property type is not specified, we’ll just log the message:

      AFRAME.registerComponent('log', {
        schema: {
          event: {type: 'string', default: ''},
          message: {type: 'string', default: 'Hello, World!'}
        },

        update: function () {
          var data = this.data;  // Component property values.
          var el = this.el;  // Reference to the component's entity.

          if (data.event) {
            // This will log the `message` when the entity emits the `event`.
            el.addEventListener(data.event, function () {
              console.log(data.message);
            });
          } else {
            // `event` not specified, just log the message.
            console.log(data.message);
          }
        }
      });
      @@ -1219,7 +1219,7 @@

      , we need a reference to the function. So +

      But to remove an event listener, we need a reference to the function. So let’s first store the function on this.eventHandlerFn whenever we attach an event listener. When we attach properties to the component via this, they’ll be available throughout all the other lifecycle handlers.

      @@ -1234,13 +1234,13 @@ 

      <a-scene>
        <a-entity log="event: anEvent; message: Hello, Metaverse!"></a-entity>
      </a-scene>
      -

      Let’s have our entity emit the event to test it out:

      +

      Let’s have our entity emit the event to test it out:

      var el = document.querySelector('a-entity');
      el.emit('anEvent');
      // >> "Hello, Metaverse!"

      Now let’s update our event to test the .update() handler:

      var el = document.querySelector('a-entity');
      el.setAttribute('log', {event: 'anotherEvent', message: 'Hello, new event!'});
      el.emit('anotherEvent');
      // >> "Hello, new event!"
      -

      Handling Component Removal

      Let’s handle the case where the component unplugs from the entity +

      Handling Component Removal

      Let’s handle the case where the component unplugs from the entity (i.e., .removeAttribute('log')). We can implement the .remove() handler which is called when the component is removed. For the log component, we remove any event listeners the component attached to the entity:

      @@ -1253,7 +1253,7 @@ 

      var el = document.querySelector('a-entity');
      el.removeAttribute('log');
      el.emit('anEvent');
      // >> Nothing should be logged...

      Allowing Multiple Instances of a Component

      Let’s allow having multiple log components attached to the same entity. To do -so, we enable multiple instancing with the .multiple flag. Let’s +so, we enable multiple instancing with the .multiple flag. Let’s set that to true:

      AFRAME.registerComponent('log', {
        schema: {
          event: {type: 'string', default: ''},
          message: {type: 'string', default: 'Hello, World!'}
        },

        multiple: true,

        // ...
      });
      @@ -1270,13 +1270,13 @@

      Example: box Component

      For a less trivial example, let’s find out how we can add 3D objects and affect -the scene graph by writing a component that uses three.js. To get +the scene graph by writing a component that uses three.js. To get the idea, we’ll just make a basic box component that creates a box mesh with both geometry and material.

      boximage Image by Ruben Mueller from vrjump.de

      Note: this is just a 3D equivalent of writing a Hello, World! component. -A-Frame provides geometry and material components if we +A-Frame provides geometry and material components if we actually wanted to make a box in practice.

      Schema and API

      Let’s start with the schema. The schema defines the API of your component. We’ll make the width, height, depth, and color configurable through the @@ -1293,7 +1293,7 @@

      THREE.BoxBufferGeometry, THREE.MeshStandardMaterial, and finally a THREE.Mesh. Then we set the mesh on our entity to add the mesh to the -three.js scene graph using .setObject3D(name, object):

      +three.js scene graph using .setObject3D(name, object):

      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.BoxBufferGeometry(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);
        }
      });

      Now let’s handle updates. If the geometry-related properties (i.e., width, diff --git a/docs/1.0.0/primitives/a-circle.html b/docs/1.0.0/primitives/a-circle.html index 1ff871b9c..c411faa18 100644 --- a/docs/1.0.0/primitives/a-circle.html +++ b/docs/1.0.0/primitives/a-circle.html @@ -1120,7 +1120,7 @@

      -

      The circle primitive creates circles surfaces using the geometry +

      The circle primitive creates circles surfaces using the geometry component with the type set to circle.

      Example

      <a-scene>
        <a-assets>
          <img id="platform" src="platform.jpg">
        </a-assets>

        <!-- Basic circle. -->
        <a-circle color="#CCC" radius="20"></a-circle>

        <!-- Textured circle parallel to ground. -->
        <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
      </a-scene>
      diff --git a/docs/1.0.0/primitives/a-cursor.html b/docs/1.0.0/primitives/a-cursor.html index be610689e..da94f3297 100644 --- a/docs/1.0.0/primitives/a-cursor.html +++ b/docs/1.0.0/primitives/a-cursor.html @@ -1124,7 +1124,7 @@

      interactivity with a scene on devices that do not have a hand controller. The default appearance is a ring geometry. The cursor is usually placed as a child of the camera.

      -

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      +

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      Example

      <a-scene>
        <a-camera>
          <a-cursor></a-cursor>
        </a-camera>

        <a-box></a-box>
      </a-scene>

      Attributes

      diff --git a/docs/1.0.0/primitives/a-gltf-model.html b/docs/1.0.0/primitives/a-gltf-model.html index a4a9579f8..4b280743d 100644 --- a/docs/1.0.0/primitives/a-gltf-model.html +++ b/docs/1.0.0/primitives/a-gltf-model.html @@ -1134,7 +1134,7 @@

      - +
      srcgltf-model.srcgltf-model.src null
      diff --git a/docs/1.0.0/primitives/a-obj-model.html b/docs/1.0.0/primitives/a-obj-model.html index a68eea28a..f674d5920 100644 --- a/docs/1.0.0/primitives/a-obj-model.html +++ b/docs/1.0.0/primitives/a-obj-model.html @@ -1122,7 +1122,7 @@

      We recommend glTF for distributing assets in production over the web. Check -out using the glTF model primitive. You can +out using the glTF model primitive. You can either instead export to COLLADA and use the converter or try out the OBJ converter.

      @@ -1149,7 +1149,7 @@

      null -

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      +

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      diff --git a/docs/1.0.0/primitives/a-plane.html b/docs/1.0.0/primitives/a-plane.html index 4e4474093..91aedbb22 100644 --- a/docs/1.0.0/primitives/a-plane.html +++ b/docs/1.0.0/primitives/a-plane.html @@ -1120,7 +1120,7 @@

      -

      The plane primitive creates flat surfaces using the geometry +

      The plane primitive creates flat surfaces using the geometry component with the type set to plane.

      Example

      <a-scene>
        <a-assets>
          <img id="ground" src="ground.jpg">
        </a-assets>

        <!-- Basic plane. -->
        <a-plane color="#CCC" height="20" width="20"></a-plane>

        <!-- Textured plane parallel to ground. -->
        <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
      </a-scene>
      diff --git a/docs/1.0.0/primitives/a-sound.html b/docs/1.0.0/primitives/a-sound.html index 1996d8d63..f808cc58a 100644 --- a/docs/1.0.0/primitives/a-sound.html +++ b/docs/1.0.0/primitives/a-sound.html @@ -1120,7 +1120,7 @@

      -

      The sound primitive wraps the sound component.

      +

      The sound primitive wraps the sound component.

      Example

      <a-scene>
        <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
      </a-scene>

      Attributes

      diff --git a/docs/1.0.0/primitives/a-sphere.html b/docs/1.0.0/primitives/a-sphere.html index bb8d68f8a..e0ff44b2e 100644 --- a/docs/1.0.0/primitives/a-sphere.html +++ b/docs/1.0.0/primitives/a-sphere.html @@ -1120,7 +1120,7 @@

      -

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      +

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      Example

      <a-sphere color="yellow" radius="5"></a-sphere>

      Attributes

      diff --git a/docs/1.0.0/primitives/a-text.html b/docs/1.0.0/primitives/a-text.html index 0027c9070..cdcae9eaf 100644 --- a/docs/1.0.0/primitives/a-text.html +++ b/docs/1.0.0/primitives/a-text.html @@ -1120,7 +1120,7 @@

      -

      Wraps the text component.

      +

      Wraps the text component.

      Example

      <a-text value="Hello, World!"></a-text>

      Attributes

      diff --git a/docs/1.0.0/primitives/a-torus-knot.html b/docs/1.0.0/primitives/a-torus-knot.html index 587d34c63..a4b55eca4 100644 --- a/docs/1.0.0/primitives/a-torus-knot.html +++ b/docs/1.0.0/primitives/a-torus-knot.html @@ -1120,7 +1120,7 @@

      -

      The torus knot primitive creates pretzel shapes using the geometry +

      The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

      Example

      <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
      diff --git a/docs/1.0.0/primitives/a-torus.html b/docs/1.0.0/primitives/a-torus.html index fbc850abc..f47834fca 100644 --- a/docs/1.0.0/primitives/a-torus.html +++ b/docs/1.0.0/primitives/a-torus.html @@ -1120,7 +1120,7 @@

      -

      The torus primitive creates donut or tube shapes using the geometry +

      The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

      Example

      <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
      diff --git a/docs/1.0.0/primitives/a-triangle.html b/docs/1.0.0/primitives/a-triangle.html index a7aa12d6d..f2b8b9b17 100644 --- a/docs/1.0.0/primitives/a-triangle.html +++ b/docs/1.0.0/primitives/a-triangle.html @@ -1120,7 +1120,7 @@

      -

      The triangle primitive creates triangle surfaces using the geometry +

      The triangle primitive creates triangle surfaces using the geometry component with the type set to triangle.

      Example

      <a-scene>
        <a-assets>
          <img id="platform" src="https://i.imgur.com/mYmmbrp.jpg">
        </a-assets>

        <!-- Basic triangle. -->
        <a-triangle color="#CCC" vertex-c="1 -1 0"></a-triangle>

        <!-- Textured triangle parallel to ground. -->
        <a-triangle src="#platform" rotation="-90 0 0"></a-triangle>
      </a-scene>
      diff --git a/docs/1.0.0/primitives/a-videosphere.html b/docs/1.0.0/primitives/a-videosphere.html index c10847890..38a0d14bd 100644 --- a/docs/1.0.0/primitives/a-videosphere.html +++ b/docs/1.0.0/primitives/a-videosphere.html @@ -1127,7 +1127,7 @@

      Ex

      Methods

      More indepth knowledge on the methods to alter video material can be seen over here

      // 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();
      -

      Attributes

      Note that the videosphere primitive inherits common attributes.

      +

      Attributes

      Note that the videosphere primitive inherits common attributes.

      diff --git a/docs/1.1.0/components/animation.html b/docs/1.1.0/components/animation.html index 2d7054e90..ab9ad35c6 100644 --- a/docs/1.1.0/components/animation.html +++ b/docs/1.1.0/components/animation.html @@ -1167,7 +1167,7 @@

      Read more below for additional options and discovering how to properly animate different types of values.

      -
      +

      API

      Properties

      diff --git a/docs/1.1.0/components/cursor.html b/docs/1.1.0/components/cursor.html index 16dc007fe..3072c3a87 100644 --- a/docs/1.1.0/components/cursor.html +++ b/docs/1.1.0/components/cursor.html @@ -1149,11 +1149,11 @@

      The cursor component provides hover and click states for interaction on top of -the raycaster component. The cursor component can be used for +the raycaster component. The cursor component can be used for both gaze-based and controller-based interactions, but the appearance needs -to be configured depending on the use case. The <a-cursor> +to be configured depending on the use case. The <a-cursor> primitive provides a default reticle appearance for a gaze-based -cursor, and the laser-controls component configures the +cursor, and the laser-controls component configures the cursor for all controllers.

      The cursor component listens to events and keeps state on what’s being hovered and pressed in order to provide mousedown, mouseup, mouseenter, @@ -1164,15 +1164,15 @@

      By default, the cursor is configured to be used in a gaze-based mode and will register user input via mouse or touch. Specifying the downEvents and upEvents properties allows the cursor to work with controllers. For example, -the laser-controls component automatically configures these +the laser-controls component automatically configures these properties to work with most controllers.

      To provide a shape or appearance to the cursor, we should apply either the -geometry and material components or use the raycaster -component’s showLine property to draw a line using the line +geometry and material components or use the raycaster +component’s showLine property to draw a line using the line component.

      Example

      For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no -matter where we look, we place it as a child of the active camera +matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

      <a-entity camera look-controls>
        <a-entity cursor="fuse: true; fuseTimeout: 500"
                  position="0 0 -1"
                  geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                  material="color: black; shader: flat">
        </a-entity>
      </a-entity>

      <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
      @@ -1219,7 +1219,7 @@

      To further customize the cursor component, we configure the cursor’s dependency -component, the raycaster component.

      +component, the raycaster component.

      Events

      @@ -1289,7 +1289,7 @@

      States

      Configuring the Cursor through the Raycaster Component

      The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

      <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>
      @@ -1304,7 +1304,7 @@

      Adding Visual Feedback

      To add visual feedback to the cursor to show when the cursor is clicking or -fusing, we can use the animation component. When the cursor +fusing, we can use the animation component. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

      <a-entity
        animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
        animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
        animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
        cursor="fuse: true;"
        material="color: black; shader: flat"
        position="0 0 -3"
        geometry="primitive: ring"></a-entity>
      diff --git a/docs/1.1.0/components/daydream-controls.html b/docs/1.1.0/components/daydream-controls.html index f36236760..c7abdbc2a 100644 --- a/docs/1.1.0/components/daydream-controls.html +++ b/docs/1.1.0/components/daydream-controls.html @@ -1149,7 +1149,7 @@

      The daydream-controls component interfaces with the Google Daydream controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Daydream controller model that highlights the touched and/or pressed buttons (trackpad).

      As a first time set up, to use the Daydream controller on Chrome for Android diff --git a/docs/1.1.0/components/debug.html b/docs/1.1.0/components/debug.html index 7ef565fa2..36771f417 100644 --- a/docs/1.1.0/components/debug.html +++ b/docs/1.1.0/components/debug.html @@ -1165,8 +1165,8 @@ 

      <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

      Make sure that this component is not active in production.

      -

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM:

      +

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM:

      document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
      document.querySelector('a-entity').flushToDOM();  // Flush an entity.
      document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
      document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.
      diff --git a/docs/1.1.0/components/device-orientation-permission-ui.html b/docs/1.1.0/components/device-orientation-permission-ui.html index 5f838fd7e..a71cba8fa 100644 --- a/docs/1.1.0/components/device-orientation-permission-ui.html +++ b/docs/1.1.0/components/device-orientation-permission-ui.html @@ -1149,7 +1149,7 @@

      Starting with Safari on iOS 13 browsers require sites to be served over https and request user permission to access DeviceOrientation events. This component presents a permission dialog for the user to grant or deny access. -The device-orientation-permission-ui component applies only to the <a-scene> element

      +The device-orientation-permission-ui component applies only to the <a-scene> element

      To configure the style of the dialog one can redefine the associated css styles. To change the colors of the allow, deny and ok buttons:

      .a-dialog-allow-button {
        background-color: red;
      }

      .a-dialog-deny-button {
        background-color: blue;
      }

      .a-dialog-ok-button {
         background-color: green;
       }
      diff --git a/docs/1.1.0/components/fog.html b/docs/1.1.0/components/fog.html index 80fd40070..15ed861bd 100644 --- a/docs/1.1.0/components/fog.html +++ b/docs/1.1.0/components/fog.html @@ -1149,7 +1149,7 @@

      The fog component obscures entities in fog given distance from the camera. The -fog component applies only to the <a-scene> element.

      +fog component applies only to the <a-scene> element.

      Example

      <a-scene fog="type: linear; color: #AAA"></a-scene>

      Properties

      Given the fog distribution type, different properties will apply.

      diff --git a/docs/1.1.0/components/gearvr-controls.html b/docs/1.1.0/components/gearvr-controls.html index 9d0edc452..8ba7ad759 100644 --- a/docs/1.1.0/components/gearvr-controls.html +++ b/docs/1.1.0/components/gearvr-controls.html @@ -1149,7 +1149,7 @@

      The gearvr-controls component interfaces with the Samsung/Oculus Gear VR controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Gear VR controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

      Example

      <!-- Match Gear VR controller if present, regardless of hand. -->
      <a-entity gearvr-controls></a-entity>

      <!-- Match Gear VR controller if present and for specified hand. -->
      <a-entity gearvr-controls="hand: left"></a-entity>
      <a-entity gearvr-controls="hand: right"></a-entity>
      diff --git a/docs/1.1.0/components/geometry.html b/docs/1.1.0/components/geometry.html index 8938fef88..f7c374f9b 100644 --- a/docs/1.1.0/components/geometry.html +++ b/docs/1.1.0/components/geometry.html @@ -1152,7 +1152,7 @@

      property defines the general shape. Geometric primitives, in computer graphics, are irreducible basic shapes. A material component is commonly defined to provide a appearance alongside the shape to create a complete mesh.

      -
      +

      Base Properties

      Every geometry type will have these properties:

      @@ -1675,7 +1675,7 @@ 

      AFRAME.registerGeometry('box', {
        schema: {
          depth: {default: 1, min: 0},
          height: {default: 1, min: 0},
          width: {default: 1, min: 0},
          segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
        },

        init: function (data) {
          this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
        }
      });

      Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then we need to create the geometry and set on this.geometry through the init lifecycle method.

      When a geometry component sets its primitive property to the custom geometry diff --git a/docs/1.1.0/components/gltf-model.html b/docs/1.1.0/components/gltf-model.html index 1c782b73d..d5269bce1 100644 --- a/docs/1.1.0/components/gltf-model.html +++ b/docs/1.1.0/components/gltf-model.html @@ -1160,9 +1160,9 @@

      NOTE: A-Frame supports glTF 2.0. For models using older versions of the glTF format, use gltf-model-legacy from donmccurdy/aframe-extras.

      -
      + -

      Why use glTF?

      In comparison to the older OBJ format, which supports only +

      Why use glTF?

      In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features. In addition to all of the above, glTF offers:

        diff --git a/docs/1.1.0/components/hand-controls.html b/docs/1.1.0/components/hand-controls.html index f46ae3e21..35ca3222d 100644 --- a/docs/1.1.0/components/hand-controls.html +++ b/docs/1.1.0/components/hand-controls.html @@ -1149,8 +1149,8 @@

        The hand-controls component provides tracked hands (using a prescribed model) -with animated gestures. hand-controls wraps the vive-controls and -oculus-touch-controls which in turn wrap the tracked-controls +with animated gestures. hand-controls wraps the vive-controls and +oculus-touch-controls which in turn wrap the tracked-controls component. By specifying just hand-controls, we have something that works well with both Vive and Rift. The component gives extra events and handles hand animations and poses.

        diff --git a/docs/1.1.0/components/keyboard-shortcuts.html b/docs/1.1.0/components/keyboard-shortcuts.html index 819a7e5cb..13f4a2c0b 100644 --- a/docs/1.1.0/components/keyboard-shortcuts.html +++ b/docs/1.1.0/components/keyboard-shortcuts.html @@ -1149,7 +1149,7 @@

        The keyboard-shortcuts component toggles global keyboard shortcuts. The -keyboard-shortcuts component applies only to the <a-scene> element.

        +keyboard-shortcuts component applies only to the <a-scene> element.

        Example

        <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

        Properties

        diff --git a/docs/1.1.0/components/laser-controls.html b/docs/1.1.0/components/laser-controls.html index 1a4033ce6..570e4208f 100644 --- a/docs/1.1.0/components/laser-controls.html +++ b/docs/1.1.0/components/laser-controls.html @@ -1161,17 +1161,17 @@

        configures other components, rather than implementing any logic itself. Under the hood, laser-controls sets all of the tracked controller components:

        These controller components get activated if its respective controller is connected and detected via the Gamepad API. Then the model of the actual -controller is used. laser-controls then configures the cursor +controller is used. laser-controls then configures the cursor component for listen to the appropriate events and configures the -raycaster component to draw the laser.

        +raycaster component to draw the laser.

        When the laser intersects with an entity, the length of the line gets truncated to the distance to the intersection point.

        Example

        <a-entity laser-controls="hand: left"></a-entity>
        @@ -1196,11 +1196,11 @@

        Color for the default controller model. -

        Customizing the Raycaster

        Configure the raycaster properties.

        +

        Customizing the Raycaster

        Configure the raycaster properties.

        For example:

        <a-entity laser-controls raycaster="objects: .links; far: 5"></a-entity>
        -

        Customizing the Line

        See Raycaster: Customizing the Line.

        +

        Customizing the Line

        See Raycaster: Customizing the Line.

        For example:

        <a-entity laser-controls line="color: red; opacity: 0.75"></a-entity>
        diff --git a/docs/1.1.0/components/light.html b/docs/1.1.0/components/light.html index f249072a1..62fb43788 100644 --- a/docs/1.1.0/components/light.html +++ b/docs/1.1.0/components/light.html @@ -1163,7 +1163,7 @@

        To manually disable the defaults, without adding other lights:

        <a-scene light="defaultLightsEnabled: false">
          <!-- ... -->
        </a-scene>
        -
        +

        Properties

        All light types support a few basic properties:

        @@ -1305,7 +1305,7 @@

        Spot

        Sp

        Configuring Shadows

        A-Frame includes support for realtime shadow rendering. With proper configuration, objects (both moving or stationary) will cast shadows adding depth and realism to a scene. Since shadows come with many properties, it -is very helpful to use the A-Frame Inspector to configure shadows

        +is very helpful to use the A-Frame Inspector to configure shadows

        Light types that support shadows (point, spot, and directional) include additional properties:

        diff --git a/docs/1.1.0/components/line.html b/docs/1.1.0/components/line.html index 381d0da7e..c632d1af9 100644 --- a/docs/1.1.0/components/line.html +++ b/docs/1.1.0/components/line.html @@ -1150,8 +1150,8 @@

        The line component draws a line given a start coordinate and end coordinate using THREE.Line.

        -

        The raycaster component uses the line component for its showLine -property, which is then used by the laser-controls component.

        +

        The raycaster component uses the line component for its showLine +property, which is then used by the laser-controls component.

        Example

        <a-entity line="start: 0, 1, 0; end: 2 0 -5; color: red"
                  line__2="start: -2, 4, 5; end: 0 4 -3; color: green"></a-entity>

        Note an entity can have multiple lines. The line mesh is set as line or diff --git a/docs/1.1.0/components/look-controls.html b/docs/1.1.0/components/look-controls.html index 7f6deb894..d5f3380d8 100644 --- a/docs/1.1.0/components/look-controls.html +++ b/docs/1.1.0/components/look-controls.html @@ -1154,7 +1154,7 @@

      • Rotates the entity when we move the mouse.
      • Rotates the entity when we touch-drag the touchscreen.

      -

      Example

      The look-controls component is usually used alongside the camera +

      Example

      The look-controls component is usually used alongside the camera component.

      <a-entity camera look-controls position="0 1.6 0"></a-entity>
      diff --git a/docs/1.1.0/components/magicleap-controls.html b/docs/1.1.0/components/magicleap-controls.html index 82f9acced..2d1f1fcca 100644 --- a/docs/1.1.0/components/magicleap-controls.html +++ b/docs/1.1.0/components/magicleap-controls.html @@ -1149,7 +1149,7 @@

      The magicleap-controls component interfaces with the Magic Leap controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and Magic Leap controller model/

      Example

      <!-- Match Magic Leap controller if present, regardless of hand. -->
      <a-entity magicleap-controls></a-entity>

      <!-- Match Magic Leap controller if present and for specified hand. -->
      <a-entity magicleap-controls="hand: left"></a-entity>
      <a-entity magicleap-controls="hand: right"></a-entity>
      diff --git a/docs/1.1.0/components/material.html b/docs/1.1.0/components/material.html index 6791cedd7..86d06e7de 100644 --- a/docs/1.1.0/components/material.html +++ b/docs/1.1.0/components/material.html @@ -1149,11 +1149,11 @@

      The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

      We can register custom materials to extend the material component to provide a wide range of visual effects.

      -
      +

      Example

      Defining a red material using the default standard material:

      <a-entity geometry="primitive: box" material="color: red"></a-entity>
      @@ -1349,7 +1349,7 @@

      fog. +Whether or not material is affected by fog. true @@ -1466,7 +1466,7 @@

      fog. +Whether or not material is affected by fog. true @@ -1502,7 +1502,7 @@

      Textures

      To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

      +asset management system:

      <a-scene>
        <a-assets>
          <img id="my-texture" src="texture.png">
        </a-assets>

        <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
      </a-scene>

      src can also be an inline URL. Note that we do not get browser caching or diff --git a/docs/1.1.0/components/obj-model.html b/docs/1.1.0/components/obj-model.html index b3dbe3e06..f36b91965 100644 --- a/docs/1.1.0/components/obj-model.html +++ b/docs/1.1.0/components/obj-model.html @@ -1166,7 +1166,7 @@

      mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

      Events

      @@ -1184,7 +1184,7 @@

      EventsLoading Inline

      We can also load assets by specifying the path directly within url(). Note this is less performant than going through the asset management system.

      <a-entity obj-model="obj: url(/path/to/tree.obj); mtl: url(/path/to/tree.mtl)"></a-entity>
      -

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      +

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      Additional Resources

      We can find and download models on the web to drop into our scenes:

      • Sketchup’s 3D Warehouse - Repository of models.
        • diff --git a/docs/1.1.0/components/oculus-go-controls.html b/docs/1.1.0/components/oculus-go-controls.html index ceadec441..b0a86d787 100644 --- a/docs/1.1.0/components/oculus-go-controls.html +++ b/docs/1.1.0/components/oculus-go-controls.html @@ -1149,7 +1149,7 @@

        The oculus-go-controls component interfaces with the Oculus Go controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Oculus Go controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

        Example

        <!-- Match Oculus Go controller if present, regardless of hand. -->
        <a-entity oculus-go-controls></a-entity>

        <!-- Match Oculus Go controller if present and for specified hand. -->
        <a-entity oculus-go-controls="hand: left"></a-entity>
        <a-entity oculus-go-controls="hand: right"></a-entity>
        diff --git a/docs/1.1.0/components/oculus-touch-controls.html b/docs/1.1.0/components/oculus-touch-controls.html index 8dc0b7ed7..cd557f63c 100644 --- a/docs/1.1.0/components/oculus-touch-controls.html +++ b/docs/1.1.0/components/oculus-touch-controls.html @@ -1149,7 +1149,7 @@

        The oculus-touch-controls component interfaces with the Oculus Touch controllers. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.

        Example

        <a-entity oculus-touch-controls="hand: left"></a-entity>
        <a-entity oculus-touch-controls="hand: right"></a-entity>
        diff --git a/docs/1.1.0/components/position.html b/docs/1.1.0/components/position.html index aedbad7ff..f4bed2b74 100644 --- a/docs/1.1.0/components/position.html +++ b/docs/1.1.0/components/position.html @@ -1187,7 +1187,7 @@

        #child2‘s position would be 2 3 4.

        Updating Position

        For performance and ergonomics, we recommend updating position directly via the -three.js Object3D .position Vector3 versus via +three.js Object3D .position Vector3 versus via .setAttribute.

        This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1201,11 +1201,11 @@

        Getting Position

        To reflect updates done at the three.js level, A-Frame returns the actual Object3D.position vector object when doing .getAttribute('position'). Note modifying the return value will modify the entity itself.

        -

        See also reading position and rotation of the camera.

        +

        See also reading position and rotation of the camera.

        Order of Transformations

        Transformations are applied to entities in this order:

        diff --git a/docs/1.1.0/components/raycaster.html b/docs/1.1.0/components/raycaster.html index 29ac3493b..7b3185e50 100644 --- a/docs/1.1.0/components/raycaster.html +++ b/docs/1.1.0/components/raycaster.html @@ -1160,7 +1160,7 @@

        is explicitly defined via the objects selector property described below. Raycasting is an expensive operation, and we should raycast against only targets that need to be interactable at any given time.

        -

        The cursor component and laser-controls components +

        The cursor component and laser-controls components both build on top of the raycaster component.

        Example

        <a-entity id="player" collider-check>
          <a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
        </a-entity>
        <a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
        @@ -1223,7 +1223,7 @@

        showLine -Whether or not to display the raycaster visually with the line component. +Whether or not to display the raycaster visually with the line component. false @@ -1372,7 +1372,7 @@

        Customizing the Line

        If showLine is set to true, the raycaster will configure the line given the raycaster’s origin, direction, and far properties. To customize the line -appearance provided by the showLine: true property, we configure the line +appearance provided by the showLine: true property, we configure the line component:

        <a-entity raycaster="showLine: true; far: 100" line="color: orange; opacity: 0.5"></a-entity>
        diff --git a/docs/1.1.0/components/rotation.html b/docs/1.1.0/components/rotation.html index 6c92c48df..de9235edd 100644 --- a/docs/1.1.0/components/rotation.html +++ b/docs/1.1.0/components/rotation.html @@ -1192,7 +1192,7 @@

        15 45 30.

        Updating Rotation

        For performance and ergonomics, we recommend updating rotation directly via the three.js Object3D .rotation Euler (in radians) versus -via .setAttribute.

        +via .setAttribute.

        This method is easier because we have access to all the Euler utilities, and faster by skipping .setAttribute overhead and not needing to create an object to set rotation:

        @@ -1202,12 +1202,12 @@

        reading position and rotation of the camera.

        +

        See also reading position and rotation of the camera.

        Order of Transformations

        Transformations are applied to entities in this order:

        diff --git a/docs/1.1.0/components/scale.html b/docs/1.1.0/components/scale.html index a0b5b3cfb..46e7fc1d9 100644 --- a/docs/1.1.0/components/scale.html +++ b/docs/1.1.0/components/scale.html @@ -1191,7 +1191,7 @@

        Relative Scale

        Similar to the rotation and position components, scales are applied in the local coordinate system and multiply in nested entities.

        Updating Scale

        For performance and ergonomics, we recommend updating scale directly via the -three.js Object3D .scale Vector3 versus via +three.js Object3D .scale Vector3 versus via .setAttribute.

        This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1207,8 +1207,8 @@

        Order of Transformations

        Transformations are applied to entities in this order:

        diff --git a/docs/1.1.0/components/shadow.html b/docs/1.1.0/components/shadow.html index d204fbe79..611880e55 100644 --- a/docs/1.1.0/components/shadow.html +++ b/docs/1.1.0/components/shadow.html @@ -1158,7 +1158,7 @@

        Examp

        IMPORTANT: Adding the shadow component alone is not enough to display shadows in your scene. We must have at least one light with castShadow: true enabled. Additionally, the light’s shadow camera (used for depth -projection) usually must be configured correctly. Refer to the light +projection) usually must be configured correctly. Refer to the light component for more information.

        Properties

        diff --git a/docs/1.1.0/components/sound.html b/docs/1.1.0/components/sound.html index a51036e38..2d61aab25 100644 --- a/docs/1.1.0/components/sound.html +++ b/docs/1.1.0/components/sound.html @@ -1150,7 +1150,7 @@

        The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the -components-position.

        +components-position.

        NOTE: Playing sound on iOS — in any browser — requires a physical user interaction. This is a browser limitation, and internal A-Frame events (like fusing cursors) do diff --git a/docs/1.1.0/components/stats.html b/docs/1.1.0/components/stats.html index c905d11f7..dc550471b 100644 --- a/docs/1.1.0/components/stats.html +++ b/docs/1.1.0/components/stats.html @@ -1149,7 +1149,7 @@

        The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

        +component applies only to the <a-scene> element.

        Example

        <a-scene stats></a-scene>

        Metrics

          diff --git a/docs/1.1.0/components/text.html b/docs/1.1.0/components/text.html index 1d0a04e0b..782d83def 100644 --- a/docs/1.1.0/components/text.html +++ b/docs/1.1.0/components/text.html @@ -1150,7 +1150,7 @@

          The text component renders signed distance field (SDF) font text.

          Example Image

          -
          +

          Introduction

          Note that rendering text in 3D is hard. In 2D web development, text is the most basic thing because the browser’s renderer and layout engine handle @@ -1398,8 +1398,8 @@

          SizingChange the width.
        • Change the wrapCount (roughly how many characters to fit inside the given width).
        • Change wrapPixels.
          • -
        • Change the scale component.
          • -
        • Position the text closer or farther away.
          • +
        • Change the scale component.
          • +
        • Position the text closer or farther away.

        Sizing

        Text can be wrapped by specifying width in A-Frame units.

        diff --git a/docs/1.1.0/components/tracked-controls.html b/docs/1.1.0/components/tracked-controls.html index c4fa1f676..db7d7c335 100644 --- a/docs/1.1.0/components/tracked-controls.html +++ b/docs/1.1.0/components/tracked-controls.html @@ -1150,12 +1150,12 @@

        The tracked-controls component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is -abstracted by the hand-controls component as well as the -vive-controls, oculus-touch-controls, -windows-motion-controls, and daydream-controls +abstracted by the hand-controls component as well as the +vive-controls, oculus-touch-controls, +windows-motion-controls, and daydream-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events. For non-6DOF controllers -such as daydream-controls, a primitive arm model is used to emulate +such as daydream-controls, a primitive arm model is used to emulate positional data.

        tracked-controls sets two components that handles different Web API versions for VR:

          diff --git a/docs/1.1.0/components/visible.html b/docs/1.1.0/components/visible.html index ad7f80464..ce9b5313c 100644 --- a/docs/1.1.0/components/visible.html +++ b/docs/1.1.0/components/visible.html @@ -1172,7 +1172,7 @@

          Value

          < The entity will not be rendered nor visible. The entity will still exist in the scene. -

          Updating Visibility

          It is slightly faster to update visibility at the three.js level versus via +

          Updating Visibility

          It is slightly faster to update visibility at the three.js level versus via .setAttribute.

          // With three.js
          el.object3D.visible = false;

          // With .setAttribute.
          el.setAttribute('visible', false);
          diff --git a/docs/1.1.0/components/vive-controls.html b/docs/1.1.0/components/vive-controls.html index 4a9b17ff8..598e0ae54 100644 --- a/docs/1.1.0/components/vive-controls.html +++ b/docs/1.1.0/components/vive-controls.html @@ -1149,7 +1149,7 @@

          The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

          Example

          <a-entity vive-controls="hand: left"></a-entity>
          <a-entity vive-controls="hand: right"></a-entity>
          diff --git a/docs/1.1.0/components/vive-focus-controls.html b/docs/1.1.0/components/vive-focus-controls.html index 58e2fe692..f66879b72 100644 --- a/docs/1.1.0/components/vive-focus-controls.html +++ b/docs/1.1.0/components/vive-focus-controls.html @@ -1149,7 +1149,7 @@

          The vive-focus-controls component interfaces with the Vive Focus controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Vive Focus controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

          Example

          <!-- Match Vive Focus controller if present, regardless of hand. -->
          <a-entity vive-focus-controls></a-entity>

          <!-- Match Vive Focus controller if present and for specified hand. -->
          <a-entity vive-focus-controls="hand: left"></a-entity>
          <a-entity vive-focus-controls="hand: right"></a-entity>
          diff --git a/docs/1.1.0/components/vr-mode-ui.html b/docs/1.1.0/components/vr-mode-ui.html index b42c0f08e..3faca10df 100644 --- a/docs/1.1.0/components/vr-mode-ui.html +++ b/docs/1.1.0/components/vr-mode-ui.html @@ -1150,7 +1150,7 @@

          The vr-mode-ui component allows disabling of UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only -to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

          +to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

          Example

          <a-scene vr-mode-ui="enabled: false"></a-scene>

          Properties

          diff --git a/docs/1.1.0/components/wasd-controls.html b/docs/1.1.0/components/wasd-controls.html index 064c99d3b..fab1c8a1f 100644 --- a/docs/1.1.0/components/wasd-controls.html +++ b/docs/1.1.0/components/wasd-controls.html @@ -1149,7 +1149,7 @@

          The wasd-controls component controls an entity with the WASD or arrow keyboard -keys. The wasd-controls component is commonly attached to an entity with the camera +keys. The wasd-controls component is commonly attached to an entity with the camera component.

          Example

          <a-entity camera look-controls wasd-controls="acceleration:100" position="0 1.6 0"></a-entity>
          diff --git a/docs/1.1.0/components/windows-motion-controls.html b/docs/1.1.0/components/windows-motion-controls.html index 9ed1574f2..58f5d2c1c 100644 --- a/docs/1.1.0/components/windows-motion-controls.html +++ b/docs/1.1.0/components/windows-motion-controls.html @@ -1150,7 +1150,7 @@

          The windows-motion-controls component 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 +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.)

          Example

          <a-entity windows-motion-controls="hand: left"></a-entity>
          <a-entity windows-motion-controls="hand: right"></a-entity>
          diff --git a/docs/1.1.0/core/asset-management-system.html b/docs/1.1.0/core/asset-management-system.html index 1f10030c3..352d8fc4c 100644 --- a/docs/1.1.0/core/asset-management-system.html +++ b/docs/1.1.0/core/asset-management-system.html @@ -1166,7 +1166,7 @@

        The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

        -
        +

        Example

        We can define our assets in <a-assets> and point to those assets from our entities using selectors:

        diff --git a/docs/1.1.0/core/component.html b/docs/1.1.0/core/component.html index c7216862a..35a40f7c4 100644 --- a/docs/1.1.0/core/component.html +++ b/docs/1.1.0/core/component.html @@ -1148,7 +1148,7 @@

        -

        In the entity-component-system pattern, a component is a reusable and +

        In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

        In A-Frame, components modify entities which are 3D objects in the scene. We @@ -1162,7 +1162,7 @@

        Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

        -
        +

        Component HTML Form

        A component holds a bucket of data in the form of one or more component properties. Components use this data to modify entities. Consider an engine @@ -1313,7 +1313,7 @@

        Definition Lifecycle Handler Methods

        With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the shape of the data, the lifecycle handler methods use the data to modify the entity. The handlers will usually interact with the -Entity API.

        +Entity API.

        methodsimage Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

        Overview of Methods

        @@ -1366,15 +1366,15 @@

        setAttribute. +

        - + - + @@ -1411,7 +1411,7 @@

        diffing the current +

        Granular modifications to the entity can be done by diffing the current dataset (this.data) with the previous dataset before the update (oldData).

        A-Frame calls .update() both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The @@ -1419,7 +1419,7 @@

        visible component’s update sets the visibility of +

        For example, the visible component’s update sets the visibility of the entity.

        Parsed component properties computed from the schema default values, mixins, and the entity’s attributes.
        Important: Do not modify the data attribute directly. It is updated internally by A-Frame. To modify a component, use setAttribute.
        this.elReference to the entity as an HTML element.Reference to the entity as an HTML element.
        this.el.sceneElReference to the scene as an HTML element.Reference to the scene as an HTML element.
        this.id
        AFRAME.registerComponent('visible', {
          /**
           * this.el is the entity element.
           * this.el.object3D is the three.js object of the entity.
           * this.data is the component's property or properties.
           */
          update: function (oldData) {
            this.el.object3D.visible = this.data;
          }
          // ...
        });
        @@ -1434,7 +1434,7 @@

        Remove, undo, or clean up all of the component’s modifications to the entity.
      • Detach event listeners.

      -

      For example, when the light component is removed, the light component +

      For example, when the light component is removed, the light component will remove the light object that it had previously set on the entity, thus removing it from the scene.

      AFRAME.registerComponent('light', {
        // ...
        remove: function () {
          this.el.removeObject3D('light');
        }
        // ...
      });
      @@ -1456,7 +1456,7 @@

      time) and the time difference in milliseconds since the last frame (timeDelta). These can be used for interpolation or to only run parts of the tick handler on a set interval.

      -

      For example, the tracked controls component will progress +

      For example, the tracked controls component will progress the controller’s animations, update the controller’s position and rotation, and check for button presses.

      AFRAME.registerComponent('tracked-controls', {
        // ...
        tick: function (time, timeDelta) {
          this.updateMeshAnimation();
          this.updatePose();
          this.updateButtons();
        }
        // ...
      });
      @@ -1475,7 +1475,7 @@

      .
    • Remove event listeners.
    • Remove any chances of dynamic behavior.

    -

    For example, the sound component will pause the sound and remove an +

    For example, the sound component will pause the sound and remove an event listener that would have played a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      pause: function () {
        this.pauseSound();
        this.removeEventListener();
      }
      // ...
    });
    @@ -1490,7 +1490,7 @@

    .pla
    • Add event listeners.
    -

    For example, the sound component will play the sound and update the +

    For example, the sound component will play the sound and update the event listener that would play a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      play: function () {
        if (this.data.autoplay) { this.playSound(); }
        this.updateEventListener();
      }
      // ...
    });
    @@ -1500,7 +1500,7 @@

  • Dynamically update or extend the schema, usually depending on the value of a property.
    • -

    For example, the geometry component checks if the primitive +

    For example, the geometry component checks if the primitive property changed to determine whether to update the schema for a different type of geometry:

    AFRAME.registerComponent('geometry', {
      // ...
      updateSchema: (newData) {
        if (newData.primitive !== this.data.primitive) {
          this.extendSchema(GEOMETRIES[newData.primitive].schema);
        }
      }
      // ...
    });
    @@ -1555,7 +1555,7 @@ 

    document.querySelector('[geometry]').components.geometry.flushToDOM();
    -

    Read more about component-to-DOM serialization.

    +

    Read more about component-to-DOM serialization.

    Accessing a Component’s Members and Methods

    A component’s members and methods can be accessed through the entity from the .components object. Look up the component from the entity’s map of components, and we’ll have access to the component’s internals. Consider this diff --git a/docs/1.1.0/core/entity.html b/docs/1.1.0/core/entity.html index 9a520cf7d..d4672d422 100644 --- a/docs/1.1.0/core/entity.html +++ b/docs/1.1.0/core/entity.html @@ -1149,23 +1149,23 @@

    A-Frame represents an entity via the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

    -

    In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

    -
    +

    In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

    +

    Example

    Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

    <a-entity>

    We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

    +give it shape and appearance, we can attach the geometry and +material components:

    <a-entity geometry="primitive: box" material="color: red">
    -

    Or to make it emit light, we can further attach the light component:

    +

    Or to make it emit light, we can further attach the light component:

    <a-entity geometry="primitive: box" material="color: red"
              light="type: point; intensity: 2.0">

    Retrieving an Entity

    We can simply retrieve an entity using DOM APIs.

    @@ -1200,7 +1200,7 @@

    object3DMap

    An entity’s object3DMap is an object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that components have set.

    -

    For an entity with a geometry and light components +

    For an entity with a geometry and light components attached, object3DMap might look like:

    {
      light: <THREE.Light Object>,
      mesh: <THREE.Mesh Object>
    }
    @@ -1215,7 +1215,7 @@

    Metho

    destroy ()

    Clean up memory related to the entity such as clearing all components and their data.

    emit (name, detail, bubbles)

    emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

    +trigger an animation:

    // <a-entity animation="property: rotation; to: 0 360 0; startEvents: rotate">
    entity.emit('rotate');

    We can also pass event detail or data as the second argument:

    @@ -1226,7 +1226,7 @@ 

    entity.emit('sink', null, false);

    flushToDOM (recursive)

    flushToDOM will manually serialize an entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

    +Read more about component-to-DOM serialization.

    getAttribute (componentName)

    getAttribute retrieves parsed component data (including mixins and defaults).

    // <a-entity geometry="primitive: box; width: 3">

    entity.getAttribute('geometry');
    // >> {primitive: "box", depth: 2, height: 2, width: 3, ...}

    entity.getAttribute('geometry').primitive;
    // >> "box"

    entity.getAttribute('geometry').height;
    // >> 2

    entity.getAttribute('position');
    // >> {x: 0, y: 0, z: 0}
    @@ -1253,20 +1253,20 @@

    pa entity will call pause() on its child entities when we pause an entity.

    // <a-entity id="spinning-jumping-ball">
    entity.pause();
    -

    For example, the look-controls component on +

    For example, the look-controls component on pause will remove event handlers that listen for input.

    play ()

    play() will start any dynamic behavior as defined by animations and components. This is automatically called when the DOM attaches an entity. When an entity play(), the entity calls play() on its child entities.

    entity.pause();
    entity.play();
    -

    For example, the sound component on play will begin playing the sound.

    +

    For example, the sound component on play will begin playing the sound.

    setAttribute (componentName, value, [propertyValue | clobber])

    If componentName is not the name of a registered component or the component is a single-property component, setAttribute behaves as it normally would:

    entity.setAttribute('visible', false);

    Though if componentName is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    entity.setAttribute('position', { x: 1, y: 2, z: 3 });
    @@ -1334,7 +1334,7 @@

    Events componentchanged -One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. +One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. componentinitialized diff --git a/docs/1.1.0/core/globals.html b/docs/1.1.0/core/globals.html index d5d740a48..5a7adfef5 100644 --- a/docs/1.1.0/core/globals.html +++ b/docs/1.1.0/core/globals.html @@ -1160,11 +1160,11 @@

    AComponent -Component prototype. +Component prototype. AEntity -Entity prototype. +Entity prototype. ANode @@ -1172,7 +1172,7 @@

    AScene -Scene prototype. +Scene prototype. components @@ -1188,7 +1188,7 @@

    registerComponent -Function to register a component. +Function to register a component. registerElement @@ -1196,15 +1196,15 @@

    registerGeometry -Function to register a geometry. +Function to register a geometry. registerPrimitive -Function to register a primitive. +Function to register a primitive. registerShader -Function to register a material or shader. +Function to register a material or shader. schema @@ -1224,7 +1224,7 @@

    utils -A-Frame utility modules. +A-Frame utility modules. version diff --git a/docs/1.1.0/core/mixins.html b/docs/1.1.0/core/mixins.html index 38099d41e..e3c5532f7 100644 --- a/docs/1.1.0/core/mixins.html +++ b/docs/1.1.0/core/mixins.html @@ -1150,7 +1150,7 @@

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    <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-mixin>
      </a-assets>

      <a-entity mixin="red cube"></a-entity>
      <a-entity mixin="blue cube"></a-entity>
    </a-scene>
    @@ -1160,7 +1160,7 @@

    the entities above expand to:

    <a-entity material="color: red" geometry="primitive: box"></a-entity>
    <a-entity material="color: blue" geometry="primitive: box"></a-entity>
    -
    +

    Merging Component Properties

    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="height: 10"></a-mixin>
        <a-mixin id="wide" geometry="width: 10"></a-mixin>
      </a-assets>

      <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
    </a-scene>
    diff --git a/docs/1.1.0/core/scene.html b/docs/1.1.0/core/scene.html index 9650cd0f7..4b4835903 100644 --- a/docs/1.1.0/core/scene.html +++ b/docs/1.1.0/core/scene.html @@ -1149,8 +1149,8 @@

    A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

    -

    The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

    +

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    @@ -1160,9 +1160,9 @@

  • Default camera and lights
  • Set up webvr-polyfill, VREffect
  • Add UI to Enter VR that calls WebVR API
    • -
  • Configure WebXR devices through the webxr system
    • +
  • Configure WebXR devices through the webxr system
    • -
    +

    Example

    <a-scene>
      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <a-box src="#texture"></a-box>
    </a-scene>
    @@ -1207,7 +1207,7 @@

    systems -Instantiated systems. +Instantiated systems. time @@ -1271,12 +1271,12 @@

    embedded - Remove fullscreen styles from the canvas. -
  • fog - Add fog.
    • -
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • -
  • inspector - Inject the A-Frame Inspector.
    • -
  • stats - Toggle performance stats.
    • -
  • vr-mode-ui - Toggle UI for entering and exiting VR.
    • +
  • embedded - Remove fullscreen styles from the canvas.
    • +
  • fog - Add fog.
    • +
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • +
  • inspector - Inject the A-Frame Inspector.
    • +
  • stats - Toggle performance stats.
    • +
  • vr-mode-ui - Toggle UI for entering and exiting VR.

    • Running Content Scripts on the Scene

    The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

    AFRAME.registerComponent('do-something', {
      init: function () {
        var sceneEl = this.el;
      }
    });
    diff --git a/docs/1.1.0/core/systems.html b/docs/1.1.0/core/systems.html index d67a2329e..9ff2726b7 100644 --- a/docs/1.1.0/core/systems.html +++ b/docs/1.1.0/core/systems.html @@ -1148,16 +1148,16 @@

    -

    A system, of the entity-component-system pattern, provides global scope, +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -
    + -

    Registering a System

    A system is registered similarly to a component.

    +

    Registering a System

    A system is registered similarly to a component.

    If the system name matches a component name, then the component will have a reference to the system as this.system:

    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);
      }
    });
    @@ -1179,7 +1179,7 @@

    schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data.

    Methods

    A system, like a component, defines lifecycle handlers. It can also define diff --git a/docs/1.1.0/core/utils.html b/docs/1.1.0/core/utils.html index 1ecd8de93..673927309 100644 --- a/docs/1.1.0/core/utils.html +++ b/docs/1.1.0/core/utils.html @@ -1149,7 +1149,7 @@

    A-Frame’s utility modules are public through AFRAME.utils.

    -
    +

    AFRAME.utils.coordinates

    Module for handling vec3 and vec4 types.

    .isCoordinates (value)

    Tests whether a string is a vec3 or vec4.

    @@ -1161,7 +1161,7 @@

    .stringify (data)

    Stringifies an {x, y, z} vec3 object to an “x y z” string.Or Stringifies an {x, y, z, w} vec4 object to an “x y z w” string.

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
    // >> "1 2 -3"

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3, w:4})
    // >> "1 2 -3 4"
    -

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for +

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for return 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.

    @@ -1169,7 +1169,7 @@

    This is useful for components that need a way to reference a property of a multi-property component.

    -

    .setComponentProperty (entity, componentName, value, delimiter)

    Performs like Entity.setAttribute, but with support for setting an +

    .setComponentProperty (entity, componentName, value, delimiter)

    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.

    diff --git a/docs/1.1.0/guides/building-a-360-image-gallery.html b/docs/1.1.0/guides/building-a-360-image-gallery.html index bab37c53c..7d350e4a7 100644 --- a/docs/1.1.0/guides/building-a-360-image-gallery.html +++ b/docs/1.1.0/guides/building-a-360-image-gallery.html @@ -1152,7 +1152,7 @@

    Let’s build an interactive gaze-based 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

    -

    This guide will practice three concepts related to entity-component:

    +

    This guide will practice three concepts related to entity-component:

    1. Using the standard components that come with A-Frame.
    2. Using community components from the ecosystem.
      3. @@ -1160,18 +1160,18 @@

    Not to say 360° images are at all a focus use case of A-Frame, but it makes for an easy example that has a lot of demand as an early use case on the Web.

    -
    +

    Skeleton

    This is the starting point for our scene. We can also remix the Glitch.

    <a-scene>
      <a-assets>
        <audio id="click-sound" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>

        <!-- Images. -->
        <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
        <img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
        <img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
        <img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
        <img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Link template we will build. -->
      <a-entity class="link"></a-entity>

      <!-- Camera + Cursor. -->
      <a-camera>
        <a-cursor
          id="cursor"
          animation__click="property: scale; from: 0.1 0.1 0.1; to: 1 1 1; easing: easeInCubic; dur: 150; startEvents: click"
          animation__clickreset="property: scale; to: 0.1 0.1 0.1; dur: 1; startEvents: animationcomplete__click"
          animation__fusing="property: scale; from: 1 1 1; to: 0.1 0.1 0.1; easing: easeInCubic; dur: 150; startEvents: fusing"></a-cursor>
      </a-camera>
    </a-scene>

    We have predefined:

    Using Standard Components

    Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure @@ -1181,20 +1181,20 @@ 

    <a-entity class="link"></a-entity>
    -

    To give our entity shape, we can attach the geometry component, +

    To give our entity shape, we can attach the geometry component, configured to a plane shape. We specify the component data using a syntax that resembles that of inline CSS styles:

    <a-entity
      class="link"
      geometry="primitive: plane; height: 1; width: 1"></a-entity>
    -

    Then to give our entity appearance, we can attach the material +

    Then to give our entity appearance, we can attach the material component. We set shader to flat so the image isn’t affected negatively by lighting. And we set src to #cubes-thumb, a selector to one -of the images preloaded in the Asset Management System. Alternatively, +of the images preloaded in the Asset Management System. Alternatively, we could pass a URL for the image:

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: #cubes-thumb"></a-entity>

    We can continue adding features to our entity by plugging in more components. -Let’s attach one more standard component, the sound component. We want +Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1270,15 +1270,15 @@

    Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

    Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We can specify event names either the _event property or via the __<id> as shown below. The rest of the properties define the setAttribute calls. Notice that the event-set component can have -multiple instances:

    +multiple instances:

    <script id="link" type="text/html">
      <a-entity class="link"
        geometry="primitive: plane; height: 1; width: 1"
        material="shader: flat; src: ${thumb}"
        sound="on: click; src: #click-sound"
        event-set__mouseenter="scale: 1.2 1.2 1"
        event-set__mouseleave="scale: 1 1 1"
        event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"></a-entity>
    </script>

    Remember to add data-src attributes to the link entities to load the full image on click:

    @@ -1310,7 +1310,7 @@

    Writing a Component and +application-specific components. That is covered in Writing a Component and hopefully in later guides.

    Try it out!

    diff --git a/docs/1.1.0/guides/building-a-basic-scene.html b/docs/1.1.0/guides/building-a-basic-scene.html index 5377e4b2d..454228d56 100644 --- a/docs/1.1.0/guides/building-a-basic-scene.html +++ b/docs/1.1.0/guides/building-a-basic-scene.html @@ -1161,7 +1161,7 @@

  • Add text

    • Remix the Basic Guide example on Glitch.

    -
    +

    Starting with HTML

    We start out with a minimal HTML structure:

    <html>
      <head>
        <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
        </a-scene>
      </body>
    </html>
    @@ -1170,7 +1170,7 @@

    before <a-scene> because A-Frame registers custom HTML elements which must be defined before <a-scene> is attached or else <a-scene> will do nothing.

    -

    Next, we include <a-scene> in the <body>. <a-scene> will contain every +

    Next, we include <a-scene> in the <body>. <a-scene> will contain every entity in our scene. <a-scene> handles all of the setup that is required for 3D: setting up WebGL, the canvas, camera, lights, renderer, render loop as well as out of the box WebVR support on platforms such as HTC Vive, Oculus Rift, @@ -1181,7 +1181,7 @@

    <a-box>‘s documentation for +

    Here we define the color <a-box>, see <a-box>‘s documentation for the more attributes (e.g., width, height, depth).

    boximage Image by Ruben Mueller from vrjump.de

    @@ -1189,13 +1189,13 @@

    <a-entity> with the geometry and -material components:

    +underneath <a-box> is <a-entity> with the geometry and +material components:

    <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>
    -

    However, because the default camera and the box are positioned at the default +

    However, because the default camera and the box are positioned at the default position at the 0 0 0 origin, we won’t be able to see the box unless we move -it. We can do this by using the position component to transform the +it. We can do this by using the position component to transform the box in 3D space.

    Transforming an Entity in 3D

    Let’s first go over 3D space. A-Frame uses a right-handed coordinate system. With the default camera direction: positive X-axis extends right, positive @@ -1214,7 +1214,7 @@

    To translate, rotate, and scale the box, we can change the -position, rotation, and scale components. +position, rotation, and scale components. Let’s first apply the rotation and scale components:

    <a-scene>
      <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
    @@ -1271,7 +1271,7 @@ 

    <a-scene>
      <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <!-- Out of the box environment! -->
      <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
    </a-scene>

    Applying an Image Texture

    -

    Make sure you’re serving your HTML using a local server +

    Make sure you’re serving your HTML using a local server for textures to load properly.

    We can apply an image texture to the box with an image, video, or <canvas> @@ -1283,7 +1283,7 @@

    -

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The +

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The asset management system makes it easier for the browser to cache assets (e.g., images, videos, models) and A-Frame will make sure all of the assets are fetched before rendering.

    @@ -1303,7 +1303,7 @@

    Creating a Custom Environment (Optional)

    Previously we had the environment component generate the environment. Though it’s good to know a bit on creating a basic environment for learning purposes.

    -

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. +

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. <a-sky>, which is a material applied to the inside of a large sphere, can be a flat color, a 360° image, or a 360° video. For example, a dark gray background would be:

    @@ -1313,7 +1313,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>
    </a-scene>
    -

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are +

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are oriented parallel to the XY axis. To make it parallel to the ground, we need to orient it along the XZ axis. We can do so by rotating the plane negative 90° on the X-axis.

    @@ -1331,7 +1331,7 @@ 

    <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
      repeat="10 10"></a-plane>
    -

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default +

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default if we don’t specify any lights, A-Frame adds an ambient light and a directional light. If A-Frame didn’t add lights for us, the scene would be black. Once we add lights of our own, however, the default lighting setup is removed and @@ -1344,7 +1344,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>

      <a-light type="ambient" color="#445451"></a-light>
      <a-light type="point" intensity="2" position="2 4 4"></a-light>
    </a-scene>
    -

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation +

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation system. Animations interpolate or tween a value over time. We can set the animation component on the entity. Let’s have the box hover up and down to add some motion to the scene.

    @@ -1352,7 +1352,7 @@

    entity’s object3D’s position’s Y axis. +
  • Animate the entity’s object3D’s position’s Y axis.
  • Animate to 2.2 which is 20 centimeters higher.
  • Alternate the dir (direction) of the animation on each repeated cycle of the animation so it goes back and forth.
  • Last for 2000 millisecond dur (duration) on each cycle.
    • @@ -1363,19 +1363,19 @@

    Given that many developers currently do not have proper VR hardware with controllers, we’ll focus this section on using basic mobile and desktop inputs -with the built-in cursor component. The cursor component by default provides +with the built-in cursor component. The cursor component by default provides the ability to “click” on entities by staring or gazing at them on mobile, or on desktop, looking at an entity and click the mouse. But know that the cursor component is just one way to add interactions, things open up if we have access to actual controllers.

    -

    To have a visible cursor fixed to the camera, we place the cursor as a child +

    To have a visible cursor fixed to the camera, we place the cursor as a child of the camera as explained above in Parent and Child Transforms.

    Since we didn’t specifically define a camera, A-Frame included a default camera for us. But since we need to add a cursor as a child of the camera, we will -need to now define <a-camera> containing <a-cursor>:

    +need to now define <a-camera> containing <a-cursor>:

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"
             animation="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true"></a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
    -

    If we check the documentation of the cursor component that +

    If we check the documentation of the cursor component that <a-cursor> wraps, we see that it emits hover events such as mouseenter, mouseleave as well as click.

    Event Listener Component (Intermediate)

    One way to manually handle the cursor events is to add an event listener with @@ -1383,7 +1383,7 @@

    Animating on Events below.

    In JavaScript, we grab the box with querySelector, use -addEventListener, and then setAttribute +addEventListener, and then setAttribute to make the box grow its scale when its hovered over. Note that A-Frame adds features to setAttribute to work with multi-property components. We can pass a full {x, y, z} object as the second argument.

    @@ -1420,7 +1420,7 @@ 

    <a-scene>
      <!-- ... -->
      <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
        position="-3 1 -4"></a-sound>
      <!-- ... -->
    </a-scene>
    -

    Adding Text

    A-Frame comes with a text component. There are several ways to render +

    Adding Text

    A-Frame comes with a text component. There are several ways to render text, each with their own advantages and disadvantages. A-Frame comes with an SDF text implementation using three-bmfont-text that is relatively sharp and performant:

    diff --git a/docs/1.1.0/guides/building-a-minecraft-demo.html b/docs/1.1.0/guides/building-a-minecraft-demo.html index 1680eace7..76ddb6e1b 100644 --- a/docs/1.1.0/guides/building-a-minecraft-demo.html +++ b/docs/1.1.0/guides/building-a-minecraft-demo.html @@ -1154,7 +1154,7 @@

    Let’s build a basic Minecraft (voxel builder) demo that targets room scale VR with controllers (e.g., Vive, Rift). The example will be minimally usable on mobile and desktop.

    -
    +

    Example Skeleton

    We’ll start off with this skeleton HTML:

    <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>

    <body>
      <a-scene>
      </a-scene>
    </body>
    diff --git a/docs/1.1.0/introduction/best-practices.html b/docs/1.1.0/introduction/best-practices.html index f8a4114e9..f48009b06 100644 --- a/docs/1.1.0/introduction/best-practices.html +++ b/docs/1.1.0/introduction/best-practices.html @@ -1148,7 +1148,7 @@

    -

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and +

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and structure application code within purely A-Frame components for reusability, modularity, composability, decoupling, encapsulation, declarativeness, and testability.

    @@ -1161,14 +1161,14 @@

    A-Fra

    Do this:

    <script>
      AFRAME.registerComponent('code-that-does-this', {
        init: function () {
          // Code here.
          console.log(this.el);
        }
      });

      AFRAME.registerComponent('code-to-attach-to-box', {
        init: function () {
          // Code here.
          console.log(this.el);
        }
      });
    </script>

    <a-scene code-that-does-this>
      <a-box code-to-attach-to-box></a-box>
      <!-- ... -->
    </a-scene>
    -

    Performance

    pool +

    Performance

    pool [geometrymerger]: https://www.npmjs.com/package/aframe-geometry-merger-component

    Performance is critical in VR. A high framerate must be maintained in order for people to feel comfortable. Here are some ways to help improve performance of an A-Frame scene:

      -
    • Use recommended hardware specifications.
      • -
    • Use the stats component to keep an eye on various metrics (FPS, +
    • Use recommended hardware specifications.
      • +
    • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities). We want to maximize FPS and minimize everything else.
    • Limit draw calls as much as possible. Each geometry, object, model without @@ -1178,7 +1178,7 @@

      asset management system to browser cache and +
    • Make use of the asset management system to browser cache and preload assets.
    • If using models, look to bake your lights into textures rather than relying on real-time lighting and shadows.
      • @@ -1195,16 +1195,16 @@

      background component instead of a-sky to define a +
    • Use the background component instead of a-sky to define a solid color as the scene background. This prevents the creation of unnecessary geometry.
    • Update position, rotation, scale, and visible using at the three.js level (el.object3D.position, el.object3D.rotation, el.object3D.scale, el.object3D.visible) to avoid overhead on .setAttribute.
    • If you need to create, remove and re-create many entities of the same type, -use the pool component to pre-generate and reuse entities. This +use the pool component to pre-generate and reuse entities. This avoids the cost of creating entities on the fly and reduces garbage collection.
      • -
    • When using the animation component, animate values directly +
    • When using the animation component, animate values directly which will skip .setAttribute and animate JS values directly. For example, instead of material.opacity, animate components.material.material.opacity.
      • diff --git a/docs/1.1.0/introduction/developing-with-threejs.html b/docs/1.1.0/introduction/developing-with-threejs.html index 18acd6ac6..4c4a15e81 100644 --- a/docs/1.1.0/introduction/developing-with-threejs.html +++ b/docs/1.1.0/introduction/developing-with-threejs.html @@ -1178,7 +1178,7 @@

      And every A-Frame entity also has a reference to <a-scene> via .sceneEl:

      document.querySelector('a-entity').sceneEl.object3D;  // THREE.Scene
      -

      From a component, we access the scene through its entity +

      From a component, we access the scene through its entity (i.e., this.el):

      AFRAME.registerComponent('foo', {
        init: function () {
          var scene = this.el.sceneEl.object3D;  // THREE.Scene
        }
      });
      diff --git a/docs/1.1.0/introduction/entity-component-system.html b/docs/1.1.0/introduction/entity-component-system.html index 026507f0b..3254b615a 100644 --- a/docs/1.1.0/introduction/entity-component-system.html +++ b/docs/1.1.0/introduction/entity-component-system.html @@ -1177,20 +1177,20 @@

      A well-known game engine implementing ECS is Unity. Although there are pain points in cross-entity communication, we’ll see how A-Frame, the DOM, and declarative HTML really make ECS shine.

      -
      +

      Concept

      ECS Minecraft

      A basic definition of ECS involves:

      We’ll go over GUI tools built on top of A-Frame that can be used without code. And touch on other tools that can ease development across multiple machines.

      -
      +

      A-Frame Inspector

      The A-Frame Inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:

      diff --git a/docs/1.1.0/introduction/vr-headsets-and-webvr-browsers.html b/docs/1.1.0/introduction/vr-headsets-and-webvr-browsers.html index 144422da7..a3334470a 100644 --- a/docs/1.1.0/introduction/vr-headsets-and-webvr-browsers.html +++ b/docs/1.1.0/introduction/vr-headsets-and-webvr-browsers.html @@ -1148,7 +1148,7 @@

      -
      +

      What is Virtual Reality?

      Virtual reality (VR) is a technology that uses head-mounted headsets with displays to generate the realistic images, sounds, and other sensations to put diff --git a/docs/1.1.0/introduction/writing-a-component.html b/docs/1.1.0/introduction/writing-a-component.html index dda6edef4..d7693fb31 100644 --- a/docs/1.1.0/introduction/writing-a-component.html +++ b/docs/1.1.0/introduction/writing-a-component.html @@ -1148,7 +1148,7 @@

      -

      Components of A-Frame’s entity-component framework are JavaScript +

      Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, @@ -1156,7 +1156,7 @@

      components.

      vehicleimage Image by Ruben Mueller from vrjump.de

      -

      This guide will take it pretty slow. We recommend skimming over the Component +

      This guide will take it pretty slow. We recommend skimming over the Component API documentation before going through this guide as that documentation will be more concise. Note that components should be defined before <a-scene> like:

      @@ -1170,12 +1170,12 @@

      Example: hello-world Component

      Let’s start with the most basic component to get a general idea. This component will log a simple message once when the component’s entity is attached using -the .init() handler.

      +the .init() handler.

      Registering the Component with AFRAME.registerComponent

      Components are registered with AFRAME.registerComponent(). We pass the name of the component, which will be used as the HTML attribute name in the component’s representation in the DOM. Then we pass the component definition which is a JavaScript object of methods and properties. Within the definition, we can -define lifecycle handler methods. One of which is .init(), which +define lifecycle handler methods. One of which is .init(), which is called once when the component is first plugged into its entity.

      In the example below, we just have our .init() handler log a simple message.

      AFRAME.registerComponent('hello-world', {
        init: function () {
          console.log('Hello, World!');
        }
      });
      @@ -1229,7 +1229,7 @@

      Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

      To demonstrate this, we’ll have our log component only log whenever its -entity emits an event. First, we’ll add an event property type that +entity emits an event. First, we’ll add an event property type that specifies which event the component should listen on.

      // ...
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'},
      },
      // ...
      @@ -1238,7 +1238,7 @@

      add an event listener that will +

      What we want to do is add an event listener that will listen to the event before logging a message. If the event property type is not specified, we’ll just log the message:

      AFRAME.registerComponent('log', {
        schema: {
          event: {type: 'string', default: ''},
          message: {type: 'string', default: 'Hello, World!'}
        },

        update: function () {
          var data = this.data;  // Component property values.
          var el = this.el;  // Reference to the component's entity.

          if (data.event) {
            // This will log the `message` when the entity emits the `event`.
            el.addEventListener(data.event, function () {
              console.log(data.message);
            });
          } else {
            // `event` not specified, just log the message.
            console.log(data.message);
          }
        }
      });
      @@ -1247,7 +1247,7 @@

      , we need a reference to the function. So +

      But to remove an event listener, we need a reference to the function. So let’s first store the function on this.eventHandlerFn whenever we attach an event listener. When we attach properties to the component via this, they’ll be available throughout all the other lifecycle handlers.

      @@ -1262,13 +1262,13 @@ 

      <a-scene>
        <a-entity log="event: anEvent; message: Hello, Metaverse!"></a-entity>
      </a-scene>
      -

      Let’s have our entity emit the event to test it out:

      +

      Let’s have our entity emit the event to test it out:

      var el = document.querySelector('a-entity');
      el.emit('anEvent');
      // >> "Hello, Metaverse!"

      Now let’s update our event to test the .update() handler:

      var el = document.querySelector('a-entity');
      el.setAttribute('log', {event: 'anotherEvent', message: 'Hello, new event!'});
      el.emit('anotherEvent');
      // >> "Hello, new event!"
      -

      Handling Component Removal

      Let’s handle the case where the component unplugs from the entity +

      Handling Component Removal

      Let’s handle the case where the component unplugs from the entity (i.e., .removeAttribute('log')). We can implement the .remove() handler which is called when the component is removed. For the log component, we remove any event listeners the component attached to the entity:

      @@ -1281,7 +1281,7 @@ 

      var el = document.querySelector('a-entity');
      el.removeAttribute('log');
      el.emit('anEvent');
      // >> Nothing should be logged...

      Allowing Multiple Instances of a Component

      Let’s allow having multiple log components attached to the same entity. To do -so, we enable multiple instancing with the .multiple flag. Let’s +so, we enable multiple instancing with the .multiple flag. Let’s set that to true:

      AFRAME.registerComponent('log', {
        schema: {
          event: {type: 'string', default: ''},
          message: {type: 'string', default: 'Hello, World!'}
        },

        multiple: true,

        // ...
      });
      @@ -1298,13 +1298,13 @@

      Example: box Component

      For a less trivial example, let’s find out how we can add 3D objects and affect -the scene graph by writing a component that uses three.js. To get +the scene graph by writing a component that uses three.js. To get the idea, we’ll just make a basic box component that creates a box mesh with both geometry and material.

      boximage Image by Ruben Mueller from vrjump.de

      Note: this is just a 3D equivalent of writing a Hello, World! component. -A-Frame provides geometry and material components if we +A-Frame provides geometry and material components if we actually wanted to make a box in practice.

      Schema and API

      Let’s start with the schema. The schema defines the API of your component. We’ll make the width, height, depth, and color configurable through the @@ -1321,7 +1321,7 @@

      THREE.BoxBufferGeometry, THREE.MeshStandardMaterial, and finally a THREE.Mesh. Then we set the mesh on our entity to add the mesh to the -three.js scene graph using .setObject3D(name, object):

      +three.js scene graph using .setObject3D(name, object):

      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.BoxBufferGeometry(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);
        }
      });

      Now let’s handle updates. If the geometry-related properties (i.e., width, diff --git a/docs/1.1.0/primitives/a-circle.html b/docs/1.1.0/primitives/a-circle.html index 0337bb704..f7a84e054 100644 --- a/docs/1.1.0/primitives/a-circle.html +++ b/docs/1.1.0/primitives/a-circle.html @@ -1148,7 +1148,7 @@

      -

      The circle primitive creates circles surfaces using the geometry +

      The circle primitive creates circles surfaces using the geometry component with the type set to circle.

      Example

      <a-scene>
        <a-assets>
          <img id="platform" src="platform.jpg">
        </a-assets>

        <!-- Basic circle. -->
        <a-circle color="#CCC" radius="20"></a-circle>

        <!-- Textured circle parallel to ground. -->
        <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
      </a-scene>
      diff --git a/docs/1.1.0/primitives/a-cursor.html b/docs/1.1.0/primitives/a-cursor.html index f495a0370..64e7eaaac 100644 --- a/docs/1.1.0/primitives/a-cursor.html +++ b/docs/1.1.0/primitives/a-cursor.html @@ -1152,7 +1152,7 @@

      interactivity with a scene on devices that do not have a hand controller. The default appearance is a ring geometry. The cursor is usually placed as a child of the camera.

      -

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      +

      Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

      Example

      <a-scene>
        <a-camera>
          <a-cursor></a-cursor>
        </a-camera>

        <a-box></a-box>
      </a-scene>

      Attributes

      diff --git a/docs/1.1.0/primitives/a-gltf-model.html b/docs/1.1.0/primitives/a-gltf-model.html index 3a8f0a14e..0a51d2223 100644 --- a/docs/1.1.0/primitives/a-gltf-model.html +++ b/docs/1.1.0/primitives/a-gltf-model.html @@ -1162,7 +1162,7 @@

      - +
      srcgltf-model.srcgltf-model.src null
      diff --git a/docs/1.1.0/primitives/a-obj-model.html b/docs/1.1.0/primitives/a-obj-model.html index ded25d421..44ba60602 100644 --- a/docs/1.1.0/primitives/a-obj-model.html +++ b/docs/1.1.0/primitives/a-obj-model.html @@ -1150,7 +1150,7 @@

      We recommend glTF for distributing assets in production over the web. Check -out using the glTF model primitive. You can +out using the glTF model primitive. You can either instead export to COLLADA and use the converter or try out the OBJ converter.

      @@ -1177,7 +1177,7 @@

      null -

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      +

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      diff --git a/docs/1.1.0/primitives/a-plane.html b/docs/1.1.0/primitives/a-plane.html index 2dbb49850..6b620272f 100644 --- a/docs/1.1.0/primitives/a-plane.html +++ b/docs/1.1.0/primitives/a-plane.html @@ -1148,7 +1148,7 @@

      -

      The plane primitive creates flat surfaces using the geometry +

      The plane primitive creates flat surfaces using the geometry component with the type set to plane.

      Example

      <a-scene>
        <a-assets>
          <img id="ground" src="ground.jpg">
        </a-assets>

        <!-- Basic plane. -->
        <a-plane color="#CCC" height="20" width="20"></a-plane>

        <!-- Textured plane parallel to ground. -->
        <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
      </a-scene>
      diff --git a/docs/1.1.0/primitives/a-sound.html b/docs/1.1.0/primitives/a-sound.html index 96cfe63c2..97bd02d89 100644 --- a/docs/1.1.0/primitives/a-sound.html +++ b/docs/1.1.0/primitives/a-sound.html @@ -1148,7 +1148,7 @@

      -

      The sound primitive wraps the sound component.

      +

      The sound primitive wraps the sound component.

      Example

      <a-scene>
        <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
      </a-scene>

      Attributes

      diff --git a/docs/1.1.0/primitives/a-sphere.html b/docs/1.1.0/primitives/a-sphere.html index fb0e03a5d..15831ce1c 100644 --- a/docs/1.1.0/primitives/a-sphere.html +++ b/docs/1.1.0/primitives/a-sphere.html @@ -1148,7 +1148,7 @@

      -

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      +

      The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

      Example

      <a-sphere color="yellow" radius="5"></a-sphere>

      Attributes

      diff --git a/docs/1.1.0/primitives/a-text.html b/docs/1.1.0/primitives/a-text.html index 44b187707..d0185b437 100644 --- a/docs/1.1.0/primitives/a-text.html +++ b/docs/1.1.0/primitives/a-text.html @@ -1148,7 +1148,7 @@

      -

      Wraps the text component.

      +

      Wraps the text component.

      Example

      <a-text value="Hello, World!"></a-text>

      Attributes

      diff --git a/docs/1.1.0/primitives/a-torus-knot.html b/docs/1.1.0/primitives/a-torus-knot.html index dbcf29b42..f9646e7a7 100644 --- a/docs/1.1.0/primitives/a-torus-knot.html +++ b/docs/1.1.0/primitives/a-torus-knot.html @@ -1148,7 +1148,7 @@

      -

      The torus knot primitive creates pretzel shapes using the geometry +

      The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

      Example

      <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
      diff --git a/docs/1.1.0/primitives/a-torus.html b/docs/1.1.0/primitives/a-torus.html index db44f1fc7..ef5a21746 100644 --- a/docs/1.1.0/primitives/a-torus.html +++ b/docs/1.1.0/primitives/a-torus.html @@ -1148,7 +1148,7 @@

      -

      The torus primitive creates donut or tube shapes using the geometry +

      The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

      Example

      <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
      diff --git a/docs/1.1.0/primitives/a-triangle.html b/docs/1.1.0/primitives/a-triangle.html index 6c5060449..95fb080e8 100644 --- a/docs/1.1.0/primitives/a-triangle.html +++ b/docs/1.1.0/primitives/a-triangle.html @@ -1148,7 +1148,7 @@

      -

      The triangle primitive creates triangle surfaces using the geometry +

      The triangle primitive creates triangle surfaces using the geometry component with the type set to triangle.

      Example

      <a-scene>
        <a-assets>
          <img id="platform" src="https://i.imgur.com/mYmmbrp.jpg">
        </a-assets>

        <!-- Basic triangle. -->
        <a-triangle color="#CCC" vertex-c="1 -1 0"></a-triangle>

        <!-- Textured triangle parallel to ground. -->
        <a-triangle src="#platform" rotation="-90 0 0"></a-triangle>
      </a-scene>
      diff --git a/docs/1.1.0/primitives/a-videosphere.html b/docs/1.1.0/primitives/a-videosphere.html index 4b2bf186b..ebd01f744 100644 --- a/docs/1.1.0/primitives/a-videosphere.html +++ b/docs/1.1.0/primitives/a-videosphere.html @@ -1155,7 +1155,7 @@

      Ex

      Methods

      More indepth knowledge on the methods to alter video material can be seen over here

      // 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();
      -

      Attributes

      Note that the videosphere primitive inherits common attributes.

      +

      Attributes

      Note that the videosphere primitive inherits common attributes.

      diff --git a/docs/1.2.0/components/animation.html b/docs/1.2.0/components/animation.html index b7510b2bd..9ec443558 100644 --- a/docs/1.2.0/components/animation.html +++ b/docs/1.2.0/components/animation.html @@ -1167,7 +1167,7 @@

      Read more below for additional options and discovering how to properly animate different types of values.

      -
      +

      API

      Properties

      diff --git a/docs/1.2.0/components/cursor.html b/docs/1.2.0/components/cursor.html index de93f9424..b02b83639 100644 --- a/docs/1.2.0/components/cursor.html +++ b/docs/1.2.0/components/cursor.html @@ -1149,11 +1149,11 @@

      The cursor component provides hover and click states for interaction on top of -the raycaster component. The cursor component can be used for +the raycaster component. The cursor component can be used for both gaze-based and controller-based interactions, but the appearance needs -to be configured depending on the use case. The <a-cursor> +to be configured depending on the use case. The <a-cursor> primitive provides a default reticle appearance for a gaze-based -cursor, and the laser-controls component configures the +cursor, and the laser-controls component configures the cursor for all controllers.

      The cursor component listens to events and keeps state on what’s being hovered and pressed in order to provide mousedown, mouseup, mouseenter, @@ -1164,15 +1164,15 @@

      By default, the cursor is configured to be used in a gaze-based mode and will register user input via mouse or touch. Specifying the downEvents and upEvents properties allows the cursor to work with controllers. For example, -the laser-controls component automatically configures these +the laser-controls component automatically configures these properties to work with most controllers.

      To provide a shape or appearance to the cursor, we should apply either the -geometry and material components or use the raycaster -component’s showLine property to draw a line using the line +geometry and material components or use the raycaster +component’s showLine property to draw a line using the line component.

      Example

      For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no -matter where we look, we place it as a child of the active camera +matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

      <a-entity camera look-controls>
        <a-entity cursor="fuse: true; fuseTimeout: 500"
                  position="0 0 -1"
                  geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                  material="color: black; shader: flat">
        </a-entity>
      </a-entity>

      <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
      @@ -1219,7 +1219,7 @@

      To further customize the cursor component, we configure the cursor’s dependency -component, the raycaster component.

      +component, the raycaster component.

      Events

      @@ -1289,7 +1289,7 @@

      States

      Configuring the Cursor through the Raycaster Component

      The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

      <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>
      @@ -1304,7 +1304,7 @@

      Adding Visual Feedback

      To add visual feedback to the cursor to show when the cursor is clicking or -fusing, we can use the animation component. When the cursor +fusing, we can use the animation component. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

      <a-entity
        animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
        animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
        animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
        cursor="fuse: true;"
        material="color: black; shader: flat"
        position="0 0 -3"
        geometry="primitive: ring"></a-entity>
      diff --git a/docs/1.2.0/components/daydream-controls.html b/docs/1.2.0/components/daydream-controls.html index 32ebf78ce..f8670fa32 100644 --- a/docs/1.2.0/components/daydream-controls.html +++ b/docs/1.2.0/components/daydream-controls.html @@ -1149,7 +1149,7 @@

      The daydream-controls component interfaces with the Google Daydream controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Daydream controller model that highlights the touched and/or pressed buttons (trackpad).

      As a first time set up, to use the Daydream controller on Chrome for Android diff --git a/docs/1.2.0/components/debug.html b/docs/1.2.0/components/debug.html index 79d65a44b..f14fd9f05 100644 --- a/docs/1.2.0/components/debug.html +++ b/docs/1.2.0/components/debug.html @@ -1165,8 +1165,8 @@ 

      <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

      Make sure that this component is not active in production.

      -

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM:

      +

      Manually Serializing to DOM

      To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM:

      document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
      document.querySelector('a-entity').flushToDOM();  // Flush an entity.
      document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
      document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.
      diff --git a/docs/1.2.0/components/device-orientation-permission-ui.html b/docs/1.2.0/components/device-orientation-permission-ui.html index 2ff17ccae..8c8318202 100644 --- a/docs/1.2.0/components/device-orientation-permission-ui.html +++ b/docs/1.2.0/components/device-orientation-permission-ui.html @@ -1149,7 +1149,7 @@

      Starting with Safari on iOS 13 browsers require sites to be served over https and request user permission to access DeviceOrientation events. This component presents a permission dialog for the user to grant or deny access. -The device-orientation-permission-ui component applies only to the <a-scene> element

      +The device-orientation-permission-ui component applies only to the <a-scene> element

      To configure the style of the dialog one can redefine the associated css styles. To change the colors of the allow, deny and ok buttons:

      .a-dialog-allow-button {
        background-color: red;
      }

      .a-dialog-deny-button {
        background-color: blue;
      }

      .a-dialog-ok-button {
         background-color: green;
       }
      diff --git a/docs/1.2.0/components/fog.html b/docs/1.2.0/components/fog.html index bfdbe516b..e8cd8f602 100644 --- a/docs/1.2.0/components/fog.html +++ b/docs/1.2.0/components/fog.html @@ -1149,7 +1149,7 @@

      The fog component obscures entities in fog given distance from the camera. The -fog component applies only to the <a-scene> element.

      +fog component applies only to the <a-scene> element.

      Example

      <a-scene fog="type: linear; color: #AAA"></a-scene>

      Properties

      Given the fog distribution type, different properties will apply.

      diff --git a/docs/1.2.0/components/gearvr-controls.html b/docs/1.2.0/components/gearvr-controls.html index bcf035f82..04a2485e5 100644 --- a/docs/1.2.0/components/gearvr-controls.html +++ b/docs/1.2.0/components/gearvr-controls.html @@ -1149,7 +1149,7 @@

      The gearvr-controls component interfaces with the Samsung/Oculus Gear VR controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Gear VR controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

      Example

      <!-- Match Gear VR controller if present, regardless of hand. -->
      <a-entity gearvr-controls></a-entity>

      <!-- Match Gear VR controller if present and for specified hand. -->
      <a-entity gearvr-controls="hand: left"></a-entity>
      <a-entity gearvr-controls="hand: right"></a-entity>
      diff --git a/docs/1.2.0/components/geometry.html b/docs/1.2.0/components/geometry.html index 81c7ceb82..5d5e39186 100644 --- a/docs/1.2.0/components/geometry.html +++ b/docs/1.2.0/components/geometry.html @@ -1152,7 +1152,7 @@

      property defines the general shape. Geometric primitives, in computer graphics, are irreducible basic shapes. A material component is commonly defined to provide a appearance alongside the shape to create a complete mesh.

      -
      +

      Base Properties

      Every geometry type will have these properties:

      @@ -1670,7 +1670,7 @@ 

      AFRAME.registerGeometry('box', {
        schema: {
          depth: {default: 1, min: 0},
          height: {default: 1, min: 0},
          width: {default: 1, min: 0},
          segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
          segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
        },

        init: function (data) {
          this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
        }
      });

      Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then we need to create the geometry and set on this.geometry through the init lifecycle method.

      When a geometry component sets its primitive property to the custom geometry diff --git a/docs/1.2.0/components/gltf-model.html b/docs/1.2.0/components/gltf-model.html index 33faaec7d..fbc0db320 100644 --- a/docs/1.2.0/components/gltf-model.html +++ b/docs/1.2.0/components/gltf-model.html @@ -1160,9 +1160,9 @@

      NOTE: A-Frame supports glTF 2.0. For models using older versions of the glTF format, use gltf-model-legacy from donmccurdy/aframe-extras.

      -
      + -

      Why use glTF?

      In comparison to the older OBJ format, which supports only +

      Why use glTF?

      In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features. In addition to all of the above, glTF offers:

        diff --git a/docs/1.2.0/components/hand-controls.html b/docs/1.2.0/components/hand-controls.html index daf92297c..9405282ed 100644 --- a/docs/1.2.0/components/hand-controls.html +++ b/docs/1.2.0/components/hand-controls.html @@ -1149,8 +1149,8 @@

        The hand-controls component provides tracked hands (using a prescribed model) -with animated gestures. hand-controls wraps the vive-controls and -oculus-touch-controls which in turn wrap the tracked-controls +with animated gestures. hand-controls wraps the vive-controls and +oculus-touch-controls which in turn wrap the tracked-controls component. By specifying just hand-controls, we have something that works well with both Vive and Rift. The component gives extra events and handles hand animations and poses.

        diff --git a/docs/1.2.0/components/keyboard-shortcuts.html b/docs/1.2.0/components/keyboard-shortcuts.html index f6fe79057..f49aed183 100644 --- a/docs/1.2.0/components/keyboard-shortcuts.html +++ b/docs/1.2.0/components/keyboard-shortcuts.html @@ -1149,7 +1149,7 @@

        The keyboard-shortcuts component toggles global keyboard shortcuts. The -keyboard-shortcuts component applies only to the <a-scene> element.

        +keyboard-shortcuts component applies only to the <a-scene> element.

        Example

        <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

        Properties

        diff --git a/docs/1.2.0/components/laser-controls.html b/docs/1.2.0/components/laser-controls.html index d9c74affb..2a39bc865 100644 --- a/docs/1.2.0/components/laser-controls.html +++ b/docs/1.2.0/components/laser-controls.html @@ -1161,17 +1161,17 @@

        configures other components, rather than implementing any logic itself. Under the hood, laser-controls sets all of the tracked controller components:

        These controller components get activated if its respective controller is connected and detected via the Gamepad API. Then the model of the actual -controller is used. laser-controls then configures the cursor +controller is used. laser-controls then configures the cursor component for listen to the appropriate events and configures the -raycaster component to draw the laser.

        +raycaster component to draw the laser.

        When the laser intersects with an entity, the length of the line gets truncated to the distance to the intersection point.

        Example

        <a-entity laser-controls="hand: left"></a-entity>
        @@ -1196,11 +1196,11 @@

        Color for the default controller model. -

        Customizing the Raycaster

        Configure the raycaster properties.

        +

        Customizing the Raycaster

        Configure the raycaster properties.

        For example:

        <a-entity laser-controls raycaster="objects: .links; far: 5"></a-entity>
        -

        Customizing the Line

        See Raycaster: Customizing the Line.

        +

        Customizing the Line

        See Raycaster: Customizing the Line.

        For example:

        <a-entity laser-controls raycaster="lineColor: red; lineOpacity: 0.5"></a-entity>
        diff --git a/docs/1.2.0/components/light.html b/docs/1.2.0/components/light.html index 6fc3660e1..40416795e 100644 --- a/docs/1.2.0/components/light.html +++ b/docs/1.2.0/components/light.html @@ -1163,7 +1163,7 @@

        To manually disable the defaults, without adding other lights:

        <a-scene light="defaultLightsEnabled: false">
          <!-- ... -->
        </a-scene>
        -
        +

        Properties

        All light types support a few basic properties:

        @@ -1305,7 +1305,7 @@

        Spot

        Sp

        Configuring Shadows

        A-Frame includes support for realtime shadow rendering. With proper configuration, objects (both moving or stationary) will cast shadows adding depth and realism to a scene. Since shadows come with many properties, it -is very helpful to use the A-Frame Inspector to configure shadows

        +is very helpful to use the A-Frame Inspector to configure shadows

        Light types that support shadows (point, spot, and directional) include additional properties:

        diff --git a/docs/1.2.0/components/line.html b/docs/1.2.0/components/line.html index 5387c5a28..90a2493a8 100644 --- a/docs/1.2.0/components/line.html +++ b/docs/1.2.0/components/line.html @@ -1150,8 +1150,8 @@

        The line component draws a line given a start coordinate and end coordinate using THREE.Line.

        -

        The raycaster component uses the line component for its showLine -property, which is then used by the laser-controls component.

        +

        The raycaster component uses the line component for its showLine +property, which is then used by the laser-controls component.

        Example

        <a-entity line="start: 0 1 0; end: 2 0 -5; color: red"
                  line__2="start: -2 4 5; end: 0 4 -3; color: green"></a-entity>

        Note an entity can have multiple lines. The line mesh is set as line or diff --git a/docs/1.2.0/components/look-controls.html b/docs/1.2.0/components/look-controls.html index 559ca60bf..ca9342bb7 100644 --- a/docs/1.2.0/components/look-controls.html +++ b/docs/1.2.0/components/look-controls.html @@ -1154,7 +1154,7 @@

      • Rotates the entity when we move the mouse.
      • Rotates the entity when we touch-drag the touchscreen.

      -

      Example

      The look-controls component is usually used alongside the camera +

      Example

      The look-controls component is usually used alongside the camera component.

      <a-entity camera look-controls position="0 1.6 0"></a-entity>
      diff --git a/docs/1.2.0/components/magicleap-controls.html b/docs/1.2.0/components/magicleap-controls.html index f56286ec3..335200648 100644 --- a/docs/1.2.0/components/magicleap-controls.html +++ b/docs/1.2.0/components/magicleap-controls.html @@ -1149,7 +1149,7 @@

      The magicleap-controls component interfaces with the Magic Leap controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and Magic Leap controller model/

      Example

      <!-- Match Magic Leap controller if present, regardless of hand. -->
      <a-entity magicleap-controls></a-entity>

      <!-- Match Magic Leap controller if present and for specified hand. -->
      <a-entity magicleap-controls="hand: left"></a-entity>
      <a-entity magicleap-controls="hand: right"></a-entity>
      diff --git a/docs/1.2.0/components/material.html b/docs/1.2.0/components/material.html index 00050c961..3f59f895a 100644 --- a/docs/1.2.0/components/material.html +++ b/docs/1.2.0/components/material.html @@ -1149,11 +1149,11 @@

      The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

      We can register custom materials to extend the material component to provide a wide range of visual effects.

      -
      +

      Example

      Defining a red material using the default standard material:

      <a-entity geometry="primitive: box" material="color: red"></a-entity>
      @@ -1349,7 +1349,7 @@

      fog. +Whether or not material is affected by fog. true @@ -1466,7 +1466,7 @@

      fog. +Whether or not material is affected by fog. true @@ -1502,7 +1502,7 @@

      Textures

      To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

      +asset management system:

      <a-scene>
        <a-assets>
          <img id="my-texture" src="texture.png">
        </a-assets>

        <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
      </a-scene>

      src can also be an inline URL. Note that we do not get browser caching or diff --git a/docs/1.2.0/components/obj-model.html b/docs/1.2.0/components/obj-model.html index 572aad1a1..2130ef408 100644 --- a/docs/1.2.0/components/obj-model.html +++ b/docs/1.2.0/components/obj-model.html @@ -1166,7 +1166,7 @@

      mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

      Events

      @@ -1184,7 +1184,7 @@

      EventsLoading Inline

      We can also load assets by specifying the path directly within url(). Note this is less performant than going through the asset management system.

      <a-entity obj-model="obj: url(/path/to/tree.obj); mtl: url(/path/to/tree.mtl)"></a-entity>
      -

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      +

      Troubleshooting

      See Introduction → 3D Models → Troubleshooting.

      Additional Resources

      We can find and download models on the web to drop into our scenes:

      • Sketchup’s 3D Warehouse - Repository of models.
        • diff --git a/docs/1.2.0/components/oculus-go-controls.html b/docs/1.2.0/components/oculus-go-controls.html index 8e7e34995..38c996bba 100644 --- a/docs/1.2.0/components/oculus-go-controls.html +++ b/docs/1.2.0/components/oculus-go-controls.html @@ -1149,7 +1149,7 @@

        The oculus-go-controls component interfaces with the Oculus Go controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Oculus Go controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

        Example

        <!-- Match Oculus Go controller if present, regardless of hand. -->
        <a-entity oculus-go-controls></a-entity>

        <!-- Match Oculus Go controller if present and for specified hand. -->
        <a-entity oculus-go-controls="hand: left"></a-entity>
        <a-entity oculus-go-controls="hand: right"></a-entity>
        diff --git a/docs/1.2.0/components/oculus-touch-controls.html b/docs/1.2.0/components/oculus-touch-controls.html index d5f832685..8dac8247d 100644 --- a/docs/1.2.0/components/oculus-touch-controls.html +++ b/docs/1.2.0/components/oculus-touch-controls.html @@ -1149,7 +1149,7 @@

        The oculus-touch-controls component interfaces with the Oculus Touch controllers (Rift, Rift S, Oculus Quest 1 and 2). It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.

        Example

        <a-entity oculus-touch-controls="hand: left"></a-entity>
        <a-entity oculus-touch-controls="hand: right"></a-entity>
        diff --git a/docs/1.2.0/components/position.html b/docs/1.2.0/components/position.html index 86ac6a851..f6120ea3f 100644 --- a/docs/1.2.0/components/position.html +++ b/docs/1.2.0/components/position.html @@ -1187,7 +1187,7 @@

        #child2‘s position would be 2 3 4.

        Updating Position

        For performance and ergonomics, we recommend updating position directly via the -three.js Object3D .position Vector3 versus via +three.js Object3D .position Vector3 versus via .setAttribute.

        This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1201,11 +1201,11 @@

        Getting Position

        To reflect updates done at the three.js level, A-Frame returns the actual Object3D.position vector object when doing .getAttribute('position'). Note modifying the return value will modify the entity itself.

        -

        See also reading position and rotation of the camera.

        +

        See also reading position and rotation of the camera.

        Order of Transformations

        Transformations are applied to entities in this order:

        diff --git a/docs/1.2.0/components/raycaster.html b/docs/1.2.0/components/raycaster.html index 817c2e3fc..52ae3828e 100644 --- a/docs/1.2.0/components/raycaster.html +++ b/docs/1.2.0/components/raycaster.html @@ -1160,7 +1160,7 @@

        is explicitly defined via the objects selector property described below. Raycasting is an expensive operation, and we should raycast against only targets that need to be interactable at any given time.

        -

        The cursor component and laser-controls components +

        The cursor component and laser-controls components both build on top of the raycaster component.

        Example

        <a-entity id="player" collider-check>
          <a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
        </a-entity>
        <a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
        @@ -1228,7 +1228,7 @@

        showLine -Whether or not to display the raycaster visually with the line component. +Whether or not to display the raycaster visually with the line component. false diff --git a/docs/1.2.0/components/rotation.html b/docs/1.2.0/components/rotation.html index 8e41dc920..c4b4ffd1d 100644 --- a/docs/1.2.0/components/rotation.html +++ b/docs/1.2.0/components/rotation.html @@ -1192,7 +1192,7 @@

        15 45 30.

        Updating Rotation

        For performance and ergonomics, we recommend updating rotation directly via the three.js Object3D .rotation Euler (in radians) versus -via .setAttribute.

        +via .setAttribute.

        This method is easier because we have access to all the Euler utilities, and faster by skipping .setAttribute overhead and not needing to create an object to set rotation:

        @@ -1202,12 +1202,12 @@

        reading position and rotation of the camera.

        +

        See also reading position and rotation of the camera.

        Order of Transformations

        Transformations are applied to entities in this order:

        diff --git a/docs/1.2.0/components/scale.html b/docs/1.2.0/components/scale.html index f913ff971..3d0067b0d 100644 --- a/docs/1.2.0/components/scale.html +++ b/docs/1.2.0/components/scale.html @@ -1191,7 +1191,7 @@

        Relative Scale

        Similar to the rotation and position components, scales are applied in the local coordinate system and multiply in nested entities.

        Updating Scale

        For performance and ergonomics, we recommend updating scale directly via the -three.js Object3D .scale Vector3 versus via +three.js Object3D .scale Vector3 versus via .setAttribute.

        This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1207,8 +1207,8 @@

        Order of Transformations

        Transformations are applied to entities in this order:

        diff --git a/docs/1.2.0/components/shadow.html b/docs/1.2.0/components/shadow.html index 39bf56259..b1fe8ade2 100644 --- a/docs/1.2.0/components/shadow.html +++ b/docs/1.2.0/components/shadow.html @@ -1158,7 +1158,7 @@

        Examp

        IMPORTANT: Adding the shadow component alone is not enough to display shadows in your scene. We must have at least one light with castShadow: true enabled. Additionally, the light’s shadow camera (used for depth -projection) usually must be configured correctly. Refer to the light +projection) usually must be configured correctly. Refer to the light component for more information.

        Properties

        diff --git a/docs/1.2.0/components/sound.html b/docs/1.2.0/components/sound.html index 5af3de99d..78f892af8 100644 --- a/docs/1.2.0/components/sound.html +++ b/docs/1.2.0/components/sound.html @@ -1150,7 +1150,7 @@

        The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the -components-position.

        +components-position.

        NOTE: Playing sound on iOS — in any browser — requires a physical user interaction. This is a browser limitation, and internal A-Frame events (like fusing cursors) do diff --git a/docs/1.2.0/components/stats.html b/docs/1.2.0/components/stats.html index eeeaf3c16..da0fab0f4 100644 --- a/docs/1.2.0/components/stats.html +++ b/docs/1.2.0/components/stats.html @@ -1149,7 +1149,7 @@

        The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

        +component applies only to the <a-scene> element.

        Example

        <a-scene stats></a-scene>

        Metrics

          diff --git a/docs/1.2.0/components/text.html b/docs/1.2.0/components/text.html index 1eddb74e6..bc96dc824 100644 --- a/docs/1.2.0/components/text.html +++ b/docs/1.2.0/components/text.html @@ -1150,7 +1150,7 @@

          The text component renders signed distance field (SDF) font text.

          Example Image

          -
          +

          Introduction

          Note that rendering text in 3D is hard. In 2D web development, text is the most basic thing because the browser’s renderer and layout engine handle @@ -1398,8 +1398,8 @@

          SizingChange the width.
        • Change the wrapCount (roughly how many characters to fit inside the given width).
        • Change wrapPixels.
          • -
        • Change the scale component.
          • -
        • Position the text closer or farther away.
          • +
        • Change the scale component.
          • +
        • Position the text closer or farther away.

        Sizing

        Text can be wrapped by specifying width in A-Frame units.

        diff --git a/docs/1.2.0/components/tracked-controls.html b/docs/1.2.0/components/tracked-controls.html index f922dac61..bab1d31b3 100644 --- a/docs/1.2.0/components/tracked-controls.html +++ b/docs/1.2.0/components/tracked-controls.html @@ -1150,12 +1150,12 @@

        The tracked-controls component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is -abstracted by the hand-controls component as well as the -vive-controls, oculus-touch-controls, -windows-motion-controls, and daydream-controls +abstracted by the hand-controls component as well as the +vive-controls, oculus-touch-controls, +windows-motion-controls, and daydream-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events. For non-6DOF controllers -such as daydream-controls, a primitive arm model is used to emulate +such as daydream-controls, a primitive arm model is used to emulate positional data.

        tracked-controls sets two components that handles different Web API versions for VR:

          diff --git a/docs/1.2.0/components/visible.html b/docs/1.2.0/components/visible.html index 3536a7de5..f310c0f83 100644 --- a/docs/1.2.0/components/visible.html +++ b/docs/1.2.0/components/visible.html @@ -1172,7 +1172,7 @@

          Value

          < The entity will not be rendered nor visible. The entity will still exist in the scene. -

          Updating Visibility

          It is slightly faster to update visibility at the three.js level versus via +

          Updating Visibility

          It is slightly faster to update visibility at the three.js level versus via .setAttribute.

          // With three.js
          el.object3D.visible = false;

          // With .setAttribute.
          el.setAttribute('visible', false);
          diff --git a/docs/1.2.0/components/vive-controls.html b/docs/1.2.0/components/vive-controls.html index e43f7b78f..cf71aa91c 100644 --- a/docs/1.2.0/components/vive-controls.html +++ b/docs/1.2.0/components/vive-controls.html @@ -1149,7 +1149,7 @@

          The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

          Example

          <a-entity vive-controls="hand: left"></a-entity>
          <a-entity vive-controls="hand: right"></a-entity>
          diff --git a/docs/1.2.0/components/vive-focus-controls.html b/docs/1.2.0/components/vive-focus-controls.html index e1cf0e1a7..5e82630da 100644 --- a/docs/1.2.0/components/vive-focus-controls.html +++ b/docs/1.2.0/components/vive-focus-controls.html @@ -1149,7 +1149,7 @@

          The vive-focus-controls component interfaces with the Vive Focus controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Vive Focus controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

          Example

          <!-- Match Vive Focus controller if present, regardless of hand. -->
          <a-entity vive-focus-controls></a-entity>

          <!-- Match Vive Focus controller if present and for specified hand. -->
          <a-entity vive-focus-controls="hand: left"></a-entity>
          <a-entity vive-focus-controls="hand: right"></a-entity>
          diff --git a/docs/1.2.0/components/vr-mode-ui.html b/docs/1.2.0/components/vr-mode-ui.html index a28955196..62b8f2432 100644 --- a/docs/1.2.0/components/vr-mode-ui.html +++ b/docs/1.2.0/components/vr-mode-ui.html @@ -1150,7 +1150,7 @@

          The vr-mode-ui component allows disabling of UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only -to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

          +to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

          Example

          <a-scene vr-mode-ui="enabled: false"></a-scene>

          Properties

          diff --git a/docs/1.2.0/components/wasd-controls.html b/docs/1.2.0/components/wasd-controls.html index ec722e199..04fcd6fa8 100644 --- a/docs/1.2.0/components/wasd-controls.html +++ b/docs/1.2.0/components/wasd-controls.html @@ -1149,7 +1149,7 @@

          The wasd-controls component controls an entity with the WASD or arrow keyboard -keys. The wasd-controls component is commonly attached to an entity with the camera +keys. The wasd-controls component is commonly attached to an entity with the camera component.

          Example

          <a-entity camera look-controls wasd-controls="acceleration:100" position="0 1.6 0"></a-entity>
          diff --git a/docs/1.2.0/components/windows-motion-controls.html b/docs/1.2.0/components/windows-motion-controls.html index 36b650cfd..1ea8240a1 100644 --- a/docs/1.2.0/components/windows-motion-controls.html +++ b/docs/1.2.0/components/windows-motion-controls.html @@ -1150,7 +1150,7 @@

          The windows-motion-controls component 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 +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.)

          Example

          <a-entity windows-motion-controls="hand: left"></a-entity>
          <a-entity windows-motion-controls="hand: right"></a-entity>
          diff --git a/docs/1.2.0/core/asset-management-system.html b/docs/1.2.0/core/asset-management-system.html index f763a5c8c..76978244a 100644 --- a/docs/1.2.0/core/asset-management-system.html +++ b/docs/1.2.0/core/asset-management-system.html @@ -1166,7 +1166,7 @@

        The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

        -
        +

        Example

        We can define our assets in <a-assets> and point to those assets from our entities using selectors:

        diff --git a/docs/1.2.0/core/component.html b/docs/1.2.0/core/component.html index 5f63c4ab1..6b8c8232b 100644 --- a/docs/1.2.0/core/component.html +++ b/docs/1.2.0/core/component.html @@ -1148,7 +1148,7 @@

        -

        In the entity-component-system pattern, a component is a reusable and +

        In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

        In A-Frame, components modify entities which are 3D objects in the scene. We @@ -1162,7 +1162,7 @@

        Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

        -
        +

        Component HTML Form

        A component holds a bucket of data in the form of one or more component properties. Components use this data to modify entities. Consider an engine @@ -1313,7 +1313,7 @@

        Definition Lifecycle Handler Methods

        With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the shape of the data, the lifecycle handler methods use the data to modify the entity. The handlers will usually interact with the -Entity API.

        +Entity API.

        methodsimage Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

        Overview of Methods

        @@ -1366,15 +1366,15 @@

        setAttribute. +

        - + - + @@ -1411,7 +1411,7 @@

        diffing the current +

        Granular modifications to the entity can be done by diffing the current dataset (this.data) with the previous dataset before the update (oldData).

        A-Frame calls .update() both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The @@ -1419,7 +1419,7 @@

        visible component’s update sets the visibility of +

        For example, the visible component’s update sets the visibility of the entity.

        Parsed component properties computed from the schema default values, mixins, and the entity’s attributes.
        Important: Do not modify the data attribute directly. It is updated internally by A-Frame. To modify a component, use setAttribute.
        this.elReference to the entity as an HTML element.Reference to the entity as an HTML element.
        this.el.sceneElReference to the scene as an HTML element.Reference to the scene as an HTML element.
        this.id
        AFRAME.registerComponent('visible', {
          /**
           * this.el is the entity element.
           * this.el.object3D is the three.js object of the entity.
           * this.data is the component's property or properties.
           */
          update: function (oldData) {
            this.el.object3D.visible = this.data;
          }
          // ...
        });
        @@ -1434,7 +1434,7 @@

        Remove, undo, or clean up all of the component’s modifications to the entity.
      • Detach event listeners.

      -

      For example, when the light component is removed, the light component +

      For example, when the light component is removed, the light component will remove the light object that it had previously set on the entity, thus removing it from the scene.

      AFRAME.registerComponent('light', {
        // ...
        remove: function () {
          this.el.removeObject3D('light');
        }
        // ...
      });
      @@ -1456,7 +1456,7 @@

      time) and the time difference in milliseconds since the last frame (timeDelta). These can be used for interpolation or to only run parts of the tick handler on a set interval.

      -

      For example, the tracked controls component will progress +

      For example, the tracked controls component will progress the controller’s animations, update the controller’s position and rotation, and check for button presses.

      AFRAME.registerComponent('tracked-controls', {
        // ...
        tick: function (time, timeDelta) {
          this.updateMeshAnimation();
          this.updatePose();
          this.updateButtons();
        }
        // ...
      });
      @@ -1475,7 +1475,7 @@

      .
    • Remove event listeners.
    • Remove any chances of dynamic behavior.

    -

    For example, the sound component will pause the sound and remove an +

    For example, the sound component will pause the sound and remove an event listener that would have played a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      pause: function () {
        this.pauseSound();
        this.removeEventListener();
      }
      // ...
    });
    @@ -1490,7 +1490,7 @@

    .pla
    • Add event listeners.
    -

    For example, the sound component will play the sound and update the +

    For example, the sound component will play the sound and update the event listener that would play a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      play: function () {
        if (this.data.autoplay) { this.playSound(); }
        this.updateEventListener();
      }
      // ...
    });
    @@ -1500,7 +1500,7 @@

  • Dynamically update or extend the schema, usually depending on the value of a property.
    • -

    For example, the geometry component checks if the primitive +

    For example, the geometry component checks if the primitive property changed to determine whether to update the schema for a different type of geometry:

    AFRAME.registerComponent('geometry', {
      // ...
      updateSchema: (newData) {
        if (newData.primitive !== this.data.primitive) {
          this.extendSchema(GEOMETRIES[newData.primitive].schema);
        }
      }
      // ...
    });
    @@ -1555,7 +1555,7 @@ 

    document.querySelector('[geometry]').components.geometry.flushToDOM();
    -

    Read more about component-to-DOM serialization.

    +

    Read more about component-to-DOM serialization.

    Accessing a Component’s Members and Methods

    A component’s members and methods can be accessed through the entity from the .components object. Look up the component from the entity’s map of components, and we’ll have access to the component’s internals. Consider this diff --git a/docs/1.2.0/core/entity.html b/docs/1.2.0/core/entity.html index 766af4646..a324c98bf 100644 --- a/docs/1.2.0/core/entity.html +++ b/docs/1.2.0/core/entity.html @@ -1149,23 +1149,23 @@

    A-Frame represents an entity via the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

    -

    In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

    -
    +

    In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

    +

    Example

    Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

    <a-entity>

    We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

    +give it shape and appearance, we can attach the geometry and +material components:

    <a-entity geometry="primitive: box" material="color: red">
    -

    Or to make it emit light, we can further attach the light component:

    +

    Or to make it emit light, we can further attach the light component:

    <a-entity geometry="primitive: box" material="color: red"
              light="type: point; intensity: 2.0">

    Retrieving an Entity

    We can simply retrieve an entity using DOM APIs.

    @@ -1200,7 +1200,7 @@

    object3DMap

    An entity’s object3DMap is an object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that components have set.

    -

    For an entity with a geometry and light components +

    For an entity with a geometry and light components attached, object3DMap might look like:

    {
      light: <THREE.Light Object>,
      mesh: <THREE.Mesh Object>
    }
    @@ -1215,7 +1215,7 @@

    Metho

    destroy ()

    Clean up memory related to the entity such as clearing all components and their data.

    emit (name, detail, bubbles)

    emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

    +trigger an animation:

    // <a-entity animation="property: rotation; to: 0 360 0; startEvents: rotate">
    entity.emit('rotate');

    We can also pass event detail or data as the second argument:

    @@ -1226,7 +1226,7 @@ 

    entity.emit('sink', null, false);

    flushToDOM (recursive)

    flushToDOM will manually serialize an entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

    +Read more about component-to-DOM serialization.

    getAttribute (componentName)

    getAttribute retrieves parsed component data (including mixins and defaults).

    // <a-entity geometry="primitive: box; width: 3">

    entity.getAttribute('geometry');
    // >> {primitive: "box", depth: 2, height: 2, width: 3, ...}

    entity.getAttribute('geometry').primitive;
    // >> "box"

    entity.getAttribute('geometry').height;
    // >> 2

    entity.getAttribute('position');
    // >> {x: 0, y: 0, z: 0}
    @@ -1253,20 +1253,20 @@

    pa entity will call pause() on its child entities when we pause an entity.

    // <a-entity id="spinning-jumping-ball">
    entity.pause();
    -

    For example, the look-controls component on +

    For example, the look-controls component on pause will remove event handlers that listen for input.

    play ()

    play() will start any dynamic behavior as defined by animations and components. This is automatically called when the DOM attaches an entity. When an entity play(), the entity calls play() on its child entities.

    entity.pause();
    entity.play();
    -

    For example, the sound component on play will begin playing the sound.

    +

    For example, the sound component on play will begin playing the sound.

    setAttribute (componentName, value, [propertyValue | clobber])

    If componentName is not the name of a registered component or the component is a single-property component, setAttribute behaves as it normally would:

    entity.setAttribute('visible', false);

    Though if componentName is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    entity.setAttribute('position', { x: 1, y: 2, z: 3 });
    @@ -1334,7 +1334,7 @@

    Events componentchanged -One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. +One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. componentinitialized diff --git a/docs/1.2.0/core/globals.html b/docs/1.2.0/core/globals.html index b18fdf337..284f6cc4b 100644 --- a/docs/1.2.0/core/globals.html +++ b/docs/1.2.0/core/globals.html @@ -1160,11 +1160,11 @@

    AComponent -Component prototype. +Component prototype. AEntity -Entity prototype. +Entity prototype. ANode @@ -1172,7 +1172,7 @@

    AScene -Scene prototype. +Scene prototype. components @@ -1188,7 +1188,7 @@

    registerComponent -Function to register a component. +Function to register a component. registerElement @@ -1196,15 +1196,15 @@

    registerGeometry -Function to register a geometry. +Function to register a geometry. registerPrimitive -Function to register a primitive. +Function to register a primitive. registerShader -Function to register a material or shader. +Function to register a material or shader. schema @@ -1224,7 +1224,7 @@

    utils -A-Frame utility modules. +A-Frame utility modules. version diff --git a/docs/1.2.0/core/mixins.html b/docs/1.2.0/core/mixins.html index 4ff1677fb..6ad89ee34 100644 --- a/docs/1.2.0/core/mixins.html +++ b/docs/1.2.0/core/mixins.html @@ -1150,7 +1150,7 @@

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    <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-mixin>
      </a-assets>

      <a-entity mixin="red cube"></a-entity>
      <a-entity mixin="blue cube"></a-entity>
    </a-scene>
    @@ -1160,7 +1160,7 @@

    the entities above expand to:

    <a-entity material="color: red" geometry="primitive: box"></a-entity>
    <a-entity material="color: blue" geometry="primitive: box"></a-entity>
    -
    +

    Merging Component Properties

    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="height: 10"></a-mixin>
        <a-mixin id="wide" geometry="width: 10"></a-mixin>
      </a-assets>

      <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
    </a-scene>
    diff --git a/docs/1.2.0/core/scene.html b/docs/1.2.0/core/scene.html index 135197ab2..195e7dedb 100644 --- a/docs/1.2.0/core/scene.html +++ b/docs/1.2.0/core/scene.html @@ -1149,8 +1149,8 @@

    A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

    -

    The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

    +

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    @@ -1160,9 +1160,9 @@

  • Default camera and lights
  • Set up webvr-polyfill, VREffect
  • Add UI to Enter VR that calls WebVR API
    • -
  • Configure WebXR devices through the webxr system
    • +
  • Configure WebXR devices through the webxr system
    • -
    +

    Example

    <a-scene>
      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <a-box src="#texture"></a-box>
    </a-scene>
    @@ -1207,7 +1207,7 @@

    systems -Instantiated systems. +Instantiated systems. time @@ -1271,12 +1271,12 @@

    embedded - Remove fullscreen styles from the canvas. -
  • fog - Add fog.
    • -
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • -
  • inspector - Inject the A-Frame Inspector.
    • -
  • stats - Toggle performance stats.
    • -
  • vr-mode-ui - Toggle UI for entering and exiting VR.
    • +
  • embedded - Remove fullscreen styles from the canvas.
    • +
  • fog - Add fog.
    • +
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • +
  • inspector - Inject the A-Frame Inspector.
    • +
  • stats - Toggle performance stats.
    • +
  • vr-mode-ui - Toggle UI for entering and exiting VR.

    • Running Content Scripts on the Scene

    The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

    AFRAME.registerComponent('do-something', {
      init: function () {
        var sceneEl = this.el;
      }
    });
    diff --git a/docs/1.2.0/core/systems.html b/docs/1.2.0/core/systems.html index dda957b5b..48de34d4e 100644 --- a/docs/1.2.0/core/systems.html +++ b/docs/1.2.0/core/systems.html @@ -1148,16 +1148,16 @@

    -

    A system, of the entity-component-system pattern, provides global scope, +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -
    + -

    Registering a System

    A system is registered similarly to a component.

    +

    Registering a System

    A system is registered similarly to a component.

    If the system name matches a component name, then the component will have a reference to the system as this.system:

    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);
      }
    });
    @@ -1179,7 +1179,7 @@

    schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data.

    Methods

    A system, like a component, defines lifecycle handlers. It can also define diff --git a/docs/1.2.0/core/utils.html b/docs/1.2.0/core/utils.html index 4559165a3..59461dcdd 100644 --- a/docs/1.2.0/core/utils.html +++ b/docs/1.2.0/core/utils.html @@ -1149,7 +1149,7 @@

    A-Frame’s utility modules are public through AFRAME.utils.

    -
    +

    AFRAME.utils.coordinates

    Module for handling vec3 and vec4 types.

    .isCoordinates (value)

    Tests whether a string is a vec3 or vec4.

    @@ -1161,7 +1161,7 @@

    .stringify (data)

    Stringifies an {x, y, z} vec3 object to an “x y z” string.Or Stringifies an {x, y, z, w} vec4 object to an “x y z w” string.

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
    // >> "1 2 -3"

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3, w:4})
    // >> "1 2 -3 4"
    -

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for +

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for return 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.

    @@ -1169,7 +1169,7 @@

    This is useful for components that need a way to reference a property of a multi-property component.

    -

    .setComponentProperty (entity, componentName, value, delimiter)

    Performs like Entity.setAttribute, but with support for setting an +

    .setComponentProperty (entity, componentName, value, delimiter)

    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.

    diff --git a/docs/1.2.0/guides/building-a-360-image-gallery.html b/docs/1.2.0/guides/building-a-360-image-gallery.html index cee080317..02a9bdefd 100644 --- a/docs/1.2.0/guides/building-a-360-image-gallery.html +++ b/docs/1.2.0/guides/building-a-360-image-gallery.html @@ -1152,7 +1152,7 @@

    Let’s build an interactive gaze-based 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

    -

    This guide will practice three concepts related to entity-component:

    +

    This guide will practice three concepts related to entity-component:

    1. Using the standard components that come with A-Frame.
    2. Using community components from the ecosystem.
      3. @@ -1160,18 +1160,18 @@

    Not to say 360° images are at all a focus use case of A-Frame, but it makes for an easy example that has a lot of demand as an early use case on the Web.

    -
    +

    Skeleton

    This is the starting point for our scene. We can also remix the Glitch.

    <a-scene>
      <a-assets>
        <audio id="click-sound" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>

        <!-- Images. -->
        <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
        <img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
        <img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
        <img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
        <img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Link template we will build. -->
      <a-entity class="link"></a-entity>

      <!-- Camera + Cursor. -->
      <a-camera>
        <a-cursor
          id="cursor"
          animation__click="property: scale; from: 0.1 0.1 0.1; to: 1 1 1; easing: easeInCubic; dur: 150; startEvents: click"
          animation__clickreset="property: scale; to: 0.1 0.1 0.1; dur: 1; startEvents: animationcomplete__click"
          animation__fusing="property: scale; from: 1 1 1; to: 0.1 0.1 0.1; easing: easeInCubic; dur: 150; startEvents: fusing"></a-cursor>
      </a-camera>
    </a-scene>

    We have predefined:

    Using Standard Components

    Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure @@ -1181,20 +1181,20 @@ 

    <a-entity class="link"></a-entity>
    -

    To give our entity shape, we can attach the geometry component, +

    To give our entity shape, we can attach the geometry component, configured to a plane shape. We specify the component data using a syntax that resembles that of inline CSS styles:

    <a-entity
      class="link"
      geometry="primitive: plane; height: 1; width: 1"></a-entity>
    -

    Then to give our entity appearance, we can attach the material +

    Then to give our entity appearance, we can attach the material component. We set shader to flat so the image isn’t affected negatively by lighting. And we set src to #cubes-thumb, a selector to one -of the images preloaded in the Asset Management System. Alternatively, +of the images preloaded in the Asset Management System. Alternatively, we could pass a URL for the image:

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: #cubes-thumb"></a-entity>

    We can continue adding features to our entity by plugging in more components. -Let’s attach one more standard component, the sound component. We want +Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1270,15 +1270,15 @@

    Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

    Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We can specify event names either the _event property or via the __<id> as shown below. The rest of the properties define the setAttribute calls. Notice that the event-set component can have -multiple instances:

    +multiple instances:

    <script id="link" type="text/html">
      <a-entity class="link"
        geometry="primitive: plane; height: 1; width: 1"
        material="shader: flat; src: ${thumb}"
        sound="on: click; src: #click-sound"
        event-set__mouseenter="scale: 1.2 1.2 1"
        event-set__mouseleave="scale: 1 1 1"
        event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"></a-entity>
    </script>

    Remember to add data-src attributes to the link entities to load the full image on click:

    @@ -1310,7 +1310,7 @@

    Writing a Component and +application-specific components. That is covered in Writing a Component and hopefully in later guides.

    Try it out!

    diff --git a/docs/1.2.0/guides/building-a-basic-scene.html b/docs/1.2.0/guides/building-a-basic-scene.html index e1e26bc49..d0f50c967 100644 --- a/docs/1.2.0/guides/building-a-basic-scene.html +++ b/docs/1.2.0/guides/building-a-basic-scene.html @@ -1161,7 +1161,7 @@

  • Add text

    • Remix the Basic Guide example on Glitch.

    -
    +

    Starting with HTML

    We start out with a minimal HTML structure:

    <html>
      <head>
        <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
        </a-scene>
      </body>
    </html>
    @@ -1170,7 +1170,7 @@

    before <a-scene> because A-Frame registers custom HTML elements which must be defined before <a-scene> is attached or else <a-scene> will do nothing.

    -

    Next, we include <a-scene> in the <body>. <a-scene> will contain every +

    Next, we include <a-scene> in the <body>. <a-scene> will contain every entity in our scene. <a-scene> handles all of the setup that is required for 3D: setting up WebGL, the canvas, camera, lights, renderer, render loop as well as out of the box WebVR support on platforms such as HTC Vive, Oculus Rift, @@ -1181,7 +1181,7 @@

    <a-box>‘s documentation for +

    Here we define the color <a-box>, see <a-box>‘s documentation for the more attributes (e.g., width, height, depth).

    boximage Image by Ruben Mueller from vrjump.de

    @@ -1189,13 +1189,13 @@

    <a-entity> with the geometry and -material components:

    +underneath <a-box> is <a-entity> with the geometry and +material components:

    <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>
    -

    However, because the default camera and the box are positioned at the default +

    However, because the default camera and the box are positioned at the default position at the 0 0 0 origin, we won’t be able to see the box unless we move -it. We can do this by using the position component to transform the +it. We can do this by using the position component to transform the box in 3D space.

    Transforming an Entity in 3D

    Let’s first go over 3D space. A-Frame uses a right-handed coordinate system. With the default camera direction: positive X-axis extends right, positive @@ -1214,7 +1214,7 @@

    To translate, rotate, and scale the box, we can change the -position, rotation, and scale components. +position, rotation, and scale components. Let’s first apply the rotation and scale components:

    <a-scene>
      <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
    @@ -1271,7 +1271,7 @@ 

    <a-scene>
      <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <!-- Out of the box environment! -->
      <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
    </a-scene>

    Applying an Image Texture

    -

    Make sure you’re serving your HTML using a local server +

    Make sure you’re serving your HTML using a local server for textures to load properly.

    We can apply an image texture to the box with an image, video, or <canvas> @@ -1283,7 +1283,7 @@

    -

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The +

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The asset management system makes it easier for the browser to cache assets (e.g., images, videos, models) and A-Frame will make sure all of the assets are fetched before rendering.

    @@ -1303,7 +1303,7 @@

    Creating a Custom Environment (Optional)

    Previously we had the environment component generate the environment. Though it’s good to know a bit on creating a basic environment for learning purposes.

    -

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. +

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. <a-sky>, which is a material applied to the inside of a large sphere, can be a flat color, a 360° image, or a 360° video. For example, a dark gray background would be:

    @@ -1313,7 +1313,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>
    </a-scene>
    -

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are +

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are oriented parallel to the XY axis. To make it parallel to the ground, we need to orient it along the XZ axis. We can do so by rotating the plane negative 90° on the X-axis.

    @@ -1331,7 +1331,7 @@ 

    <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
      repeat="10 10"></a-plane>
    -

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default +

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default if we don’t specify any lights, A-Frame adds an ambient light and a directional light. If A-Frame didn’t add lights for us, the scene would be black. Once we add lights of our own, however, the default lighting setup is removed and @@ -1344,7 +1344,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>

      <a-light type="ambient" color="#445451"></a-light>
      <a-light type="point" intensity="2" position="2 4 4"></a-light>
    </a-scene>
    -

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation +

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation system. Animations interpolate or tween a value over time. We can set the animation component on the entity. Let’s have the box hover up and down to add some motion to the scene.

    @@ -1352,7 +1352,7 @@

    entity’s object3D’s position’s Y axis. +
  • Animate the entity’s object3D’s position’s Y axis.
  • Animate to 2.2 which is 20 centimeters higher.
  • Alternate the dir (direction) of the animation on each repeated cycle of the animation so it goes back and forth.
  • Last for 2000 millisecond dur (duration) on each cycle.
    • @@ -1363,19 +1363,19 @@

    Given that many developers currently do not have proper VR hardware with controllers, we’ll focus this section on using basic mobile and desktop inputs -with the built-in cursor component. The cursor component by default provides +with the built-in cursor component. The cursor component by default provides the ability to “click” on entities by staring or gazing at them on mobile, or on desktop, looking at an entity and click the mouse. But know that the cursor component is just one way to add interactions, things open up if we have access to actual controllers.

    -

    To have a visible cursor fixed to the camera, we place the cursor as a child +

    To have a visible cursor fixed to the camera, we place the cursor as a child of the camera as explained above in Parent and Child Transforms.

    Since we didn’t specifically define a camera, A-Frame included a default camera for us. But since we need to add a cursor as a child of the camera, we will -need to now define <a-camera> containing <a-cursor>:

    +need to now define <a-camera> containing <a-cursor>:

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"
             animation="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true"></a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
    -

    If we check the documentation of the cursor component that +

    If we check the documentation of the cursor component that <a-cursor> wraps, we see that it emits hover events such as mouseenter, mouseleave as well as click.

    Event Listener Component (Intermediate)

    One way to manually handle the cursor events is to add an event listener with @@ -1383,7 +1383,7 @@

    Animating on Events below.

    In JavaScript, we grab the box with querySelector, use -addEventListener, and then setAttribute +addEventListener, and then setAttribute to make the box grow its scale when its hovered over. Note that A-Frame adds features to setAttribute to work with multi-property components. We can pass a full {x, y, z} object as the second argument.

    @@ -1420,7 +1420,7 @@ 

    <a-scene>
      <!-- ... -->
      <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
        position="-3 1 -4"></a-sound>
      <!-- ... -->
    </a-scene>
    -

    Adding Text

    A-Frame comes with a text component. There are several ways to render +

    Adding Text

    A-Frame comes with a text component. There are several ways to render text, each with their own advantages and disadvantages. A-Frame comes with an SDF text implementation using three-bmfont-text that is relatively sharp and performant:

    diff --git a/docs/1.2.0/guides/building-a-minecraft-demo.html b/docs/1.2.0/guides/building-a-minecraft-demo.html index 941694fad..f5fd824c0 100644 --- a/docs/1.2.0/guides/building-a-minecraft-demo.html +++ b/docs/1.2.0/guides/building-a-minecraft-demo.html @@ -1154,7 +1154,7 @@

    Let’s build a basic Minecraft (voxel builder) demo that targets room scale VR with controllers (e.g., Vive, Rift). The example will be minimally usable on mobile and desktop.

    -
    +

    Example Skeleton

    We’ll start off with this skeleton HTML:

    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>

    <body>
      <a-scene>
      </a-scene>
    </body>
    diff --git a/docs/1.2.0/introduction/best-practices.html b/docs/1.2.0/introduction/best-practices.html index 213211fff..d7449b6e5 100644 --- a/docs/1.2.0/introduction/best-practices.html +++ b/docs/1.2.0/introduction/best-practices.html @@ -1148,7 +1148,7 @@

    -

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and +

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and structure application code within purely A-Frame components for reusability, modularity, composability, decoupling, encapsulation, declarativeness, and testability.

    @@ -1165,8 +1165,8 @@

    recommended hardware specifications. -
  • Use the stats component to keep an eye on various metrics (FPS, +
  • Use recommended hardware specifications.
    • +
  • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities). We want to maximize FPS and minimize everything else.
  • Limit draw calls as much as possible. Each geometry, object, model without @@ -1176,7 +1176,7 @@

    asset management system to browser cache and +
  • Make use of the asset management system to browser cache and preload assets.
  • If using models, look to bake your lights into textures rather than relying on real-time lighting and shadows.
    • @@ -1193,16 +1193,16 @@

    background component instead of a-sky to define a +
  • Use the background component instead of a-sky to define a solid color as the scene background. This prevents the creation of unnecessary geometry.
  • Update position, rotation, scale, and visible using at the three.js level (el.object3D.position, el.object3D.rotation, el.object3D.scale, el.object3D.visible) to avoid overhead on .setAttribute.
  • If you need to create, remove and re-create many entities of the same type, -use the pool component to pre-generate and reuse entities. This +use the pool component to pre-generate and reuse entities. This avoids the cost of creating entities on the fly and reduces garbage collection.
    • -
  • When using the animation component, animate values directly +
  • When using the animation component, animate values directly which will skip .setAttribute and animate JS values directly. For example, instead of material.opacity, animate components.material.material.opacity.
    • diff --git a/docs/1.2.0/introduction/developing-with-threejs.html b/docs/1.2.0/introduction/developing-with-threejs.html index 9c7448a80..352ddc8c1 100644 --- a/docs/1.2.0/introduction/developing-with-threejs.html +++ b/docs/1.2.0/introduction/developing-with-threejs.html @@ -1178,7 +1178,7 @@

    And every A-Frame entity also has a reference to <a-scene> via .sceneEl:

    document.querySelector('a-entity').sceneEl.object3D;  // THREE.Scene
    -

    From a component, we access the scene through its entity +

    From a component, we access the scene through its entity (i.e., this.el):

    AFRAME.registerComponent('foo', {
      init: function () {
        var scene = this.el.sceneEl.object3D;  // THREE.Scene
      }
    });
    diff --git a/docs/1.2.0/introduction/entity-component-system.html b/docs/1.2.0/introduction/entity-component-system.html index f85efcfe6..845420da9 100644 --- a/docs/1.2.0/introduction/entity-component-system.html +++ b/docs/1.2.0/introduction/entity-component-system.html @@ -1177,20 +1177,20 @@

    A well-known game engine implementing ECS is Unity. Although there are pain points in cross-entity communication, we’ll see how A-Frame, the DOM, and declarative HTML really make ECS shine.

    -
    +

    Concept

    ECS Minecraft

    A basic definition of ECS involves:

    We’ll go over GUI tools built on top of A-Frame that can be used without code. And touch on other tools that can ease development across multiple machines.

    -
    +

    A-Frame Inspector

    The A-Frame Inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:

    diff --git a/docs/1.2.0/introduction/vr-headsets-and-webvr-browsers.html b/docs/1.2.0/introduction/vr-headsets-and-webvr-browsers.html index a63965949..12200ae3e 100644 --- a/docs/1.2.0/introduction/vr-headsets-and-webvr-browsers.html +++ b/docs/1.2.0/introduction/vr-headsets-and-webvr-browsers.html @@ -1148,7 +1148,7 @@

    -
    +

    What is Virtual Reality?

    Virtual reality (VR) is a technology that uses head-mounted headsets with displays to generate the realistic images, sounds, and other sensations to put diff --git a/docs/1.2.0/introduction/writing-a-component.html b/docs/1.2.0/introduction/writing-a-component.html index 5b53dbae5..feb0ca632 100644 --- a/docs/1.2.0/introduction/writing-a-component.html +++ b/docs/1.2.0/introduction/writing-a-component.html @@ -1148,7 +1148,7 @@

    -

    Components of A-Frame’s entity-component framework are JavaScript +

    Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, @@ -1156,7 +1156,7 @@

    components.

    vehicleimage Image by Ruben Mueller from vrjump.de

    -

    This guide will take it pretty slow. We recommend skimming over the Component +

    This guide will take it pretty slow. We recommend skimming over the Component API documentation before going through this guide as that documentation will be more concise. Note that components should be defined before <a-scene> like:

    @@ -1170,12 +1170,12 @@

    Example: hello-world Component

    Let’s start with the most basic component to get a general idea. This component will log a simple message once when the component’s entity is attached using -the .init() handler.

    +the .init() handler.

    Registering the Component with AFRAME.registerComponent

    Components are registered with AFRAME.registerComponent(). We pass the name of the component, which will be used as the HTML attribute name in the component’s representation in the DOM. Then we pass the component definition which is a JavaScript object of methods and properties. Within the definition, we can -define lifecycle handler methods. One of which is .init(), which +define lifecycle handler methods. One of which is .init(), which is called once when the component is first plugged into its entity.

    In the example below, we just have our .init() handler log a simple message.

    AFRAME.registerComponent('hello-world', {
      init: function () {
        console.log('Hello, World!');
      }
    });
    @@ -1229,7 +1229,7 @@

    Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

    To demonstrate this, we’ll have our log component only log whenever its -entity emits an event. First, we’ll add an event property type that +entity emits an event. First, we’ll add an event property type that specifies which event the component should listen on.

    // ...
    schema: {
      event: {type: 'string', default: ''},
      message: {type: 'string', default: 'Hello, World!'},
    },
    // ...
    @@ -1238,7 +1238,7 @@

    add an event listener that will +

    What we want to do is add an event listener that will listen to the event before logging a message. If the event property type is not specified, we’ll just log the message:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      update: function () {
        var data = this.data;  // Component property values.
        var el = this.el;  // Reference to the component's entity.

        if (data.event) {
          // This will log the `message` when the entity emits the `event`.
          el.addEventListener(data.event, function () {
            console.log(data.message);
          });
        } else {
          // `event` not specified, just log the message.
          console.log(data.message);
        }
      }
    });
    @@ -1247,7 +1247,7 @@

    , we need a reference to the function. So +

    But to remove an event listener, we need a reference to the function. So let’s first store the function on this.eventHandlerFn whenever we attach an event listener. When we attach properties to the component via this, they’ll be available throughout all the other lifecycle handlers.

    @@ -1262,13 +1262,13 @@ 

    <a-scene>
      <a-entity log="event: anEvent; message: Hello, Metaverse!"></a-entity>
    </a-scene>
    -

    Let’s have our entity emit the event to test it out:

    +

    Let’s have our entity emit the event to test it out:

    var el = document.querySelector('a-entity');
    el.emit('anEvent');
    // >> "Hello, Metaverse!"

    Now let’s update our event to test the .update() handler:

    var el = document.querySelector('a-entity');
    el.setAttribute('log', {event: 'anotherEvent', message: 'Hello, new event!'});
    el.emit('anotherEvent');
    // >> "Hello, new event!"
    -

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity +

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity (i.e., .removeAttribute('log')). We can implement the .remove() handler which is called when the component is removed. For the log component, we remove any event listeners the component attached to the entity:

    @@ -1281,7 +1281,7 @@ 

    var el = document.querySelector('a-entity');
    el.removeAttribute('log');
    el.emit('anEvent');
    // >> Nothing should be logged...

    Allowing Multiple Instances of a Component

    Let’s allow having multiple log components attached to the same entity. To do -so, we enable multiple instancing with the .multiple flag. Let’s +so, we enable multiple instancing with the .multiple flag. Let’s set that to true:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      multiple: true,

      // ...
    });
    @@ -1298,13 +1298,13 @@

    Example: box Component

    For a less trivial example, let’s find out how we can add 3D objects and affect -the scene graph by writing a component that uses three.js. To get +the scene graph by writing a component that uses three.js. To get the idea, we’ll just make a basic box component that creates a box mesh with both geometry and material.

    boximage Image by Ruben Mueller from vrjump.de

    Note: this is just a 3D equivalent of writing a Hello, World! component. -A-Frame provides geometry and material components if we +A-Frame provides geometry and material components if we actually wanted to make a box in practice.

    Schema and API

    Let’s start with the schema. The schema defines the API of your component. We’ll make the width, height, depth, and color configurable through the @@ -1321,7 +1321,7 @@

    THREE.BoxBufferGeometry, THREE.MeshStandardMaterial, and finally a THREE.Mesh. Then we set the mesh on our entity to add the mesh to the -three.js scene graph using .setObject3D(name, object):

    +three.js scene graph using .setObject3D(name, object):

    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.BoxBufferGeometry(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);
      }
    });

    Now let’s handle updates. If the geometry-related properties (i.e., width, diff --git a/docs/1.2.0/primitives/a-circle.html b/docs/1.2.0/primitives/a-circle.html index 1199a4daf..aef6639dd 100644 --- a/docs/1.2.0/primitives/a-circle.html +++ b/docs/1.2.0/primitives/a-circle.html @@ -1148,7 +1148,7 @@

    -

    The circle primitive creates circles surfaces using the geometry +

    The circle primitive creates circles surfaces using the geometry component with the type set to circle.

    Example

    <a-scene>
      <a-assets>
        <img id="platform" src="platform.jpg">
      </a-assets>

      <!-- Basic circle. -->
      <a-circle color="#CCC" radius="20"></a-circle>

      <!-- Textured circle parallel to ground. -->
      <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
    </a-scene>
    diff --git a/docs/1.2.0/primitives/a-cursor.html b/docs/1.2.0/primitives/a-cursor.html index a171fe802..6c3d3077d 100644 --- a/docs/1.2.0/primitives/a-cursor.html +++ b/docs/1.2.0/primitives/a-cursor.html @@ -1152,7 +1152,7 @@

    interactivity with a scene on devices that do not have a hand controller. The default appearance is a ring geometry. The cursor is usually placed as a child of the camera.

    -

    Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

    +

    Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

    Example

    <a-scene>
      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>

      <a-box></a-box>
    </a-scene>

    Attributes

    diff --git a/docs/1.2.0/primitives/a-gltf-model.html b/docs/1.2.0/primitives/a-gltf-model.html index be45d39ab..83ace9f9a 100644 --- a/docs/1.2.0/primitives/a-gltf-model.html +++ b/docs/1.2.0/primitives/a-gltf-model.html @@ -1162,7 +1162,7 @@

    - +
    srcgltf-model.srcgltf-model.src null
    diff --git a/docs/1.2.0/primitives/a-obj-model.html b/docs/1.2.0/primitives/a-obj-model.html index 703323a9b..4ea984531 100644 --- a/docs/1.2.0/primitives/a-obj-model.html +++ b/docs/1.2.0/primitives/a-obj-model.html @@ -1150,7 +1150,7 @@

    We recommend glTF for distributing assets in production over the web. Check -out using the glTF model primitive. You can +out using the glTF model primitive. You can either instead export to COLLADA and use the converter or try out the OBJ converter.

    @@ -1177,7 +1177,7 @@

    null -

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    +

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    diff --git a/docs/1.2.0/primitives/a-plane.html b/docs/1.2.0/primitives/a-plane.html index bbd939063..c6dce5af7 100644 --- a/docs/1.2.0/primitives/a-plane.html +++ b/docs/1.2.0/primitives/a-plane.html @@ -1148,7 +1148,7 @@

    -

    The plane primitive creates flat surfaces using the geometry +

    The plane primitive creates flat surfaces using the geometry component with the type set to plane.

    Example

    <a-scene>
      <a-assets>
        <img id="ground" src="ground.jpg">
      </a-assets>

      <!-- Basic plane. -->
      <a-plane color="#CCC" height="20" width="20"></a-plane>

      <!-- Textured plane parallel to ground. -->
      <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
    </a-scene>
    diff --git a/docs/1.2.0/primitives/a-sound.html b/docs/1.2.0/primitives/a-sound.html index 1b3c88e07..853fa9d90 100644 --- a/docs/1.2.0/primitives/a-sound.html +++ b/docs/1.2.0/primitives/a-sound.html @@ -1148,7 +1148,7 @@

    -

    The sound primitive wraps the sound component.

    +

    The sound primitive wraps the sound component.

    Example

    <a-scene>
      <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
    </a-scene>

    Attributes

    diff --git a/docs/1.2.0/primitives/a-sphere.html b/docs/1.2.0/primitives/a-sphere.html index 7c2071ab9..cf8c00ff6 100644 --- a/docs/1.2.0/primitives/a-sphere.html +++ b/docs/1.2.0/primitives/a-sphere.html @@ -1148,7 +1148,7 @@

    -

    The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

    +

    The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

    Example

    <a-sphere color="yellow" radius="5"></a-sphere>

    Attributes

    diff --git a/docs/1.2.0/primitives/a-text.html b/docs/1.2.0/primitives/a-text.html index 0e5e97c1f..4ba54a57c 100644 --- a/docs/1.2.0/primitives/a-text.html +++ b/docs/1.2.0/primitives/a-text.html @@ -1148,7 +1148,7 @@

    -

    Wraps the text component.

    +

    Wraps the text component.

    Example

    <a-text value="Hello, World!"></a-text>

    Attributes

    diff --git a/docs/1.2.0/primitives/a-torus-knot.html b/docs/1.2.0/primitives/a-torus-knot.html index dbdc38c2c..da02c2617 100644 --- a/docs/1.2.0/primitives/a-torus-knot.html +++ b/docs/1.2.0/primitives/a-torus-knot.html @@ -1148,7 +1148,7 @@

    -

    The torus knot primitive creates pretzel shapes using the geometry +

    The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

    Example

    <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
    diff --git a/docs/1.2.0/primitives/a-torus.html b/docs/1.2.0/primitives/a-torus.html index 736250189..f3c139698 100644 --- a/docs/1.2.0/primitives/a-torus.html +++ b/docs/1.2.0/primitives/a-torus.html @@ -1148,7 +1148,7 @@

    -

    The torus primitive creates donut or tube shapes using the geometry +

    The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

    Example

    <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
    diff --git a/docs/1.2.0/primitives/a-triangle.html b/docs/1.2.0/primitives/a-triangle.html index 51a5e99a2..5ba63a7ee 100644 --- a/docs/1.2.0/primitives/a-triangle.html +++ b/docs/1.2.0/primitives/a-triangle.html @@ -1148,7 +1148,7 @@

    -

    The triangle primitive creates triangle surfaces using the geometry +

    The triangle primitive creates triangle surfaces using the geometry component with the type set to triangle.

    Example

    <a-scene>
      <a-assets>
        <img id="platform" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <!-- Basic triangle. -->
      <a-triangle color="#CCC" vertex-c="1 -1 0"></a-triangle>

      <!-- Textured triangle parallel to ground. -->
      <a-triangle src="#platform" rotation="-90 0 0"></a-triangle>
    </a-scene>
    diff --git a/docs/1.2.0/primitives/a-videosphere.html b/docs/1.2.0/primitives/a-videosphere.html index 98fdecf7f..49a9f23b7 100644 --- a/docs/1.2.0/primitives/a-videosphere.html +++ b/docs/1.2.0/primitives/a-videosphere.html @@ -1155,7 +1155,7 @@

    Ex

    Methods

    More indepth knowledge on the methods to alter video material can be seen over here

    // 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();
    -

    Attributes

    Note that the videosphere primitive inherits common attributes.

    +

    Attributes

    Note that the videosphere primitive inherits common attributes.

    diff --git a/docs/1.3.0/components/animation.html b/docs/1.3.0/components/animation.html index 9807c9545..b3cec5989 100644 --- a/docs/1.3.0/components/animation.html +++ b/docs/1.3.0/components/animation.html @@ -1188,7 +1188,7 @@

    Read more below for additional options and discovering how to properly animate different types of values.

    -
    +

    API

    Properties

    diff --git a/docs/1.3.0/components/cursor.html b/docs/1.3.0/components/cursor.html index 66a5749a5..b7102201e 100644 --- a/docs/1.3.0/components/cursor.html +++ b/docs/1.3.0/components/cursor.html @@ -1170,11 +1170,11 @@

    The cursor component provides hover and click states for interaction on top of -the raycaster component. The cursor component can be used for +the raycaster component. The cursor component can be used for both gaze-based and controller-based interactions, but the appearance needs -to be configured depending on the use case. The <a-cursor> +to be configured depending on the use case. The <a-cursor> primitive provides a default reticle appearance for a gaze-based -cursor, and the laser-controls component configures the +cursor, and the laser-controls component configures the cursor for all controllers.

    The cursor component listens to events and keeps state on what’s being hovered and pressed in order to provide mousedown, mouseup, mouseenter, @@ -1185,15 +1185,15 @@

    By default, the cursor is configured to be used in a gaze-based mode and will register user input via mouse or touch. Specifying the downEvents and upEvents properties allows the cursor to work with controllers. For example, -the laser-controls component automatically configures these +the laser-controls component automatically configures these properties to work with most controllers.

    To provide a shape or appearance to the cursor, we should apply either the -geometry and material components or use the raycaster -component’s showLine property to draw a line using the line +geometry and material components or use the raycaster +component’s showLine property to draw a line using the line component.

    Example

    For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no -matter where we look, we place it as a child of the active camera +matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

    <a-entity camera look-controls>
      <a-entity cursor="fuse: true; fuseTimeout: 500"
                position="0 0 -1"
                geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                material="color: black; shader: flat">
      </a-entity>
    </a-entity>

    <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
    @@ -1240,7 +1240,7 @@

    To further customize the cursor component, we configure the cursor’s dependency -component, the raycaster component.

    +component, the raycaster component.

    Events

    @@ -1310,7 +1310,7 @@

    States

    Configuring the Cursor through the Raycaster Component

    The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

    <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>
    @@ -1325,7 +1325,7 @@

    Adding Visual Feedback

    To add visual feedback to the cursor to show when the cursor is clicking or -fusing, we can use the animation component. When the cursor +fusing, we can use the animation component. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

    <a-entity
      animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
      animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
      animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
      cursor="fuse: true;"
      material="color: black; shader: flat"
      position="0 0 -3"
      geometry="primitive: ring"></a-entity>
    diff --git a/docs/1.3.0/components/daydream-controls.html b/docs/1.3.0/components/daydream-controls.html index 5055d0036..1a71d2e08 100644 --- a/docs/1.3.0/components/daydream-controls.html +++ b/docs/1.3.0/components/daydream-controls.html @@ -1170,7 +1170,7 @@

    The daydream-controls component interfaces with the Google Daydream controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Daydream controller model that highlights the touched and/or pressed buttons (trackpad).

    As a first time set up, to use the Daydream controller on Chrome for Android diff --git a/docs/1.3.0/components/debug.html b/docs/1.3.0/components/debug.html index e9188fde8..2d728480a 100644 --- a/docs/1.3.0/components/debug.html +++ b/docs/1.3.0/components/debug.html @@ -1186,8 +1186,8 @@ 

    <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

    Make sure that this component is not active in production.

    -

    Manually Serializing to DOM

    To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM:

    +

    Manually Serializing to DOM

    To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM:

    document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
    document.querySelector('a-entity').flushToDOM();  // Flush an entity.
    document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
    document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.
    diff --git a/docs/1.3.0/components/device-orientation-permission-ui.html b/docs/1.3.0/components/device-orientation-permission-ui.html index 3d8b39b2f..79cc60c58 100644 --- a/docs/1.3.0/components/device-orientation-permission-ui.html +++ b/docs/1.3.0/components/device-orientation-permission-ui.html @@ -1170,7 +1170,7 @@

    Starting with Safari on iOS 13 browsers require sites to be served over https and request user permission to access DeviceOrientation events. This component presents a permission dialog for the user to grant or deny access. -The device-orientation-permission-ui component applies only to the <a-scene> element

    +The device-orientation-permission-ui component applies only to the <a-scene> element

    To configure the style of the dialog one can redefine the associated css styles. To change the colors of the allow, deny and ok buttons:

    .a-dialog-allow-button {
      background-color: red;
    }

    .a-dialog-deny-button {
      background-color: blue;
    }

    .a-dialog-ok-button {
       background-color: green;
     }
    diff --git a/docs/1.3.0/components/fog.html b/docs/1.3.0/components/fog.html index 51c3ababe..1112103bf 100644 --- a/docs/1.3.0/components/fog.html +++ b/docs/1.3.0/components/fog.html @@ -1170,7 +1170,7 @@

    The fog component obscures entities in fog given distance from the camera. The -fog component applies only to the <a-scene> element.

    +fog component applies only to the <a-scene> element.

    Example

    <a-scene fog="type: linear; color: #AAA"></a-scene>

    Properties

    Given the fog distribution type, different properties will apply.

    diff --git a/docs/1.3.0/components/gearvr-controls.html b/docs/1.3.0/components/gearvr-controls.html index 4d319c16d..caf5d648d 100644 --- a/docs/1.3.0/components/gearvr-controls.html +++ b/docs/1.3.0/components/gearvr-controls.html @@ -1170,7 +1170,7 @@

    The gearvr-controls component interfaces with the Samsung/Oculus Gear VR controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Gear VR controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

    Example

    <!-- Match Gear VR controller if present, regardless of hand. -->
    <a-entity gearvr-controls></a-entity>

    <!-- Match Gear VR controller if present and for specified hand. -->
    <a-entity gearvr-controls="hand: left"></a-entity>
    <a-entity gearvr-controls="hand: right"></a-entity>
    diff --git a/docs/1.3.0/components/geometry.html b/docs/1.3.0/components/geometry.html index 7d35e05ff..76a8947fe 100644 --- a/docs/1.3.0/components/geometry.html +++ b/docs/1.3.0/components/geometry.html @@ -1173,7 +1173,7 @@

    property defines the general shape. Geometric primitives, in computer graphics, are irreducible basic shapes. A material component is commonly defined to provide an appearance alongside the shape to create a complete mesh.

    -
    +

    Base Properties

    Every geometry type will have these properties:

    @@ -1691,7 +1691,7 @@ 

    AFRAME.registerGeometry('box', {
      schema: {
        depth: {default: 1, min: 0},
        height: {default: 1, min: 0},
        width: {default: 1, min: 0},
        segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
        segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
        segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
      },

      init: function (data) {
        this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
      }
    });

    Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then we need to create the geometry and set on this.geometry through the init lifecycle method.

    When a geometry component sets its primitive property to the custom geometry diff --git a/docs/1.3.0/components/gltf-model.html b/docs/1.3.0/components/gltf-model.html index f7e412a0b..9c80648fa 100644 --- a/docs/1.3.0/components/gltf-model.html +++ b/docs/1.3.0/components/gltf-model.html @@ -1181,9 +1181,9 @@

    NOTE: A-Frame supports glTF 2.0. For models using older versions of the glTF format, use gltf-model-legacy from donmccurdy/aframe-extras.

    -
    + -

    Why use glTF?

    In comparison to the older OBJ format, which supports only +

    Why use glTF?

    In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features. In addition to all of the above, glTF offers:

      diff --git a/docs/1.3.0/components/hand-controls.html b/docs/1.3.0/components/hand-controls.html index 203396b03..5c407ca09 100644 --- a/docs/1.3.0/components/hand-controls.html +++ b/docs/1.3.0/components/hand-controls.html @@ -1170,8 +1170,8 @@

      The hand-controls component provides tracked hands (using a prescribed model) -with animated gestures. hand-controls wraps the vive-controls and -oculus-touch-controls which in turn wrap the tracked-controls +with animated gestures. hand-controls wraps the vive-controls and +oculus-touch-controls which in turn wrap the tracked-controls component. By specifying just hand-controls, we have something that works well with both Vive and Rift. The component gives extra events and handles hand animations and poses.

      diff --git a/docs/1.3.0/components/keyboard-shortcuts.html b/docs/1.3.0/components/keyboard-shortcuts.html index 147cf74de..d7ea80986 100644 --- a/docs/1.3.0/components/keyboard-shortcuts.html +++ b/docs/1.3.0/components/keyboard-shortcuts.html @@ -1170,7 +1170,7 @@

      The keyboard-shortcuts component toggles global keyboard shortcuts. The -keyboard-shortcuts component applies only to the <a-scene> element.

      +keyboard-shortcuts component applies only to the <a-scene> element.

      Example

      <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

      Properties

      diff --git a/docs/1.3.0/components/laser-controls.html b/docs/1.3.0/components/laser-controls.html index 63ad3663e..0a390f4dd 100644 --- a/docs/1.3.0/components/laser-controls.html +++ b/docs/1.3.0/components/laser-controls.html @@ -1182,17 +1182,17 @@

      configures other components, rather than implementing any logic itself. Under the hood, laser-controls sets all of the tracked controller components:

      These controller components get activated if its respective controller is connected and detected via the Gamepad API. Then the model of the actual -controller is used. laser-controls then configures the cursor +controller is used. laser-controls then configures the cursor component for listen to the appropriate events and configures the -raycaster component to draw the laser.

      +raycaster component to draw the laser.

      When the laser intersects with an entity, the length of the line gets truncated to the distance to the intersection point.

      Example

      <a-entity laser-controls="hand: left"></a-entity>
      @@ -1217,11 +1217,11 @@

      Color for the default controller model. -

      Customizing the Raycaster

      Configure the raycaster properties.

      +

      Customizing the Raycaster

      Configure the raycaster properties.

      For example:

      <a-entity laser-controls raycaster="objects: .links; far: 5"></a-entity>
      -

      Customizing the Line

      See Raycaster: Customizing the Line.

      +

      Customizing the Line

      See Raycaster: Customizing the Line.

      For example:

      <a-entity laser-controls raycaster="lineColor: red; lineOpacity: 0.5"></a-entity>
      diff --git a/docs/1.3.0/components/light.html b/docs/1.3.0/components/light.html index a123fcae5..94002e14a 100644 --- a/docs/1.3.0/components/light.html +++ b/docs/1.3.0/components/light.html @@ -1184,7 +1184,7 @@

      To manually disable the defaults, without adding other lights:

      <a-scene light="defaultLightsEnabled: false">
        <!-- ... -->
      </a-scene>
      -
      +

      Properties

      All light types support a few basic properties:

      @@ -1350,7 +1350,7 @@

      Probe

      <

      Configuring Shadows

      A-Frame includes support for realtime shadow rendering. With proper configuration, objects (both moving or stationary) will cast shadows adding depth and realism to a scene. Since shadows come with many properties, it -is very helpful to use the A-Frame Inspector to configure shadows

      +is very helpful to use the A-Frame Inspector to configure shadows

      Light types that support shadows (point, spot, and directional) include additional properties:

      diff --git a/docs/1.3.0/components/line.html b/docs/1.3.0/components/line.html index cb83fe565..7cb535bd5 100644 --- a/docs/1.3.0/components/line.html +++ b/docs/1.3.0/components/line.html @@ -1171,8 +1171,8 @@

      The line component draws a line given a start coordinate and end coordinate using THREE.Line.

      -

      The raycaster component uses the line component for its showLine -property, which is then used by the laser-controls component.

      +

      The raycaster component uses the line component for its showLine +property, which is then used by the laser-controls component.

      Example

      <a-entity line="start: 0 1 0; end: 2 0 -5; color: red"
                line__2="start: -2 4 5; end: 0 4 -3; color: green"></a-entity>

      Note an entity can have multiple lines. The line mesh is set as line or diff --git a/docs/1.3.0/components/look-controls.html b/docs/1.3.0/components/look-controls.html index 5fab99db7..b12028cf6 100644 --- a/docs/1.3.0/components/look-controls.html +++ b/docs/1.3.0/components/look-controls.html @@ -1175,7 +1175,7 @@

    • Rotates the entity when we move the mouse.
    • Rotates the entity when we touch-drag the touchscreen.

    -

    Example

    The look-controls component is usually used alongside the camera +

    Example

    The look-controls component is usually used alongside the camera component.

    <a-entity camera look-controls position="0 1.6 0"></a-entity>
    diff --git a/docs/1.3.0/components/magicleap-controls.html b/docs/1.3.0/components/magicleap-controls.html index 53890e403..331c6f57a 100644 --- a/docs/1.3.0/components/magicleap-controls.html +++ b/docs/1.3.0/components/magicleap-controls.html @@ -1170,7 +1170,7 @@

    The magicleap-controls component interfaces with the Magic Leap controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and Magic Leap controller model/

    Example

    <!-- Match Magic Leap controller if present, regardless of hand. -->
    <a-entity magicleap-controls></a-entity>

    <!-- Match Magic Leap controller if present and for specified hand. -->
    <a-entity magicleap-controls="hand: left"></a-entity>
    <a-entity magicleap-controls="hand: right"></a-entity>
    diff --git a/docs/1.3.0/components/material.html b/docs/1.3.0/components/material.html index 587bc4a5c..2cd320bd4 100644 --- a/docs/1.3.0/components/material.html +++ b/docs/1.3.0/components/material.html @@ -1170,11 +1170,11 @@

    The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

    We can register custom materials to extend the material component to provide a wide range of visual effects.

    -
    +

    Example

    Defining a red material using the default standard material:

    <a-entity geometry="primitive: box" material="color: red"></a-entity>
    @@ -1370,7 +1370,7 @@

    fog. +Whether or not material is affected by fog. true @@ -1537,7 +1537,7 @@

    fog. +Whether or not material is affected by fog. true @@ -1573,7 +1573,7 @@

    Textures

    To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

    +asset management system:

    <a-scene>
      <a-assets>
        <img id="my-texture" src="texture.png">
      </a-assets>

      <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
    </a-scene>

    src can also be an inline URL. Note that we do not get browser caching or diff --git a/docs/1.3.0/components/obj-model.html b/docs/1.3.0/components/obj-model.html index 3185d2c94..914d70701 100644 --- a/docs/1.3.0/components/obj-model.html +++ b/docs/1.3.0/components/obj-model.html @@ -1187,7 +1187,7 @@

    mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

    Events

    @@ -1205,7 +1205,7 @@

    EventsLoading Inline

    We can also load assets by specifying the path directly within url(). Note this is less performant than going through the asset management system.

    <a-entity obj-model="obj: url(/path/to/tree.obj); mtl: url(/path/to/tree.mtl)"></a-entity>
    -

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    +

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    Additional Resources

    We can find and download models on the web to drop into our scenes:

    • Sketchup’s 3D Warehouse - Repository of models.
      • diff --git a/docs/1.3.0/components/oculus-go-controls.html b/docs/1.3.0/components/oculus-go-controls.html index ee20179fc..49eb22433 100644 --- a/docs/1.3.0/components/oculus-go-controls.html +++ b/docs/1.3.0/components/oculus-go-controls.html @@ -1170,7 +1170,7 @@

      The oculus-go-controls component interfaces with the Oculus Go controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Oculus Go controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

      Example

      <!-- Match Oculus Go controller if present, regardless of hand. -->
      <a-entity oculus-go-controls></a-entity>

      <!-- Match Oculus Go controller if present and for specified hand. -->
      <a-entity oculus-go-controls="hand: left"></a-entity>
      <a-entity oculus-go-controls="hand: right"></a-entity>
      diff --git a/docs/1.3.0/components/oculus-touch-controls.html b/docs/1.3.0/components/oculus-touch-controls.html index ed1cfc750..ad08ae6f5 100644 --- a/docs/1.3.0/components/oculus-touch-controls.html +++ b/docs/1.3.0/components/oculus-touch-controls.html @@ -1170,7 +1170,7 @@

      The oculus-touch-controls component interfaces with the Oculus Touch controllers (Rift, Rift S, Oculus Quest 1 and 2). It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.

      Example

      <a-entity oculus-touch-controls="hand: left"></a-entity>
      <a-entity oculus-touch-controls="hand: right"></a-entity>
      diff --git a/docs/1.3.0/components/position.html b/docs/1.3.0/components/position.html index 816b90f84..3ad3fc3e8 100644 --- a/docs/1.3.0/components/position.html +++ b/docs/1.3.0/components/position.html @@ -1208,7 +1208,7 @@

      #child2‘s position would be 2 3 4.

      Updating Position

      For performance and ergonomics, we recommend updating position directly via the -three.js Object3D .position Vector3 versus via +three.js Object3D .position Vector3 versus via .setAttribute.

      This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1222,11 +1222,11 @@

      Getting Position

      To reflect updates done at the three.js level, A-Frame returns the actual Object3D.position vector object when doing .getAttribute('position'). Note modifying the return value will modify the entity itself.

      -

      See also reading position and rotation of the camera.

      +

      See also reading position and rotation of the camera.

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/1.3.0/components/raycaster.html b/docs/1.3.0/components/raycaster.html index 2e7ad9c7e..d81a7f8f4 100644 --- a/docs/1.3.0/components/raycaster.html +++ b/docs/1.3.0/components/raycaster.html @@ -1181,7 +1181,7 @@

      is explicitly defined via the objects selector property described below. Raycasting is an expensive operation, and we should raycast against only targets that need to be interactable at any given time.

      -

      The cursor component and laser-controls components +

      The cursor component and laser-controls components both build on top of the raycaster component.

      Example

      <a-entity id="player" collider-check>
        <a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
      </a-entity>
      <a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
      @@ -1249,7 +1249,7 @@

      showLine -Whether or not to display the raycaster visually with the line component. +Whether or not to display the raycaster visually with the line component. false @@ -1276,7 +1276,7 @@

      Events raycaster-intersection -Emitted on the raycasting entity. Raycaster is intersecting with one or more entities. Event detail will contain els, an array with the newly intersected entities, and intersections, and .getIntersection (el) function which can be used to obtain current intersection data. For access to a complete list of intersections (existing & new), see Members intersectedEls. +Emitted on the raycasting entity. Raycaster is intersecting with one or more entities. Event detail will contain els, an array with the newly intersected entities, and intersections, and .getIntersection (el) function which can be used to obtain current intersection data. For access to a complete list of intersections (existing & new), see Members intersectedEls. raycaster-intersection-cleared diff --git a/docs/1.3.0/components/rotation.html b/docs/1.3.0/components/rotation.html index 371cc4e24..1b7f46566 100644 --- a/docs/1.3.0/components/rotation.html +++ b/docs/1.3.0/components/rotation.html @@ -1213,7 +1213,7 @@

      15 45 30.

      Updating Rotation

      For performance and ergonomics, we recommend updating rotation directly via the three.js Object3D .rotation Euler (in radians) versus -via .setAttribute.

      +via .setAttribute.

      This method is easier because we have access to all the Euler utilities, and faster by skipping .setAttribute overhead and not needing to create an object to set rotation:

      @@ -1223,12 +1223,12 @@

      reading position and rotation of the camera.

      +

      See also reading position and rotation of the camera.

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/1.3.0/components/scale.html b/docs/1.3.0/components/scale.html index 94d8a4de7..02dafbe53 100644 --- a/docs/1.3.0/components/scale.html +++ b/docs/1.3.0/components/scale.html @@ -1212,7 +1212,7 @@

      Relative Scale

      Similar to the rotation and position components, scales are applied in the local coordinate system and multiply in nested entities.

      Updating Scale

      For performance and ergonomics, we recommend updating scale directly via the -three.js Object3D .scale Vector3 versus via +three.js Object3D .scale Vector3 versus via .setAttribute.

      This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1228,8 +1228,8 @@

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/1.3.0/components/shadow.html b/docs/1.3.0/components/shadow.html index e1381af5f..21161872e 100644 --- a/docs/1.3.0/components/shadow.html +++ b/docs/1.3.0/components/shadow.html @@ -1179,7 +1179,7 @@

      Examp

      IMPORTANT: Adding the shadow component alone is not enough to display shadows in your scene. We must have at least one light with castShadow: true enabled. Additionally, the light’s shadow camera (used for depth -projection) usually must be configured correctly. Refer to the light +projection) usually must be configured correctly. Refer to the light component for more information.

      Properties

      diff --git a/docs/1.3.0/components/sound.html b/docs/1.3.0/components/sound.html index 0ff7b2d30..1b36dee8c 100644 --- a/docs/1.3.0/components/sound.html +++ b/docs/1.3.0/components/sound.html @@ -1171,7 +1171,7 @@

      The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the -components-position.

      +components-position.

      NOTE: Playing sound on iOS — in any browser — requires a physical user interaction. This is a browser limitation, and internal A-Frame events (like fusing cursors) do diff --git a/docs/1.3.0/components/stats.html b/docs/1.3.0/components/stats.html index d053b37f3..49bf6ef78 100644 --- a/docs/1.3.0/components/stats.html +++ b/docs/1.3.0/components/stats.html @@ -1170,7 +1170,7 @@

      The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

      +component applies only to the <a-scene> element.

      Example

      <a-scene stats></a-scene>

      Metrics

        diff --git a/docs/1.3.0/components/text.html b/docs/1.3.0/components/text.html index d446f56ac..c31af7661 100644 --- a/docs/1.3.0/components/text.html +++ b/docs/1.3.0/components/text.html @@ -1171,7 +1171,7 @@

        The text component renders signed distance field (SDF) font text.

        Example Image

        -
        +

        Introduction

        Note that rendering text in 3D is hard. In 2D web development, text is the most basic thing because the browser’s renderer and layout engine handle @@ -1419,8 +1419,8 @@

        SizingChange the width.
      • Change the wrapCount (roughly how many characters to fit inside the given width).
      • Change wrapPixels.
        • -
      • Change the scale component.
        • -
      • Position the text closer or farther away.
        • +
      • Change the scale component.
        • +
      • Position the text closer or farther away.

      Sizing

      Text can be wrapped by specifying width in A-Frame units.

      diff --git a/docs/1.3.0/components/tracked-controls.html b/docs/1.3.0/components/tracked-controls.html index 362648a4e..b32707af0 100644 --- a/docs/1.3.0/components/tracked-controls.html +++ b/docs/1.3.0/components/tracked-controls.html @@ -1171,12 +1171,12 @@

      The tracked-controls component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is -abstracted by the hand-controls component as well as the -vive-controls, oculus-touch-controls, -windows-motion-controls, and daydream-controls +abstracted by the hand-controls component as well as the +vive-controls, oculus-touch-controls, +windows-motion-controls, and daydream-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events. For non-6DOF controllers -such as daydream-controls, a primitive arm model is used to emulate +such as daydream-controls, a primitive arm model is used to emulate positional data.

      tracked-controls sets two components that handles different Web API versions for VR:

        diff --git a/docs/1.3.0/components/visible.html b/docs/1.3.0/components/visible.html index 0904c4f2e..c9834e594 100644 --- a/docs/1.3.0/components/visible.html +++ b/docs/1.3.0/components/visible.html @@ -1193,7 +1193,7 @@

        Value

        < The entity will not be rendered nor visible. The entity will still exist in the scene. -

        Updating Visibility

        It is slightly faster to update visibility at the three.js level versus via +

        Updating Visibility

        It is slightly faster to update visibility at the three.js level versus via .setAttribute.

        // With three.js
        el.object3D.visible = false;

        // With .setAttribute.
        el.setAttribute('visible', false);
        diff --git a/docs/1.3.0/components/vive-controls.html b/docs/1.3.0/components/vive-controls.html index 91f3b7448..d8de160e3 100644 --- a/docs/1.3.0/components/vive-controls.html +++ b/docs/1.3.0/components/vive-controls.html @@ -1170,7 +1170,7 @@

        The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

        Example

        <a-entity vive-controls="hand: left"></a-entity>
        <a-entity vive-controls="hand: right"></a-entity>
        diff --git a/docs/1.3.0/components/vive-focus-controls.html b/docs/1.3.0/components/vive-focus-controls.html index fbe7a02e9..b8f30bbea 100644 --- a/docs/1.3.0/components/vive-focus-controls.html +++ b/docs/1.3.0/components/vive-focus-controls.html @@ -1170,7 +1170,7 @@

        The vive-focus-controls component interfaces with the Vive Focus controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Vive Focus controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

        Example

        <!-- Match Vive Focus controller if present, regardless of hand. -->
        <a-entity vive-focus-controls></a-entity>

        <!-- Match Vive Focus controller if present and for specified hand. -->
        <a-entity vive-focus-controls="hand: left"></a-entity>
        <a-entity vive-focus-controls="hand: right"></a-entity>
        diff --git a/docs/1.3.0/components/vr-mode-ui.html b/docs/1.3.0/components/vr-mode-ui.html index c705df452..090f03fc8 100644 --- a/docs/1.3.0/components/vr-mode-ui.html +++ b/docs/1.3.0/components/vr-mode-ui.html @@ -1171,7 +1171,7 @@

        The vr-mode-ui component allows disabling of UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only -to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

        +to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

        Example

        <a-scene vr-mode-ui="enabled: false"></a-scene>

        Properties

        diff --git a/docs/1.3.0/components/wasd-controls.html b/docs/1.3.0/components/wasd-controls.html index 8c9da1e43..fa273b36a 100644 --- a/docs/1.3.0/components/wasd-controls.html +++ b/docs/1.3.0/components/wasd-controls.html @@ -1170,7 +1170,7 @@

        The wasd-controls component controls an entity with the WASD or arrow keyboard -keys. The wasd-controls component is commonly attached to an entity with the camera +keys. The wasd-controls component is commonly attached to an entity with the camera component.

        Example

        <a-entity camera look-controls wasd-controls="acceleration:100" position="0 1.6 0"></a-entity>
        diff --git a/docs/1.3.0/components/windows-motion-controls.html b/docs/1.3.0/components/windows-motion-controls.html index be5efc820..7ba2322df 100644 --- a/docs/1.3.0/components/windows-motion-controls.html +++ b/docs/1.3.0/components/windows-motion-controls.html @@ -1171,7 +1171,7 @@

        The windows-motion-controls component 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 +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.)

        Example

        <a-entity windows-motion-controls="hand: left"></a-entity>
        <a-entity windows-motion-controls="hand: right"></a-entity>
        diff --git a/docs/1.3.0/core/asset-management-system.html b/docs/1.3.0/core/asset-management-system.html index 5b02ad226..b0d4c5fc8 100644 --- a/docs/1.3.0/core/asset-management-system.html +++ b/docs/1.3.0/core/asset-management-system.html @@ -1187,7 +1187,7 @@

      The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

      -
      +

      Example

      We can define our assets in <a-assets> and point to those assets from our entities using selectors:

      diff --git a/docs/1.3.0/core/component.html b/docs/1.3.0/core/component.html index 73c425d33..cc5fc9c41 100644 --- a/docs/1.3.0/core/component.html +++ b/docs/1.3.0/core/component.html @@ -1169,7 +1169,7 @@

      -

      In the entity-component-system pattern, a component is a reusable and +

      In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

      In A-Frame, components modify entities which are 3D objects in the scene. We @@ -1183,7 +1183,7 @@

      Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

      -
      +

      Component HTML Form

      A component holds a bucket of data in the form of one or more component properties. Components use this data to modify entities. Consider an engine @@ -1334,7 +1334,7 @@

      Definition Lifecycle Handler Methods

      With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the shape of the data, the lifecycle handler methods use the data to modify the entity. The handlers will usually interact with the -Entity API.

      +Entity API.

      methodsimage Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

      Overview of Methods

      @@ -1387,15 +1387,15 @@

      setAttribute. +

      - + - + @@ -1432,7 +1432,7 @@

      diffing the current +

      Granular modifications to the entity can be done by diffing the current dataset (this.data) with the previous dataset before the update (oldData).

      A-Frame calls .update() both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The @@ -1440,7 +1440,7 @@

      visible component’s update sets the visibility of +

      For example, the visible component’s update sets the visibility of the entity.

      Parsed component properties computed from the schema default values, mixins, and the entity’s attributes.
      Important: Do not modify the data attribute directly. It is updated internally by A-Frame. To modify a component, use setAttribute.
      this.elReference to the entity as an HTML element.Reference to the entity as an HTML element.
      this.el.sceneElReference to the scene as an HTML element.Reference to the scene as an HTML element.
      this.id
      AFRAME.registerComponent('visible', {
        /**
         * this.el is the entity element.
         * this.el.object3D is the three.js object of the entity.
         * this.data is the component's property or properties.
         */
        update: function (oldData) {
          this.el.object3D.visible = this.data;
        }
        // ...
      });
      @@ -1455,7 +1455,7 @@

      Remove, undo, or clean up all of the component’s modifications to the entity.
    • Detach event listeners.

    -

    For example, when the light component is removed, the light component +

    For example, when the light component is removed, the light component will remove the light object that it had previously set on the entity, thus removing it from the scene.

    AFRAME.registerComponent('light', {
      // ...
      remove: function () {
        this.el.removeObject3D('light');
      }
      // ...
    });
    @@ -1477,7 +1477,7 @@

    time) and the time difference in milliseconds since the last frame (timeDelta). These can be used for interpolation or to only run parts of the tick handler on a set interval.

    -

    For example, the tracked controls component will progress +

    For example, the tracked controls component will progress the controller’s animations, update the controller’s position and rotation, and check for button presses.

    AFRAME.registerComponent('tracked-controls', {
      // ...
      tick: function (time, timeDelta) {
        this.updateMeshAnimation();
        this.updatePose();
        this.updateButtons();
      }
      // ...
    });
    @@ -1496,7 +1496,7 @@

    .
  • Remove event listeners.
  • Remove any chances of dynamic behavior.
    • -

    For example, the sound component will pause the sound and remove an +

    For example, the sound component will pause the sound and remove an event listener that would have played a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      pause: function () {
        this.pauseSound();
        this.removeEventListener();
      }
      // ...
    });
    @@ -1511,7 +1511,7 @@

    .pla
    • Add event listeners.
    -

    For example, the sound component will play the sound and update the +

    For example, the sound component will play the sound and update the event listener that would play a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      play: function () {
        if (this.data.autoplay) { this.playSound(); }
        this.updateEventListener();
      }
      // ...
    });
    @@ -1521,7 +1521,7 @@

  • Dynamically update or extend the schema, usually depending on the value of a property.
    • -

    For example, the geometry component checks if the primitive +

    For example, the geometry component checks if the primitive property changed to determine whether to update the schema for a different type of geometry:

    AFRAME.registerComponent('geometry', {
      // ...
      updateSchema: (newData) {
        if (newData.primitive !== this.data.primitive) {
          this.extendSchema(GEOMETRIES[newData.primitive].schema);
        }
      }
      // ...
    });
    @@ -1576,7 +1576,7 @@ 

    document.querySelector('[geometry]').components.geometry.flushToDOM();
    -

    Read more about component-to-DOM serialization.

    +

    Read more about component-to-DOM serialization.

    Accessing a Component’s Members and Methods

    A component’s members and methods can be accessed through the entity from the .components object. Look up the component from the entity’s map of components, and we’ll have access to the component’s internals. Consider this diff --git a/docs/1.3.0/core/entity.html b/docs/1.3.0/core/entity.html index 66a6e6943..95a343ebd 100644 --- a/docs/1.3.0/core/entity.html +++ b/docs/1.3.0/core/entity.html @@ -1170,23 +1170,23 @@

    A-Frame represents an entity via the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

    -

    In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

    -
    +

    In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

    +

    Example

    Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

    <a-entity>

    We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

    +give it shape and appearance, we can attach the geometry and +material components:

    <a-entity geometry="primitive: box" material="color: red">
    -

    Or to make it emit light, we can further attach the light component:

    +

    Or to make it emit light, we can further attach the light component:

    <a-entity geometry="primitive: box" material="color: red"
              light="type: point; intensity: 2.0">

    Retrieving an Entity

    We can simply retrieve an entity using DOM APIs.

    @@ -1221,7 +1221,7 @@

    object3DMap

    An entity’s object3DMap is an object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that components have set.

    -

    For an entity with a geometry and light components +

    For an entity with a geometry and light components attached, object3DMap might look like:

    {
      light: <THREE.Light Object>,
      mesh: <THREE.Mesh Object>
    }
    @@ -1236,7 +1236,7 @@

    Metho

    destroy ()

    Clean up memory related to the entity such as clearing all components and their data.

    emit (name, detail, bubbles)

    emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

    +trigger an animation:

    // <a-entity animation="property: rotation; to: 0 360 0; startEvents: rotate">
    entity.emit('rotate');

    We can also pass event detail or data as the second argument:

    @@ -1247,7 +1247,7 @@ 

    entity.emit('sink', null, false);

    flushToDOM (recursive)

    flushToDOM will manually serialize an entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

    +Read more about component-to-DOM serialization.

    getAttribute (componentName)

    getAttribute retrieves parsed component data (including mixins and defaults).

    // <a-entity geometry="primitive: box; width: 3">

    entity.getAttribute('geometry');
    // >> {primitive: "box", depth: 2, height: 2, width: 3, ...}

    entity.getAttribute('geometry').primitive;
    // >> "box"

    entity.getAttribute('geometry').height;
    // >> 2

    entity.getAttribute('position');
    // >> {x: 0, y: 0, z: 0}
    @@ -1274,20 +1274,20 @@

    pa entity will call pause() on its child entities when we pause an entity.

    // <a-entity id="spinning-jumping-ball">
    entity.pause();
    -

    For example, the look-controls component on +

    For example, the look-controls component on pause will remove event handlers that listen for input.

    play ()

    play() will start any dynamic behavior as defined by animations and components. This is automatically called when the DOM attaches an entity. When an entity play(), the entity calls play() on its child entities.

    entity.pause();
    entity.play();
    -

    For example, the sound component on play will begin playing the sound.

    +

    For example, the sound component on play will begin playing the sound.

    setAttribute (componentName, value, [propertyValue | clobber])

    If componentName is not the name of a registered component or the component is a single-property component, setAttribute behaves as it normally would:

    entity.setAttribute('visible', false);

    Though if componentName is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    entity.setAttribute('position', { x: 1, y: 2, z: 3 });
    @@ -1355,7 +1355,7 @@

    Events componentchanged -One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. +One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. componentinitialized diff --git a/docs/1.3.0/core/globals.html b/docs/1.3.0/core/globals.html index c07912e6c..ab9d077c3 100644 --- a/docs/1.3.0/core/globals.html +++ b/docs/1.3.0/core/globals.html @@ -1181,11 +1181,11 @@

    AComponent -Component prototype. +Component prototype. AEntity -Entity prototype. +Entity prototype. ANode @@ -1193,7 +1193,7 @@

    AScene -Scene prototype. +Scene prototype. components @@ -1209,7 +1209,7 @@

    registerComponent -Function to register a component. +Function to register a component. registerElement @@ -1217,15 +1217,15 @@

    registerGeometry -Function to register a geometry. +Function to register a geometry. registerPrimitive -Function to register a primitive. +Function to register a primitive. registerShader -Function to register a material or shader. +Function to register a material or shader. schema @@ -1245,7 +1245,7 @@

    utils -A-Frame utility modules. +A-Frame utility modules. version diff --git a/docs/1.3.0/core/mixins.html b/docs/1.3.0/core/mixins.html index f846d9026..45aa5524c 100644 --- a/docs/1.3.0/core/mixins.html +++ b/docs/1.3.0/core/mixins.html @@ -1171,7 +1171,7 @@

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    <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-mixin>
      </a-assets>

      <a-entity mixin="red cube"></a-entity>
      <a-entity mixin="blue cube"></a-entity>
    </a-scene>
    @@ -1181,7 +1181,7 @@

    the entities above expand to:

    <a-entity material="color: red" geometry="primitive: box"></a-entity>
    <a-entity material="color: blue" geometry="primitive: box"></a-entity>
    -
    +

    Merging Component Properties

    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="height: 10"></a-mixin>
        <a-mixin id="wide" geometry="width: 10"></a-mixin>
      </a-assets>

      <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
    </a-scene>
    diff --git a/docs/1.3.0/core/scene.html b/docs/1.3.0/core/scene.html index 6f9258a9e..4e4ad7eca 100644 --- a/docs/1.3.0/core/scene.html +++ b/docs/1.3.0/core/scene.html @@ -1170,8 +1170,8 @@

    A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

    -

    The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

    +

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    @@ -1181,9 +1181,9 @@

  • Default camera and lights
  • Set up webvr-polyfill, VREffect
  • Add UI to Enter VR that calls WebVR API
    • -
  • Configure WebXR devices through the webxr system
    • +
  • Configure WebXR devices through the webxr system
    • -
    +

    Example

    <a-scene>
      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <a-box src="#texture"></a-box>
    </a-scene>
    @@ -1228,7 +1228,7 @@

    systems -Instantiated systems. +Instantiated systems. time @@ -1292,12 +1292,12 @@

    embedded - Remove fullscreen styles from the canvas.

    • -
  • fog - Add fog.
    • -
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • -
  • inspector - Inject the A-Frame Inspector.
    • -
  • stats - Toggle performance stats.
    • -
  • vr-mode-ui - Toggle UI for entering and exiting VR.
    • +
  • embedded - Remove fullscreen styles from the canvas.
    • +
  • fog - Add fog.
    • +
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • +
  • inspector - Inject the A-Frame Inspector.
    • +
  • stats - Toggle performance stats.
    • +
  • vr-mode-ui - Toggle UI for entering and exiting VR.

    • Running Content Scripts on the Scene

    The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

    AFRAME.registerComponent('do-something', {
      init: function () {
        var sceneEl = this.el;
      }
    });
    diff --git a/docs/1.3.0/core/systems.html b/docs/1.3.0/core/systems.html index 061d0e691..4580b47fa 100644 --- a/docs/1.3.0/core/systems.html +++ b/docs/1.3.0/core/systems.html @@ -1169,16 +1169,16 @@

    -

    A system, of the entity-component-system pattern, provides global scope, +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -
    + -

    Registering a System

    A system is registered similarly to a component.

    +

    Registering a System

    A system is registered similarly to a component.

    If the system name matches a component name, then the component will have a reference to the system as this.system:

    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);
      }
    });
    @@ -1200,7 +1200,7 @@

    schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data.

    Methods

    A system, like a component, defines lifecycle handlers. It can also define diff --git a/docs/1.3.0/core/utils.html b/docs/1.3.0/core/utils.html index 97115f482..f547cabc6 100644 --- a/docs/1.3.0/core/utils.html +++ b/docs/1.3.0/core/utils.html @@ -1170,7 +1170,7 @@

    A-Frame’s utility modules are public through AFRAME.utils.

    -
    +

    AFRAME.utils.coordinates

    Module for handling vec3 and vec4 types.

    .isCoordinates (value)

    Tests whether a string is a vec3 or vec4.

    @@ -1182,7 +1182,7 @@

    .stringify (data)

    Stringifies an {x, y, z} vec3 object to an “x y z” string.Or Stringifies an {x, y, z, w} vec4 object to an “x y z w” string.

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
    // >> "1 2 -3"

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3, w:4})
    // >> "1 2 -3 4"
    -

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for +

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for return 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.

    @@ -1190,7 +1190,7 @@

    This is useful for components that need a way to reference a property of a multi-property component.

    -

    .setComponentProperty (entity, componentName, value, delimiter)

    Performs like Entity.setAttribute, but with support for setting an +

    .setComponentProperty (entity, componentName, value, delimiter)

    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.

    diff --git a/docs/1.3.0/guides/building-a-360-image-gallery.html b/docs/1.3.0/guides/building-a-360-image-gallery.html index f4322f4bf..362df6645 100644 --- a/docs/1.3.0/guides/building-a-360-image-gallery.html +++ b/docs/1.3.0/guides/building-a-360-image-gallery.html @@ -1173,7 +1173,7 @@

    Let’s build an interactive gaze-based 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

    -

    This guide will practice three concepts related to entity-component:

    +

    This guide will practice three concepts related to entity-component:

    1. Using the standard components that come with A-Frame.
    2. Using community components from the ecosystem.
      3. @@ -1181,18 +1181,18 @@

    Not to say 360° images are at all a focus use case of A-Frame, but it makes for an easy example that has a lot of demand as an early use case on the Web.

    -
    +

    Skeleton

    This is the starting point for our scene. We can also remix the Glitch.

    <a-scene>
      <a-assets>
        <audio id="click-sound" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>

        <!-- Images. -->
        <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
        <img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
        <img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
        <img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
        <img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Link template we will build. -->
      <a-entity class="link"></a-entity>

      <!-- Camera + Cursor. -->
      <a-camera>
        <a-cursor
          id="cursor"
          animation__click="property: scale; from: 0.1 0.1 0.1; to: 1 1 1; easing: easeInCubic; dur: 150; startEvents: click"
          animation__clickreset="property: scale; to: 0.1 0.1 0.1; dur: 1; startEvents: animationcomplete__click"
          animation__fusing="property: scale; from: 1 1 1; to: 0.1 0.1 0.1; easing: easeInCubic; dur: 150; startEvents: fusing"></a-cursor>
      </a-camera>
    </a-scene>

    We have predefined:

    Using Standard Components

    Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure @@ -1202,20 +1202,20 @@ 

    <a-entity class="link"></a-entity>
    -

    To give our entity shape, we can attach the geometry component, +

    To give our entity shape, we can attach the geometry component, configured to a plane shape. We specify the component data using a syntax that resembles that of inline CSS styles:

    <a-entity
      class="link"
      geometry="primitive: plane; height: 1; width: 1"></a-entity>
    -

    Then to give our entity appearance, we can attach the material +

    Then to give our entity appearance, we can attach the material component. We set shader to flat so the image isn’t affected negatively by lighting. And we set src to #cubes-thumb, a selector to one -of the images preloaded in the Asset Management System. Alternatively, +of the images preloaded in the Asset Management System. Alternatively, we could pass a URL for the image:

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: #cubes-thumb"></a-entity>

    We can continue adding features to our entity by plugging in more components. -Let’s attach one more standard component, the sound component. We want +Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1291,15 +1291,15 @@

    Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

    Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We can specify event names either the _event property or via the __<id> as shown below. The rest of the properties define the setAttribute calls. Notice that the event-set component can have -multiple instances:

    +multiple instances:

    <script id="plane" type="text/html">
      <a-entity class="link"
        geometry="primitive: plane; height: 1; width: 1"
        material="shader: flat; src: ${thumb}"
        sound="on: click; src: #click-sound"
        event-set__mouseenter="scale: 1.2 1.2 1"
        event-set__mouseleave="scale: 1 1 1"
        event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"></a-entity>
    </script>

    Remember to add data-src attributes to the link entities to load the full image on click:

    @@ -1331,7 +1331,7 @@

    Writing a Component and +application-specific components. That is covered in Writing a Component and hopefully in later guides.

    Try it out!

    diff --git a/docs/1.3.0/guides/building-a-basic-scene.html b/docs/1.3.0/guides/building-a-basic-scene.html index bb37cd8c1..a4ef1f8ca 100644 --- a/docs/1.3.0/guides/building-a-basic-scene.html +++ b/docs/1.3.0/guides/building-a-basic-scene.html @@ -1182,7 +1182,7 @@

  • Add text

    • Remix the Basic Guide example on Glitch.

    -
    +

    Starting with HTML

    We start out with a minimal HTML structure:

    <html>
      <head>
        <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
        </a-scene>
      </body>
    </html>
    @@ -1191,7 +1191,7 @@

    before <a-scene> because A-Frame registers custom HTML elements which must be defined before <a-scene> is attached or else <a-scene> will do nothing.

    -

    Next, we include <a-scene> in the <body>. <a-scene> will contain every +

    Next, we include <a-scene> in the <body>. <a-scene> will contain every entity in our scene. <a-scene> handles all of the setup that is required for 3D: setting up WebGL, the canvas, camera, lights, renderer, render loop as well as out of the box WebVR support on platforms such as HTC Vive, Oculus Rift, @@ -1202,7 +1202,7 @@

    <a-box>‘s documentation for +

    Here we define the color <a-box>, see <a-box>‘s documentation for the more attributes (e.g., width, height, depth).

    boximage Image by Ruben Mueller from vrjump.de

    @@ -1210,13 +1210,13 @@

    <a-entity> with the geometry and -material components:

    +underneath <a-box> is <a-entity> with the geometry and +material components:

    <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>
    -

    However, because the default camera and the box are positioned at the default +

    However, because the default camera and the box are positioned at the default position at the 0 0 0 origin, we won’t be able to see the box unless we move -it. We can do this by using the position component to transform the +it. We can do this by using the position component to transform the box in 3D space.

    Transforming an Entity in 3D

    Let’s first go over 3D space. A-Frame uses a right-handed coordinate system. With the default camera direction: positive X-axis extends right, positive @@ -1235,7 +1235,7 @@

    To translate, rotate, and scale the box, we can change the -position, rotation, and scale components. +position, rotation, and scale components. Let’s first apply the rotation and scale components:

    <a-scene>
      <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
    @@ -1292,7 +1292,7 @@ 

    <a-scene>
      <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <!-- Out of the box environment! -->
      <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
    </a-scene>

    Applying an Image Texture

    -

    Make sure you’re serving your HTML using a local server +

    Make sure you’re serving your HTML using a local server for textures to load properly.

    We can apply an image texture to the box with an image, video, or <canvas> @@ -1304,7 +1304,7 @@

    -

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The +

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The asset management system makes it easier for the browser to cache assets (e.g., images, videos, models) and A-Frame will make sure all of the assets are fetched before rendering.

    @@ -1324,7 +1324,7 @@

    Creating a Custom Environment (Optional)

    Previously we had the environment component generate the environment. Though it’s good to know a bit on creating a basic environment for learning purposes.

    -

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. +

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. <a-sky>, which is a material applied to the inside of a large sphere, can be a flat color, a 360° image, or a 360° video. For example, a dark gray background would be:

    @@ -1334,7 +1334,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>
    </a-scene>
    -

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are +

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are oriented parallel to the XY axis. To make it parallel to the ground, we need to orient it along the XZ axis. We can do so by rotating the plane negative 90° on the X-axis.

    @@ -1352,7 +1352,7 @@ 

    <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
      repeat="10 10"></a-plane>
    -

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default +

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default if we don’t specify any lights, A-Frame adds an ambient light and a directional light. If A-Frame didn’t add lights for us, the scene would be black. Once we add lights of our own, however, the default lighting setup is removed and @@ -1365,7 +1365,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>

      <a-light type="ambient" color="#445451"></a-light>
      <a-light type="point" intensity="2" position="2 4 4"></a-light>
    </a-scene>
    -

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation +

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation system. Animations interpolate or tween a value over time. We can set the animation component on the entity. Let’s have the box hover up and down to add some motion to the scene.

    @@ -1373,7 +1373,7 @@

    entity’s object3D’s position’s Y axis. +
  • Animate the entity’s object3D’s position’s Y axis.
  • Animate to 2.2 which is 20 centimeters higher.
  • Alternate the dir (direction) of the animation on each repeated cycle of the animation so it goes back and forth.
  • Last for 2000 millisecond dur (duration) on each cycle.
    • @@ -1384,19 +1384,19 @@

    Given that many developers currently do not have proper VR hardware with controllers, we’ll focus this section on using basic mobile and desktop inputs -with the built-in cursor component. The cursor component by default provides +with the built-in cursor component. The cursor component by default provides the ability to “click” on entities by staring or gazing at them on mobile, or on desktop, looking at an entity and click the mouse. But know that the cursor component is just one way to add interactions, things open up if we have access to actual controllers.

    -

    To have a visible cursor fixed to the camera, we place the cursor as a child +

    To have a visible cursor fixed to the camera, we place the cursor as a child of the camera as explained above in Parent and Child Transforms.

    Since we didn’t specifically define a camera, A-Frame included a default camera for us. But since we need to add a cursor as a child of the camera, we will -need to now define <a-camera> containing <a-cursor>:

    +need to now define <a-camera> containing <a-cursor>:

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"
             animation="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true"></a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
    -

    If we check the documentation of the cursor component that +

    If we check the documentation of the cursor component that <a-cursor> wraps, we see that it emits hover events such as mouseenter, mouseleave as well as click.

    Event Listener Component (Intermediate)

    One way to manually handle the cursor events is to add an event listener with @@ -1404,7 +1404,7 @@

    Animating on Events below.

    In JavaScript, we grab the box with querySelector, use -addEventListener, and then setAttribute +addEventListener, and then setAttribute to make the box grow its scale when its hovered over. Note that A-Frame adds features to setAttribute to work with multi-property components. We can pass a full {x, y, z} object as the second argument.

    @@ -1441,7 +1441,7 @@ 

    <a-scene>
      <!-- ... -->
      <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
        position="-3 1 -4"></a-sound>
      <!-- ... -->
    </a-scene>
    -

    Adding Text

    A-Frame comes with a text component. There are several ways to render +

    Adding Text

    A-Frame comes with a text component. There are several ways to render text, each with their own advantages and disadvantages. A-Frame comes with an SDF text implementation using three-bmfont-text that is relatively sharp and performant:

    diff --git a/docs/1.3.0/guides/building-a-minecraft-demo.html b/docs/1.3.0/guides/building-a-minecraft-demo.html index d2fb8e26c..0ad74e417 100644 --- a/docs/1.3.0/guides/building-a-minecraft-demo.html +++ b/docs/1.3.0/guides/building-a-minecraft-demo.html @@ -1175,7 +1175,7 @@

    Let’s build a basic Minecraft (voxel builder) demo that targets room scale VR with controllers (e.g., Vive, Rift). The example will be minimally usable on mobile and desktop.

    -
    +

    Example Skeleton

    We’ll start off with this skeleton HTML:

    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>

    <body>
      <a-scene>
      </a-scene>
    </body>
    diff --git a/docs/1.3.0/introduction/best-practices.html b/docs/1.3.0/introduction/best-practices.html index 65788c19c..205bf1069 100644 --- a/docs/1.3.0/introduction/best-practices.html +++ b/docs/1.3.0/introduction/best-practices.html @@ -1169,7 +1169,7 @@

    -

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and +

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and structure application code within purely A-Frame components for reusability, modularity, composability, decoupling, encapsulation, declarativeness, and testability.

    @@ -1186,8 +1186,8 @@

    recommended hardware specifications. -
  • Use the stats component to keep an eye on various metrics (FPS, +
  • Use recommended hardware specifications.
    • +
  • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities). We want to maximize FPS and minimize everything else.
  • Limit draw calls as much as possible. Each geometry, object, model without @@ -1197,7 +1197,7 @@

    asset management system to browser cache and +
  • Make use of the asset management system to browser cache and preload assets.
  • If using models, look to bake your lights into textures rather than relying on real-time lighting and shadows.
    • @@ -1214,16 +1214,16 @@

    background component instead of a-sky to define a +
  • Use the background component instead of a-sky to define a solid color as the scene background. This prevents the creation of unnecessary geometry.
  • Update position, rotation, scale, and visible using at the three.js level (el.object3D.position, el.object3D.rotation, el.object3D.scale, el.object3D.visible) to avoid overhead on .setAttribute.
  • If you need to create, remove and re-create many entities of the same type, -use the pool component to pre-generate and reuse entities. This +use the pool component to pre-generate and reuse entities. This avoids the cost of creating entities on the fly and reduces garbage collection.
    • -
  • When using the animation component, animate values directly +
  • When using the animation component, animate values directly which will skip .setAttribute and animate JS values directly. For example, instead of material.opacity, animate components.material.material.opacity.
    • diff --git a/docs/1.3.0/introduction/developing-with-threejs.html b/docs/1.3.0/introduction/developing-with-threejs.html index 7e5960df6..533012cb2 100644 --- a/docs/1.3.0/introduction/developing-with-threejs.html +++ b/docs/1.3.0/introduction/developing-with-threejs.html @@ -1199,7 +1199,7 @@

    And every A-Frame entity also has a reference to <a-scene> via .sceneEl:

    document.querySelector('a-entity').sceneEl.object3D;  // THREE.Scene
    -

    From a component, we access the scene through its entity +

    From a component, we access the scene through its entity (i.e., this.el):

    AFRAME.registerComponent('foo', {
      init: function () {
        var scene = this.el.sceneEl.object3D;  // THREE.Scene
      }
    });
    diff --git a/docs/1.3.0/introduction/entity-component-system.html b/docs/1.3.0/introduction/entity-component-system.html index c1dc27b87..91286ef05 100644 --- a/docs/1.3.0/introduction/entity-component-system.html +++ b/docs/1.3.0/introduction/entity-component-system.html @@ -1198,20 +1198,20 @@

    A well-known game engine implementing ECS is Unity. Although there are pain points in cross-entity communication, we’ll see how A-Frame, the DOM, and declarative HTML really make ECS shine.

    -
    +

    Concept

    ECS Minecraft

    A basic definition of ECS involves:

    We’ll go over GUI tools built on top of A-Frame that can be used without code. And touch on other tools that can ease development across multiple machines.

    -
    +

    A-Frame Inspector

    The A-Frame Inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:

    diff --git a/docs/1.3.0/introduction/vr-headsets-and-webxr-browsers.html b/docs/1.3.0/introduction/vr-headsets-and-webxr-browsers.html index c5d3cc051..2f68f8e17 100644 --- a/docs/1.3.0/introduction/vr-headsets-and-webxr-browsers.html +++ b/docs/1.3.0/introduction/vr-headsets-and-webxr-browsers.html @@ -1169,7 +1169,7 @@

    -
    +

    What is Virtual Reality?

    Virtual reality (VR) is a technology that uses head-mounted headsets with displays to generate the realistic images, sounds, and other sensations to put diff --git a/docs/1.3.0/introduction/writing-a-component.html b/docs/1.3.0/introduction/writing-a-component.html index 94980af16..4bc7212eb 100644 --- a/docs/1.3.0/introduction/writing-a-component.html +++ b/docs/1.3.0/introduction/writing-a-component.html @@ -1169,7 +1169,7 @@

    -

    Components of A-Frame’s entity-component framework are JavaScript +

    Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, @@ -1177,7 +1177,7 @@

    components.

    vehicleimage Image by Ruben Mueller from vrjump.de

    -

    This guide will take it pretty slow. We recommend skimming over the Component +

    This guide will take it pretty slow. We recommend skimming over the Component API documentation before going through this guide as that documentation will be more concise. Note that components should be defined before <a-scene> like:

    @@ -1191,12 +1191,12 @@

    Example: hello-world Component

    Let’s start with the most basic component to get a general idea. This component will log a simple message once when the component’s entity is attached using -the .init() handler.

    +the .init() handler.

    Registering the Component with AFRAME.registerComponent

    Components are registered with AFRAME.registerComponent(). We pass the name of the component, which will be used as the HTML attribute name in the component’s representation in the DOM. Then we pass the component definition which is a JavaScript object of methods and properties. Within the definition, we can -define lifecycle handler methods. One of which is .init(), which +define lifecycle handler methods. One of which is .init(), which is called once when the component is first plugged into its entity.

    In the example below, we just have our .init() handler log a simple message.

    AFRAME.registerComponent('hello-world', {
      init: function () {
        console.log('Hello, World!');
      }
    });
    @@ -1250,7 +1250,7 @@

    Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

    To demonstrate this, we’ll have our log component only log whenever its -entity emits an event. First, we’ll add an event property type that +entity emits an event. First, we’ll add an event property type that specifies which event the component should listen on.

    // ...
    schema: {
      event: {type: 'string', default: ''},
      message: {type: 'string', default: 'Hello, World!'},
    },
    // ...
    @@ -1259,7 +1259,7 @@

    add an event listener that will +

    What we want to do is add an event listener that will listen to the event before logging a message. If the event property type is not specified, we’ll just log the message:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      update: function () {
        var data = this.data;  // Component property values.
        var el = this.el;  // Reference to the component's entity.

        if (data.event) {
          // This will log the `message` when the entity emits the `event`.
          el.addEventListener(data.event, function () {
            console.log(data.message);
          });
        } else {
          // `event` not specified, just log the message.
          console.log(data.message);
        }
      }
    });
    @@ -1268,7 +1268,7 @@

    , we need a reference to the function. So +

    But to remove an event listener, we need a reference to the function. So let’s first store the function on this.eventHandlerFn whenever we attach an event listener. When we attach properties to the component via this, they’ll be available throughout all the other lifecycle handlers.

    @@ -1283,13 +1283,13 @@ 

    <a-scene>
      <a-entity log="event: anEvent; message: Hello, Metaverse!"></a-entity>
    </a-scene>
    -

    Let’s have our entity emit the event to test it out:

    +

    Let’s have our entity emit the event to test it out:

    var el = document.querySelector('a-entity');
    el.emit('anEvent');
    // >> "Hello, Metaverse!"

    Now let’s update our event to test the .update() handler:

    var el = document.querySelector('a-entity');
    el.setAttribute('log', {event: 'anotherEvent', message: 'Hello, new event!'});
    el.emit('anotherEvent');
    // >> "Hello, new event!"
    -

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity +

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity (i.e., .removeAttribute('log')). We can implement the .remove() handler which is called when the component is removed. For the log component, we remove any event listeners the component attached to the entity:

    @@ -1302,7 +1302,7 @@ 

    var el = document.querySelector('a-entity');
    el.removeAttribute('log');
    el.emit('anEvent');
    // >> Nothing should be logged...

    Allowing Multiple Instances of a Component

    Let’s allow having multiple log components attached to the same entity. To do -so, we enable multiple instancing with the .multiple flag. Let’s +so, we enable multiple instancing with the .multiple flag. Let’s set that to true:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      multiple: true,

      // ...
    });
    @@ -1319,13 +1319,13 @@

    Example: box Component

    For a less trivial example, let’s find out how we can add 3D objects and affect -the scene graph by writing a component that uses three.js. To get +the scene graph by writing a component that uses three.js. To get the idea, we’ll just make a basic box component that creates a box mesh with both geometry and material.

    boximage Image by Ruben Mueller from vrjump.de

    Note: this is just a 3D equivalent of writing a Hello, World! component. -A-Frame provides geometry and material components if we +A-Frame provides geometry and material components if we actually wanted to make a box in practice.

    Schema and API

    Let’s start with the schema. The schema defines the API of your component. We’ll make the width, height, depth, and color configurable through the @@ -1342,7 +1342,7 @@

    THREE.BoxBufferGeometry, THREE.MeshStandardMaterial, and finally a THREE.Mesh. Then we set the mesh on our entity to add the mesh to the -three.js scene graph using .setObject3D(name, object):

    +three.js scene graph using .setObject3D(name, object):

    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.BoxBufferGeometry(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);
      }
    });

    Now let’s handle updates. If the geometry-related properties (i.e., width, diff --git a/docs/1.3.0/primitives/a-circle.html b/docs/1.3.0/primitives/a-circle.html index 1829190e7..1d9c6baee 100644 --- a/docs/1.3.0/primitives/a-circle.html +++ b/docs/1.3.0/primitives/a-circle.html @@ -1169,7 +1169,7 @@

    -

    The circle primitive creates circles surfaces using the geometry +

    The circle primitive creates circles surfaces using the geometry component with the type set to circle.

    Example

    <a-scene>
      <a-assets>
        <img id="platform" src="platform.jpg">
      </a-assets>

      <!-- Basic circle. -->
      <a-circle color="#CCC" radius="20"></a-circle>

      <!-- Textured circle parallel to ground. -->
      <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
    </a-scene>
    diff --git a/docs/1.3.0/primitives/a-cursor.html b/docs/1.3.0/primitives/a-cursor.html index 2af593602..8dc546808 100644 --- a/docs/1.3.0/primitives/a-cursor.html +++ b/docs/1.3.0/primitives/a-cursor.html @@ -1173,7 +1173,7 @@

    interactivity with a scene on devices that do not have a hand controller. The default appearance is a ring geometry. The cursor is usually placed as a child of the camera.

    -

    Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

    +

    Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

    Example

    <a-scene>
      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>

      <a-box></a-box>
    </a-scene>

    Attributes

    diff --git a/docs/1.3.0/primitives/a-gltf-model.html b/docs/1.3.0/primitives/a-gltf-model.html index 6511d17df..10344ccb5 100644 --- a/docs/1.3.0/primitives/a-gltf-model.html +++ b/docs/1.3.0/primitives/a-gltf-model.html @@ -1183,7 +1183,7 @@

    - +
    srcgltf-model.srcgltf-model.src null
    diff --git a/docs/1.3.0/primitives/a-obj-model.html b/docs/1.3.0/primitives/a-obj-model.html index fd14105c4..80de1988c 100644 --- a/docs/1.3.0/primitives/a-obj-model.html +++ b/docs/1.3.0/primitives/a-obj-model.html @@ -1171,7 +1171,7 @@

    We recommend glTF for distributing assets in production over the web. Check -out using the glTF model primitive. You can +out using the glTF model primitive. You can either instead export to COLLADA and use the converter or try out the OBJ converter.

    @@ -1198,7 +1198,7 @@

    null -

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    +

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    diff --git a/docs/1.3.0/primitives/a-plane.html b/docs/1.3.0/primitives/a-plane.html index 9703bfb29..d6ce80de2 100644 --- a/docs/1.3.0/primitives/a-plane.html +++ b/docs/1.3.0/primitives/a-plane.html @@ -1169,7 +1169,7 @@

    -

    The plane primitive creates flat surfaces using the geometry +

    The plane primitive creates flat surfaces using the geometry component with the type set to plane.

    Example

    <a-scene>
      <a-assets>
        <img id="ground" src="ground.jpg">
      </a-assets>

      <!-- Basic plane. -->
      <a-plane color="#CCC" height="20" width="20"></a-plane>

      <!-- Textured plane parallel to ground. -->
      <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
    </a-scene>
    diff --git a/docs/1.3.0/primitives/a-sound.html b/docs/1.3.0/primitives/a-sound.html index 28bb7919d..bbc46fe08 100644 --- a/docs/1.3.0/primitives/a-sound.html +++ b/docs/1.3.0/primitives/a-sound.html @@ -1169,7 +1169,7 @@

    -

    The sound primitive wraps the sound component.

    +

    The sound primitive wraps the sound component.

    Example

    <a-scene>
      <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
    </a-scene>

    Attributes

    diff --git a/docs/1.3.0/primitives/a-sphere.html b/docs/1.3.0/primitives/a-sphere.html index 5fbfcffe8..45b2b9a6d 100644 --- a/docs/1.3.0/primitives/a-sphere.html +++ b/docs/1.3.0/primitives/a-sphere.html @@ -1169,7 +1169,7 @@

    -

    The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

    +

    The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

    Example

    <a-sphere color="yellow" radius="5"></a-sphere>

    Attributes

    diff --git a/docs/1.3.0/primitives/a-text.html b/docs/1.3.0/primitives/a-text.html index 410b0974b..24fa59ff4 100644 --- a/docs/1.3.0/primitives/a-text.html +++ b/docs/1.3.0/primitives/a-text.html @@ -1169,7 +1169,7 @@

    -

    Wraps the text component.

    +

    Wraps the text component.

    Example

    <a-text value="Hello, World!"></a-text>

    Attributes

    diff --git a/docs/1.3.0/primitives/a-torus-knot.html b/docs/1.3.0/primitives/a-torus-knot.html index ddcc133cd..b1c0b880e 100644 --- a/docs/1.3.0/primitives/a-torus-knot.html +++ b/docs/1.3.0/primitives/a-torus-knot.html @@ -1169,7 +1169,7 @@

    -

    The torus knot primitive creates pretzel shapes using the geometry +

    The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

    Example

    <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
    diff --git a/docs/1.3.0/primitives/a-torus.html b/docs/1.3.0/primitives/a-torus.html index 461aa695f..9766d3420 100644 --- a/docs/1.3.0/primitives/a-torus.html +++ b/docs/1.3.0/primitives/a-torus.html @@ -1169,7 +1169,7 @@

    -

    The torus primitive creates donut or tube shapes using the geometry +

    The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

    Example

    <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
    diff --git a/docs/1.3.0/primitives/a-triangle.html b/docs/1.3.0/primitives/a-triangle.html index 787b01f09..beae6fe9d 100644 --- a/docs/1.3.0/primitives/a-triangle.html +++ b/docs/1.3.0/primitives/a-triangle.html @@ -1169,7 +1169,7 @@

    -

    The triangle primitive creates triangle surfaces using the geometry +

    The triangle primitive creates triangle surfaces using the geometry component with the type set to triangle.

    Example

    <a-scene>
      <a-assets>
        <img id="platform" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <!-- Basic triangle. -->
      <a-triangle color="#CCC" vertex-c="1 -1 0"></a-triangle>

      <!-- Textured triangle parallel to ground. -->
      <a-triangle src="#platform" rotation="-90 0 0"></a-triangle>
    </a-scene>
    diff --git a/docs/1.3.0/primitives/a-videosphere.html b/docs/1.3.0/primitives/a-videosphere.html index c8a8e7158..c9b9adf1c 100644 --- a/docs/1.3.0/primitives/a-videosphere.html +++ b/docs/1.3.0/primitives/a-videosphere.html @@ -1176,7 +1176,7 @@

    Ex

    Methods

    More indepth knowledge on the methods to alter video material can be seen over here

    // 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();
    -

    Attributes

    Note that the videosphere primitive inherits common attributes.

    +

    Attributes

    Note that the videosphere primitive inherits common attributes.

    diff --git a/docs/1.4.0/components/animation.html b/docs/1.4.0/components/animation.html index 056b9dcd5..bf7656dbe 100644 --- a/docs/1.4.0/components/animation.html +++ b/docs/1.4.0/components/animation.html @@ -1188,7 +1188,7 @@

    Read more below for additional options and discovering how to properly animate different types of values.

    -
    +

    API

    Properties

    diff --git a/docs/1.4.0/components/cursor.html b/docs/1.4.0/components/cursor.html index 59563a3db..a542e772f 100644 --- a/docs/1.4.0/components/cursor.html +++ b/docs/1.4.0/components/cursor.html @@ -1170,11 +1170,11 @@

    The cursor component provides hover and click states for interaction on top of -the raycaster component. The cursor component can be used for +the raycaster component. The cursor component can be used for both gaze-based and controller-based interactions, but the appearance needs -to be configured depending on the use case. The <a-cursor> +to be configured depending on the use case. The <a-cursor> primitive provides a default reticle appearance for a gaze-based -cursor, and the laser-controls component configures the +cursor, and the laser-controls component configures the cursor for all controllers.

    The cursor component listens to events and keeps state on what’s being hovered and pressed in order to provide mousedown, mouseup, mouseenter, @@ -1185,15 +1185,15 @@

    By default, the cursor is configured to be used in a gaze-based mode and will register user input via mouse or touch. Specifying the downEvents and upEvents properties allows the cursor to work with controllers. For example, -the laser-controls component automatically configures these +the laser-controls component automatically configures these properties to work with most controllers.

    To provide a shape or appearance to the cursor, we should apply either the -geometry and material components or use the raycaster -component’s showLine property to draw a line using the line +geometry and material components or use the raycaster +component’s showLine property to draw a line using the line component.

    Example

    For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no -matter where we look, we place it as a child of the active camera +matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

    <a-entity camera look-controls>
      <a-entity cursor="fuse: true; fuseTimeout: 500"
                position="0 0 -1"
                geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                material="color: black; shader: flat">
      </a-entity>
    </a-entity>

    <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
    @@ -1240,7 +1240,7 @@

    To further customize the cursor component, we configure the cursor’s dependency -component, the raycaster component.

    +component, the raycaster component.

    Events

    @@ -1324,7 +1324,7 @@

    States

    Configuring the Cursor through the Raycaster Component

    The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

    <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>
    @@ -1339,7 +1339,7 @@

    Adding Visual Feedback

    To add visual feedback to the cursor to show when the cursor is clicking or -fusing, we can use the animation component. When the cursor +fusing, we can use the animation component. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

    <a-entity
      animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
      animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
      animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
      cursor="fuse: true;"
      material="color: black; shader: flat"
      position="0 0 -3"
      geometry="primitive: ring"></a-entity>
    diff --git a/docs/1.4.0/components/daydream-controls.html b/docs/1.4.0/components/daydream-controls.html index 47f4226ed..d6bc8f28d 100644 --- a/docs/1.4.0/components/daydream-controls.html +++ b/docs/1.4.0/components/daydream-controls.html @@ -1170,7 +1170,7 @@

    The daydream-controls component interfaces with the Google Daydream controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Daydream controller model that highlights the touched and/or pressed buttons (trackpad).

    As a first time set up, to use the Daydream controller on Chrome for Android diff --git a/docs/1.4.0/components/debug.html b/docs/1.4.0/components/debug.html index 2624a8a26..7136751da 100644 --- a/docs/1.4.0/components/debug.html +++ b/docs/1.4.0/components/debug.html @@ -1186,8 +1186,8 @@ 

    <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

    Make sure that this component is not active in production.

    -

    Manually Serializing to DOM

    To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM:

    +

    Manually Serializing to DOM

    To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM:

    document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
    document.querySelector('a-entity').flushToDOM();  // Flush an entity.
    document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
    document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.
    diff --git a/docs/1.4.0/components/device-orientation-permission-ui.html b/docs/1.4.0/components/device-orientation-permission-ui.html index 5457d6074..e808b4088 100644 --- a/docs/1.4.0/components/device-orientation-permission-ui.html +++ b/docs/1.4.0/components/device-orientation-permission-ui.html @@ -1170,7 +1170,7 @@

    Starting with Safari on iOS 13 browsers require sites to be served over https and request user permission to access DeviceOrientation events. This component presents a permission dialog for the user to grant or deny access. -The device-orientation-permission-ui component applies only to the <a-scene> element

    +The device-orientation-permission-ui component applies only to the <a-scene> element

    To configure the style of the dialog one can redefine the associated css styles. To change the colors of the allow, deny and ok buttons:

    .a-dialog-allow-button {
      background-color: red;
    }

    .a-dialog-deny-button {
      background-color: blue;
    }

    .a-dialog-ok-button {
       background-color: green;
     }
    diff --git a/docs/1.4.0/components/fog.html b/docs/1.4.0/components/fog.html index 7276952b8..5ea370908 100644 --- a/docs/1.4.0/components/fog.html +++ b/docs/1.4.0/components/fog.html @@ -1170,7 +1170,7 @@

    The fog component obscures entities in fog given distance from the camera. The -fog component applies only to the <a-scene> element.

    +fog component applies only to the <a-scene> element.

    Example

    <a-scene fog="type: linear; color: #AAA"></a-scene>

    Properties

    Given the fog distribution type, different properties will apply.

    diff --git a/docs/1.4.0/components/gearvr-controls.html b/docs/1.4.0/components/gearvr-controls.html index 8fdefecca..a487d5dd3 100644 --- a/docs/1.4.0/components/gearvr-controls.html +++ b/docs/1.4.0/components/gearvr-controls.html @@ -1170,7 +1170,7 @@

    The gearvr-controls component interfaces with the Samsung/Oculus Gear VR controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and a Gear VR controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

    Example

    <!-- Match Gear VR controller if present, regardless of hand. -->
    <a-entity gearvr-controls></a-entity>

    <!-- Match Gear VR controller if present and for specified hand. -->
    <a-entity gearvr-controls="hand: left"></a-entity>
    <a-entity gearvr-controls="hand: right"></a-entity>
    diff --git a/docs/1.4.0/components/geometry.html b/docs/1.4.0/components/geometry.html index dd686243a..de27e7bf0 100644 --- a/docs/1.4.0/components/geometry.html +++ b/docs/1.4.0/components/geometry.html @@ -1173,7 +1173,7 @@

    property defines the general shape. Geometric primitives, in computer graphics, are irreducible basic shapes. A material component is commonly defined to provide an appearance alongside the shape to create a complete mesh.

    -
    +

    Base Properties

    Every geometry type will have these properties:

    @@ -1708,7 +1708,7 @@ 

    AFRAME.registerGeometry('box', {
      schema: {
        depth: {default: 1, min: 0},
        height: {default: 1, min: 0},
        width: {default: 1, min: 0},
        segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
        segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
        segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
      },

      init: function (data) {
        this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
      }
    });

    Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then we need to create the geometry and set on this.geometry through the init lifecycle method.

    When a geometry component sets its primitive property to the custom geometry diff --git a/docs/1.4.0/components/gltf-model.html b/docs/1.4.0/components/gltf-model.html index d06d6f71c..ad25be6b3 100644 --- a/docs/1.4.0/components/gltf-model.html +++ b/docs/1.4.0/components/gltf-model.html @@ -1181,9 +1181,9 @@

    NOTE: A-Frame supports glTF 2.0. For models using older versions of the glTF format, use gltf-model-legacy from donmccurdy/aframe-extras.

    -
    + -

    Why use glTF?

    In comparison to the older OBJ format, which supports only +

    Why use glTF?

    In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features. In addition to all of the above, glTF offers:

      diff --git a/docs/1.4.0/components/hand-controls.html b/docs/1.4.0/components/hand-controls.html index 8f25117e5..72f75b472 100644 --- a/docs/1.4.0/components/hand-controls.html +++ b/docs/1.4.0/components/hand-controls.html @@ -1170,8 +1170,8 @@

      The hand-controls component provides tracked hands (using a prescribed model) -with animated gestures. hand-controls wraps the vive-controls and -oculus-touch-controls which in turn wrap the tracked-controls +with animated gestures. hand-controls wraps the vive-controls and +oculus-touch-controls which in turn wrap the tracked-controls component. By specifying just hand-controls, we have something that works well with both Vive and Rift. The component gives extra events and handles hand animations and poses.

      diff --git a/docs/1.4.0/components/keyboard-shortcuts.html b/docs/1.4.0/components/keyboard-shortcuts.html index a4bc5c7c9..6ac8a2599 100644 --- a/docs/1.4.0/components/keyboard-shortcuts.html +++ b/docs/1.4.0/components/keyboard-shortcuts.html @@ -1170,7 +1170,7 @@

      The keyboard-shortcuts component toggles global keyboard shortcuts. The -keyboard-shortcuts component applies only to the <a-scene> element.

      +keyboard-shortcuts component applies only to the <a-scene> element.

      Example

      <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

      Properties

      diff --git a/docs/1.4.0/components/laser-controls.html b/docs/1.4.0/components/laser-controls.html index fc06a739c..ff0c094bf 100644 --- a/docs/1.4.0/components/laser-controls.html +++ b/docs/1.4.0/components/laser-controls.html @@ -1182,17 +1182,17 @@

      configures other components, rather than implementing any logic itself. Under the hood, laser-controls sets all of the tracked controller components:

      These controller components get activated if its respective controller is connected and detected via the Gamepad API. Then the model of the actual -controller is used. laser-controls then configures the cursor +controller is used. laser-controls then configures the cursor component for listen to the appropriate events and configures the -raycaster component to draw the laser.

      +raycaster component to draw the laser.

      When the laser intersects with an entity, the length of the line gets truncated to the distance to the intersection point.

      Example

      <a-entity laser-controls="hand: left"></a-entity>
      @@ -1217,11 +1217,11 @@

      Color for the default controller model. -

      Customizing the Raycaster

      Configure the raycaster properties.

      +

      Customizing the Raycaster

      Configure the raycaster properties.

      For example:

      <a-entity laser-controls raycaster="objects: .links; far: 5"></a-entity>
      -

      Customizing the Line

      See Raycaster: Customizing the Line.

      +

      Customizing the Line

      See Raycaster: Customizing the Line.

      For example:

      <a-entity laser-controls raycaster="lineColor: red; lineOpacity: 0.5"></a-entity>
      diff --git a/docs/1.4.0/components/light.html b/docs/1.4.0/components/light.html index 9bb078793..41800c345 100644 --- a/docs/1.4.0/components/light.html +++ b/docs/1.4.0/components/light.html @@ -1184,7 +1184,7 @@

      To manually disable the defaults, without adding other lights:

      <a-scene light="defaultLightsEnabled: false">
        <!-- ... -->
      </a-scene>
      -
      +

      Properties

      All light types support a few basic properties:

      @@ -1353,7 +1353,7 @@

      Probe

      <

      Configuring Shadows

      A-Frame includes support for realtime shadow rendering. With proper configuration, objects (both moving or stationary) will cast shadows adding depth and realism to a scene. Since shadows come with many properties, it -is very helpful to use the A-Frame Inspector to configure shadows

      +is very helpful to use the A-Frame Inspector to configure shadows

      Light types that support shadows (point, spot, and directional) include additional properties:

      diff --git a/docs/1.4.0/components/line.html b/docs/1.4.0/components/line.html index d0f86e742..ab51e9106 100644 --- a/docs/1.4.0/components/line.html +++ b/docs/1.4.0/components/line.html @@ -1171,8 +1171,8 @@

      The line component draws a line given a start coordinate and end coordinate using THREE.Line.

      -

      The raycaster component uses the line component for its showLine -property, which is then used by the laser-controls component.

      +

      The raycaster component uses the line component for its showLine +property, which is then used by the laser-controls component.

      Example

      <a-entity line="start: 0 1 0; end: 2 0 -5; color: red"
                line__2="start: -2 4 5; end: 0 4 -3; color: green"></a-entity>

      Note an entity can have multiple lines. The line mesh is set as line or diff --git a/docs/1.4.0/components/look-controls.html b/docs/1.4.0/components/look-controls.html index d7e1f26b7..cd3cad998 100644 --- a/docs/1.4.0/components/look-controls.html +++ b/docs/1.4.0/components/look-controls.html @@ -1175,7 +1175,7 @@

    • Rotates the entity when we move the mouse.
    • Rotates the entity when we touch-drag the touchscreen.

    -

    Example

    The look-controls component is usually used alongside the camera +

    Example

    The look-controls component is usually used alongside the camera component.

    <a-entity camera look-controls position="0 1.6 0"></a-entity>
    diff --git a/docs/1.4.0/components/magicleap-controls.html b/docs/1.4.0/components/magicleap-controls.html index 3133ef3eb..443ce4eca 100644 --- a/docs/1.4.0/components/magicleap-controls.html +++ b/docs/1.4.0/components/magicleap-controls.html @@ -1170,7 +1170,7 @@

    The magicleap-controls component interfaces with the Magic Leap controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and Magic Leap controller model/

    Example

    <!-- Match Magic Leap controller if present, regardless of hand. -->
    <a-entity magicleap-controls></a-entity>

    <!-- Match Magic Leap controller if present and for specified hand. -->
    <a-entity magicleap-controls="hand: left"></a-entity>
    <a-entity magicleap-controls="hand: right"></a-entity>
    diff --git a/docs/1.4.0/components/material.html b/docs/1.4.0/components/material.html index c0cfb6e77..9e274a754 100644 --- a/docs/1.4.0/components/material.html +++ b/docs/1.4.0/components/material.html @@ -1170,11 +1170,11 @@

    The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

    We can register custom materials to extend the material component to provide a wide range of visual effects.

    -
    +

    Example

    Defining a red material using the default standard material:

    <a-entity geometry="primitive: box" material="color: red"></a-entity>
    @@ -1370,7 +1370,7 @@

    fog. +Whether or not material is affected by fog. true @@ -1537,7 +1537,7 @@

    fog. +Whether or not material is affected by fog. true @@ -1578,7 +1578,7 @@

    Textures

    To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

    +asset management system:

    <a-scene>
      <a-assets>
        <img id="my-texture" src="texture.png">
      </a-assets>

      <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
    </a-scene>

    src can also be an inline URL. Note that we do not get browser caching or diff --git a/docs/1.4.0/components/obj-model.html b/docs/1.4.0/components/obj-model.html index 4b00b7a61..556556257 100644 --- a/docs/1.4.0/components/obj-model.html +++ b/docs/1.4.0/components/obj-model.html @@ -1187,7 +1187,7 @@

    mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

    Events

    @@ -1205,7 +1205,7 @@

    EventsLoading Inline

    We can also load assets by specifying the path directly within url(). Note this is less performant than going through the asset management system.

    <a-entity obj-model="obj: url(/path/to/tree.obj); mtl: url(/path/to/tree.mtl)"></a-entity>
    -

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    +

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    Additional Resources

    We can find and download models on the web to drop into our scenes:

    • Sketchup’s 3D Warehouse - Repository of models.
      • diff --git a/docs/1.4.0/components/oculus-go-controls.html b/docs/1.4.0/components/oculus-go-controls.html index 01bf94e32..ceff156a6 100644 --- a/docs/1.4.0/components/oculus-go-controls.html +++ b/docs/1.4.0/components/oculus-go-controls.html @@ -1170,7 +1170,7 @@

      The oculus-go-controls component interfaces with the Oculus Go controllers. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Oculus Go controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

      Example

      <!-- Match Oculus Go controller if present, regardless of hand. -->
      <a-entity oculus-go-controls></a-entity>

      <!-- Match Oculus Go controller if present and for specified hand. -->
      <a-entity oculus-go-controls="hand: left"></a-entity>
      <a-entity oculus-go-controls="hand: right"></a-entity>
      diff --git a/docs/1.4.0/components/oculus-touch-controls.html b/docs/1.4.0/components/oculus-touch-controls.html index 8e5abf2f8..ee67e70df 100644 --- a/docs/1.4.0/components/oculus-touch-controls.html +++ b/docs/1.4.0/components/oculus-touch-controls.html @@ -1170,7 +1170,7 @@

      The oculus-touch-controls component interfaces with the Oculus Touch controllers (Rift, Rift S, Oculus Quest 1 and 2). It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.

      Example

      <a-entity oculus-touch-controls="hand: left"></a-entity>
      <a-entity oculus-touch-controls="hand: right"></a-entity>
      diff --git a/docs/1.4.0/components/position.html b/docs/1.4.0/components/position.html index d9e98fa6e..11dc21b76 100644 --- a/docs/1.4.0/components/position.html +++ b/docs/1.4.0/components/position.html @@ -1208,7 +1208,7 @@

      #child2‘s position would be 2 3 4.

      Updating Position

      For performance and ergonomics, we recommend updating position directly via the -three.js Object3D .position Vector3 versus via +three.js Object3D .position Vector3 versus via .setAttribute.

      This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1222,11 +1222,11 @@

      Getting Position

      To reflect updates done at the three.js level, A-Frame returns the actual Object3D.position vector object when doing .getAttribute('position'). Note modifying the return value will modify the entity itself.

      -

      See also reading position and rotation of the camera.

      +

      See also reading position and rotation of the camera.

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/1.4.0/components/raycaster.html b/docs/1.4.0/components/raycaster.html index 81112dbdb..f4f90af2e 100644 --- a/docs/1.4.0/components/raycaster.html +++ b/docs/1.4.0/components/raycaster.html @@ -1181,7 +1181,7 @@

      is explicitly defined via the objects selector property described below. Raycasting is an expensive operation, and we should raycast against only targets that need to be interactable at any given time.

      -

      The cursor component and laser-controls components +

      The cursor component and laser-controls components both build on top of the raycaster component.

      Example

      <a-entity id="player" collider-check>
        <a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
      </a-entity>
      <a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
      @@ -1249,7 +1249,7 @@

      showLine -Whether or not to display the raycaster visually with the line component. +Whether or not to display the raycaster visually with the line component. false @@ -1276,7 +1276,7 @@

      Events raycaster-intersection -Emitted on the raycasting entity. Raycaster is intersecting with one or more entities. Event detail will contain els, an array with the newly intersected entities, and intersections, and .getIntersection (el) function which can be used to obtain current intersection data. For access to a complete list of intersections (existing & new), see Members intersectedEls. +Emitted on the raycasting entity. Raycaster is intersecting with one or more entities. Event detail will contain els, an array with the newly intersected entities, and intersections, and .getIntersection (el) function which can be used to obtain current intersection data. For access to a complete list of intersections (existing & new), see Members intersectedEls. raycaster-intersection-cleared diff --git a/docs/1.4.0/components/rotation.html b/docs/1.4.0/components/rotation.html index b8c23d6ec..b9c6320d9 100644 --- a/docs/1.4.0/components/rotation.html +++ b/docs/1.4.0/components/rotation.html @@ -1213,7 +1213,7 @@

      15 45 30.

      Updating Rotation

      For performance and ergonomics, we recommend updating rotation directly via the three.js Object3D .rotation Euler (in radians) versus -via .setAttribute.

      +via .setAttribute.

      This method is easier because we have access to all the Euler utilities, and faster by skipping .setAttribute overhead and not needing to create an object to set rotation:

      @@ -1223,12 +1223,12 @@

      reading position and rotation of the camera.

      +

      See also reading position and rotation of the camera.

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/1.4.0/components/scale.html b/docs/1.4.0/components/scale.html index 314ee948c..78f7a004e 100644 --- a/docs/1.4.0/components/scale.html +++ b/docs/1.4.0/components/scale.html @@ -1212,7 +1212,7 @@

      Relative Scale

      Similar to the rotation and position components, scales are applied in the local coordinate system and multiply in nested entities.

      Updating Scale

      For performance and ergonomics, we recommend updating scale directly via the -three.js Object3D .scale Vector3 versus via +three.js Object3D .scale Vector3 versus via .setAttribute.

      This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1228,8 +1228,8 @@

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/1.4.0/components/shadow.html b/docs/1.4.0/components/shadow.html index 4b615cb55..d789a7b8e 100644 --- a/docs/1.4.0/components/shadow.html +++ b/docs/1.4.0/components/shadow.html @@ -1179,7 +1179,7 @@

      Examp

      IMPORTANT: Adding the shadow component alone is not enough to display shadows in your scene. We must have at least one light with castShadow: true enabled. Additionally, the light’s shadow camera (used for depth -projection) usually must be configured correctly. Refer to the light +projection) usually must be configured correctly. Refer to the light component for more information.

      Properties

      diff --git a/docs/1.4.0/components/sound.html b/docs/1.4.0/components/sound.html index b7ec3b899..aaa665360 100644 --- a/docs/1.4.0/components/sound.html +++ b/docs/1.4.0/components/sound.html @@ -1171,7 +1171,7 @@

      The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the -components-position.

      +components-position.

      NOTE: Playing sound on iOS — in any browser — requires a physical user interaction. This is a browser limitation, and internal A-Frame events (like fusing cursors) do diff --git a/docs/1.4.0/components/stats.html b/docs/1.4.0/components/stats.html index 711ee13c4..a43914a81 100644 --- a/docs/1.4.0/components/stats.html +++ b/docs/1.4.0/components/stats.html @@ -1170,7 +1170,7 @@

      The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

      +component applies only to the <a-scene> element.

      Example

      <a-scene stats></a-scene>

      Metrics

        diff --git a/docs/1.4.0/components/text.html b/docs/1.4.0/components/text.html index dad6af7e3..b6d5143ed 100644 --- a/docs/1.4.0/components/text.html +++ b/docs/1.4.0/components/text.html @@ -1171,7 +1171,7 @@

        The text component renders signed distance field (SDF) font text.

        Example Image

        -
        +

        Introduction

        Note that rendering text in 3D is hard. In 2D web development, text is the most basic thing because the browser’s renderer and layout engine handle @@ -1419,8 +1419,8 @@

        SizingChange the width.
      • Change the wrapCount (roughly how many characters to fit inside the given width).
      • Change wrapPixels.
        • -
      • Change the scale component.
        • -
      • Position the text closer or farther away.
        • +
      • Change the scale component.
        • +
      • Position the text closer or farther away.

      Sizing

      Text can be wrapped by specifying width in A-Frame units.

      diff --git a/docs/1.4.0/components/tracked-controls.html b/docs/1.4.0/components/tracked-controls.html index e7c8c30bb..1264f5b98 100644 --- a/docs/1.4.0/components/tracked-controls.html +++ b/docs/1.4.0/components/tracked-controls.html @@ -1171,12 +1171,12 @@

      The tracked-controls component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is -abstracted by the hand-controls component as well as the -vive-controls, oculus-touch-controls, -windows-motion-controls, and daydream-controls +abstracted by the hand-controls component as well as the +vive-controls, oculus-touch-controls, +windows-motion-controls, and daydream-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events. For non-6DOF controllers -such as daydream-controls, a primitive arm model is used to emulate +such as daydream-controls, a primitive arm model is used to emulate positional data.

      tracked-controls sets two components that handles different Web API versions for VR:

        diff --git a/docs/1.4.0/components/visible.html b/docs/1.4.0/components/visible.html index 76d29c31e..797d063b2 100644 --- a/docs/1.4.0/components/visible.html +++ b/docs/1.4.0/components/visible.html @@ -1193,7 +1193,7 @@

        Value

        < The entity will not be rendered nor visible. The entity will still exist in the scene. -

        Updating Visibility

        It is slightly faster to update visibility at the three.js level versus via +

        Updating Visibility

        It is slightly faster to update visibility at the three.js level versus via .setAttribute.

        // With three.js
        el.object3D.visible = false;

        // With .setAttribute.
        el.setAttribute('visible', false);
        diff --git a/docs/1.4.0/components/vive-controls.html b/docs/1.4.0/components/vive-controls.html index a80c1e157..75c76c61a 100644 --- a/docs/1.4.0/components/vive-controls.html +++ b/docs/1.4.0/components/vive-controls.html @@ -1170,7 +1170,7 @@

        The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

        Example

        <a-entity vive-controls="hand: left"></a-entity>
        <a-entity vive-controls="hand: right"></a-entity>
        diff --git a/docs/1.4.0/components/vive-focus-controls.html b/docs/1.4.0/components/vive-focus-controls.html index 399d2fc56..de82d5044 100644 --- a/docs/1.4.0/components/vive-focus-controls.html +++ b/docs/1.4.0/components/vive-focus-controls.html @@ -1170,7 +1170,7 @@

        The vive-focus-controls component interfaces with the Vive Focus controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Vive Focus controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

        Example

        <!-- Match Vive Focus controller if present, regardless of hand. -->
        <a-entity vive-focus-controls></a-entity>

        <!-- Match Vive Focus controller if present and for specified hand. -->
        <a-entity vive-focus-controls="hand: left"></a-entity>
        <a-entity vive-focus-controls="hand: right"></a-entity>
        diff --git a/docs/1.4.0/components/vr-mode-ui.html b/docs/1.4.0/components/vr-mode-ui.html index 290a7118c..ba95bb126 100644 --- a/docs/1.4.0/components/vr-mode-ui.html +++ b/docs/1.4.0/components/vr-mode-ui.html @@ -1171,7 +1171,7 @@

        The vr-mode-ui component allows disabling of UI such as an Enter VR button, compatibility modal, and orientation modal for mobile. The vr-mode-ui component applies only -to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

        +to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

        Example

        <a-scene vr-mode-ui="enabled: false"></a-scene>

        Properties

        diff --git a/docs/1.4.0/components/wasd-controls.html b/docs/1.4.0/components/wasd-controls.html index 4270fb804..d93e0c943 100644 --- a/docs/1.4.0/components/wasd-controls.html +++ b/docs/1.4.0/components/wasd-controls.html @@ -1170,7 +1170,7 @@

        The wasd-controls component controls an entity with the WASD or arrow keyboard -keys. The wasd-controls component is commonly attached to an entity with the camera +keys. The wasd-controls component is commonly attached to an entity with the camera component.

        Example

        <a-entity camera look-controls wasd-controls="acceleration:100" position="0 1.6 0"></a-entity>
        diff --git a/docs/1.4.0/components/windows-motion-controls.html b/docs/1.4.0/components/windows-motion-controls.html index e27f371c2..8a4ff0f2b 100644 --- a/docs/1.4.0/components/windows-motion-controls.html +++ b/docs/1.4.0/components/windows-motion-controls.html @@ -1171,7 +1171,7 @@

        The windows-motion-controls component 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 +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.)

        Example

        <a-entity windows-motion-controls="hand: left"></a-entity>
        <a-entity windows-motion-controls="hand: right"></a-entity>
        diff --git a/docs/1.4.0/core/asset-management-system.html b/docs/1.4.0/core/asset-management-system.html index 0968941d3..eb8a2bd64 100644 --- a/docs/1.4.0/core/asset-management-system.html +++ b/docs/1.4.0/core/asset-management-system.html @@ -1187,7 +1187,7 @@

      The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

      -
      +

      Example

      We can define our assets in <a-assets> and point to those assets from our entities using selectors:

      diff --git a/docs/1.4.0/core/component.html b/docs/1.4.0/core/component.html index 1f3bd633d..48fabc46d 100644 --- a/docs/1.4.0/core/component.html +++ b/docs/1.4.0/core/component.html @@ -1169,7 +1169,7 @@

      -

      In the entity-component-system pattern, a component is a reusable and +

      In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

      In A-Frame, components modify entities which are 3D objects in the scene. We @@ -1183,7 +1183,7 @@

      Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

      -
      +

      Component HTML Form

      A component holds a bucket of data in the form of one or more component properties. Components use this data to modify entities. Consider an engine @@ -1334,7 +1334,7 @@

      Definition Lifecycle Handler Methods

      With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the shape of the data, the lifecycle handler methods use the data to modify the entity. The handlers will usually interact with the -Entity API.

      +Entity API.

      methodsimage Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

      Overview of Methods

      @@ -1387,15 +1387,15 @@

      setAttribute. +

      - + - + @@ -1432,7 +1432,7 @@

      diffing the current +

      Granular modifications to the entity can be done by diffing the current dataset (this.data) with the previous dataset before the update (oldData).

      A-Frame calls .update() both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The @@ -1440,7 +1440,7 @@

      visible component’s update sets the visibility of +

      For example, the visible component’s update sets the visibility of the entity.

      Parsed component properties computed from the schema default values, mixins, and the entity’s attributes.
      Important: Do not modify the data attribute directly. It is updated internally by A-Frame. To modify a component, use setAttribute.
      this.elReference to the entity as an HTML element.Reference to the entity as an HTML element.
      this.el.sceneElReference to the scene as an HTML element.Reference to the scene as an HTML element.
      this.id
      AFRAME.registerComponent('visible', {
        /**
         * this.el is the entity element.
         * this.el.object3D is the three.js object of the entity.
         * this.data is the component's property or properties.
         */
        update: function (oldData) {
          this.el.object3D.visible = this.data;
        }
        // ...
      });
      @@ -1455,7 +1455,7 @@

      Remove, undo, or clean up all of the component’s modifications to the entity.
    • Detach event listeners.

    -

    For example, when the light component is removed, the light component +

    For example, when the light component is removed, the light component will remove the light object that it had previously set on the entity, thus removing it from the scene.

    AFRAME.registerComponent('light', {
      // ...
      remove: function () {
        this.el.removeObject3D('light');
      }
      // ...
    });
    @@ -1477,7 +1477,7 @@

    time) and the time difference in milliseconds since the last frame (timeDelta). These can be used for interpolation or to only run parts of the tick handler on a set interval.

    -

    For example, the tracked controls component will progress +

    For example, the tracked controls component will progress the controller’s animations, update the controller’s position and rotation, and check for button presses.

    AFRAME.registerComponent('tracked-controls', {
      // ...
      tick: function (time, timeDelta) {
        this.updateMeshAnimation();
        this.updatePose();
        this.updateButtons();
      }
      // ...
    });
    @@ -1496,7 +1496,7 @@

    .
  • Remove event listeners.
  • Remove any chances of dynamic behavior.
    • -

    For example, the sound component will pause the sound and remove an +

    For example, the sound component will pause the sound and remove an event listener that would have played a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      pause: function () {
        this.pauseSound();
        this.removeEventListener();
      }
      // ...
    });
    @@ -1511,7 +1511,7 @@

    .pla
    • Add event listeners.
    -

    For example, the sound component will play the sound and update the +

    For example, the sound component will play the sound and update the event listener that would play a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      play: function () {
        if (this.data.autoplay) { this.playSound(); }
        this.updateEventListener();
      }
      // ...
    });
    @@ -1521,7 +1521,7 @@

  • Dynamically update or extend the schema, usually depending on the value of a property.
    • -

    For example, the geometry component checks if the primitive +

    For example, the geometry component checks if the primitive property changed to determine whether to update the schema for a different type of geometry:

    AFRAME.registerComponent('geometry', {
      // ...
      updateSchema: (newData) {
        if (newData.primitive !== this.data.primitive) {
          this.extendSchema(GEOMETRIES[newData.primitive].schema);
        }
      }
      // ...
    });
    @@ -1576,7 +1576,7 @@ 

    document.querySelector('[geometry]').components.geometry.flushToDOM();
    -

    Read more about component-to-DOM serialization.

    +

    Read more about component-to-DOM serialization.

    Accessing a Component’s Members and Methods

    A component’s members and methods can be accessed through the entity from the .components object. Look up the component from the entity’s map of components, and we’ll have access to the component’s internals. Consider this diff --git a/docs/1.4.0/core/entity.html b/docs/1.4.0/core/entity.html index e158adb04..1e754f171 100644 --- a/docs/1.4.0/core/entity.html +++ b/docs/1.4.0/core/entity.html @@ -1170,23 +1170,23 @@

    A-Frame represents an entity via the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

    -

    In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

    -
    +

    In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

    +

    Example

    Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

    <a-entity>

    We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

    +give it shape and appearance, we can attach the geometry and +material components:

    <a-entity geometry="primitive: box" material="color: red">
    -

    Or to make it emit light, we can further attach the light component:

    +

    Or to make it emit light, we can further attach the light component:

    <a-entity geometry="primitive: box" material="color: red"
              light="type: point; intensity: 2.0">

    Retrieving an Entity

    We can simply retrieve an entity using DOM APIs.

    @@ -1221,7 +1221,7 @@

    object3DMap

    An entity’s object3DMap is an object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that components have set.

    -

    For an entity with a geometry and light components +

    For an entity with a geometry and light components attached, object3DMap might look like:

    {
      light: <THREE.Light Object>,
      mesh: <THREE.Mesh Object>
    }
    @@ -1236,7 +1236,7 @@

    Metho

    destroy ()

    Clean up memory related to the entity such as clearing all components and their data.

    emit (name, detail, bubbles)

    emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

    +trigger an animation:

    // <a-entity animation="property: rotation; to: 0 360 0; startEvents: rotate">
    entity.emit('rotate');

    We can also pass event detail or data as the second argument:

    @@ -1247,7 +1247,7 @@ 

    entity.emit('sink', null, false);

    flushToDOM (recursive)

    flushToDOM will manually serialize an entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

    +Read more about component-to-DOM serialization.

    getAttribute (componentName)

    getAttribute retrieves parsed component data (including mixins and defaults).

    // <a-entity geometry="primitive: box; width: 3">

    entity.getAttribute('geometry');
    // >> {primitive: "box", depth: 2, height: 2, width: 3, ...}

    entity.getAttribute('geometry').primitive;
    // >> "box"

    entity.getAttribute('geometry').height;
    // >> 2

    entity.getAttribute('position');
    // >> {x: 0, y: 0, z: 0}
    @@ -1274,20 +1274,20 @@

    pa entity will call pause() on its child entities when we pause an entity.

    // <a-entity id="spinning-jumping-ball">
    entity.pause();
    -

    For example, the look-controls component on +

    For example, the look-controls component on pause will remove event handlers that listen for input.

    play ()

    play() will start any dynamic behavior as defined by animations and components. This is automatically called when the DOM attaches an entity. When an entity play(), the entity calls play() on its child entities.

    entity.pause();
    entity.play();
    -

    For example, the sound component on play will begin playing the sound.

    +

    For example, the sound component on play will begin playing the sound.

    setAttribute (componentName, value, [propertyValue | clobber])

    If componentName is not the name of a registered component or the component is a single-property component, setAttribute behaves as it normally would:

    entity.setAttribute('visible', false);

    Though if componentName is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    entity.setAttribute('position', { x: 1, y: 2, z: 3 });
    @@ -1355,7 +1355,7 @@

    Events componentchanged -One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. +One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. componentinitialized diff --git a/docs/1.4.0/core/globals.html b/docs/1.4.0/core/globals.html index d97e19a93..e751059ad 100644 --- a/docs/1.4.0/core/globals.html +++ b/docs/1.4.0/core/globals.html @@ -1181,11 +1181,11 @@

    AComponent -Component prototype. +Component prototype. AEntity -Entity prototype. +Entity prototype. ANode @@ -1193,7 +1193,7 @@

    AScene -Scene prototype. +Scene prototype. components @@ -1209,7 +1209,7 @@

    registerComponent -Function to register a component. +Function to register a component. registerElement @@ -1217,15 +1217,15 @@

    registerGeometry -Function to register a geometry. +Function to register a geometry. registerPrimitive -Function to register a primitive. +Function to register a primitive. registerShader -Function to register a material or shader. +Function to register a material or shader. schema @@ -1245,7 +1245,7 @@

    utils -A-Frame utility modules. +A-Frame utility modules. version diff --git a/docs/1.4.0/core/mixins.html b/docs/1.4.0/core/mixins.html index 127a128e3..bf68e8f8a 100644 --- a/docs/1.4.0/core/mixins.html +++ b/docs/1.4.0/core/mixins.html @@ -1171,7 +1171,7 @@

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    <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-mixin>
      </a-assets>

      <a-entity mixin="red cube"></a-entity>
      <a-entity mixin="blue cube"></a-entity>
    </a-scene>
    @@ -1181,7 +1181,7 @@

    the entities above expand to:

    <a-entity material="color: red" geometry="primitive: box"></a-entity>
    <a-entity material="color: blue" geometry="primitive: box"></a-entity>
    -
    +

    Merging Component Properties

    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="height: 10"></a-mixin>
        <a-mixin id="wide" geometry="width: 10"></a-mixin>
      </a-assets>

      <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
    </a-scene>
    diff --git a/docs/1.4.0/core/scene.html b/docs/1.4.0/core/scene.html index 53a1e6772..52941ca0c 100644 --- a/docs/1.4.0/core/scene.html +++ b/docs/1.4.0/core/scene.html @@ -1170,8 +1170,8 @@

    A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

    -

    The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

    +

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    @@ -1181,9 +1181,9 @@

  • Default camera and lights
  • Set up webvr-polyfill, VREffect
  • Add UI to Enter VR that calls WebVR API
    • -
  • Configure WebXR devices through the webxr system
    • +
  • Configure WebXR devices through the webxr system
    • -
    +

    Example

    <a-scene>
      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <a-box src="#texture"></a-box>
    </a-scene>
    @@ -1228,7 +1228,7 @@

    systems -Instantiated systems. +Instantiated systems. time @@ -1292,12 +1292,12 @@

    embedded - Remove fullscreen styles from the canvas.

    • -
  • fog - Add fog.
    • -
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • -
  • inspector - Inject the A-Frame Inspector.
    • -
  • stats - Toggle performance stats.
    • -
  • vr-mode-ui - Toggle UI for entering and exiting VR.
    • +
  • embedded - Remove fullscreen styles from the canvas.
    • +
  • fog - Add fog.
    • +
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • +
  • inspector - Inject the A-Frame Inspector.
    • +
  • stats - Toggle performance stats.
    • +
  • vr-mode-ui - Toggle UI for entering and exiting VR.

    • Running Content Scripts on the Scene

    The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

    AFRAME.registerComponent('do-something', {
      init: function () {
        var sceneEl = this.el;
      }
    });
    diff --git a/docs/1.4.0/core/systems.html b/docs/1.4.0/core/systems.html index a485dc6dc..71d0a3d3e 100644 --- a/docs/1.4.0/core/systems.html +++ b/docs/1.4.0/core/systems.html @@ -1169,16 +1169,16 @@

    -

    A system, of the entity-component-system pattern, provides global scope, +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -
    + -

    Registering a System

    A system is registered similarly to a component.

    +

    Registering a System

    A system is registered similarly to a component.

    If the system name matches a component name, then the component will have a reference to the system as this.system:

    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);
      }
    });
    @@ -1200,7 +1200,7 @@

    schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data.

    Methods

    A system, like a component, defines lifecycle handlers. It can also define diff --git a/docs/1.4.0/core/utils.html b/docs/1.4.0/core/utils.html index 4a105abdf..d05b77fc9 100644 --- a/docs/1.4.0/core/utils.html +++ b/docs/1.4.0/core/utils.html @@ -1170,7 +1170,7 @@

    A-Frame’s utility modules are public through AFRAME.utils.

    -
    +

    AFRAME.utils.coordinates

    Module for handling vec3 and vec4 types.

    .isCoordinates (value)

    Tests whether a string is a vec3 or vec4.

    @@ -1182,7 +1182,7 @@

    .stringify (data)

    Stringifies an {x, y, z} vec3 object to an “x y z” string.Or Stringifies an {x, y, z, w} vec4 object to an “x y z w” string.

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
    // >> "1 2 -3"

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3, w:4})
    // >> "1 2 -3 4"
    -

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for +

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for return 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.

    @@ -1190,7 +1190,7 @@

    This is useful for components that need a way to reference a property of a multi-property component.

    -

    .setComponentProperty (entity, componentName, value, delimiter)

    Performs like Entity.setAttribute, but with support for setting an +

    .setComponentProperty (entity, componentName, value, delimiter)

    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.

    diff --git a/docs/1.4.0/guides/building-a-360-image-gallery.html b/docs/1.4.0/guides/building-a-360-image-gallery.html index 777f4b38e..d56340e32 100644 --- a/docs/1.4.0/guides/building-a-360-image-gallery.html +++ b/docs/1.4.0/guides/building-a-360-image-gallery.html @@ -1173,7 +1173,7 @@

    Let’s build an interactive gaze-based 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

    -

    This guide will practice three concepts related to entity-component:

    +

    This guide will practice three concepts related to entity-component:

    1. Using the standard components that come with A-Frame.
    2. Using community components from the ecosystem.
      3. @@ -1181,18 +1181,18 @@

    Not to say 360° images are at all a focus use case of A-Frame, but it makes for an easy example that has a lot of demand as an early use case on the Web.

    -
    +

    Skeleton

    This is the starting point for our scene. We can also remix the Glitch.

    <a-scene>
      <a-assets>
        <audio id="click-sound" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>

        <!-- Images. -->
        <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
        <img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
        <img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
        <img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
        <img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Link template we will build. -->
      <a-entity class="link"></a-entity>

      <!-- Camera + Cursor. -->
      <a-camera>
        <a-cursor
          id="cursor"
          animation__click="property: scale; from: 0.1 0.1 0.1; to: 1 1 1; easing: easeInCubic; dur: 150; startEvents: click"
          animation__clickreset="property: scale; to: 0.1 0.1 0.1; dur: 1; startEvents: animationcomplete__click"
          animation__fusing="property: scale; from: 1 1 1; to: 0.1 0.1 0.1; easing: easeInCubic; dur: 150; startEvents: fusing"></a-cursor>
      </a-camera>
    </a-scene>

    We have predefined:

    Using Standard Components

    Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure @@ -1202,20 +1202,20 @@ 

    <a-entity class="link"></a-entity>
    -

    To give our entity shape, we can attach the geometry component, +

    To give our entity shape, we can attach the geometry component, configured to a plane shape. We specify the component data using a syntax that resembles that of inline CSS styles:

    <a-entity
      class="link"
      geometry="primitive: plane; height: 1; width: 1"></a-entity>
    -

    Then to give our entity appearance, we can attach the material +

    Then to give our entity appearance, we can attach the material component. We set shader to flat so the image isn’t affected negatively by lighting. And we set src to #cubes-thumb, a selector to one -of the images preloaded in the Asset Management System. Alternatively, +of the images preloaded in the Asset Management System. Alternatively, we could pass a URL for the image:

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: #cubes-thumb"></a-entity>

    We can continue adding features to our entity by plugging in more components. -Let’s attach one more standard component, the sound component. We want +Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1291,15 +1291,15 @@

    Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

    Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We can specify event names either the _event property or via the __<id> as shown below. The rest of the properties define the setAttribute calls. Notice that the event-set component can have -multiple instances:

    +multiple instances:

    <script id="plane" type="text/html">
      <a-entity class="link"
        geometry="primitive: plane; height: 1; width: 1"
        material="shader: flat; src: ${thumb}"
        sound="on: click; src: #click-sound"
        event-set__mouseenter="scale: 1.2 1.2 1"
        event-set__mouseleave="scale: 1 1 1"
        event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"></a-entity>
    </script>

    Remember to add data-src attributes to the link entities to load the full image on click:

    @@ -1331,7 +1331,7 @@

    Writing a Component and +application-specific components. That is covered in Writing a Component and hopefully in later guides.

    Try it out!

    diff --git a/docs/1.4.0/guides/building-a-basic-scene.html b/docs/1.4.0/guides/building-a-basic-scene.html index dc5687c6e..a923998b3 100644 --- a/docs/1.4.0/guides/building-a-basic-scene.html +++ b/docs/1.4.0/guides/building-a-basic-scene.html @@ -1182,7 +1182,7 @@

  • Add text

    • Remix the Basic Guide example on Glitch.

    -
    +

    Starting with HTML

    We start out with a minimal HTML structure:

    <html>
      <head>
        <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
        </a-scene>
      </body>
    </html>
    @@ -1191,7 +1191,7 @@

    before <a-scene> because A-Frame registers custom HTML elements which must be defined before <a-scene> is attached or else <a-scene> will do nothing.

    -

    Next, we include <a-scene> in the <body>. <a-scene> will contain every +

    Next, we include <a-scene> in the <body>. <a-scene> will contain every entity in our scene. <a-scene> handles all of the setup that is required for 3D: setting up WebGL, the canvas, camera, lights, renderer, render loop as well as out of the box WebVR support on platforms such as HTC Vive, Oculus Rift, @@ -1202,7 +1202,7 @@

    <a-box>‘s documentation for +

    Here we define the color <a-box>, see <a-box>‘s documentation for the more attributes (e.g., width, height, depth).

    boximage Image by Ruben Mueller from vrjump.de

    @@ -1210,13 +1210,13 @@

    <a-entity> with the geometry and -material components:

    +underneath <a-box> is <a-entity> with the geometry and +material components:

    <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>
    -

    However, because the default camera and the box are positioned at the default +

    However, because the default camera and the box are positioned at the default position at the 0 0 0 origin, we won’t be able to see the box unless we move -it. We can do this by using the position component to transform the +it. We can do this by using the position component to transform the box in 3D space.

    Transforming an Entity in 3D

    Let’s first go over 3D space. A-Frame uses a right-handed coordinate system. With the default camera direction: positive X-axis extends right, positive @@ -1235,7 +1235,7 @@

    To translate, rotate, and scale the box, we can change the -position, rotation, and scale components. +position, rotation, and scale components. Let’s first apply the rotation and scale components:

    <a-scene>
      <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
    @@ -1292,7 +1292,7 @@ 

    <a-scene>
      <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <!-- Out of the box environment! -->
      <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
    </a-scene>

    Applying an Image Texture

    -

    Make sure you’re serving your HTML using a local server +

    Make sure you’re serving your HTML using a local server for textures to load properly.

    We can apply an image texture to the box with an image, video, or <canvas> @@ -1304,7 +1304,7 @@

    -

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The +

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The asset management system makes it easier for the browser to cache assets (e.g., images, videos, models) and A-Frame will make sure all of the assets are fetched before rendering.

    @@ -1324,7 +1324,7 @@

    Creating a Custom Environment (Optional)

    Previously we had the environment component generate the environment. Though it’s good to know a bit on creating a basic environment for learning purposes.

    -

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. +

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. <a-sky>, which is a material applied to the inside of a large sphere, can be a flat color, a 360° image, or a 360° video. For example, a dark gray background would be:

    @@ -1334,7 +1334,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>
    </a-scene>
    -

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are +

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are oriented parallel to the XY axis. To make it parallel to the ground, we need to orient it along the XZ axis. We can do so by rotating the plane negative 90° on the X-axis.

    @@ -1352,7 +1352,7 @@ 

    <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
      repeat="10 10"></a-plane>
    -

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default +

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default if we don’t specify any lights, A-Frame adds an ambient light and a directional light. If A-Frame didn’t add lights for us, the scene would be black. Once we add lights of our own, however, the default lighting setup is removed and @@ -1365,7 +1365,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>

      <a-light type="ambient" color="#445451"></a-light>
      <a-light type="point" intensity="2" position="2 4 4"></a-light>
    </a-scene>
    -

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation +

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation system. Animations interpolate or tween a value over time. We can set the animation component on the entity. Let’s have the box hover up and down to add some motion to the scene.

    @@ -1373,7 +1373,7 @@

    entity’s object3D’s position’s Y axis. +
  • Animate the entity’s object3D’s position’s Y axis.
  • Animate to 2.2 which is 20 centimeters higher.
  • Alternate the dir (direction) of the animation on each repeated cycle of the animation so it goes back and forth.
  • Last for 2000 millisecond dur (duration) on each cycle.
    • @@ -1384,19 +1384,19 @@

    Given that many developers currently do not have proper VR hardware with controllers, we’ll focus this section on using basic mobile and desktop inputs -with the built-in cursor component. The cursor component by default provides +with the built-in cursor component. The cursor component by default provides the ability to “click” on entities by staring or gazing at them on mobile, or on desktop, looking at an entity and click the mouse. But know that the cursor component is just one way to add interactions, things open up if we have access to actual controllers.

    -

    To have a visible cursor fixed to the camera, we place the cursor as a child +

    To have a visible cursor fixed to the camera, we place the cursor as a child of the camera as explained above in Parent and Child Transforms.

    Since we didn’t specifically define a camera, A-Frame included a default camera for us. But since we need to add a cursor as a child of the camera, we will -need to now define <a-camera> containing <a-cursor>:

    +need to now define <a-camera> containing <a-cursor>:

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"
             animation="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true"></a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
    -

    If we check the documentation of the cursor component that +

    If we check the documentation of the cursor component that <a-cursor> wraps, we see that it emits hover events such as mouseenter, mouseleave as well as click.

    Event Listener Component (Intermediate)

    One way to manually handle the cursor events is to add an event listener with @@ -1404,7 +1404,7 @@

    Animating on Events below.

    In JavaScript, we grab the box with querySelector, use -addEventListener, and then setAttribute +addEventListener, and then setAttribute to make the box grow its scale when its hovered over. Note that A-Frame adds features to setAttribute to work with multi-property components. We can pass a full {x, y, z} object as the second argument.

    @@ -1441,7 +1441,7 @@ 

    <a-scene>
      <!-- ... -->
      <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
        position="-3 1 -4"></a-sound>
      <!-- ... -->
    </a-scene>
    -

    Adding Text

    A-Frame comes with a text component. There are several ways to render +

    Adding Text

    A-Frame comes with a text component. There are several ways to render text, each with their own advantages and disadvantages. A-Frame comes with an SDF text implementation using three-bmfont-text that is relatively sharp and performant:

    diff --git a/docs/1.4.0/guides/building-a-minecraft-demo.html b/docs/1.4.0/guides/building-a-minecraft-demo.html index 89c4579bc..b04b99eb8 100644 --- a/docs/1.4.0/guides/building-a-minecraft-demo.html +++ b/docs/1.4.0/guides/building-a-minecraft-demo.html @@ -1175,7 +1175,7 @@

    Let’s build a basic Minecraft (voxel builder) demo that targets room scale VR with controllers (e.g., Vive, Rift). The example will be minimally usable on mobile and desktop.

    -
    +

    Example Skeleton

    We’ll start off with this skeleton HTML:

    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>

    <body>
      <a-scene>
      </a-scene>
    </body>
    diff --git a/docs/1.4.0/introduction/best-practices.html b/docs/1.4.0/introduction/best-practices.html index 83f403572..4a037ebdc 100644 --- a/docs/1.4.0/introduction/best-practices.html +++ b/docs/1.4.0/introduction/best-practices.html @@ -1169,7 +1169,7 @@

    -

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and +

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and structure application code within purely A-Frame components for reusability, modularity, composability, decoupling, encapsulation, declarativeness, and testability.

    @@ -1186,8 +1186,8 @@

    recommended hardware specifications. -
  • Use the stats component to keep an eye on various metrics (FPS, +
  • Use recommended hardware specifications.
    • +
  • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities). We want to maximize FPS and minimize everything else.
  • Limit draw calls as much as possible. Each geometry, object, model without @@ -1197,7 +1197,7 @@

    asset management system to browser cache and +
  • Make use of the asset management system to browser cache and preload assets.
  • If using models, look to bake your lights into textures rather than relying on real-time lighting and shadows.
    • @@ -1214,16 +1214,16 @@

    background component instead of a-sky to define a +
  • Use the background component instead of a-sky to define a solid color as the scene background. This prevents the creation of unnecessary geometry.
  • Update position, rotation, scale, and visible at the three.js level (el.object3D.position, el.object3D.rotation, el.object3D.scale, el.object3D.visible) to avoid overhead on .setAttribute.
  • If you need to create, remove and re-create many entities of the same type, -use the pool component to pre-generate and reuse entities. This +use the pool component to pre-generate and reuse entities. This avoids the cost of creating entities on the fly and reduces garbage collection.
    • -
  • When using the animation component, animate values directly +
  • When using the animation component, animate values directly which will skip .setAttribute and animate JS values directly. For example, instead of material.opacity, animate components.material.material.opacity.
    • diff --git a/docs/1.4.0/introduction/developing-with-threejs.html b/docs/1.4.0/introduction/developing-with-threejs.html index e75d439a0..0870dc184 100644 --- a/docs/1.4.0/introduction/developing-with-threejs.html +++ b/docs/1.4.0/introduction/developing-with-threejs.html @@ -1199,7 +1199,7 @@

    And every A-Frame entity also has a reference to <a-scene> via .sceneEl:

    document.querySelector('a-entity').sceneEl.object3D;  // THREE.Scene
    -

    From a component, we access the scene through its entity +

    From a component, we access the scene through its entity (i.e., this.el):

    AFRAME.registerComponent('foo', {
      init: function () {
        var scene = this.el.sceneEl.object3D;  // THREE.Scene
      }
    });
    diff --git a/docs/1.4.0/introduction/entity-component-system.html b/docs/1.4.0/introduction/entity-component-system.html index f8075cbd5..2f7543a8e 100644 --- a/docs/1.4.0/introduction/entity-component-system.html +++ b/docs/1.4.0/introduction/entity-component-system.html @@ -1198,20 +1198,20 @@

    A well-known game engine implementing ECS is Unity. Although there are pain points in cross-entity communication, we’ll see how A-Frame, the DOM, and declarative HTML really make ECS shine.

    -
    +

    Concept

    ECS Minecraft

    A basic definition of ECS involves:

    We’ll go over GUI tools built on top of A-Frame that can be used without code. And touch on other tools that can ease development across multiple machines.

    -
    +

    A-Frame Inspector

    The A-Frame Inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:

    diff --git a/docs/1.4.0/introduction/vr-headsets-and-webxr-browsers.html b/docs/1.4.0/introduction/vr-headsets-and-webxr-browsers.html index c6cfe47be..fc2480df7 100644 --- a/docs/1.4.0/introduction/vr-headsets-and-webxr-browsers.html +++ b/docs/1.4.0/introduction/vr-headsets-and-webxr-browsers.html @@ -1169,7 +1169,7 @@

    -
    +

    What is Virtual Reality?

    Virtual reality (VR) is a technology that uses head-mounted headsets with displays to generate the realistic images, sounds, and other sensations to put diff --git a/docs/1.4.0/introduction/writing-a-component.html b/docs/1.4.0/introduction/writing-a-component.html index a1d93bcf2..13ede0530 100644 --- a/docs/1.4.0/introduction/writing-a-component.html +++ b/docs/1.4.0/introduction/writing-a-component.html @@ -1169,7 +1169,7 @@

    -

    Components of A-Frame’s entity-component framework are JavaScript +

    Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, @@ -1177,7 +1177,7 @@

    components.

    vehicleimage Image by Ruben Mueller from vrjump.de

    -

    This guide will take it pretty slow. We recommend skimming over the Component +

    This guide will take it pretty slow. We recommend skimming over the Component API documentation before going through this guide as that documentation will be more concise. Note that components should be defined before <a-scene> like:

    @@ -1191,12 +1191,12 @@

    Example: hello-world Component

    Let’s start with the most basic component to get a general idea. This component will log a simple message once when the component’s entity is attached using -the .init() handler.

    +the .init() handler.

    Registering the Component with AFRAME.registerComponent

    Components are registered with AFRAME.registerComponent(). We pass the name of the component, which will be used as the HTML attribute name in the component’s representation in the DOM. Then we pass the component definition which is a JavaScript object of methods and properties. Within the definition, we can -define lifecycle handler methods. One of which is .init(), which +define lifecycle handler methods. One of which is .init(), which is called once when the component is first plugged into its entity.

    In the example below, we just have our .init() handler log a simple message.

    AFRAME.registerComponent('hello-world', {
      init: function () {
        console.log('Hello, World!');
      }
    });
    @@ -1250,7 +1250,7 @@

    Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

    To demonstrate this, we’ll have our log component only log whenever its -entity emits an event. First, we’ll add an event property type that +entity emits an event. First, we’ll add an event property type that specifies which event the component should listen on.

    // ...
    schema: {
      event: {type: 'string', default: ''},
      message: {type: 'string', default: 'Hello, World!'},
    },
    // ...
    @@ -1259,7 +1259,7 @@

    add an event listener that will +

    What we want to do is add an event listener that will listen to the event before logging a message. If the event property type is not specified, we’ll just log the message:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      update: function () {
        var data = this.data;  // Component property values.
        var el = this.el;  // Reference to the component's entity.

        if (data.event) {
          // This will log the `message` when the entity emits the `event`.
          el.addEventListener(data.event, function () {
            console.log(data.message);
          });
        } else {
          // `event` not specified, just log the message.
          console.log(data.message);
        }
      }
    });
    @@ -1268,7 +1268,7 @@

    , we need a reference to the function. So +

    But to remove an event listener, we need a reference to the function. So let’s first store the function on this.eventHandlerFn whenever we attach an event listener. When we attach properties to the component via this, they’ll be available throughout all the other lifecycle handlers.

    @@ -1283,13 +1283,13 @@ 

    <a-scene>
      <a-entity log="event: anEvent; message: Hello, Metaverse!"></a-entity>
    </a-scene>
    -

    Let’s have our entity emit the event to test it out:

    +

    Let’s have our entity emit the event to test it out:

    var el = document.querySelector('a-entity');
    el.emit('anEvent');
    // >> "Hello, Metaverse!"

    Now let’s update our event to test the .update() handler:

    var el = document.querySelector('a-entity');
    el.setAttribute('log', {event: 'anotherEvent', message: 'Hello, new event!'});
    el.emit('anotherEvent');
    // >> "Hello, new event!"
    -

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity +

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity (i.e., .removeAttribute('log')). We can implement the .remove() handler which is called when the component is removed. For the log component, we remove any event listeners the component attached to the entity:

    @@ -1302,7 +1302,7 @@ 

    var el = document.querySelector('a-entity');
    el.removeAttribute('log');
    el.emit('anEvent');
    // >> Nothing should be logged...

    Allowing Multiple Instances of a Component

    Let’s allow having multiple log components attached to the same entity. To do -so, we enable multiple instancing with the .multiple flag. Let’s +so, we enable multiple instancing with the .multiple flag. Let’s set that to true:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      multiple: true,

      // ...
    });
    @@ -1319,13 +1319,13 @@

    Example: box Component

    For a less trivial example, let’s find out how we can add 3D objects and affect -the scene graph by writing a component that uses three.js. To get +the scene graph by writing a component that uses three.js. To get the idea, we’ll just make a basic box component that creates a box mesh with both geometry and material.

    boximage Image by Ruben Mueller from vrjump.de

    Note: this is just a 3D equivalent of writing a Hello, World! component. -A-Frame provides geometry and material components if we +A-Frame provides geometry and material components if we actually wanted to make a box in practice.

    Schema and API

    Let’s start with the schema. The schema defines the API of your component. We’ll make the width, height, depth, and color configurable through the @@ -1342,7 +1342,7 @@

    THREE.BoxBufferGeometry, THREE.MeshStandardMaterial, and finally a THREE.Mesh. Then we set the mesh on our entity to add the mesh to the -three.js scene graph using .setObject3D(name, object):

    +three.js scene graph using .setObject3D(name, object):

    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.BoxBufferGeometry(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);
      }
    });

    Now let’s handle updates. If the geometry-related properties (i.e., width, diff --git a/docs/1.4.0/primitives/a-circle.html b/docs/1.4.0/primitives/a-circle.html index e0ce43bf2..e4ed6a101 100644 --- a/docs/1.4.0/primitives/a-circle.html +++ b/docs/1.4.0/primitives/a-circle.html @@ -1169,7 +1169,7 @@

    -

    The circle primitive creates circles surfaces using the geometry +

    The circle primitive creates circles surfaces using the geometry component with the type set to circle.

    Example

    <a-scene>
      <a-assets>
        <img id="platform" src="platform.jpg">
      </a-assets>

      <!-- Basic circle. -->
      <a-circle color="#CCC" radius="20"></a-circle>

      <!-- Textured circle parallel to ground. -->
      <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
    </a-scene>
    diff --git a/docs/1.4.0/primitives/a-cursor.html b/docs/1.4.0/primitives/a-cursor.html index ccda696be..be0415be6 100644 --- a/docs/1.4.0/primitives/a-cursor.html +++ b/docs/1.4.0/primitives/a-cursor.html @@ -1173,7 +1173,7 @@

    interactivity with a scene on devices that do not have a hand controller. The default appearance is a ring geometry. The cursor is usually placed as a child of the camera.

    -

    Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

    +

    Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

    Example

    <a-scene>
      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>

      <a-box></a-box>
    </a-scene>

    Attributes

    diff --git a/docs/1.4.0/primitives/a-gltf-model.html b/docs/1.4.0/primitives/a-gltf-model.html index b466a4593..5df535ec9 100644 --- a/docs/1.4.0/primitives/a-gltf-model.html +++ b/docs/1.4.0/primitives/a-gltf-model.html @@ -1183,7 +1183,7 @@

    - +
    srcgltf-model.srcgltf-model.src null
    diff --git a/docs/1.4.0/primitives/a-obj-model.html b/docs/1.4.0/primitives/a-obj-model.html index 2381b3149..fbd0f3b54 100644 --- a/docs/1.4.0/primitives/a-obj-model.html +++ b/docs/1.4.0/primitives/a-obj-model.html @@ -1171,7 +1171,7 @@

    We recommend glTF for distributing assets in production over the web. Check -out using the glTF model primitive. You can +out using the glTF model primitive. You can either instead export to COLLADA and use the converter or try out the OBJ converter.

    @@ -1198,7 +1198,7 @@

    null -

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    +

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    diff --git a/docs/1.4.0/primitives/a-plane.html b/docs/1.4.0/primitives/a-plane.html index 64b6b182c..53e17b7fd 100644 --- a/docs/1.4.0/primitives/a-plane.html +++ b/docs/1.4.0/primitives/a-plane.html @@ -1169,7 +1169,7 @@

    -

    The plane primitive creates flat surfaces using the geometry +

    The plane primitive creates flat surfaces using the geometry component with the type set to plane.

    Example

    <a-scene>
      <a-assets>
        <img id="ground" src="ground.jpg">
      </a-assets>

      <!-- Basic plane. -->
      <a-plane color="#CCC" height="20" width="20"></a-plane>

      <!-- Textured plane parallel to ground. -->
      <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
    </a-scene>
    diff --git a/docs/1.4.0/primitives/a-sound.html b/docs/1.4.0/primitives/a-sound.html index bc338080a..2f6bef60c 100644 --- a/docs/1.4.0/primitives/a-sound.html +++ b/docs/1.4.0/primitives/a-sound.html @@ -1169,7 +1169,7 @@

    -

    The sound primitive wraps the sound component.

    +

    The sound primitive wraps the sound component.

    Example

    <a-scene>
      <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
    </a-scene>

    Attributes

    diff --git a/docs/1.4.0/primitives/a-sphere.html b/docs/1.4.0/primitives/a-sphere.html index 2514975c9..11a3e0ae3 100644 --- a/docs/1.4.0/primitives/a-sphere.html +++ b/docs/1.4.0/primitives/a-sphere.html @@ -1169,7 +1169,7 @@

    -

    The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

    +

    The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

    Example

    <a-sphere color="yellow" radius="5"></a-sphere>

    Attributes

    diff --git a/docs/1.4.0/primitives/a-text.html b/docs/1.4.0/primitives/a-text.html index 64c8a5e87..6c0f9bf81 100644 --- a/docs/1.4.0/primitives/a-text.html +++ b/docs/1.4.0/primitives/a-text.html @@ -1169,7 +1169,7 @@

    -

    Wraps the text component.

    +

    Wraps the text component.

    Example

    <a-text value="Hello, World!"></a-text>

    Attributes

    diff --git a/docs/1.4.0/primitives/a-torus-knot.html b/docs/1.4.0/primitives/a-torus-knot.html index 07588f552..119a753af 100644 --- a/docs/1.4.0/primitives/a-torus-knot.html +++ b/docs/1.4.0/primitives/a-torus-knot.html @@ -1169,7 +1169,7 @@

    -

    The torus knot primitive creates pretzel shapes using the geometry +

    The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

    Example

    <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
    diff --git a/docs/1.4.0/primitives/a-torus.html b/docs/1.4.0/primitives/a-torus.html index d4ffe77bc..2395c3fca 100644 --- a/docs/1.4.0/primitives/a-torus.html +++ b/docs/1.4.0/primitives/a-torus.html @@ -1169,7 +1169,7 @@

    -

    The torus primitive creates donut or tube shapes using the geometry +

    The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

    Example

    <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
    diff --git a/docs/1.4.0/primitives/a-triangle.html b/docs/1.4.0/primitives/a-triangle.html index 41213fcb5..377b243d2 100644 --- a/docs/1.4.0/primitives/a-triangle.html +++ b/docs/1.4.0/primitives/a-triangle.html @@ -1169,7 +1169,7 @@

    -

    The triangle primitive creates triangle surfaces using the geometry +

    The triangle primitive creates triangle surfaces using the geometry component with the type set to triangle.

    Example

    <a-scene>
      <a-assets>
        <img id="platform" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <!-- Basic triangle. -->
      <a-triangle color="#CCC" vertex-c="1 -1 0"></a-triangle>

      <!-- Textured triangle parallel to ground. -->
      <a-triangle src="#platform" rotation="-90 0 0"></a-triangle>
    </a-scene>
    diff --git a/docs/1.4.0/primitives/a-videosphere.html b/docs/1.4.0/primitives/a-videosphere.html index 08b1772f6..535adc5d0 100644 --- a/docs/1.4.0/primitives/a-videosphere.html +++ b/docs/1.4.0/primitives/a-videosphere.html @@ -1176,7 +1176,7 @@

    Ex

    Methods

    More indepth knowledge on the methods to alter video material can be seen over here

    // 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();
    -

    Attributes

    Note that the videosphere primitive inherits common attributes.

    +

    Attributes

    Note that the videosphere primitive inherits common attributes.

    diff --git a/docs/1.5.0/components/animation.html b/docs/1.5.0/components/animation.html index 2962bfb9e..fae60000a 100644 --- a/docs/1.5.0/components/animation.html +++ b/docs/1.5.0/components/animation.html @@ -1202,7 +1202,7 @@

    Read more below for additional options and discovering how to properly animate different types of values.

    -
    +

    API

    Properties

    diff --git a/docs/1.5.0/components/cursor.html b/docs/1.5.0/components/cursor.html index e0e82049e..7847920d0 100644 --- a/docs/1.5.0/components/cursor.html +++ b/docs/1.5.0/components/cursor.html @@ -1184,11 +1184,11 @@

    The cursor component provides hover and click states for interaction on top of -the raycaster component. The cursor component can be used for +the raycaster component. The cursor component can be used for both gaze-based and controller-based interactions, but the appearance needs -to be configured depending on the use case. The <a-cursor> +to be configured depending on the use case. The <a-cursor> primitive provides a default reticle appearance for a gaze-based -cursor, and the laser-controls component configures the +cursor, and the laser-controls component configures the cursor for all controllers.

    The cursor component listens to events and keeps state on what’s being hovered and pressed in order to provide mousedown, mouseup, mouseenter, @@ -1199,15 +1199,15 @@

    By default, the cursor is configured to be used in a gaze-based mode and will register user input via mouse or touch. Specifying the downEvents and upEvents properties allows the cursor to work with controllers. For example, -the laser-controls component automatically configures these +the laser-controls component automatically configures these properties to work with most controllers.

    To provide a shape or appearance to the cursor, we should apply either the -geometry and material components or use the raycaster -component’s showLine property to draw a line using the line +geometry and material components or use the raycaster +component’s showLine property to draw a line using the line component.

    Example

    For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no -matter where we look, we place it as a child of the active camera +matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

    <a-entity camera look-controls>
      <a-entity cursor="fuse: true; fuseTimeout: 500"
                position="0 0 -1"
                geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                material="color: black; shader: flat">
      </a-entity>
    </a-entity>

    <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
    @@ -1254,7 +1254,7 @@

    To further customize the cursor component, we configure the cursor’s dependency -component, the raycaster component.

    +component, the raycaster component.

    Events

    @@ -1338,7 +1338,7 @@

    States

    Configuring the Cursor through the Raycaster Component

    The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

    <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>
    @@ -1353,7 +1353,7 @@

    Adding Visual Feedback

    To add visual feedback to the cursor to show when the cursor is clicking or -fusing, we can use the animation component. When the cursor +fusing, we can use the animation component. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

    <a-entity
      animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
      animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
      animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
      cursor="fuse: true;"
      material="color: black; shader: flat"
      position="0 0 -3"
      geometry="primitive: ring"></a-entity>
    diff --git a/docs/1.5.0/components/debug.html b/docs/1.5.0/components/debug.html index 4062a7792..caa1f2b97 100644 --- a/docs/1.5.0/components/debug.html +++ b/docs/1.5.0/components/debug.html @@ -1200,8 +1200,8 @@ 

    <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

    Make sure that this component is not active in production.

    -

    Manually Serializing to DOM

    To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM:

    +

    Manually Serializing to DOM

    To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM:

    document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
    document.querySelector('a-entity').flushToDOM();  // Flush an entity.
    document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
    document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.
    diff --git a/docs/1.5.0/components/device-orientation-permission-ui.html b/docs/1.5.0/components/device-orientation-permission-ui.html index 4db50d01b..9f6741252 100644 --- a/docs/1.5.0/components/device-orientation-permission-ui.html +++ b/docs/1.5.0/components/device-orientation-permission-ui.html @@ -1184,7 +1184,7 @@

    Starting with Safari on iOS 13 browsers require sites to be served over https and request user permission to access DeviceOrientation events. This component presents a permission dialog for the user to grant or deny access. -The device-orientation-permission-ui component applies only to the <a-scene> element

    +The device-orientation-permission-ui component applies only to the <a-scene> element

    To configure the style of the dialog one can redefine the associated css styles. To change the colors of the allow, deny and ok buttons:

    .a-dialog-allow-button {
      background-color: red;
    }

    .a-dialog-deny-button {
      background-color: blue;
    }

    .a-dialog-ok-button {
       background-color: green;
     }
    diff --git a/docs/1.5.0/components/fog.html b/docs/1.5.0/components/fog.html index b89ae8d14..d7892206f 100644 --- a/docs/1.5.0/components/fog.html +++ b/docs/1.5.0/components/fog.html @@ -1184,7 +1184,7 @@

    The fog component obscures entities in fog given distance from the camera. The -fog component applies only to the <a-scene> element.

    +fog component applies only to the <a-scene> element.

    Example

    <a-scene fog="type: linear; color: #AAA"></a-scene>

    Properties

    Given the fog distribution type, different properties will apply.

    diff --git a/docs/1.5.0/components/geometry.html b/docs/1.5.0/components/geometry.html index faffb3d4c..183e34faf 100644 --- a/docs/1.5.0/components/geometry.html +++ b/docs/1.5.0/components/geometry.html @@ -1189,7 +1189,7 @@

    provide an appearance alongside the shape to create a complete mesh.

    Overview of available geometries: all-available-a-frame-geometries

    -
    +

    Base Properties

    Every geometry type will have these properties:

    @@ -1729,7 +1729,7 @@ 

    AFRAME.registerGeometry('box', {
      schema: {
        depth: {default: 1, min: 0},
        height: {default: 1, min: 0},
        width: {default: 1, min: 0},
        segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
        segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
        segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
      },

      init: function (data) {
        this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
      }
    });

    Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then we need to create the geometry and set on this.geometry through the init lifecycle method.

    When a geometry component sets its primitive property to the custom geometry diff --git a/docs/1.5.0/components/gltf-model.html b/docs/1.5.0/components/gltf-model.html index c6eac667b..9a60e38cc 100644 --- a/docs/1.5.0/components/gltf-model.html +++ b/docs/1.5.0/components/gltf-model.html @@ -1195,9 +1195,9 @@

    NOTE: A-Frame supports glTF 2.0. For models using older versions of the glTF format, use gltf-model-legacy from donmccurdy/aframe-extras.

    -
    + -

    Why use glTF?

    In comparison to the older OBJ format, which supports only +

    Why use glTF?

    In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features. In addition to all of the above, glTF offers:

      diff --git a/docs/1.5.0/components/hand-controls.html b/docs/1.5.0/components/hand-controls.html index d67f3dd10..61cb2b348 100644 --- a/docs/1.5.0/components/hand-controls.html +++ b/docs/1.5.0/components/hand-controls.html @@ -1184,8 +1184,8 @@

      The hand-controls component provides tracked hands (using a prescribed model) -with animated gestures. hand-controls wraps the vive-controls and -oculus-touch-controls which in turn wrap the tracked-controls +with animated gestures. hand-controls wraps the vive-controls and +oculus-touch-controls which in turn wrap the tracked-controls component. By specifying just hand-controls, we have something that works well with both Vive and Rift. The component gives extra events and handles hand animations and poses.

      diff --git a/docs/1.5.0/components/keyboard-shortcuts.html b/docs/1.5.0/components/keyboard-shortcuts.html index f0ab39825..a80052bd2 100644 --- a/docs/1.5.0/components/keyboard-shortcuts.html +++ b/docs/1.5.0/components/keyboard-shortcuts.html @@ -1184,7 +1184,7 @@

      The keyboard-shortcuts component toggles global keyboard shortcuts. The -keyboard-shortcuts component applies only to the <a-scene> element.

      +keyboard-shortcuts component applies only to the <a-scene> element.

      Example

      <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

      Properties

      diff --git a/docs/1.5.0/components/laser-controls.html b/docs/1.5.0/components/laser-controls.html index 346bca75c..ed481f7ed 100644 --- a/docs/1.5.0/components/laser-controls.html +++ b/docs/1.5.0/components/laser-controls.html @@ -1195,15 +1195,15 @@

      configures other components, rather than implementing any logic itself. Under the hood, laser-controls sets all of the tracked controller components:

      These controller components get activated if its respective controller is connected and detected via the Gamepad API. Then the model of the actual -controller is used. laser-controls then configures the cursor +controller is used. laser-controls then configures the cursor component for listen to the appropriate events and configures the -raycaster component to draw the laser.

      +raycaster component to draw the laser.

      When the laser intersects with an entity, the length of the line gets truncated to the distance to the intersection point.

      Example

      <a-entity laser-controls="hand: left"></a-entity>
      @@ -1228,11 +1228,11 @@

      Color for the default controller model. -

      Customizing the Raycaster

      Configure the raycaster properties.

      +

      Customizing the Raycaster

      Configure the raycaster properties.

      For example:

      <a-entity laser-controls raycaster="objects: .links; far: 5"></a-entity>
      -

      Customizing the Line

      See Raycaster: Customizing the Line.

      +

      Customizing the Line

      See Raycaster: Customizing the Line.

      For example:

      <a-entity laser-controls raycaster="lineColor: red; lineOpacity: 0.5"></a-entity>
      diff --git a/docs/1.5.0/components/light.html b/docs/1.5.0/components/light.html index fc9fa4d47..8ffd4b033 100644 --- a/docs/1.5.0/components/light.html +++ b/docs/1.5.0/components/light.html @@ -1198,7 +1198,7 @@

      To manually disable the defaults, without adding other lights:

      <a-scene light="defaultLightsEnabled: false">
        <!-- ... -->
      </a-scene>
      -
      +

      Properties

      All light types support a few basic properties:

      @@ -1341,7 +1341,7 @@

      Spot

      Sp

      Probe

      Probe lights are kind of like ambient lighting in that they don’t have a particular source or direction and light everything equally.

      -

      Where they differ though is that they will color each angle differently based upon a spherical harmonic. This spherical harmonic is generated by analyzing a cubemap. The cubemap you provide doesn’t need to be high resolution since it’s only used to generate the spherical harmonics.

      +

      Where they differ though is that they will color each angle differently based upon a spherical harmonic. This spherical harmonic is generated by analyzing a cubemap. The cubemap you provide doesn’t need to be high resolution since it’s only used to generate the spherical harmonics.

      @@ -1367,7 +1367,7 @@

      Probe

      <

      Configuring Shadows

      A-Frame includes support for realtime shadow rendering. With proper configuration, objects (both moving or stationary) will cast shadows adding depth and realism to a scene. Since shadows come with many properties, it -is very helpful to use the A-Frame Inspector to configure shadows

      +is very helpful to use the A-Frame Inspector to configure shadows

      Light types that support shadows (point, spot, and directional) include additional properties:

      diff --git a/docs/1.5.0/components/line.html b/docs/1.5.0/components/line.html index f40be96c8..d2ba96da2 100644 --- a/docs/1.5.0/components/line.html +++ b/docs/1.5.0/components/line.html @@ -1185,8 +1185,8 @@

      The line component draws a line given a start coordinate and end coordinate using THREE.Line.

      -

      The raycaster component uses the line component for its showLine -property, which is then used by the laser-controls component.

      +

      The raycaster component uses the line component for its showLine +property, which is then used by the laser-controls component.

      Example

      <a-entity line="start: 0 1 0; end: 2 0 -5; color: red"
                line__2="start: -2 4 5; end: 0 4 -3; color: green"></a-entity>

      Note an entity can have multiple lines. The line mesh is set as line or diff --git a/docs/1.5.0/components/look-controls.html b/docs/1.5.0/components/look-controls.html index db7d14616..c746e90bc 100644 --- a/docs/1.5.0/components/look-controls.html +++ b/docs/1.5.0/components/look-controls.html @@ -1189,7 +1189,7 @@

    • Rotates the entity when we move the mouse.
    • Rotates the entity when we touch-drag the touchscreen.

    -

    Example

    The look-controls component is usually used alongside the camera +

    Example

    The look-controls component is usually used alongside the camera component.

    <a-entity camera look-controls position="0 1.6 0"></a-entity>
    diff --git a/docs/1.5.0/components/magicleap-controls.html b/docs/1.5.0/components/magicleap-controls.html index 9500674a7..6fba0857f 100644 --- a/docs/1.5.0/components/magicleap-controls.html +++ b/docs/1.5.0/components/magicleap-controls.html @@ -1184,7 +1184,7 @@

    The magicleap-controls component interfaces with the Magic Leap controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and Magic Leap controller model/

    Example

    <!-- Match Magic Leap controller if present, regardless of hand. -->
    <a-entity magicleap-controls></a-entity>

    <!-- Match Magic Leap controller if present and for specified hand. -->
    <a-entity magicleap-controls="hand: left"></a-entity>
    <a-entity magicleap-controls="hand: right"></a-entity>
    diff --git a/docs/1.5.0/components/material.html b/docs/1.5.0/components/material.html index 56d46fdba..5ffdfbb08 100644 --- a/docs/1.5.0/components/material.html +++ b/docs/1.5.0/components/material.html @@ -1184,11 +1184,11 @@

    The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

    We can register custom materials to extend the material component to provide a wide range of visual effects.

    -
    +

    Example

    Defining a red material using the default standard material:

    <a-entity geometry="primitive: box" material="color: red"></a-entity>
    @@ -1281,7 +1281,7 @@

    anisotropy -The anisotropic filtering sample rate to use for the textures. A value of 0 means the default value will be used, see renderer +The anisotropic filtering sample rate to use for the textures. A value of 0 means the default value will be used, see renderer 0 @@ -1384,12 +1384,12 @@

    or a comma-separated list of URLs. See below for more detail. +Environment cubemap texture for reflections. Can be a selector to or a comma-separated list of URLs. See below for more detail. None fog -Whether or not material is affected by fog. +Whether or not material is affected by fog. true @@ -1531,7 +1531,7 @@

    cubemap, six images put together +

    Unlike textures, the envMap property takes a cubemap, six images put together to form a cube. The cubemap wraps around the mesh and applied as a texture.

    For example:

    <a-scene>
      <a-assets>
        <a-cubemap id="sky">
          <img src="right.png">
          <img src="left.png">
          <img src="top.png">
          <img src="bottom.png">
          <img src="front.png">
          <img src="back.png">
        </a-cubemap>
      </a-assets>

      <a-entity geometry="primitive: box" material="envMap: #sky; roughness: 0"></a-entity>
    </a-scene>
    @@ -1561,7 +1561,7 @@

    fog. +Whether or not material is affected by fog. true @@ -1602,7 +1602,7 @@

    Textures

    To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

    +asset management system:

    <a-scene>
      <a-assets>
        <img id="my-texture" src="texture.png">
      </a-assets>

      <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
    </a-scene>

    src can also be an inline URL. Note that we do not get browser caching or diff --git a/docs/1.5.0/components/obj-model.html b/docs/1.5.0/components/obj-model.html index 44855ed45..a1db3aebd 100644 --- a/docs/1.5.0/components/obj-model.html +++ b/docs/1.5.0/components/obj-model.html @@ -1201,7 +1201,7 @@

    mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

    Events

    @@ -1219,7 +1219,7 @@

    EventsLoading Inline

    We can also load assets by specifying the path directly within url(). Note this is less performant than going through the asset management system.

    <a-entity obj-model="obj: url(/path/to/tree.obj); mtl: url(/path/to/tree.mtl)"></a-entity>
    -

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    +

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    Additional Resources

    We can find and download models on the web to drop into our scenes:

    • Sketchup’s 3D Warehouse - Repository of models.
      • diff --git a/docs/1.5.0/components/oculus-touch-controls.html b/docs/1.5.0/components/oculus-touch-controls.html index b6fb3713a..ae8499a44 100644 --- a/docs/1.5.0/components/oculus-touch-controls.html +++ b/docs/1.5.0/components/oculus-touch-controls.html @@ -1184,7 +1184,7 @@

      The oculus-touch-controls component interfaces with the Oculus Touch controllers (Rift, Rift S, Oculus Quest 1 and 2). It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.

      Example

      <a-entity oculus-touch-controls="hand: left"></a-entity>
      <a-entity oculus-touch-controls="hand: right"></a-entity>
      diff --git a/docs/1.5.0/components/position.html b/docs/1.5.0/components/position.html index 7e0386b44..2da9c0f81 100644 --- a/docs/1.5.0/components/position.html +++ b/docs/1.5.0/components/position.html @@ -1222,7 +1222,7 @@

      #child2‘s position would be 2 3 4.

      Updating Position

      For performance and ergonomics, we recommend updating position directly via the -three.js Object3D .position Vector3 versus via +three.js Object3D .position Vector3 versus via .setAttribute.

      This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1236,11 +1236,11 @@

      Getting Position

      To reflect updates done at the three.js level, A-Frame returns the actual Object3D.position vector object when doing .getAttribute('position'). Note modifying the return value will modify the entity itself.

      -

      See also reading position and rotation of the camera.

      +

      See also reading position and rotation of the camera.

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/1.5.0/components/raycaster.html b/docs/1.5.0/components/raycaster.html index e0450e3bb..b72c2d703 100644 --- a/docs/1.5.0/components/raycaster.html +++ b/docs/1.5.0/components/raycaster.html @@ -1195,7 +1195,7 @@

      is explicitly defined via the objects selector property described below. Raycasting is an expensive operation, and we should raycast against only targets that need to be interactable at any given time.

      -

      The cursor component and laser-controls components +

      The cursor component and laser-controls components both build on top of the raycaster component.

      Example

      <a-entity id="player" >
        <a-entity collider-check raycaster="objects: .collidable; showLine:true;" position="0 1 0"></a-entity>
      </a-entity>
      <a-entity class="collidable" geometry="primitive: box"  position="0 1 -3"></a-entity>
      @@ -1263,7 +1263,7 @@

      showLine -Whether or not to display the raycaster visually with the line component. +Whether or not to display the raycaster visually with the line component. false @@ -1290,7 +1290,7 @@

      Events raycaster-intersection -Emitted on the raycasting entity. Raycaster is intersecting with one or more entities. Event detail will contain els, an array with the newly intersected entities, and intersections, and .getIntersection (el) function which can be used to obtain current intersection data. For access to a complete list of intersections (existing & new), see Members intersectedEls. +Emitted on the raycasting entity. Raycaster is intersecting with one or more entities. Event detail will contain els, an array with the newly intersected entities, and intersections, and .getIntersection (el) function which can be used to obtain current intersection data. For access to a complete list of intersections (existing & new), see Members intersectedEls. raycaster-intersection-cleared diff --git a/docs/1.5.0/components/renderer.html b/docs/1.5.0/components/renderer.html index 8b7f39213..7a9a482bf 100644 --- a/docs/1.5.0/components/renderer.html +++ b/docs/1.5.0/components/renderer.html @@ -1317,7 +1317,7 @@

      here

      +

      Some more background on how A-Frame sorts objects for rendering can be found here

      physicallyCorrectLights

      By default, point and spot lights attenuate (or, appear dimmer as they become farther away) according to a model that is classically common, but physically inaccurate. For more realistic light attenuation, set renderer="physicallyCorrectLights: true". Light intensities may need to diff --git a/docs/1.5.0/components/rotation.html b/docs/1.5.0/components/rotation.html index e882ce652..41b0a31f0 100644 --- a/docs/1.5.0/components/rotation.html +++ b/docs/1.5.0/components/rotation.html @@ -1227,7 +1227,7 @@

      15 45 30.

      Updating Rotation

      For performance and ergonomics, we recommend updating rotation directly via the three.js Object3D .rotation Euler (in radians) versus -via .setAttribute.

      +via .setAttribute.

      This method is easier because we have access to all the Euler utilities, and faster by skipping .setAttribute overhead and not needing to create an object to set rotation:

      @@ -1237,12 +1237,12 @@

      reading position and rotation of the camera.

      +

      See also reading position and rotation of the camera.

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/1.5.0/components/scale.html b/docs/1.5.0/components/scale.html index 8d5f34989..240f856f8 100644 --- a/docs/1.5.0/components/scale.html +++ b/docs/1.5.0/components/scale.html @@ -1226,7 +1226,7 @@

      Relative Scale

      Similar to the rotation and position components, scales are applied in the local coordinate system and multiply in nested entities.

      Updating Scale

      For performance and ergonomics, we recommend updating scale directly via the -three.js Object3D .scale Vector3 versus via +three.js Object3D .scale Vector3 versus via .setAttribute.

      This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1242,8 +1242,8 @@

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/1.5.0/components/shadow.html b/docs/1.5.0/components/shadow.html index 9dc2e6d2b..9a5883583 100644 --- a/docs/1.5.0/components/shadow.html +++ b/docs/1.5.0/components/shadow.html @@ -1193,7 +1193,7 @@

      Examp

      IMPORTANT: Adding the shadow component alone is not enough to display shadows in your scene. We must have at least one light with castShadow: true enabled. Additionally, the light’s shadow camera (used for depth -projection) usually must be configured correctly. Refer to the light +projection) usually must be configured correctly. Refer to the light component for more information.

      Properties

      diff --git a/docs/1.5.0/components/sound.html b/docs/1.5.0/components/sound.html index c95d387bf..e9d02275d 100644 --- a/docs/1.5.0/components/sound.html +++ b/docs/1.5.0/components/sound.html @@ -1185,7 +1185,7 @@

      The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the -components-position.

      +components-position.

      NOTE: Playing sound on iOS — in any browser — requires a physical user interaction. This is a browser limitation, and internal A-Frame events (like fusing cursors) do diff --git a/docs/1.5.0/components/stats.html b/docs/1.5.0/components/stats.html index 503478c44..cf0b9be74 100644 --- a/docs/1.5.0/components/stats.html +++ b/docs/1.5.0/components/stats.html @@ -1184,7 +1184,7 @@

      The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

      +component applies only to the <a-scene> element.

      Example

      <a-scene stats></a-scene>

      Metrics

        diff --git a/docs/1.5.0/components/text.html b/docs/1.5.0/components/text.html index bb87e973f..d0ef59f72 100644 --- a/docs/1.5.0/components/text.html +++ b/docs/1.5.0/components/text.html @@ -1185,7 +1185,7 @@

        The text component renders signed distance field (SDF) font text.

        Example Image

        -
        +

        Introduction

        Note that rendering text in 3D is hard. In 2D web development, text is the most basic thing because the browser’s renderer and layout engine handle @@ -1433,8 +1433,8 @@

        SizingChange the width.
      • Change the wrapCount (roughly how many characters to fit inside the given width).
      • Change wrapPixels.
        • -
      • Change the scale component.
        • -
      • Position the text closer or farther away.
        • +
      • Change the scale component.
        • +
      • Position the text closer or farther away.

      Sizing

      Text can be wrapped by specifying width in A-Frame units.

      diff --git a/docs/1.5.0/components/tracked-controls.html b/docs/1.5.0/components/tracked-controls.html index b9c6782ae..a0c8d462f 100644 --- a/docs/1.5.0/components/tracked-controls.html +++ b/docs/1.5.0/components/tracked-controls.html @@ -1185,9 +1185,9 @@

      The tracked-controls component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is -abstracted by the hand-controls component as well as the -vive-controls, oculus-touch-controls, -windows-motion-controls components. +abstracted by the hand-controls component as well as the +vive-controls, oculus-touch-controls, +windows-motion-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events. For non-6DOF controllers, a primitive arm model is used to emulate positional data.

      diff --git a/docs/1.5.0/components/visible.html b/docs/1.5.0/components/visible.html index 08621520a..18129f2c3 100644 --- a/docs/1.5.0/components/visible.html +++ b/docs/1.5.0/components/visible.html @@ -1207,7 +1207,7 @@

      Value

      < The entity will not be rendered nor visible. The entity will still exist in the scene. -

      Updating Visibility

      It is slightly faster to update visibility at the three.js level versus via +

      Updating Visibility

      It is slightly faster to update visibility at the three.js level versus via .setAttribute.

      // With three.js
      el.object3D.visible = false;

      // With .setAttribute.
      el.setAttribute('visible', false);
      diff --git a/docs/1.5.0/components/vive-controls.html b/docs/1.5.0/components/vive-controls.html index a398853c5..f6ca1b4e3 100644 --- a/docs/1.5.0/components/vive-controls.html +++ b/docs/1.5.0/components/vive-controls.html @@ -1184,7 +1184,7 @@

      The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

      Example

      <a-entity vive-controls="hand: left"></a-entity>
      <a-entity vive-controls="hand: right"></a-entity>
      diff --git a/docs/1.5.0/components/vive-focus-controls.html b/docs/1.5.0/components/vive-focus-controls.html index 782a81dd9..39fed5250 100644 --- a/docs/1.5.0/components/vive-focus-controls.html +++ b/docs/1.5.0/components/vive-focus-controls.html @@ -1184,7 +1184,7 @@

      The vive-focus-controls component interfaces with the Vive Focus controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Vive Focus controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

      Example

      <!-- Match Vive Focus controller if present, regardless of hand. -->
      <a-entity vive-focus-controls></a-entity>

      <!-- Match Vive Focus controller if present and for specified hand. -->
      <a-entity vive-focus-controls="hand: left"></a-entity>
      <a-entity vive-focus-controls="hand: right"></a-entity>
      diff --git a/docs/1.5.0/components/wasd-controls.html b/docs/1.5.0/components/wasd-controls.html index 6592533b9..c56571d42 100644 --- a/docs/1.5.0/components/wasd-controls.html +++ b/docs/1.5.0/components/wasd-controls.html @@ -1184,7 +1184,7 @@

      The wasd-controls component controls an entity with the WASD or arrow keyboard -keys. The wasd-controls component is commonly attached to an entity with the camera +keys. The wasd-controls component is commonly attached to an entity with the camera component.

      Example

      <a-entity camera look-controls wasd-controls="acceleration:100" position="0 1.6 0"></a-entity>
      diff --git a/docs/1.5.0/components/windows-motion-controls.html b/docs/1.5.0/components/windows-motion-controls.html index f52338cc9..00b89df56 100644 --- a/docs/1.5.0/components/windows-motion-controls.html +++ b/docs/1.5.0/components/windows-motion-controls.html @@ -1185,7 +1185,7 @@

      The windows-motion-controls component 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 +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.)

      Example

      <a-entity windows-motion-controls="hand: left"></a-entity>
      <a-entity windows-motion-controls="hand: right"></a-entity>
      diff --git a/docs/1.5.0/components/xr-mode-ui.html b/docs/1.5.0/components/xr-mode-ui.html index 98cf6adf4..fa6d2b08d 100644 --- a/docs/1.5.0/components/xr-mode-ui.html +++ b/docs/1.5.0/components/xr-mode-ui.html @@ -1185,7 +1185,7 @@

      The xr-mode-ui component allows configuring and disabling of UI such as the enter VR / AR button, compatibility modal, and orientation modal for mobile. The xr-mode-ui component applies only -to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

      +to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

      Example

      <a-scene xr-mode-ui="enabled: false"></a-scene>

      Properties

      diff --git a/docs/1.5.0/core/asset-management-system.html b/docs/1.5.0/core/asset-management-system.html index 8c0046931..0ab82d22c 100644 --- a/docs/1.5.0/core/asset-management-system.html +++ b/docs/1.5.0/core/asset-management-system.html @@ -1201,7 +1201,7 @@

      The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

      -
      +

      Example

      We can define our assets in <a-assets> and point to those assets from our entities using selectors:

      diff --git a/docs/1.5.0/core/component.html b/docs/1.5.0/core/component.html index e4fd7b414..dc9de4b59 100644 --- a/docs/1.5.0/core/component.html +++ b/docs/1.5.0/core/component.html @@ -1183,7 +1183,7 @@

      -

      In the entity-component-system pattern, a component is a reusable and +

      In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

      In A-Frame, components modify entities which are 3D objects in the scene. We @@ -1197,7 +1197,7 @@

      Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

      -
      +

      Component HTML Form

      A component holds a bucket of data in the form of one or more component properties. Components use this data to modify entities. Consider an engine @@ -1348,7 +1348,7 @@

      Definition Lifecycle Handler Methods

      With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the shape of the data, the lifecycle handler methods use the data to modify the entity. The handlers will usually interact with the -Entity API.

      +Entity API.

      methodsimage Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

      Overview of Methods

      @@ -1401,15 +1401,15 @@

      setAttribute. +

      - + - + @@ -1446,7 +1446,7 @@

      diffing the current +

      Granular modifications to the entity can be done by diffing the current dataset (this.data) with the previous dataset before the update (oldData).

      A-Frame calls .update() both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The @@ -1454,7 +1454,7 @@

      visible component’s update sets the visibility of +

      For example, the visible component’s update sets the visibility of the entity.

      Parsed component properties computed from the schema default values, mixins, and the entity’s attributes.
      Important: Do not modify the data attribute directly. It is updated internally by A-Frame. To modify a component, use setAttribute.
      this.elReference to the entity as an HTML element.Reference to the entity as an HTML element.
      this.el.sceneElReference to the scene as an HTML element.Reference to the scene as an HTML element.
      this.id
      AFRAME.registerComponent('visible', {
        /**
         * this.el is the entity element.
         * this.el.object3D is the three.js object of the entity.
         * this.data is the component's property or properties.
         */
        update: function (oldData) {
          this.el.object3D.visible = this.data;
        }
        // ...
      });
      @@ -1469,7 +1469,7 @@

      Remove, undo, or clean up all of the component’s modifications to the entity.
    • Detach event listeners.

    -

    For example, when the light component is removed, the light component +

    For example, when the light component is removed, the light component will remove the light object that it had previously set on the entity, thus removing it from the scene.

    AFRAME.registerComponent('light', {
      // ...
      remove: function () {
        this.el.removeObject3D('light');
      }
      // ...
    });
    @@ -1491,7 +1491,7 @@

    time) and the time difference in milliseconds since the last frame (timeDelta). These can be used for interpolation or to only run parts of the tick handler on a set interval.

    -

    For example, the tracked controls component will progress +

    For example, the tracked controls component will progress the controller’s animations, update the controller’s position and rotation, and check for button presses.

    AFRAME.registerComponent('tracked-controls', {
      // ...
      tick: function (time, timeDelta) {
        this.updateMeshAnimation();
        this.updatePose();
        this.updateButtons();
      }
      // ...
    });
    @@ -1510,7 +1510,7 @@

    .
  • Remove event listeners.
  • Remove any chances of dynamic behavior.
    • -

    For example, the sound component will pause the sound and remove an +

    For example, the sound component will pause the sound and remove an event listener that would have played a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      pause: function () {
        this.pauseSound();
        this.removeEventListener();
      }
      // ...
    });
    @@ -1525,7 +1525,7 @@

    .pla
    • Add event listeners.
    -

    For example, the sound component will play the sound and update the +

    For example, the sound component will play the sound and update the event listener that would play a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      play: function () {
        if (this.data.autoplay) { this.playSound(); }
        this.updateEventListener();
      }
      // ...
    });
    @@ -1535,7 +1535,7 @@

  • Dynamically update or extend the schema, usually depending on the value of a property.
    • -

    For example, the geometry component checks if the primitive +

    For example, the geometry component checks if the primitive property changed to determine whether to update the schema for a different type of geometry:

    AFRAME.registerComponent('geometry', {
      // ...
      updateSchema: (newData) {
        if (newData.primitive !== this.data.primitive) {
          this.extendSchema(GEOMETRIES[newData.primitive].schema);
        }
      }
      // ...
    });
    @@ -1590,7 +1590,7 @@ 

    document.querySelector('[geometry]').components.geometry.flushToDOM();
    -

    Read more about component-to-DOM serialization.

    +

    Read more about component-to-DOM serialization.

    Accessing a Component’s Members and Methods

    A component’s members and methods can be accessed through the entity from the .components object. Look up the component from the entity’s map of components, and we’ll have access to the component’s internals. Consider this diff --git a/docs/1.5.0/core/entity.html b/docs/1.5.0/core/entity.html index 4c84ce019..c683fc603 100644 --- a/docs/1.5.0/core/entity.html +++ b/docs/1.5.0/core/entity.html @@ -1184,23 +1184,23 @@

    A-Frame represents an entity via the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

    -

    In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

    -
    +

    In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

    +

    Example

    Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

    <a-entity>

    We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

    +give it shape and appearance, we can attach the geometry and +material components:

    <a-entity geometry="primitive: box" material="color: red">
    -

    Or to make it emit light, we can further attach the light component:

    +

    Or to make it emit light, we can further attach the light component:

    <a-entity geometry="primitive: box" material="color: red"
              light="type: point; intensity: 2.0">

    Retrieving an Entity

    We can simply retrieve an entity using DOM APIs.

    @@ -1235,7 +1235,7 @@

    object3DMap

    An entity’s object3DMap is an object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that components have set.

    -

    For an entity with a geometry and light components +

    For an entity with a geometry and light components attached, object3DMap might look like:

    {
      light: <THREE.Light Object>,
      mesh: <THREE.Mesh Object>
    }
    @@ -1250,7 +1250,7 @@

    Metho

    destroy ()

    Clean up memory related to the entity such as clearing all components and their data.

    emit (name, detail, bubbles)

    emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

    +trigger an animation:

    // <a-entity animation="property: rotation; to: 0 360 0; startEvents: rotate">
    entity.emit('rotate');

    We can also pass event detail or data as the second argument:

    @@ -1261,7 +1261,7 @@ 

    entity.emit('sink', null, false);

    flushToDOM (recursive)

    flushToDOM will manually serialize an entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

    +Read more about component-to-DOM serialization.

    getAttribute (componentName)

    getAttribute retrieves parsed component data (including mixins and defaults).

    // <a-entity geometry="primitive: box; width: 3">

    entity.getAttribute('geometry');
    // >> {primitive: "box", depth: 2, height: 2, width: 3, ...}

    entity.getAttribute('geometry').primitive;
    // >> "box"

    entity.getAttribute('geometry').height;
    // >> 2

    entity.getAttribute('position');
    // >> {x: 0, y: 0, z: 0}
    @@ -1288,20 +1288,20 @@

    pa entity will call pause() on its child entities when we pause an entity.

    // <a-entity id="spinning-jumping-ball">
    entity.pause();
    -

    For example, the look-controls component on +

    For example, the look-controls component on pause will remove event handlers that listen for input.

    play ()

    play() will start any dynamic behavior as defined by animations and components. This is automatically called when the DOM attaches an entity. When an entity play(), the entity calls play() on its child entities.

    entity.pause();
    entity.play();
    -

    For example, the sound component on play will begin playing the sound.

    +

    For example, the sound component on play will begin playing the sound.

    setAttribute (componentName, value, [propertyValue | clobber])

    If componentName is not the name of a registered component or the component is a single-property component, setAttribute behaves as it normally would:

    entity.setAttribute('visible', false);

    Though if componentName is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    entity.setAttribute('position', { x: 1, y: 2, z: 3 });
    @@ -1369,7 +1369,7 @@

    Events componentchanged -One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. +One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. componentinitialized diff --git a/docs/1.5.0/core/globals.html b/docs/1.5.0/core/globals.html index 53792a709..bcb936953 100644 --- a/docs/1.5.0/core/globals.html +++ b/docs/1.5.0/core/globals.html @@ -1195,11 +1195,11 @@

    AComponent -Component prototype. +Component prototype. AEntity -Entity prototype. +Entity prototype. ANode @@ -1207,7 +1207,7 @@

    AScene -Scene prototype. +Scene prototype. components @@ -1223,19 +1223,19 @@

    registerComponent -Function to register a component. +Function to register a component. registerGeometry -Function to register a geometry. +Function to register a geometry. registerPrimitive -Function to register a primitive like registering an A-Frame elements similar to <a-box>. +Function to register a primitive like registering an A-Frame elements similar to <a-box>. registerShader -Function to register a material or shader. +Function to register a material or shader. schema @@ -1255,7 +1255,7 @@

    utils -A-Frame utility modules. +A-Frame utility modules. version diff --git a/docs/1.5.0/core/mixins.html b/docs/1.5.0/core/mixins.html index d00d1772e..acc25fe28 100644 --- a/docs/1.5.0/core/mixins.html +++ b/docs/1.5.0/core/mixins.html @@ -1185,7 +1185,7 @@

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    <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-mixin>
      </a-assets>

      <a-entity mixin="red cube"></a-entity>
      <a-entity mixin="blue cube"></a-entity>
    </a-scene>
    @@ -1195,7 +1195,7 @@

    the entities above expand to:

    <a-entity material="color: red" geometry="primitive: box"></a-entity>
    <a-entity material="color: blue" geometry="primitive: box"></a-entity>
    -
    +

    Merging Component Properties

    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="height: 10"></a-mixin>
        <a-mixin id="wide" geometry="width: 10"></a-mixin>
      </a-assets>

      <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
    </a-scene>
    diff --git a/docs/1.5.0/core/scene.html b/docs/1.5.0/core/scene.html index 7d1c3246f..e8b99dc8d 100644 --- a/docs/1.5.0/core/scene.html +++ b/docs/1.5.0/core/scene.html @@ -1184,8 +1184,8 @@

    A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

    -

    The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

    +

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    @@ -1195,9 +1195,9 @@

  • Default camera and lights
  • Set up webvr-polyfill, VREffect
  • Add UI to Enter VR that calls WebVR API
    • -
  • Configure WebXR devices through the webxr system
    • +
  • Configure WebXR devices through the webxr system
    • -
    +

    Example

    <a-scene>
      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <a-box src="#texture"></a-box>
    </a-scene>
    @@ -1242,7 +1242,7 @@

    systems -Instantiated systems. +Instantiated systems. time @@ -1306,12 +1306,12 @@

    embedded - Remove fullscreen styles from the canvas.

    • -
  • fog - Add fog.
    • -
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • -
  • inspector - Inject the A-Frame Inspector.
    • -
  • stats - Toggle performance stats.
    • -
  • xr-mode-ui - Toggle UI for entering and exiting VR.
    • +
  • embedded - Remove fullscreen styles from the canvas.
    • +
  • fog - Add fog.
    • +
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • +
  • inspector - Inject the A-Frame Inspector.
    • +
  • stats - Toggle performance stats.
    • +
  • xr-mode-ui - Toggle UI for entering and exiting VR.

    • Running Content Scripts on the Scene

    The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

    AFRAME.registerComponent('do-something', {
      init: function () {
        var sceneEl = this.el;
      }
    });
    diff --git a/docs/1.5.0/core/systems.html b/docs/1.5.0/core/systems.html index ef725d0d8..7a9ffc8cd 100644 --- a/docs/1.5.0/core/systems.html +++ b/docs/1.5.0/core/systems.html @@ -1183,16 +1183,16 @@

    -

    A system, of the entity-component-system pattern, provides global scope, +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -
    + -

    Registering a System

    A system is registered similarly to a component.

    +

    Registering a System

    A system is registered similarly to a component.

    If the system name matches a component name, then the component will have a reference to the system as this.system:

    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);
      }
    });
    @@ -1214,7 +1214,7 @@

    schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data.

    Methods

    A system, like a component, defines lifecycle handlers. It can also define diff --git a/docs/1.5.0/core/utils.html b/docs/1.5.0/core/utils.html index 7d2a93794..c4f835925 100644 --- a/docs/1.5.0/core/utils.html +++ b/docs/1.5.0/core/utils.html @@ -1184,7 +1184,7 @@

    A-Frame’s utility modules are public through AFRAME.utils.

    -
    +

    AFRAME.utils.coordinates

    Module for handling vec3 and vec4 types.

    .isCoordinates (value)

    Tests whether a string is a vec3 or vec4.

    @@ -1196,7 +1196,7 @@

    .stringify (data)

    Stringifies an {x, y, z} vec3 object to an “x y z” string.Or Stringifies an {x, y, z, w} vec4 object to an “x y z w” string.

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
    // >> "1 2 -3"

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3, w:4})
    // >> "1 2 -3 4"
    -

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for +

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for return 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.

    @@ -1204,7 +1204,7 @@

    This is useful for components that need a way to reference a property of a multi-property component.

    -

    .setComponentProperty (entity, componentName, value, delimiter)

    Performs like Entity.setAttribute, but with support for setting an +

    .setComponentProperty (entity, componentName, value, delimiter)

    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.

    diff --git a/docs/1.5.0/guides/building-a-360-image-gallery.html b/docs/1.5.0/guides/building-a-360-image-gallery.html index 53b725a6b..4661a2307 100644 --- a/docs/1.5.0/guides/building-a-360-image-gallery.html +++ b/docs/1.5.0/guides/building-a-360-image-gallery.html @@ -1187,7 +1187,7 @@

    Let’s build an interactive gaze-based 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

    -

    This guide will practice three concepts related to entity-component:

    +

    This guide will practice three concepts related to entity-component:

    1. Using the standard components that come with A-Frame.
    2. Using community components from the ecosystem.
      3. @@ -1195,18 +1195,18 @@

    Not to say 360° images are at all a focus use case of A-Frame, but it makes for an easy example that has a lot of demand as an early use case on the Web.

    -
    +

    Skeleton

    This is the starting point for our scene.

    <a-scene>
      <a-assets>
        <audio id="click-sound" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>

        <!-- Images. -->
        <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
        <img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
        <img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
        <img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
        <img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Link template we will build. -->
      <a-entity class="link"></a-entity>

      <!-- Camera + Cursor. -->
      <a-camera>
        <a-cursor
          id="cursor"
          animation__click="property: scale; from: 0.1 0.1 0.1; to: 1 1 1; easing: easeInCubic; dur: 150; startEvents: click"
          animation__clickreset="property: scale; to: 0.1 0.1 0.1; dur: 1; startEvents: animationcomplete__click"
          animation__fusing="property: scale; from: 1 1 1; to: 0.1 0.1 0.1; easing: easeInCubic; dur: 150; startEvents: fusing"></a-cursor>
      </a-camera>
    </a-scene>

    We have predefined:

    Using Standard Components

    Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure @@ -1216,20 +1216,20 @@ 

    <a-entity class="link"></a-entity>
    -

    To give our entity shape, we can attach the geometry component, +

    To give our entity shape, we can attach the geometry component, configured to a plane shape. We specify the component data using a syntax that resembles that of inline CSS styles:

    <a-entity
      class="link"
      geometry="primitive: plane; height: 1; width: 1"></a-entity>
    -

    Then to give our entity appearance, we can attach the material +

    Then to give our entity appearance, we can attach the material component. We set shader to flat so the image isn’t affected negatively by lighting. And we set src to #cubes-thumb, a selector to one -of the images preloaded in the Asset Management System. Alternatively, +of the images preloaded in the Asset Management System. Alternatively, we could pass a URL for the image:

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: #cubes-thumb"></a-entity>

    We can continue adding features to our entity by plugging in more components. -Let’s attach one more standard component, the sound component. We want +Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1305,15 +1305,15 @@

    Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

    Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We can specify event names either the _event property or via the __<id> as shown below. The rest of the properties define the setAttribute calls. Notice that the event-set component can have -multiple instances:

    +multiple instances:

    <script id="link" type="text/html">
      <a-entity class="link"
        geometry="primitive: plane; height: 1; width: 1"
        material="shader: flat; src: ${thumb}"
        sound="on: click; src: #click-sound"
        event-set__mouseenter="scale: 1.2 1.2 1"
        event-set__mouseleave="scale: 1 1 1"
        event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"></a-entity>
    </script>

    Remember to add data-src attributes to the link entities to load the full image on click:

    @@ -1345,7 +1345,7 @@

    Writing a Component and +application-specific components. That is covered in Writing a Component and hopefully in later guides.

    Try it out!

    diff --git a/docs/1.5.0/guides/building-a-basic-scene.html b/docs/1.5.0/guides/building-a-basic-scene.html index b64e495c3..841837a45 100644 --- a/docs/1.5.0/guides/building-a-basic-scene.html +++ b/docs/1.5.0/guides/building-a-basic-scene.html @@ -1188,7 +1188,7 @@

    Let’s start by building a basic A-Frame scene. For this, we will need a basic understanding of HTML. We will learn how to:

      -
    • Add 3D entities (i.e., objects) with primitives
      • +
    • Add 3D entities (i.e., objects) with primitives
    • Transform entities in 3D space with position, rotation, scale
    • Add an environment
    • Add textures
      • @@ -1196,7 +1196,7 @@

    • Add text

    Remix the Basic Guide example on Glitch.

    -
    +

    Starting with HTML

    We start out with a minimal HTML structure:

    <html>
      <head>
        <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
        </a-scene>
      </body>
    </html>
    @@ -1205,18 +1205,18 @@

    before <a-scene> because A-Frame registers custom HTML elements which must be defined before <a-scene> is attached or else <a-scene> will do nothing.

    -

    Next, we include <a-scene> in the <body>. <a-scene> will contain every +

    Next, we include <a-scene> in the <body>. <a-scene> will contain every entity in our scene. <a-scene> handles all of the setup that is required for 3D: setting up WebGL, the canvas, camera, lights, renderer, render loop as well as out of the box WebVR support on platforms such as HTC Vive, Oculus Rift, Samsung GearVR, and smartphones (Google Cardboard). <a-scene> alone takes a lot of load off of us!

    Adding an Entity

    Within our <a-scene>, we attach 3D entities using one of A-Frame’s standard -primitives <a-box>. We can use <a-box> just like a normal HTML element, +primitives <a-box>. We can use <a-box> just like a normal HTML element, defining the tag and using HTML attributes to customize it. Some other examples of primitives that come with A-Frame include <a-cylinder>, <a-plane>, or <a-sphere>.

    -

    Here we define the color <a-box>, see <a-box>‘s documentation for +

    Here we define the color <a-box>, see <a-box>‘s documentation for the more attributes (e.g., width, height, depth).

    boximage Image by Ruben Mueller from vrjump.de

    @@ -1224,13 +1224,13 @@

    <a-entity> with the geometry and -material components:

    +underneath <a-box> is <a-entity> with the geometry and +material components:

    <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>
    -

    However, because the default camera and the box are positioned at the default +

    However, because the default camera and the box are positioned at the default position at the 0 0 0 origin, we won’t be able to see the box unless we move -it. We can do this by using the position component to transform the +it. We can do this by using the position component to transform the box in 3D space.

    Transforming an Entity in 3D

    Let’s first go over 3D space. A-Frame uses a right-handed coordinate system. With the default camera direction: positive X-axis extends right, positive @@ -1249,7 +1249,7 @@

    To translate, rotate, and scale the box, we can change the -position, rotation, and scale components. +position, rotation, and scale components. Let’s first apply the rotation and scale components:

    <a-scene>
      <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
    @@ -1306,7 +1306,7 @@ 

    <a-scene>
      <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <!-- Out of the box environment! -->
      <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
    </a-scene>

    Applying an Image Texture

    -

    Make sure you’re serving your HTML using a local server +

    Make sure you’re serving your HTML using a local server for textures to load properly.

    We can apply an image texture to the box with an image, video, or <canvas> @@ -1318,7 +1318,7 @@

    -

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The +

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The asset management system makes it easier for the browser to cache assets (e.g., images, videos, models) and A-Frame will make sure all of the assets are fetched before rendering.

    @@ -1338,7 +1338,7 @@

    Creating a Custom Environment (Optional)

    Previously we had the environment component generate the environment. Though it’s good to know a bit on creating a basic environment for learning purposes.

    -

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. +

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. <a-sky>, which is a material applied to the inside of a large sphere, can be a flat color, a 360° image, or a 360° video. For example, a dark gray background would be:

    @@ -1348,7 +1348,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>
    </a-scene>
    -

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are +

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are oriented parallel to the XY axis. To make it parallel to the ground, we need to orient it along the XZ axis. We can do so by rotating the plane negative 90° on the X-axis.

    @@ -1366,7 +1366,7 @@ 

    <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
      repeat="10 10"></a-plane>
    -

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default +

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default if we don’t specify any lights, A-Frame adds an ambient light and a directional light. If A-Frame didn’t add lights for us, the scene would be black. Once we add lights of our own, however, the default lighting setup is removed and @@ -1379,7 +1379,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>

      <a-light type="ambient" color="#445451"></a-light>
      <a-light type="point" intensity="2" position="2 4 4"></a-light>
    </a-scene>
    -

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation +

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation system. Animations interpolate or tween a value over time. We can set the animation component on the entity. Let’s have the box hover up and down to add some motion to the scene.

    @@ -1387,7 +1387,7 @@

    entity’s object3D’s position’s Y axis. +
  • Animate the entity’s object3D’s position’s Y axis.
  • Animate to 2.2 which is 20 centimeters higher.
  • Alternate the dir (direction) of the animation on each repeated cycle of the animation so it goes back and forth.
  • Last for 2000 millisecond dur (duration) on each cycle.
    • @@ -1398,19 +1398,19 @@

    Given that many developers currently do not have proper VR hardware with controllers, we’ll focus this section on using basic mobile and desktop inputs -with the built-in cursor component. The cursor component by default provides +with the built-in cursor component. The cursor component by default provides the ability to “click” on entities by staring or gazing at them on mobile, or on desktop, looking at an entity and click the mouse. But know that the cursor component is just one way to add interactions, things open up if we have access to actual controllers.

    -

    To have a visible cursor fixed to the camera, we place the cursor as a child +

    To have a visible cursor fixed to the camera, we place the cursor as a child of the camera as explained above in Parent and Child Transforms.

    Since we didn’t specifically define a camera, A-Frame included a default camera for us. But since we need to add a cursor as a child of the camera, we will -need to now define <a-camera> containing <a-cursor>:

    +need to now define <a-camera> containing <a-cursor>:

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"
             animation="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true"></a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
    -

    If we check the documentation of the cursor component that +

    If we check the documentation of the cursor component that <a-cursor> wraps, we see that it emits hover events such as mouseenter, mouseleave as well as click.

    Event Listener Component (Intermediate)

    One way to manually handle the cursor events is to add an event listener with @@ -1418,7 +1418,7 @@

    Animating on Events below.

    In JavaScript, we grab the box with querySelector, use -addEventListener, and then setAttribute +addEventListener, and then setAttribute to make the box grow its scale when its hovered over. Note that A-Frame adds features to setAttribute to work with multi-property components. We can pass a full {x, y, z} object as the second argument.

    @@ -1455,7 +1455,7 @@ 

    <a-scene>
      <!-- ... -->
      <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
        position="-3 1 -4"></a-sound>
      <!-- ... -->
    </a-scene>
    -

    Adding Text

    A-Frame comes with a text component. There are several ways to render +

    Adding Text

    A-Frame comes with a text component. There are several ways to render text, each with their own advantages and disadvantages. A-Frame comes with an SDF text implementation using three-bmfont-text that is relatively sharp and performant:

    diff --git a/docs/1.5.0/guides/building-a-minecraft-demo.html b/docs/1.5.0/guides/building-a-minecraft-demo.html index 066628cc0..9a13a57ef 100644 --- a/docs/1.5.0/guides/building-a-minecraft-demo.html +++ b/docs/1.5.0/guides/building-a-minecraft-demo.html @@ -1189,7 +1189,7 @@

    Let’s build a basic Minecraft (voxel builder) demo that targets room scale VR with controllers (e.g., Quest, Vive, Rift). The example will be minimally usable on mobile and desktop.

    -
    +

    Example Skeleton

    We’ll start off with this skeleton HTML:

    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>

    <body>
      <a-scene>
      </a-scene>
    </body>
    diff --git a/docs/1.5.0/introduction/best-practices.html b/docs/1.5.0/introduction/best-practices.html index 37ea5f340..aa3401bd4 100644 --- a/docs/1.5.0/introduction/best-practices.html +++ b/docs/1.5.0/introduction/best-practices.html @@ -1183,7 +1183,7 @@

    -

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and +

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and structure application code within purely A-Frame components for reusability, modularity, composability, decoupling, encapsulation, declarativeness, and testability.

    @@ -1200,8 +1200,8 @@

    recommended hardware specifications. -
  • Use the stats component to keep an eye on various metrics (FPS, +
  • Use recommended hardware specifications.
    • +
  • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities). We want to maximize FPS and minimize everything else.
  • Limit draw calls as much as possible. Each geometry, object, model without @@ -1211,7 +1211,7 @@

    asset management system to browser cache and +
  • Make use of the asset management system to browser cache and preload assets.
  • If using models, look to bake your lights into textures rather than relying on real-time lighting and shadows.
    • @@ -1228,16 +1228,16 @@

    background component instead of a-sky to define a +
  • Use the background component instead of a-sky to define a solid color as the scene background. This prevents the creation of unnecessary geometry.
  • Update position, rotation, scale, and visible at the three.js level (el.object3D.position, el.object3D.rotation, el.object3D.scale, el.object3D.visible) to avoid overhead on .setAttribute.
  • If you need to create, remove and re-create many entities of the same type, -use the pool component to pre-generate and reuse entities. This +use the pool component to pre-generate and reuse entities. This avoids the cost of creating entities on the fly and reduces garbage collection.
    • -
  • When using the animation component, animate values directly +
  • When using the animation component, animate values directly which will skip .setAttribute and animate JS values directly. For example, instead of material.opacity, animate components.material.material.opacity.
    • diff --git a/docs/1.5.0/introduction/developing-with-threejs.html b/docs/1.5.0/introduction/developing-with-threejs.html index 6ea1667a9..e79a08e04 100644 --- a/docs/1.5.0/introduction/developing-with-threejs.html +++ b/docs/1.5.0/introduction/developing-with-threejs.html @@ -1213,7 +1213,7 @@

    And every A-Frame entity also has a reference to <a-scene> via .sceneEl:

    document.querySelector('a-entity').sceneEl.object3D;  // THREE.Scene
    -

    From a component, we access the scene through its entity +

    From a component, we access the scene through its entity (i.e., this.el):

    AFRAME.registerComponent('foo', {
      init: function () {
        var scene = this.el.sceneEl.object3D;  // THREE.Scene
      }
    });
    diff --git a/docs/1.5.0/introduction/entity-component-system.html b/docs/1.5.0/introduction/entity-component-system.html index 926c0db8d..a6704b586 100644 --- a/docs/1.5.0/introduction/entity-component-system.html +++ b/docs/1.5.0/introduction/entity-component-system.html @@ -1212,20 +1212,20 @@

    A well-known game engine implementing ECS is Unity. Although there are pain points in cross-entity communication, we’ll see how A-Frame, the DOM, and declarative HTML really make ECS shine.

    -
    +

    Concept

    ECS Minecraft

    A basic definition of ECS involves:

      -
    • Entities are container objects into which components can be +
    • Entities are container objects into which components can be attached. Entities are the base of all objects in the scene. Without components, entities neither do nor render anything, similar to empty <div>s.
      • -
    • Components are reusable modules or data containers that can +
    • Components are reusable modules or data containers that can be attached to entities to provide appearance, behavior, and/or functionality. Components are like plug-and-play for objects. All logic is implemented through components, and we define different types of objects by mixing, matching, and configuring components. Like alchemy!
      • -
    • Systems provide global scope, management, and services for +
    • Systems provide global scope, management, and services for classes of components. Systems are often optional, but we can use them to separate logic and data; systems handle the logic, components act as data containers.
      • @@ -1281,8 +1281,8 @@

      Syntax:) separating property names from property values, and a semicolon (;) separating different property declarations:

      <a-entity ${componentName}="${propertyName1}: ${propertyValue1}; ${propertyName2}: ${propertyValue2}">

      -

      For example, we have <a-entity> and attach the geometry, material, -light, and position components with various properties and property values:

      +

      For example, we have <a-entity> and attach the geometry, material, +light, and position components with various properties and property values:

      <a-entity geometry="primitive: sphere; radius: 1.5"
                light="type: point; color: white; intensity: 2"
                material="color: white; shader: flat; src: glow.jpg"
                position="0 0 -5"></a-entity>

      Composition

      From there, we could attach more components to add additional appearance, @@ -1333,7 +1333,7 @@

      write an A-Frame +

      We will later go over in detail how to write an A-Frame component. As a preview, the structure of a basic component may look like:

      AFRAME.registerComponent('foo', {
        schema: {
          bar: {type: 'number'},
          baz: {type: 'string'}
        },

        init: function () {
          // Do something when component first attached.
        },

        update: function () {
          // Do something when component's data is updated.
        },

        remove: function () {
          // Do something when the component or its entity is detached.
        },

        tick: function (time, timeDelta) {
          // Do something on every scene tick or frame.
        }
      });
      @@ -1358,12 +1358,12 @@

      Higher-Order Components

      Components can set other components on the entity, making them a higher-order or higher-level component in abstraction.

      -

      For example, the cursor component sets and builds on top of the -raycaster component. Or the hand-controls -component sets and builds on top of the vive-controls -component and oculus-touch-controls +

      For example, the cursor component sets and builds on top of the +raycaster component. Or the hand-controls +component sets and builds on top of the vive-controls +component and oculus-touch-controls component which in turn build on top of the -tracked-controls component.

      +tracked-controls component.

      Community Component Ecosystem

      Components can be shared into the A-Frame ecosystem for the community to use. The wonderful thing about A-Frame’s ECS is extensibility. An experienced developer can develop a physics system or graphics shader components, and an diff --git a/docs/1.5.0/introduction/faq.html b/docs/1.5.0/introduction/faq.html index 41b0af79d..4097b8544 100644 --- a/docs/1.5.0/introduction/faq.html +++ b/docs/1.5.0/introduction/faq.html @@ -1183,7 +1183,7 @@

      -
      +

      How is A-Frame’s performance?

      A-Frame can achieve native-like latency and framerate with proper browsers (e.g., Firefox with WebVR). For example, A-Painter is Tilt @@ -1216,10 +1216,10 @@

      best performance practices and guidelines to get started.

      +best performance practices and guidelines to get started.

      Why is my experience not entering VR or AR mode?

      If you are using A-Frame 1.5.0 or older you probably need to update to the latest release. Browsers are migrating to the WebXR standard and old versions might no longer work.

      You also have to serve your content over HTTPS. The WebXR API won’t be available over HTTP.

      -

      Why does my asset (e.g., image, video, model) not load?

      First, if you are doing local development, make sure you are using a local +

      Why does my asset (e.g., image, video, model) not load?

      First, if you are doing local development, make sure you are using a local server so that asset requests work properly.

      If you are loading the asset from a different domain, make sure that the asset is served with cross-origin resource sharing (CORS) headers. You could @@ -1228,14 +1228,14 @@

      video playback. Simple sample code can be found in the docs. Pay particular attention to the play-on-click component

      -

      Read the Hosting and Publishing guide for more +

      Read the Hosting and Publishing guide for more information.

      Why is the HTML not updating when I check the browser inspector?

      If you open up your browser’s developer tools, you’ll see that the HTML attribute values are empty.

      HTML

      To improve performance, A-Frame does not update the HTML to save on stringification operations. This also means mutation observations will not -fire. Use the debug component or .flushToDOM methods +fire. Use the debug component or .flushToDOM methods if you need to sync to the DOM.

      Why does my video not play?

      Mobile and now desktop browsers have limitations playing inline video.

      Because of an iOS platform restriction in order to get inline video @@ -1269,7 +1269,7 @@

      Which 3D model formats work?

      The ideal format is the GL Transmission Format glTF (.gltf) since glTF is feature-rich, compact, and efficient. glTF focuses on providing a transmission format rather than an editor format and is more interoperable -with web technologies. Read more about glTF and A-Frame’s glTF +with web technologies. Read more about glTF and A-Frame’s glTF component.

      Wavefront (.obj) is also a well-known format but has some limitations like the lack of animation and vertex color support.

      @@ -1328,16 +1328,16 @@

      How is A-Frame different from VRML?

      A-Frame is a JavaScript framework. Unlike VRML, A-Frame is not a 3D file format, markup language, nor a standard. A-Frame embraces the Extensible Web Manifesto. Only look at standardization as winning ideas emerge.

      -

      Technically, A-Frame is an entity-component-system game engine on top of +

      Technically, A-Frame is an entity-component-system game engine on top of three.js. As it is a JavaScript framework, coding is to be expected for more complex applications. Unlike 3D file formats, A-Frame provides power and interactivity via full access to JavaScript, three.js, and Web APIs.

      Does A-Frame support X feature?

      A-Frame ships with a number of components and primitives. Being based on top of -an entity-component-system architecture, if a feature doesn’t exist, you -can write or find a component to enable it. Or if one of +an entity-component-system architecture, if a feature doesn’t exist, you +can write or find a component to enable it. Or if one of the standard components doesn’t fit your use cases, you can copy and modify it.

      -

      Read Where to Find Components for more information.

      +

      Read Where to Find Components for more information.

      Does A-Frame support X library or framework?

      A-Frame is built on top of the DOM so most libraries and frameworks work including:

        @@ -1350,9 +1350,9 @@

        Which headsets, browsers, devices, and platforms does A-Frame support?

        Most of them. Read VR Headsets and WebVR Browsers for more +

        Which headsets, browsers, devices, and platforms does A-Frame support?

        Most of them. Read VR Headsets and WebVR Browsers for more information.

        -

        How can I improve performance?

        Read Best Practices — Performance for more information.

        +

        How can I improve performance?

        Read Best Practices — Performance for more information.

        How can I get in touch with the A-Frame team?

        We try to be responsive and helpful! We love questions, feedback, bug reports, and pull requests:

          @@ -1363,7 +1363,7 @@

          Where is the roadmap?

          The roadmap is on GitHub!

          Do I call it “A-Frame” or “aframe” or “aframevr” or “aFrame”?

          A-Frame!

          -

          Why do my textures render black?

          Phones with Adreno 300 series GPUs are notoriously problematic. Set renderer precision to medium as a workaround. Real fix has to happen at the driver / device level.

          +

          Why do my textures render black?

          Phones with Adreno 300 series GPUs are notoriously problematic. Set renderer precision to medium as a workaround. Real fix has to happen at the driver / device level.

          Why is the gyroscope / magic window mode not working?

          New browser policies require sites to prompt the user for permission before getting access to DeviceMotionEvents. Starting with iOS 13 DeviceMotionEvents are only available for pages served over https. Other browsers will also apply same policies and restrictions. A-Frame now incorporates customizable UI to request the necessary permissions to the user. Make sure to update to A-Frame latest version

          Can I use A-Frame offline or self hosted?

          Using A-Frame online sometimes is not possible or inconvenient, like for instance when traveling or during public events with poor Internet connectivity. A-Frame is mostly self-contained so including the build (aframe.min.js) in your project will be sufficient in many cases. Some specific parts are lazy loaded and only fetched when used. This is for example the case of the fonts for the text component and the 3D models for controllers. In order to make an A-Frame build work either offline or without relying on A-Frame hosting infrastructure (typically cdn.aframe.io), you can monitor network requests on your browser console. This will show precisely what assets are being loaded and thus as required for your specific experience. Fonts can be found via FONT_BASE_URL in the whereas controllers via MODEL_URLS. Both can be modified in the source and included in your own custom build

          What order does A-Frame render objects in?

          In many cases, the order in which objects is rendered doesn’t matter much - most scenes will look the same whatever order the objects are rendered in - but there are a few cases where sorting is important:

          @@ -1377,7 +1377,7 @@

          renderOrder is set on the Object3D or a Group that it is a member of, the specified order will be respected
        • otherwise, opaque objects are rendered furthest to nearest, and transparent objects are rendered in the order they appear in the THREE.js Object tree (in most cases, this is the same as the order they appear in the DOM)

        -

        The renderer system has a sortTransparentObjects property, which can be used to render transparent objects furthest to nearest, rather than in DOM order.

        +

        The renderer system has a sortTransparentObjects property, which can be used to render transparent objects furthest to nearest, rather than in DOM order.

        diff --git a/docs/1.5.0/introduction/hosting-and-publishing.html b/docs/1.5.0/introduction/hosting-and-publishing.html index 6606d5e9c..6a923ea32 100644 --- a/docs/1.5.0/introduction/hosting-and-publishing.html +++ b/docs/1.5.0/introduction/hosting-and-publishing.html @@ -1185,7 +1185,7 @@

        This section will show several ways to deploy, host, and publish an A-Frame site and its assets onto the Web for the world to see.

        -
        +

        Publishing a Site

        There are many free services to deploy and host a site. We’ll go over some of the more easy or popular options, but there are certainly other options such @@ -1307,7 +1307,7 @@

        A-Frame Blog.

      Embedding

      If we want to embed an A-Frame scene into the layout of 2D web page, we can use -the embedded component to remove fullscreen styles +the embedded component to remove fullscreen styles and allow us to style the canvas with CSS.

      Note we can only embed one scene at a time into a page. If we need multiple scenes, we can use diff --git a/docs/1.5.0/introduction/html-and-primitives.html b/docs/1.5.0/introduction/html-and-primitives.html index 34cd0ff1c..d5f12ceb4 100644 --- a/docs/1.5.0/introduction/html-and-primitives.html +++ b/docs/1.5.0/introduction/html-and-primitives.html @@ -1185,9 +1185,9 @@

      This section will go over the concepts of A-Frame’s primitive elements and their relation to the entity-component framework. If you’re looking for a guide -on using HTML and primitives, check out the Building a Basic Scene +on using HTML and primitives, check out the Building a Basic Scene guide.

      -
      +

      HTML

      A-Frame is based on top of HTML and the DOM using a polyfill for Custom Elements. HTML is the building block of the Web, providing one of the @@ -1221,7 +1221,7 @@

      component data +
    • Map or proxy HTML attributes to component data

    Primitives are similar to prefabs in Unity. Some literature on the entity-component-system pattern refer to them as assemblages. diff --git a/docs/1.5.0/introduction/index.html b/docs/1.5.0/introduction/index.html index 4c94b33c4..d0d9bcb78 100644 --- a/docs/1.5.0/introduction/index.html +++ b/docs/1.5.0/introduction/index.html @@ -1190,7 +1190,7 @@ 

    <html>
      <head>
        <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
          <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
          <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
          <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
          <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
          <a-sky color="#ECECEC"></a-sky>
        </a-scene>
      </body>
    </html>
    -

    The Installation page provides more options for getting started with A-Frame. +

    The Installation page provides more options for getting started with A-Frame. To get started learning A-Frame, check out A-Frame School for visual step-by-step lessons to complement the documentation.

    What is A-Frame?

    A-Frame

    @@ -1238,7 +1238,7 @@

    Fe web developers, VR enthusiasts, artists, designers, educators, makers, kids.

    electric_plug Entity-Component Architecture: A-Frame is a powerful three.js framework, providing a declarative, composable, reusable -entity-component structure. HTML is just the tip of the iceberg; +entity-component structure. HTML is just the tip of the iceberg; developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL.

    globe_with_meridians Cross-Platform VR: Build VR applications for Vive, @@ -1250,7 +1250,7 @@

    Fe object updates are all done in memory with little garbage and overhead. The most interactive and large scale WebVR applications have been done in A-Frame running smoothly at 90fps.

    -

    mag Visual Inspector: A-Frame provides a handy built-in visual 3D +

    mag Visual Inspector: A-Frame provides a handy built-in visual 3D inspector. Open up any A-Frame scene, hit <ctrl> + <alt> + i or <ctrl> + <option> + i, and fly around to peek under the hood!

    Inspector

    diff --git a/docs/1.5.0/introduction/installation.html b/docs/1.5.0/introduction/installation.html index bfb5e20c5..0ae0c551e 100644 --- a/docs/1.5.0/introduction/installation.html +++ b/docs/1.5.0/introduction/installation.html @@ -1186,7 +1186,7 @@

    This installation section offers several ways to get started with A-Frame, although most methods don’t require any actual installation since A-Frame is primarily HTML and JavaScript.

    -
    +

    Code Editors in the Browser

    The fastest way is to start playing from within the browser.

    Remix on Glitch

    Glitch

    diff --git a/docs/1.5.0/introduction/interactions-and-controllers.html b/docs/1.5.0/introduction/interactions-and-controllers.html index f3425c8d2..330e5b406 100644 --- a/docs/1.5.0/introduction/interactions-and-controllers.html +++ b/docs/1.5.0/introduction/interactions-and-controllers.html @@ -1194,9 +1194,9 @@

    interactions. And we can show how these input-based and interaction-based components are built in order to give us the knowledge to build our own interactions. In a sense, learn how to fish rather than being given a fish.

    -
    + -

    Events

    In the 2D Web, input and interactions are handled through browser +

    Events

    In the 2D Web, input and interactions are handled through browser events (e.g., click, mouseenter, mouseleave, touchstart, touchend). Whenever an input-based event happens, the browser will emit an event that we can listen to and handle with @@ -1224,13 +1224,13 @@

    cursor component that provides gaze-based interaction if +comes with a cursor component that provides gaze-based interaction if attached to the camera:

      -
    1. Explicitly define <a-camera> entity. +
    2. Explicitly define <a-camera> entity. Previously, A-Frame was providing the default camera.
      3. -
    3. Add <a-cursor> entity as a child element underneath the camera entity.
      4. -
    4. Optionally, configure the raycaster used by the cursor.
      5. +
    5. Add <a-cursor> entity as a child element underneath the camera entity.
      6. +
    6. Optionally, configure the raycaster used by the cursor.
    <a-scene>
      <a-camera>
        <a-cursor></a-cursor>
        <!-- Or <a-entity cursor></a-entity> -->
      </a-camera>
    </a-scene>
    @@ -1272,7 +1272,7 @@

    A-Frame +and for A-Frame, we prescribe that code be placed within A-Frame components.

    To demonstrate what the event set component does under the hood, let’s have a box change color on hover and on leaving hover with JavaScript:

    @@ -1300,7 +1300,7 @@

    tracked-controls Component

    The tracked-controls component is A-Frame’s base controller +

    tracked-controls Component

    The tracked-controls component is A-Frame’s base controller component that provides the foundation for all of A-Frame’s controller components. The tracked-controls component:

    -

    Hosting Models

    Refer to Hosting and Publishing — Hosting +

    Hosting Models

    Refer to Hosting and Publishing — Hosting Models.

    Modifying Materials

    To modify the material of a model, we need to wait for the model to load, and then modify the three.js meshes created from the model. What happens is an @@ -1234,7 +1234,7 @@ 

    <script>
      AFRAME.registerComponent('modify-materials', {
        init: function () {
          // Wait for model to load.
          this.el.addEventListener('model-loaded', () => {
            // Grab the mesh / scene.
            const obj = this.el.getObject3D('mesh');
            // Go over the submeshes and modify materials we want.
            obj.traverse(node => {
              if (node.name.indexOf('ship') !== -1) {
                node.material.color.set('red');
              }
            });
          });
        }
      });
    </script>

    <a-scene background="color: #ECECEC">
      <a-assets>
        <a-asset-item id="cityModel" src="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf"></a-asset-item>
      </a-assets>
      <a-entity gltf-model="#cityModel" modify-materials></a-entity>
    </a-scene>

    Troubleshooting

    Before anything else, check your console for errors. Common issues related to -CORS can be solved by properly hosting your models and the +CORS can be solved by properly hosting your models and the console will also tell you if your model needs additional files that are missing.

    I Don’t See My Model

    If there are no errors in the console, try scaling your model down. Often times @@ -1276,7 +1276,7 @@

    -

    Testing for Performance

    To get an idea of how our scene is performing, enable the stats component:

    +

    Testing for Performance

    To get an idea of how our scene is performing, enable the stats component:

    <a-scene stats>

    Move around our scene and test different scenarios while keeping an eye on the diff --git a/docs/1.5.0/introduction/visual-inspector-and-dev-tools.html b/docs/1.5.0/introduction/visual-inspector-and-dev-tools.html index 9c9553e05..511460e41 100644 --- a/docs/1.5.0/introduction/visual-inspector-and-dev-tools.html +++ b/docs/1.5.0/introduction/visual-inspector-and-dev-tools.html @@ -1198,7 +1198,7 @@

    We’ll go over GUI tools built on top of A-Frame that can be used without code. And touch on other tools that can ease development across multiple machines.

    -
    +

    A-Frame Inspector

    The A-Frame Inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:

    diff --git a/docs/1.5.0/introduction/vr-headsets-and-webxr-browsers.html b/docs/1.5.0/introduction/vr-headsets-and-webxr-browsers.html index 55c7e18fb..32296f085 100644 --- a/docs/1.5.0/introduction/vr-headsets-and-webxr-browsers.html +++ b/docs/1.5.0/introduction/vr-headsets-and-webxr-browsers.html @@ -1183,7 +1183,7 @@

    -
    +

    What is Virtual Reality?

    Virtual reality (VR) is a technology that uses head-mounted headsets with displays to generate the realistic images, sounds, and other sensations to put diff --git a/docs/1.5.0/introduction/writing-a-component.html b/docs/1.5.0/introduction/writing-a-component.html index 629aa44f9..f25510510 100644 --- a/docs/1.5.0/introduction/writing-a-component.html +++ b/docs/1.5.0/introduction/writing-a-component.html @@ -1183,7 +1183,7 @@

    -

    Components of A-Frame’s entity-component framework are JavaScript +

    Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, @@ -1191,7 +1191,7 @@

    components.

    vehicleimage Image by Ruben Mueller from vrjump.de

    -

    This guide will take it pretty slow. We recommend skimming over the Component +

    This guide will take it pretty slow. We recommend skimming over the Component API documentation before going through this guide as that documentation will be more concise. Note that components should be defined before <a-scene> like:

    @@ -1205,12 +1205,12 @@

    Example: hello-world Component

    Let’s start with the most basic component to get a general idea. This component will log a simple message once when the component’s entity is attached using -the .init() handler.

    +the .init() handler.

    Registering the Component with AFRAME.registerComponent

    Components are registered with AFRAME.registerComponent(). We pass the name of the component, which will be used as the HTML attribute name in the component’s representation in the DOM. Then we pass the component definition which is a JavaScript object of methods and properties. Within the definition, we can -define lifecycle handler methods. One of which is .init(), which +define lifecycle handler methods. One of which is .init(), which is called once when the component is first plugged into its entity.

    In the example below, we just have our .init() handler log a simple message.

    AFRAME.registerComponent('hello-world', {
      init: function () {
        console.log('Hello, World!');
      }
    });
    @@ -1264,7 +1264,7 @@

    Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

    To demonstrate this, we’ll have our log component only log whenever its -entity emits an event. First, we’ll add an event property type that +entity emits an event. First, we’ll add an event property type that specifies which event the component should listen on.

    // ...
    schema: {
      event: {type: 'string', default: ''},
      message: {type: 'string', default: 'Hello, World!'},
    },
    // ...
    @@ -1273,7 +1273,7 @@

    add an event listener that will +

    What we want to do is add an event listener that will listen to the event before logging a message. If the event property type is not specified, we’ll just log the message:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      update: function () {
        var data = this.data;  // Component property values.
        var el = this.el;  // Reference to the component's entity.

        if (data.event) {
          // This will log the `message` when the entity emits the `event`.
          el.addEventListener(data.event, function () {
            console.log(data.message);
          });
        } else {
          // `event` not specified, just log the message.
          console.log(data.message);
        }
      }
    });
    @@ -1282,7 +1282,7 @@

    , we need a reference to the function. So +

    But to remove an event listener, we need a reference to the function. So let’s first store the function on this.eventHandlerFn whenever we attach an event listener. When we attach properties to the component via this, they’ll be available throughout all the other lifecycle handlers.

    @@ -1297,13 +1297,13 @@ 

    <a-scene>
      <a-entity log="event: anEvent; message: Hello, Metaverse!"></a-entity>
    </a-scene>
    -

    Let’s have our entity emit the event to test it out:

    +

    Let’s have our entity emit the event to test it out:

    var el = document.querySelector('a-entity');
    el.emit('anEvent');
    // >> "Hello, Metaverse!"

    Now let’s update our event to test the .update() handler:

    var el = document.querySelector('a-entity');
    el.setAttribute('log', {event: 'anotherEvent', message: 'Hello, new event!'});
    el.emit('anotherEvent');
    // >> "Hello, new event!"
    -

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity +

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity (i.e., .removeAttribute('log')). We can implement the .remove() handler which is called when the component is removed. For the log component, we remove any event listeners the component attached to the entity:

    @@ -1316,7 +1316,7 @@ 

    var el = document.querySelector('a-entity');
    el.removeAttribute('log');
    el.emit('anEvent');
    // >> Nothing should be logged...

    Allowing Multiple Instances of a Component

    Let’s allow having multiple log components attached to the same entity. To do -so, we enable multiple instancing with the .multiple flag. Let’s +so, we enable multiple instancing with the .multiple flag. Let’s set that to true:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      multiple: true,

      // ...
    });
    @@ -1333,13 +1333,13 @@

    Example: box Component

    For a less trivial example, let’s find out how we can add 3D objects and affect -the scene graph by writing a component that uses three.js. To get +the scene graph by writing a component that uses three.js. To get the idea, we’ll just make a basic box component that creates a box mesh with both geometry and material.

    boximage Image by Ruben Mueller from vrjump.de

    Note: this is just a 3D equivalent of writing a Hello, World! component. -A-Frame provides geometry and material components if we +A-Frame provides geometry and material components if we actually wanted to make a box in practice.

    Schema and API

    Let’s start with the schema. The schema defines the API of your component. We’ll make the width, height, depth, and color configurable through the @@ -1361,7 +1361,7 @@

    THREE.MeshStandardMaterial, and finally a THREE.Mesh. Then we set the mesh on our entity to add the mesh to the -three.js scene graph using .setObject3D(name, object):

    +three.js scene graph using .setObject3D(name, object):

    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);
      }
    });

    Now let’s handle updates. If the geometry-related properties (i.e., width, diff --git a/docs/1.5.0/primitives/a-circle.html b/docs/1.5.0/primitives/a-circle.html index dbc0ff7d3..d873462f1 100644 --- a/docs/1.5.0/primitives/a-circle.html +++ b/docs/1.5.0/primitives/a-circle.html @@ -1183,7 +1183,7 @@

    -

    The circle primitive creates circles surfaces using the geometry +

    The circle primitive creates circles surfaces using the geometry component with the type set to circle.

    Example

    <a-scene>
      <a-assets>
        <img id="platform" src="platform.jpg">
      </a-assets>

      <!-- Basic circle. -->
      <a-circle color="#CCC" radius="20"></a-circle>

      <!-- Textured circle parallel to ground. -->
      <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
    </a-scene>
    diff --git a/docs/1.5.0/primitives/a-cubemap.html b/docs/1.5.0/primitives/a-cubemap.html index af3bc9405..7b1f511eb 100644 --- a/docs/1.5.0/primitives/a-cubemap.html +++ b/docs/1.5.0/primitives/a-cubemap.html @@ -1184,7 +1184,7 @@

    The cubemap primitive is used to create a CubeTexture environment map from 6 square images.

    -

    This can then be used as an envMap in the material component, or on a probe light.

    +

    This can then be used as an envMap in the material component, or on a probe light.

    Example

    <a-scene>
      <a-assets>
        <!-- Cubemap asset -->
        <a-cubemap id="reflection">
          <img src="milkyway/px.jpg">
          <img src="milkyway/nx.jpg">
          <img src="milkyway/py.jpg">
          <img src="milkyway/ny.jpg">
          <img src="milkyway/pz.jpg">
          <img src="milkyway/nz.jpg">
        </a-cubemap>
      </a-assets>

      <!-- Sphere with reflection. -->
      <a-sphere position="0 1 -2"
                material="envMap:#reflection; metalness:1.0; roughness:0.0">
      </a-sphere>
    </a-scene>

    Attributes

    No attributes. The cubemap is configured by creating 6 child elements beneath it.

    diff --git a/docs/1.5.0/primitives/a-cursor.html b/docs/1.5.0/primitives/a-cursor.html index f9c75afe1..5666b9317 100644 --- a/docs/1.5.0/primitives/a-cursor.html +++ b/docs/1.5.0/primitives/a-cursor.html @@ -1187,7 +1187,7 @@

    interactivity with a scene on devices that do not have a hand controller. The default appearance is a ring geometry. The cursor is usually placed as a child of the camera.

    -

    Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

    +

    Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

    Example

    <a-scene>
      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>

      <a-box></a-box>
    </a-scene>

    Attributes

    diff --git a/docs/1.5.0/primitives/a-gltf-model.html b/docs/1.5.0/primitives/a-gltf-model.html index 1360c21a1..fb31dc165 100644 --- a/docs/1.5.0/primitives/a-gltf-model.html +++ b/docs/1.5.0/primitives/a-gltf-model.html @@ -1197,7 +1197,7 @@

    - +
    srcgltf-model.srcgltf-model.src null
    diff --git a/docs/1.5.0/primitives/a-obj-model.html b/docs/1.5.0/primitives/a-obj-model.html index 54be02996..0c7c13780 100644 --- a/docs/1.5.0/primitives/a-obj-model.html +++ b/docs/1.5.0/primitives/a-obj-model.html @@ -1185,7 +1185,7 @@

    We recommend glTF for distributing assets in production over the web. Check -out using the glTF model primitive. You can +out using the glTF model primitive. You can either instead export to COLLADA and use the converter or try out the OBJ converter.

    @@ -1212,7 +1212,7 @@

    null -

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    +

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    diff --git a/docs/1.5.0/primitives/a-plane.html b/docs/1.5.0/primitives/a-plane.html index 2db4fbcea..e63cf78f3 100644 --- a/docs/1.5.0/primitives/a-plane.html +++ b/docs/1.5.0/primitives/a-plane.html @@ -1183,7 +1183,7 @@

    -

    The plane primitive creates flat surfaces using the geometry +

    The plane primitive creates flat surfaces using the geometry component with the type set to plane.

    Example

    <a-scene>
      <a-assets>
        <img id="ground" src="ground.jpg">
      </a-assets>

      <!-- Basic plane. -->
      <a-plane color="#CCC" height="20" width="20"></a-plane>

      <!-- Textured plane parallel to ground. -->
      <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
    </a-scene>
    diff --git a/docs/1.5.0/primitives/a-sound.html b/docs/1.5.0/primitives/a-sound.html index 15439e6c0..8c380eba4 100644 --- a/docs/1.5.0/primitives/a-sound.html +++ b/docs/1.5.0/primitives/a-sound.html @@ -1183,7 +1183,7 @@

    -

    The sound primitive wraps the sound component.

    +

    The sound primitive wraps the sound component.

    Example

    <a-scene>
      <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
    </a-scene>

    Attributes

    diff --git a/docs/1.5.0/primitives/a-sphere.html b/docs/1.5.0/primitives/a-sphere.html index 233203dbb..433e3a21d 100644 --- a/docs/1.5.0/primitives/a-sphere.html +++ b/docs/1.5.0/primitives/a-sphere.html @@ -1183,7 +1183,7 @@

    -

    The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

    +

    The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

    Example

    <a-sphere color="yellow" radius="5"></a-sphere>

    Attributes

    diff --git a/docs/1.5.0/primitives/a-text.html b/docs/1.5.0/primitives/a-text.html index 96ef105b8..d681a04c0 100644 --- a/docs/1.5.0/primitives/a-text.html +++ b/docs/1.5.0/primitives/a-text.html @@ -1183,7 +1183,7 @@

    -

    Wraps the text component.

    +

    Wraps the text component.

    Example

    <a-text value="Hello, World!"></a-text>

    Attributes

    diff --git a/docs/1.5.0/primitives/a-torus-knot.html b/docs/1.5.0/primitives/a-torus-knot.html index 632340e1c..4c3b55ad0 100644 --- a/docs/1.5.0/primitives/a-torus-knot.html +++ b/docs/1.5.0/primitives/a-torus-knot.html @@ -1183,7 +1183,7 @@

    -

    The torus knot primitive creates pretzel shapes using the geometry +

    The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

    Example

    <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
    diff --git a/docs/1.5.0/primitives/a-torus.html b/docs/1.5.0/primitives/a-torus.html index df0e5c307..b0a768be2 100644 --- a/docs/1.5.0/primitives/a-torus.html +++ b/docs/1.5.0/primitives/a-torus.html @@ -1183,7 +1183,7 @@

    -

    The torus primitive creates donut or tube shapes using the geometry +

    The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

    Example

    <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
    diff --git a/docs/1.5.0/primitives/a-triangle.html b/docs/1.5.0/primitives/a-triangle.html index b366ff5cb..871df5d45 100644 --- a/docs/1.5.0/primitives/a-triangle.html +++ b/docs/1.5.0/primitives/a-triangle.html @@ -1183,7 +1183,7 @@

    -

    The triangle primitive creates triangle surfaces using the geometry +

    The triangle primitive creates triangle surfaces using the geometry component with the type set to triangle.

    Example

    <a-scene>
      <a-assets>
        <img id="platform" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <!-- Basic triangle. -->
      <a-triangle color="#CCC" vertex-c="1 -1 0"></a-triangle>

      <!-- Textured triangle parallel to ground. -->
      <a-triangle src="#platform" rotation="-90 0 0"></a-triangle>
    </a-scene>
    diff --git a/docs/1.5.0/primitives/a-videosphere.html b/docs/1.5.0/primitives/a-videosphere.html index c7efe8c6b..43270cb29 100644 --- a/docs/1.5.0/primitives/a-videosphere.html +++ b/docs/1.5.0/primitives/a-videosphere.html @@ -1190,7 +1190,7 @@

    Ex

    Methods

    More indepth knowledge on the methods to alter video material can be seen over here

    // 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();
    -

    Attributes

    Note that the videosphere primitive inherits common attributes.

    +

    Attributes

    Note that the videosphere primitive inherits common attributes.

    diff --git a/docs/1.6.0/components/animation.html b/docs/1.6.0/components/animation.html index 96f84e51b..aa93603a3 100644 --- a/docs/1.6.0/components/animation.html +++ b/docs/1.6.0/components/animation.html @@ -1204,7 +1204,7 @@

    Read more below for additional options and discovering how to properly animate different types of values.

    -
    +

    API

    Properties

    diff --git a/docs/1.6.0/components/cursor.html b/docs/1.6.0/components/cursor.html index 0c2d6f19e..ee87fd41d 100644 --- a/docs/1.6.0/components/cursor.html +++ b/docs/1.6.0/components/cursor.html @@ -1186,11 +1186,11 @@

    The cursor component provides hover and click states for interaction on top of -the raycaster component. The cursor component can be used for +the raycaster component. The cursor component can be used for both gaze-based and controller-based interactions, but the appearance needs -to be configured depending on the use case. The <a-cursor> +to be configured depending on the use case. The <a-cursor> primitive provides a default reticle appearance for a gaze-based -cursor, and the laser-controls component configures the +cursor, and the laser-controls component configures the cursor for all controllers.

    The cursor component listens to events and keeps state on what’s being hovered and pressed in order to provide mousedown, mouseup, mouseenter, @@ -1201,15 +1201,15 @@

    By default, the cursor is configured to be used in a gaze-based mode and will register user input via mouse or touch. Specifying the downEvents and upEvents properties allows the cursor to work with controllers. For example, -the laser-controls component automatically configures these +the laser-controls component automatically configures these properties to work with most controllers.

    To provide a shape or appearance to the cursor, we should apply either the -geometry and material components or use the raycaster -component’s showLine property to draw a line using the line +geometry and material components or use the raycaster +component’s showLine property to draw a line using the line component.

    Example

    For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no -matter where we look, we place it as a child of the active camera +matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

    <a-entity camera look-controls>
      <a-entity cursor="fuse: true; fuseTimeout: 500"
                position="0 0 -1"
                geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                material="color: black; shader: flat">
      </a-entity>
    </a-entity>

    <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
    @@ -1256,7 +1256,7 @@

    To further customize the cursor component, we configure the cursor’s dependency -component, the raycaster component.

    +component, the raycaster component.

    Events

    @@ -1340,7 +1340,7 @@

    States

    Configuring the Cursor through the Raycaster Component

    The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

    <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>
    @@ -1355,7 +1355,7 @@

    Adding Visual Feedback

    To add visual feedback to the cursor to show when the cursor is clicking or -fusing, we can use the animation component. When the cursor +fusing, we can use the animation component. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

    <a-entity
      animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
      animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
      animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
      cursor="fuse: true;"
      material="color: black; shader: flat"
      position="0 0 -3"
      geometry="primitive: ring"></a-entity>
    diff --git a/docs/1.6.0/components/debug.html b/docs/1.6.0/components/debug.html index 179a13c95..70d4ceba9 100644 --- a/docs/1.6.0/components/debug.html +++ b/docs/1.6.0/components/debug.html @@ -1202,8 +1202,8 @@ 

    <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

    Make sure that this component is not active in production.

    -

    Manually Serializing to DOM

    To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM:

    +

    Manually Serializing to DOM

    To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM:

    document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
    document.querySelector('a-entity').flushToDOM();  // Flush an entity.
    document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
    document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.
    diff --git a/docs/1.6.0/components/device-orientation-permission-ui.html b/docs/1.6.0/components/device-orientation-permission-ui.html index 6110febc1..a5850487a 100644 --- a/docs/1.6.0/components/device-orientation-permission-ui.html +++ b/docs/1.6.0/components/device-orientation-permission-ui.html @@ -1186,7 +1186,7 @@

    Starting with Safari on iOS 13 browsers require sites to be served over https and request user permission to access DeviceOrientation events. This component presents a permission dialog for the user to grant or deny access. -The device-orientation-permission-ui component applies only to the <a-scene> element

    +The device-orientation-permission-ui component applies only to the <a-scene> element

    To configure the style of the dialog one can redefine the associated css styles. To change the colors of the allow, deny and ok buttons:

    .a-dialog-allow-button {
      background-color: red;
    }

    .a-dialog-deny-button {
      background-color: blue;
    }

    .a-dialog-ok-button {
       background-color: green;
     }
    diff --git a/docs/1.6.0/components/fog.html b/docs/1.6.0/components/fog.html index 559b6f5ba..84fd489dd 100644 --- a/docs/1.6.0/components/fog.html +++ b/docs/1.6.0/components/fog.html @@ -1186,7 +1186,7 @@

    The fog component obscures entities in fog given distance from the camera. The -fog component applies only to the <a-scene> element.

    +fog component applies only to the <a-scene> element.

    Example

    <a-scene fog="type: linear; color: #AAA"></a-scene>

    Properties

    Given the fog distribution type, different properties will apply.

    diff --git a/docs/1.6.0/components/geometry.html b/docs/1.6.0/components/geometry.html index 8ec415d46..2f5a215fb 100644 --- a/docs/1.6.0/components/geometry.html +++ b/docs/1.6.0/components/geometry.html @@ -1191,7 +1191,7 @@

    provide an appearance alongside the shape to create a complete mesh.

    Overview of available geometries: all-available-a-frame-geometries

    -
    +

    Base Properties

    Every geometry type will have these properties:

    @@ -1731,7 +1731,7 @@ 

    AFRAME.registerGeometry('box', {
      schema: {
        depth: {default: 1, min: 0},
        height: {default: 1, min: 0},
        width: {default: 1, min: 0},
        segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
        segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
        segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
      },

      init: function (data) {
        this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
      }
    });

    Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then we need to create the geometry and set on this.geometry through the init lifecycle method.

    When a geometry component sets its primitive property to the custom geometry diff --git a/docs/1.6.0/components/gltf-model.html b/docs/1.6.0/components/gltf-model.html index 950ff0602..a96e777cb 100644 --- a/docs/1.6.0/components/gltf-model.html +++ b/docs/1.6.0/components/gltf-model.html @@ -1197,9 +1197,9 @@

    NOTE: A-Frame supports glTF 2.0. For models using older versions of the glTF format, use gltf-model-legacy from donmccurdy/aframe-extras.

    -
    + -

    Why use glTF?

    In comparison to the older OBJ format, which supports only +

    Why use glTF?

    In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features. In addition to all of the above, glTF offers:

      diff --git a/docs/1.6.0/components/hand-controls.html b/docs/1.6.0/components/hand-controls.html index c19828e32..93201a0e1 100644 --- a/docs/1.6.0/components/hand-controls.html +++ b/docs/1.6.0/components/hand-controls.html @@ -1186,8 +1186,8 @@

      The hand-controls component provides tracked hands (using a prescribed model) -with animated gestures. hand-controls wraps the vive-controls and -oculus-touch-controls which in turn wrap the tracked-controls +with animated gestures. hand-controls wraps the vive-controls and +oculus-touch-controls which in turn wrap the tracked-controls component. By specifying just hand-controls, we have something that works well with both Vive and Rift. The component gives extra events and handles hand animations and poses.

      diff --git a/docs/1.6.0/components/keyboard-shortcuts.html b/docs/1.6.0/components/keyboard-shortcuts.html index 44e8ddc35..98d412ae6 100644 --- a/docs/1.6.0/components/keyboard-shortcuts.html +++ b/docs/1.6.0/components/keyboard-shortcuts.html @@ -1186,7 +1186,7 @@

      The keyboard-shortcuts component toggles global keyboard shortcuts. The -keyboard-shortcuts component applies only to the <a-scene> element.

      +keyboard-shortcuts component applies only to the <a-scene> element.

      Example

      <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

      Properties

      diff --git a/docs/1.6.0/components/laser-controls.html b/docs/1.6.0/components/laser-controls.html index e87d4dcb6..8ec2cd8ea 100644 --- a/docs/1.6.0/components/laser-controls.html +++ b/docs/1.6.0/components/laser-controls.html @@ -1197,15 +1197,15 @@

      configures other components, rather than implementing any logic itself. Under the hood, laser-controls sets all of the tracked controller components:

      These controller components get activated if its respective controller is connected and detected via the Gamepad API. Then the model of the actual -controller is used. laser-controls then configures the cursor +controller is used. laser-controls then configures the cursor component for listen to the appropriate events and configures the -raycaster component to draw the laser.

      +raycaster component to draw the laser.

      When the laser intersects with an entity, the length of the line gets truncated to the distance to the intersection point.

      Example

      <a-entity laser-controls="hand: left"></a-entity>
      @@ -1230,11 +1230,11 @@

      Color for the default controller model. -

      Customizing the Raycaster

      Configure the raycaster properties.

      +

      Customizing the Raycaster

      Configure the raycaster properties.

      For example:

      <a-entity laser-controls raycaster="objects: .links; far: 5"></a-entity>
      -

      Customizing the Line

      See Raycaster: Customizing the Line.

      +

      Customizing the Line

      See Raycaster: Customizing the Line.

      For example:

      <a-entity laser-controls raycaster="lineColor: red; lineOpacity: 0.5"></a-entity>
      diff --git a/docs/1.6.0/components/light.html b/docs/1.6.0/components/light.html index 8384149f8..65632d92f 100644 --- a/docs/1.6.0/components/light.html +++ b/docs/1.6.0/components/light.html @@ -1200,7 +1200,7 @@

      To manually disable the defaults, without adding other lights:

      <a-scene light="defaultLightsEnabled: false">
        <!-- ... -->
      </a-scene>
      -
      +

      Properties

      All light types support a few basic properties:

      @@ -1343,7 +1343,7 @@

      Spot

      Sp

      Probe

      Probe lights are kind of like ambient lighting in that they don’t have a particular source or direction and light everything equally.

      -

      Where they differ though is that they will color each angle differently based upon a spherical harmonic. This spherical harmonic is generated by analyzing a cubemap. The cubemap you provide doesn’t need to be high resolution since it’s only used to generate the spherical harmonics.

      +

      Where they differ though is that they will color each angle differently based upon a spherical harmonic. This spherical harmonic is generated by analyzing a cubemap. The cubemap you provide doesn’t need to be high resolution since it’s only used to generate the spherical harmonics.

      @@ -1369,7 +1369,7 @@

      Probe

      <

      Configuring Shadows

      A-Frame includes support for realtime shadow rendering. With proper configuration, objects (both moving or stationary) will cast shadows adding depth and realism to a scene. Since shadows come with many properties, it -is very helpful to use the A-Frame Inspector to configure shadows

      +is very helpful to use the A-Frame Inspector to configure shadows

      Light types that support shadows (point, spot, and directional) include additional properties:

      diff --git a/docs/1.6.0/components/line.html b/docs/1.6.0/components/line.html index 9bfd61e1f..1d47e0cdd 100644 --- a/docs/1.6.0/components/line.html +++ b/docs/1.6.0/components/line.html @@ -1187,8 +1187,8 @@

      The line component draws a line given a start coordinate and end coordinate using THREE.Line.

      -

      The raycaster component uses the line component for its showLine -property, which is then used by the laser-controls component.

      +

      The raycaster component uses the line component for its showLine +property, which is then used by the laser-controls component.

      Example

      <a-entity line="start: 0 1 0; end: 2 0 -5; color: red"
                line__2="start: -2 4 5; end: 0 4 -3; color: green"></a-entity>

      Note an entity can have multiple lines. The line mesh is set as line or diff --git a/docs/1.6.0/components/look-controls.html b/docs/1.6.0/components/look-controls.html index 7d29396b3..fde085d47 100644 --- a/docs/1.6.0/components/look-controls.html +++ b/docs/1.6.0/components/look-controls.html @@ -1191,7 +1191,7 @@

    • Rotates the entity when we move the mouse.
    • Rotates the entity when we touch-drag the touchscreen.

    -

    Example

    The look-controls component is usually used alongside the camera +

    Example

    The look-controls component is usually used alongside the camera component.

    <a-entity camera look-controls position="0 1.6 0"></a-entity>
    diff --git a/docs/1.6.0/components/magicleap-controls.html b/docs/1.6.0/components/magicleap-controls.html index 5c360c27e..745fb3d0c 100644 --- a/docs/1.6.0/components/magicleap-controls.html +++ b/docs/1.6.0/components/magicleap-controls.html @@ -1186,7 +1186,7 @@

    The magicleap-controls component interfaces with the Magic Leap controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and Magic Leap controller model/

    Example

    <!-- Match Magic Leap controller if present, regardless of hand. -->
    <a-entity magicleap-controls></a-entity>

    <!-- Match Magic Leap controller if present and for specified hand. -->
    <a-entity magicleap-controls="hand: left"></a-entity>
    <a-entity magicleap-controls="hand: right"></a-entity>
    diff --git a/docs/1.6.0/components/material.html b/docs/1.6.0/components/material.html index b9d253e42..1f1e621e0 100644 --- a/docs/1.6.0/components/material.html +++ b/docs/1.6.0/components/material.html @@ -1186,11 +1186,11 @@

    The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

    We can register custom materials to extend the material component to provide a wide range of visual effects.

    -
    +

    Example

    Defining a red material using the default standard material:

    <a-entity geometry="primitive: box" material="color: red"></a-entity>
    @@ -1283,7 +1283,7 @@

    anisotropy -The anisotropic filtering sample rate to use for the textures. A value of 0 means the default value will be used, see renderer +The anisotropic filtering sample rate to use for the textures. A value of 0 means the default value will be used, see renderer 0 @@ -1386,12 +1386,12 @@

    or a comma-separated list of URLs. See below for more detail. +Environment cubemap texture for reflections. Can be a selector to or a comma-separated list of URLs. See below for more detail. None fog -Whether or not material is affected by fog. +Whether or not material is affected by fog. true @@ -1533,7 +1533,7 @@

    cubemap, six images put together +

    Unlike textures, the envMap property takes a cubemap, six images put together to form a cube. The cubemap wraps around the mesh and applied as a texture.

    For example:

    <a-scene>
      <a-assets>
        <a-cubemap id="sky">
          <img src="right.png">
          <img src="left.png">
          <img src="top.png">
          <img src="bottom.png">
          <img src="front.png">
          <img src="back.png">
        </a-cubemap>
      </a-assets>

      <a-entity geometry="primitive: box" material="envMap: #sky; roughness: 0"></a-entity>
    </a-scene>
    @@ -1563,7 +1563,7 @@

    fog. +Whether or not material is affected by fog. true @@ -1604,7 +1604,7 @@

    Textures

    To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

    +asset management system:

    <a-scene>
      <a-assets>
        <img id="my-texture" src="texture.png">
      </a-assets>

      <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
    </a-scene>

    src can also be an inline URL. Note that we do not get browser caching or diff --git a/docs/1.6.0/components/obj-model.html b/docs/1.6.0/components/obj-model.html index 0d603d894..bc8040a60 100644 --- a/docs/1.6.0/components/obj-model.html +++ b/docs/1.6.0/components/obj-model.html @@ -1203,7 +1203,7 @@

    mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

    Events

    @@ -1221,7 +1221,7 @@

    EventsLoading Inline

    We can also load assets by specifying the path directly within url(). Note this is less performant than going through the asset management system.

    <a-entity obj-model="obj: url(/path/to/tree.obj); mtl: url(/path/to/tree.mtl)"></a-entity>
    -

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    +

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    Additional Resources

    We can find and download models on the web to drop into our scenes:

    • Sketchup’s 3D Warehouse - Repository of models.
      • diff --git a/docs/1.6.0/components/oculus-touch-controls.html b/docs/1.6.0/components/oculus-touch-controls.html index e3817343e..6327cf040 100644 --- a/docs/1.6.0/components/oculus-touch-controls.html +++ b/docs/1.6.0/components/oculus-touch-controls.html @@ -1186,7 +1186,7 @@

      The oculus-touch-controls component interfaces with the Oculus Touch controllers (Rift, Rift S, Oculus Quest 1 and 2). It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.

      Example

      <a-entity oculus-touch-controls="hand: left"></a-entity>
      <a-entity oculus-touch-controls="hand: right"></a-entity>
      diff --git a/docs/1.6.0/components/position.html b/docs/1.6.0/components/position.html index a5c49442a..e9ea4e69e 100644 --- a/docs/1.6.0/components/position.html +++ b/docs/1.6.0/components/position.html @@ -1224,7 +1224,7 @@

      #child2‘s position would be 2 3 4.

      Updating Position

      For performance and ergonomics, we recommend updating position directly via the -three.js Object3D .position Vector3 versus via +three.js Object3D .position Vector3 versus via .setAttribute.

      This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1238,11 +1238,11 @@

      Getting Position

      To reflect updates done at the three.js level, A-Frame returns the actual Object3D.position vector object when doing .getAttribute('position'). Note modifying the return value will modify the entity itself.

      -

      See also reading position and rotation of the camera.

      +

      See also reading position and rotation of the camera.

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/1.6.0/components/raycaster.html b/docs/1.6.0/components/raycaster.html index 7a0a61748..e1e8cfc59 100644 --- a/docs/1.6.0/components/raycaster.html +++ b/docs/1.6.0/components/raycaster.html @@ -1197,7 +1197,7 @@

      is explicitly defined via the objects selector property described below. Raycasting is an expensive operation, and we should raycast against only targets that need to be interactable at any given time.

      -

      The cursor component and laser-controls components +

      The cursor component and laser-controls components both build on top of the raycaster component.

      Example

      <a-entity id="player" >
        <a-entity collider-check raycaster="objects: .collidable; showLine:true;" position="0 1 0"></a-entity>
      </a-entity>
      <a-entity class="collidable" geometry="primitive: box"  position="0 1 -3"></a-entity>
      @@ -1265,7 +1265,7 @@

      showLine -Whether or not to display the raycaster visually with the line component. +Whether or not to display the raycaster visually with the line component. false @@ -1292,7 +1292,7 @@

      Events raycaster-intersection -Emitted on the raycasting entity. Raycaster is intersecting with one or more entities. Event detail will contain els, an array with the newly intersected entities, and intersections, and .getIntersection (el) function which can be used to obtain current intersection data. For access to a complete list of intersections (existing & new), see Members intersectedEls. +Emitted on the raycasting entity. Raycaster is intersecting with one or more entities. Event detail will contain els, an array with the newly intersected entities, and intersections, and .getIntersection (el) function which can be used to obtain current intersection data. For access to a complete list of intersections (existing & new), see Members intersectedEls. raycaster-intersection-cleared diff --git a/docs/1.6.0/components/renderer.html b/docs/1.6.0/components/renderer.html index 321064a1f..3df01b597 100644 --- a/docs/1.6.0/components/renderer.html +++ b/docs/1.6.0/components/renderer.html @@ -1324,7 +1324,7 @@

      here

      +

      Some more background on how A-Frame sorts objects for rendering can be found here

      physicallyCorrectLights

      By default, point and spot lights attenuate (or, appear dimmer as they become farther away) according to a model that is classically common, but physically inaccurate. For more realistic light attenuation, set renderer="physicallyCorrectLights: true". Light intensities may need to diff --git a/docs/1.6.0/components/rotation.html b/docs/1.6.0/components/rotation.html index ad0b58d9e..0b3f062b3 100644 --- a/docs/1.6.0/components/rotation.html +++ b/docs/1.6.0/components/rotation.html @@ -1229,7 +1229,7 @@

      15 45 30.

      Updating Rotation

      For performance and ergonomics, we recommend updating rotation directly via the three.js Object3D .rotation Euler (in radians) versus -via .setAttribute.

      +via .setAttribute.

      This method is easier because we have access to all the Euler utilities, and faster by skipping .setAttribute overhead and not needing to create an object to set rotation:

      @@ -1239,12 +1239,12 @@

      reading position and rotation of the camera.

      +

      See also reading position and rotation of the camera.

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/1.6.0/components/scale.html b/docs/1.6.0/components/scale.html index 02982f414..045abcac0 100644 --- a/docs/1.6.0/components/scale.html +++ b/docs/1.6.0/components/scale.html @@ -1228,7 +1228,7 @@

      Relative Scale

      Similar to the rotation and position components, scales are applied in the local coordinate system and multiply in nested entities.

      Updating Scale

      For performance and ergonomics, we recommend updating scale directly via the -three.js Object3D .scale Vector3 versus via +three.js Object3D .scale Vector3 versus via .setAttribute.

      This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1244,8 +1244,8 @@

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/1.6.0/components/shadow.html b/docs/1.6.0/components/shadow.html index 835dbb616..880f7a9d7 100644 --- a/docs/1.6.0/components/shadow.html +++ b/docs/1.6.0/components/shadow.html @@ -1195,7 +1195,7 @@

      Examp

      IMPORTANT: Adding the shadow component alone is not enough to display shadows in your scene. We must have at least one light with castShadow: true enabled. Additionally, the light’s shadow camera (used for depth -projection) usually must be configured correctly. Refer to the light +projection) usually must be configured correctly. Refer to the light component for more information.

      Properties

      diff --git a/docs/1.6.0/components/sound.html b/docs/1.6.0/components/sound.html index 0ff12270d..6ccdf8eb1 100644 --- a/docs/1.6.0/components/sound.html +++ b/docs/1.6.0/components/sound.html @@ -1187,7 +1187,7 @@

      The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the -components-position.

      +components-position.

      NOTE: Playing sound on iOS — in any browser — requires a physical user interaction. This is a browser limitation, and internal A-Frame events (like fusing cursors) do diff --git a/docs/1.6.0/components/stats.html b/docs/1.6.0/components/stats.html index 08c6a6f29..e1b9c2307 100644 --- a/docs/1.6.0/components/stats.html +++ b/docs/1.6.0/components/stats.html @@ -1186,7 +1186,7 @@

      The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

      +component applies only to the <a-scene> element.

      Example

      <a-scene stats></a-scene>

      Metrics

        diff --git a/docs/1.6.0/components/text.html b/docs/1.6.0/components/text.html index acb945ff0..6e7dbe16d 100644 --- a/docs/1.6.0/components/text.html +++ b/docs/1.6.0/components/text.html @@ -1187,7 +1187,7 @@

        The text component renders signed distance field (SDF) font text.

        Example Image

        -
        +

        Introduction

        Note that rendering text in 3D is hard. In 2D web development, text is the most basic thing because the browser’s renderer and layout engine handle @@ -1435,8 +1435,8 @@

        SizingChange the width.
      • Change the wrapCount (roughly how many characters to fit inside the given width).
      • Change wrapPixels.
        • -
      • Change the scale component.
        • -
      • Position the text closer or farther away.
        • +
      • Change the scale component.
        • +
      • Position the text closer or farther away.

      Sizing

      Text can be wrapped by specifying width in A-Frame units.

      diff --git a/docs/1.6.0/components/tracked-controls.html b/docs/1.6.0/components/tracked-controls.html index d009f7d56..9cc9ef4cb 100644 --- a/docs/1.6.0/components/tracked-controls.html +++ b/docs/1.6.0/components/tracked-controls.html @@ -1187,9 +1187,9 @@

      The tracked-controls component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is -abstracted by the hand-controls component as well as the -vive-controls, oculus-touch-controls, -windows-motion-controls components. +abstracted by the hand-controls component as well as the +vive-controls, oculus-touch-controls, +windows-motion-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events. For non-6DOF controllers, a primitive arm model is used to emulate positional data.

      diff --git a/docs/1.6.0/components/visible.html b/docs/1.6.0/components/visible.html index e96e43f45..e6d353228 100644 --- a/docs/1.6.0/components/visible.html +++ b/docs/1.6.0/components/visible.html @@ -1209,7 +1209,7 @@

      Value

      < The entity will not be rendered nor visible. The entity will still exist in the scene. -

      Updating Visibility

      It is slightly faster to update visibility at the three.js level versus via +

      Updating Visibility

      It is slightly faster to update visibility at the three.js level versus via .setAttribute.

      // With three.js
      el.object3D.visible = false;

      // With .setAttribute.
      el.setAttribute('visible', false);
      diff --git a/docs/1.6.0/components/vive-controls.html b/docs/1.6.0/components/vive-controls.html index d81766409..68c430fd1 100644 --- a/docs/1.6.0/components/vive-controls.html +++ b/docs/1.6.0/components/vive-controls.html @@ -1186,7 +1186,7 @@

      The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

      Example

      <a-entity vive-controls="hand: left"></a-entity>
      <a-entity vive-controls="hand: right"></a-entity>
      diff --git a/docs/1.6.0/components/vive-focus-controls.html b/docs/1.6.0/components/vive-focus-controls.html index 48bdddcb2..f9cecaea7 100644 --- a/docs/1.6.0/components/vive-focus-controls.html +++ b/docs/1.6.0/components/vive-focus-controls.html @@ -1186,7 +1186,7 @@

      The vive-focus-controls component interfaces with the Vive Focus controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Vive Focus controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

      Example

      <!-- Match Vive Focus controller if present, regardless of hand. -->
      <a-entity vive-focus-controls></a-entity>

      <!-- Match Vive Focus controller if present and for specified hand. -->
      <a-entity vive-focus-controls="hand: left"></a-entity>
      <a-entity vive-focus-controls="hand: right"></a-entity>
      diff --git a/docs/1.6.0/components/wasd-controls.html b/docs/1.6.0/components/wasd-controls.html index 9d4ffebb3..a74721912 100644 --- a/docs/1.6.0/components/wasd-controls.html +++ b/docs/1.6.0/components/wasd-controls.html @@ -1186,7 +1186,7 @@

      The wasd-controls component controls an entity with the WASD or arrow keyboard -keys. The wasd-controls component is commonly attached to an entity with the camera +keys. The wasd-controls component is commonly attached to an entity with the camera component.

      Example

      <a-entity camera look-controls wasd-controls="acceleration:100" position="0 1.6 0"></a-entity>
      diff --git a/docs/1.6.0/components/windows-motion-controls.html b/docs/1.6.0/components/windows-motion-controls.html index 47f2cddc5..e6c63a55c 100644 --- a/docs/1.6.0/components/windows-motion-controls.html +++ b/docs/1.6.0/components/windows-motion-controls.html @@ -1187,7 +1187,7 @@

      The windows-motion-controls component 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 +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.)

      Example

      <a-entity windows-motion-controls="hand: left"></a-entity>
      <a-entity windows-motion-controls="hand: right"></a-entity>
      diff --git a/docs/1.6.0/components/xr-mode-ui.html b/docs/1.6.0/components/xr-mode-ui.html index eb66d1a10..d2b124272 100644 --- a/docs/1.6.0/components/xr-mode-ui.html +++ b/docs/1.6.0/components/xr-mode-ui.html @@ -1186,7 +1186,7 @@

      The xr-mode-ui component configures or disables the enter VR and AR buttons. Buttons only display if the browser supports the corresponding modes (AR or VR). The xr-mode-ui component applies only -to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

      +to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

      Example

      <a-scene xr-mode-ui="enabled: false"></a-scene>

      Properties

      diff --git a/docs/1.6.0/core/asset-management-system.html b/docs/1.6.0/core/asset-management-system.html index 1d62bd335..7cd737108 100644 --- a/docs/1.6.0/core/asset-management-system.html +++ b/docs/1.6.0/core/asset-management-system.html @@ -1203,7 +1203,7 @@

      The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

      -
      +

      Example

      We can define our assets in <a-assets> and point to those assets from our entities using selectors:

      diff --git a/docs/1.6.0/core/component.html b/docs/1.6.0/core/component.html index abcc68e18..f77331659 100644 --- a/docs/1.6.0/core/component.html +++ b/docs/1.6.0/core/component.html @@ -1185,7 +1185,7 @@

      -

      In the entity-component-system pattern, a component is a reusable and +

      In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

      In A-Frame, components modify entities which are 3D objects in the scene. We @@ -1199,7 +1199,7 @@

      Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

      -
      +

      Component HTML Form

      A component holds a bucket of data in the form of one or more component properties. Components use this data to modify entities. Consider an engine @@ -1350,7 +1350,7 @@

      Definition Lifecycle Handler Methods

      With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the shape of the data, the lifecycle handler methods use the data to modify the entity. The handlers will usually interact with the -Entity API.

      +Entity API.

      methodsimage Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

      Overview of Methods

      @@ -1403,15 +1403,15 @@

      setAttribute. +

      - + - + @@ -1448,7 +1448,7 @@

      diffing the current +

      Granular modifications to the entity can be done by diffing the current dataset (this.data) with the previous dataset before the update (oldData).

      A-Frame calls .update() both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The @@ -1456,7 +1456,7 @@

      visible component’s update sets the visibility of +

      For example, the visible component’s update sets the visibility of the entity.

      Parsed component properties computed from the schema default values, mixins, and the entity’s attributes.
      Important: Do not modify the data attribute directly. It is updated internally by A-Frame. To modify a component, use setAttribute.
      this.elReference to the entity as an HTML element.Reference to the entity as an HTML element.
      this.el.sceneElReference to the scene as an HTML element.Reference to the scene as an HTML element.
      this.id
      AFRAME.registerComponent('visible', {
        /**
         * this.el is the entity element.
         * this.el.object3D is the three.js object of the entity.
         * this.data is the component's property or properties.
         */
        update: function (oldData) {
          this.el.object3D.visible = this.data;
        }
        // ...
      });
      @@ -1471,7 +1471,7 @@

      Remove, undo, or clean up all of the component’s modifications to the entity.
    • Detach event listeners.

    -

    For example, when the light component is removed, the light component +

    For example, when the light component is removed, the light component will remove the light object that it had previously set on the entity, thus removing it from the scene.

    AFRAME.registerComponent('light', {
      // ...
      remove: function () {
        this.el.removeObject3D('light');
      }
      // ...
    });
    @@ -1493,7 +1493,7 @@

    time) and the time difference in milliseconds since the last frame (timeDelta). These can be used for interpolation or to only run parts of the tick handler on a set interval.

    -

    For example, the tracked controls component will progress +

    For example, the tracked controls component will progress the controller’s animations, update the controller’s position and rotation, and check for button presses.

    AFRAME.registerComponent('tracked-controls', {
      // ...
      tick: function (time, timeDelta) {
        this.updateMeshAnimation();
        this.updatePose();
        this.updateButtons();
      }
      // ...
    });
    @@ -1512,7 +1512,7 @@

    .
  • Remove event listeners.
  • Remove any chances of dynamic behavior.
    • -

    For example, the sound component will pause the sound and remove an +

    For example, the sound component will pause the sound and remove an event listener that would have played a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      pause: function () {
        this.pauseSound();
        this.removeEventListener();
      }
      // ...
    });
    @@ -1527,7 +1527,7 @@

    .pla
    • Add event listeners.
    -

    For example, the sound component will play the sound and update the +

    For example, the sound component will play the sound and update the event listener that would play a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      play: function () {
        if (this.data.autoplay) { this.playSound(); }
        this.updateEventListener();
      }
      // ...
    });
    @@ -1537,7 +1537,7 @@

  • Dynamically update or extend the schema, usually depending on the value of a property.
    • -

    For example, the geometry component checks if the primitive +

    For example, the geometry component checks if the primitive property changed to determine whether to update the schema for a different type of geometry:

    AFRAME.registerComponent('geometry', {
      // ...
      updateSchema: (newData) {
        if (newData.primitive !== this.data.primitive) {
          this.extendSchema(GEOMETRIES[newData.primitive].schema);
        }
      }
      // ...
    });
    @@ -1599,7 +1599,7 @@ 

    document.querySelector('[geometry]').components.geometry.flushToDOM();
    -

    Read more about component-to-DOM serialization.

    +

    Read more about component-to-DOM serialization.

    Accessing a Component’s Members and Methods

    A component’s members and methods can be accessed through the entity from the .components object. Look up the component from the entity’s map of components, and we’ll have access to the component’s internals. Consider this diff --git a/docs/1.6.0/core/entity.html b/docs/1.6.0/core/entity.html index 81a2a41b2..1ff6872a9 100644 --- a/docs/1.6.0/core/entity.html +++ b/docs/1.6.0/core/entity.html @@ -1186,23 +1186,23 @@

    A-Frame represents an entity via the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

    -

    In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

    -
    +

    In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

    +

    Example

    Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

    <a-entity>

    We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

    +give it shape and appearance, we can attach the geometry and +material components:

    <a-entity geometry="primitive: box" material="color: red">
    -

    Or to make it emit light, we can further attach the light component:

    +

    Or to make it emit light, we can further attach the light component:

    <a-entity geometry="primitive: box" material="color: red"
              light="type: point; intensity: 2.0">

    Retrieving an Entity

    We can simply retrieve an entity using DOM APIs.

    @@ -1237,7 +1237,7 @@

    object3DMap

    An entity’s object3DMap is an object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that components have set.

    -

    For an entity with a geometry and light components +

    For an entity with a geometry and light components attached, object3DMap might look like:

    {
      light: <THREE.Light Object>,
      mesh: <THREE.Mesh Object>
    }
    @@ -1252,7 +1252,7 @@

    Metho

    destroy ()

    Clean up memory related to the entity such as clearing all components and their data.

    emit (name, detail, bubbles)

    emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

    +trigger an animation:

    // <a-entity animation="property: rotation; to: 0 360 0; startEvents: rotate">
    entity.emit('rotate');

    We can also pass event detail or data as the second argument:

    @@ -1263,7 +1263,7 @@ 

    entity.emit('sink', null, false);

    flushToDOM (recursive)

    flushToDOM will manually serialize an entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

    +Read more about component-to-DOM serialization.

    getAttribute (componentName)

    getAttribute retrieves parsed component data (including mixins and defaults).

    // <a-entity geometry="primitive: box; width: 3">

    entity.getAttribute('geometry');
    // >> {primitive: "box", depth: 2, height: 2, width: 3, ...}

    entity.getAttribute('geometry').primitive;
    // >> "box"

    entity.getAttribute('geometry').height;
    // >> 2

    entity.getAttribute('position');
    // >> {x: 0, y: 0, z: 0}
    @@ -1290,20 +1290,20 @@

    pa entity will call pause() on its child entities when we pause an entity.

    // <a-entity id="spinning-jumping-ball">
    entity.pause();
    -

    For example, the look-controls component on +

    For example, the look-controls component on pause will remove event handlers that listen for input.

    play ()

    play() will start any dynamic behavior as defined by animations and components. This is automatically called when the DOM attaches an entity. When an entity play(), the entity calls play() on its child entities.

    entity.pause();
    entity.play();
    -

    For example, the sound component on play will begin playing the sound.

    +

    For example, the sound component on play will begin playing the sound.

    setAttribute (componentName, value, [propertyValue | clobber])

    If componentName is not the name of a registered component or the component is a single-property component, setAttribute behaves as it normally would:

    entity.setAttribute('visible', false);

    Though if componentName is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    entity.setAttribute('position', { x: 1, y: 2, z: 3 });
    @@ -1371,7 +1371,7 @@

    Events componentchanged -One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. +One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. componentinitialized diff --git a/docs/1.6.0/core/globals.html b/docs/1.6.0/core/globals.html index ebb01b184..c3df487fd 100644 --- a/docs/1.6.0/core/globals.html +++ b/docs/1.6.0/core/globals.html @@ -1197,11 +1197,11 @@

    AComponent -Component prototype. +Component prototype. AEntity -Entity prototype. +Entity prototype. ANode @@ -1209,7 +1209,7 @@

    AScene -Scene prototype. +Scene prototype. components @@ -1225,19 +1225,19 @@

    registerComponent -Function to register a component. +Function to register a component. registerGeometry -Function to register a geometry. +Function to register a geometry. registerPrimitive -Function to register a primitive like registering an A-Frame elements similar to <a-box>. +Function to register a primitive like registering an A-Frame elements similar to <a-box>. registerShader -Function to register a material or shader. +Function to register a material or shader. schema @@ -1257,7 +1257,7 @@

    utils -A-Frame utility modules. +A-Frame utility modules. version diff --git a/docs/1.6.0/core/mixins.html b/docs/1.6.0/core/mixins.html index 852228343..6a7520cf7 100644 --- a/docs/1.6.0/core/mixins.html +++ b/docs/1.6.0/core/mixins.html @@ -1187,7 +1187,7 @@

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    <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-mixin>
      </a-assets>

      <a-entity mixin="red cube"></a-entity>
      <a-entity mixin="blue cube"></a-entity>
    </a-scene>
    @@ -1197,7 +1197,7 @@

    the entities above expand to:

    <a-entity material="color: red" geometry="primitive: box"></a-entity>
    <a-entity material="color: blue" geometry="primitive: box"></a-entity>
    -
    +

    Merging Component Properties

    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="height: 10"></a-mixin>
        <a-mixin id="wide" geometry="width: 10"></a-mixin>
      </a-assets>

      <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
    </a-scene>
    diff --git a/docs/1.6.0/core/scene.html b/docs/1.6.0/core/scene.html index 938229bfd..87095c417 100644 --- a/docs/1.6.0/core/scene.html +++ b/docs/1.6.0/core/scene.html @@ -1186,8 +1186,8 @@

    A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

    -

    The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

    +

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    @@ -1197,9 +1197,9 @@

  • Default camera and lights
  • Set up webvr-polyfill, VREffect
  • Add UI to Enter VR that calls WebVR API
    • -
  • Configure WebXR devices through the webxr system
    • +
  • Configure WebXR devices through the webxr system
    • -
    +

    Example

    <a-scene>
      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <a-box src="#texture"></a-box>
    </a-scene>
    @@ -1244,7 +1244,7 @@

    systems -Instantiated systems. +Instantiated systems. time @@ -1308,12 +1308,12 @@

    embedded - Remove fullscreen styles from the canvas.

    • -
  • fog - Add fog.
    • -
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • -
  • inspector - Inject the A-Frame Inspector.
    • -
  • stats - Toggle performance stats.
    • -
  • xr-mode-ui - Toggle UI for entering and exiting VR.
    • +
  • embedded - Remove fullscreen styles from the canvas.
    • +
  • fog - Add fog.
    • +
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • +
  • inspector - Inject the A-Frame Inspector.
    • +
  • stats - Toggle performance stats.
    • +
  • xr-mode-ui - Toggle UI for entering and exiting VR.

    • Running Content Scripts on the Scene

    The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

    AFRAME.registerComponent('do-something', {
      init: function () {
        var sceneEl = this.el;
      }
    });
    diff --git a/docs/1.6.0/core/systems.html b/docs/1.6.0/core/systems.html index 793bcfd35..e5779bba1 100644 --- a/docs/1.6.0/core/systems.html +++ b/docs/1.6.0/core/systems.html @@ -1185,16 +1185,16 @@

    -

    A system, of the entity-component-system pattern, provides global scope, +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -
    + -

    Registering a System

    A system is registered similarly to a component.

    +

    Registering a System

    A system is registered similarly to a component.

    If the system name matches a component name, then the component will have a reference to the system as this.system:

    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);
      }
    });
    @@ -1216,7 +1216,7 @@

    schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data.

    Methods

    A system, like a component, defines lifecycle handlers. It can also define diff --git a/docs/1.6.0/core/utils.html b/docs/1.6.0/core/utils.html index 141019285..ea2b2c13a 100644 --- a/docs/1.6.0/core/utils.html +++ b/docs/1.6.0/core/utils.html @@ -1186,7 +1186,7 @@

    A-Frame’s utility modules are public through AFRAME.utils.

    -
    +

    AFRAME.utils.coordinates

    Module for handling vec3 and vec4 types.

    .isCoordinates (value)

    Tests whether a string is a vec3 or vec4.

    @@ -1198,7 +1198,7 @@

    .stringify (data)

    Stringifies an {x, y, z} vec3 object to an “x y z” string.Or Stringifies an {x, y, z, w} vec4 object to an “x y z w” string.

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
    // >> "1 2 -3"

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3, w:4})
    // >> "1 2 -3 4"
    -

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for +

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for return 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.

    @@ -1206,7 +1206,7 @@

    This is useful for components that need a way to reference a property of a multi-property component.

    -

    .setComponentProperty (entity, componentName, value, delimiter)

    Performs like Entity.setAttribute, but with support for setting an +

    .setComponentProperty (entity, componentName, value, delimiter)

    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.

    diff --git a/docs/1.6.0/guides/building-a-360-image-gallery.html b/docs/1.6.0/guides/building-a-360-image-gallery.html index dab2dd631..ec5eea1ab 100644 --- a/docs/1.6.0/guides/building-a-360-image-gallery.html +++ b/docs/1.6.0/guides/building-a-360-image-gallery.html @@ -1189,7 +1189,7 @@

    Let’s build an interactive gaze-based 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

    -

    This guide will practice three concepts related to entity-component:

    +

    This guide will practice three concepts related to entity-component:

    1. Using the standard components that come with A-Frame.
    2. Using community components from the ecosystem.
      3. @@ -1197,18 +1197,18 @@

    Not to say 360° images are at all a focus use case of A-Frame, but it makes for an easy example that has a lot of demand as an early use case on the Web.

    -
    +

    Skeleton

    This is the starting point for our scene.

    <a-scene>
      <a-assets>
        <audio id="click-sound" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>

        <!-- Images. -->
        <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
        <img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
        <img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
        <img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
        <img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Link template we will build. -->
      <a-entity class="link"></a-entity>

      <!-- Camera + Cursor. -->
      <a-camera>
        <a-cursor
          id="cursor"
          animation__click="property: scale; from: 0.1 0.1 0.1; to: 1 1 1; easing: easeInCubic; dur: 150; startEvents: click"
          animation__clickreset="property: scale; to: 0.1 0.1 0.1; dur: 1; startEvents: animationcomplete__click"
          animation__fusing="property: scale; from: 1 1 1; to: 0.1 0.1 0.1; easing: easeInCubic; dur: 150; startEvents: fusing"></a-cursor>
      </a-camera>
    </a-scene>

    We have predefined:

    Using Standard Components

    Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure @@ -1218,20 +1218,20 @@ 

    <a-entity class="link"></a-entity>
    -

    To give our entity shape, we can attach the geometry component, +

    To give our entity shape, we can attach the geometry component, configured to a plane shape. We specify the component data using a syntax that resembles that of inline CSS styles:

    <a-entity
      class="link"
      geometry="primitive: plane; height: 1; width: 1"></a-entity>
    -

    Then to give our entity appearance, we can attach the material +

    Then to give our entity appearance, we can attach the material component. We set shader to flat so the image isn’t affected negatively by lighting. And we set src to #cubes-thumb, a selector to one -of the images preloaded in the Asset Management System. Alternatively, +of the images preloaded in the Asset Management System. Alternatively, we could pass a URL for the image:

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: #cubes-thumb"></a-entity>

    We can continue adding features to our entity by plugging in more components. -Let’s attach one more standard component, the sound component. We want +Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1307,15 +1307,15 @@

    Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

    Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We can specify event names either the _event property or via the __<id> as shown below. The rest of the properties define the setAttribute calls. Notice that the event-set component can have -multiple instances:

    +multiple instances:

    <script id="link" type="text/html">
      <a-entity class="link"
        geometry="primitive: plane; height: 1; width: 1"
        material="shader: flat; src: ${thumb}"
        sound="on: click; src: #click-sound"
        event-set__mouseenter="scale: 1.2 1.2 1"
        event-set__mouseleave="scale: 1 1 1"
        event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"></a-entity>
    </script>

    Remember to add data-src attributes to the link entities to load the full image on click:

    @@ -1347,7 +1347,7 @@

    Writing a Component and +application-specific components. That is covered in Writing a Component and hopefully in later guides.

    Try it out!

    diff --git a/docs/1.6.0/guides/building-a-basic-scene.html b/docs/1.6.0/guides/building-a-basic-scene.html index 110909277..0acf70ce1 100644 --- a/docs/1.6.0/guides/building-a-basic-scene.html +++ b/docs/1.6.0/guides/building-a-basic-scene.html @@ -1190,7 +1190,7 @@

    Let’s start by building a basic A-Frame scene. For this, we will need a basic understanding of HTML. We will learn how to:

      -
    • Add 3D entities (i.e., objects) with primitives
      • +
    • Add 3D entities (i.e., objects) with primitives
    • Transform entities in 3D space with position, rotation, scale
    • Add an environment
    • Add textures
      • @@ -1198,7 +1198,7 @@

    • Add text

    Remix the Basic Guide example on Glitch.

    -
    +

    Starting with HTML

    We start out with a minimal HTML structure:

    <html>
      <head>
        <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
        </a-scene>
      </body>
    </html>
    @@ -1207,18 +1207,18 @@

    before <a-scene> because A-Frame registers custom HTML elements which must be defined before <a-scene> is attached or else <a-scene> will do nothing.

    -

    Next, we include <a-scene> in the <body>. <a-scene> will contain every +

    Next, we include <a-scene> in the <body>. <a-scene> will contain every entity in our scene. <a-scene> handles all of the setup that is required for 3D: setting up WebGL, the canvas, camera, lights, renderer, render loop as well as out of the box WebVR support on platforms such as HTC Vive, Oculus Rift, Samsung GearVR, and smartphones (Google Cardboard). <a-scene> alone takes a lot of load off of us!

    Adding an Entity

    Within our <a-scene>, we attach 3D entities using one of A-Frame’s standard -primitives <a-box>. We can use <a-box> just like a normal HTML element, +primitives <a-box>. We can use <a-box> just like a normal HTML element, defining the tag and using HTML attributes to customize it. Some other examples of primitives that come with A-Frame include <a-cylinder>, <a-plane>, or <a-sphere>.

    -

    Here we define the color <a-box>, see <a-box>‘s documentation for +

    Here we define the color <a-box>, see <a-box>‘s documentation for the more attributes (e.g., width, height, depth).

    boximage Image by Ruben Mueller from vrjump.de

    @@ -1226,13 +1226,13 @@

    <a-entity> with the geometry and -material components:

    +underneath <a-box> is <a-entity> with the geometry and +material components:

    <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>
    -

    However, because the default camera and the box are positioned at the default +

    However, because the default camera and the box are positioned at the default position at the 0 0 0 origin, we won’t be able to see the box unless we move -it. We can do this by using the position component to transform the +it. We can do this by using the position component to transform the box in 3D space.

    Transforming an Entity in 3D

    Let’s first go over 3D space. A-Frame uses a right-handed coordinate system. With the default camera direction: positive X-axis extends right, positive @@ -1251,7 +1251,7 @@

    To translate, rotate, and scale the box, we can change the -position, rotation, and scale components. +position, rotation, and scale components. Let’s first apply the rotation and scale components:

    <a-scene>
      <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
    @@ -1308,7 +1308,7 @@ 

    <a-scene>
      <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <!-- Out of the box environment! -->
      <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
    </a-scene>

    Applying an Image Texture

    -

    Make sure you’re serving your HTML using a local server +

    Make sure you’re serving your HTML using a local server for textures to load properly.

    We can apply an image texture to the box with an image, video, or <canvas> @@ -1320,7 +1320,7 @@

    -

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The +

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The asset management system makes it easier for the browser to cache assets (e.g., images, videos, models) and A-Frame will make sure all of the assets are fetched before rendering.

    @@ -1340,7 +1340,7 @@

    Creating a Custom Environment (Optional)

    Previously we had the environment component generate the environment. Though it’s good to know a bit on creating a basic environment for learning purposes.

    -

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. +

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. <a-sky>, which is a material applied to the inside of a large sphere, can be a flat color, a 360° image, or a 360° video. For example, a dark gray background would be:

    @@ -1350,7 +1350,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>
    </a-scene>
    -

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are +

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are oriented parallel to the XY axis. To make it parallel to the ground, we need to orient it along the XZ axis. We can do so by rotating the plane negative 90° on the X-axis.

    @@ -1368,7 +1368,7 @@ 

    <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
      repeat="10 10"></a-plane>
    -

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default +

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default if we don’t specify any lights, A-Frame adds an ambient light and a directional light. If A-Frame didn’t add lights for us, the scene would be black. Once we add lights of our own, however, the default lighting setup is removed and @@ -1381,7 +1381,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>

      <a-light type="ambient" color="#445451"></a-light>
      <a-light type="point" intensity="2" position="2 4 4"></a-light>
    </a-scene>
    -

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation +

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation system. Animations interpolate or tween a value over time. We can set the animation component on the entity. Let’s have the box hover up and down to add some motion to the scene.

    @@ -1389,7 +1389,7 @@

    entity’s object3D’s position’s Y axis. +
  • Animate the entity’s object3D’s position’s Y axis.
  • Animate to 2.2 which is 20 centimeters higher.
  • Alternate the dir (direction) of the animation on each repeated cycle of the animation so it goes back and forth.
  • Last for 2000 millisecond dur (duration) on each cycle.
    • @@ -1400,19 +1400,19 @@

    Given that many developers currently do not have proper VR hardware with controllers, we’ll focus this section on using basic mobile and desktop inputs -with the built-in cursor component. The cursor component by default provides +with the built-in cursor component. The cursor component by default provides the ability to “click” on entities by staring or gazing at them on mobile, or on desktop, looking at an entity and click the mouse. But know that the cursor component is just one way to add interactions, things open up if we have access to actual controllers.

    -

    To have a visible cursor fixed to the camera, we place the cursor as a child +

    To have a visible cursor fixed to the camera, we place the cursor as a child of the camera as explained above in Parent and Child Transforms.

    Since we didn’t specifically define a camera, A-Frame included a default camera for us. But since we need to add a cursor as a child of the camera, we will -need to now define <a-camera> containing <a-cursor>:

    +need to now define <a-camera> containing <a-cursor>:

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"
             animation="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true"></a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
    -

    If we check the documentation of the cursor component that +

    If we check the documentation of the cursor component that <a-cursor> wraps, we see that it emits hover events such as mouseenter, mouseleave as well as click.

    Event Listener Component (Intermediate)

    One way to manually handle the cursor events is to add an event listener with @@ -1420,7 +1420,7 @@

    Animating on Events below.

    In JavaScript, we grab the box with querySelector, use -addEventListener, and then setAttribute +addEventListener, and then setAttribute to make the box grow its scale when its hovered over. Note that A-Frame adds features to setAttribute to work with multi-property components. We can pass a full {x, y, z} object as the second argument.

    @@ -1457,7 +1457,7 @@ 

    <a-scene>
      <!-- ... -->
      <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
        position="-3 1 -4"></a-sound>
      <!-- ... -->
    </a-scene>
    -

    Adding Text

    A-Frame comes with a text component. There are several ways to render +

    Adding Text

    A-Frame comes with a text component. There are several ways to render text, each with their own advantages and disadvantages. A-Frame comes with an SDF text implementation using three-bmfont-text that is relatively sharp and performant:

    diff --git a/docs/1.6.0/guides/building-a-minecraft-demo.html b/docs/1.6.0/guides/building-a-minecraft-demo.html index 4f1dffa47..846748b15 100644 --- a/docs/1.6.0/guides/building-a-minecraft-demo.html +++ b/docs/1.6.0/guides/building-a-minecraft-demo.html @@ -1191,7 +1191,7 @@

    Let’s build a basic Minecraft (voxel builder) demo that targets room scale VR with controllers (e.g., Quest, Vive, Rift). The example will be minimally usable on mobile and desktop.

    -
    +

    Example Skeleton

    We’ll start off with this skeleton HTML:

    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>

    <body>
      <a-scene>
      </a-scene>
    </body>
    diff --git a/docs/1.6.0/introduction/best-practices.html b/docs/1.6.0/introduction/best-practices.html index 832055d5a..d5fe5daf7 100644 --- a/docs/1.6.0/introduction/best-practices.html +++ b/docs/1.6.0/introduction/best-practices.html @@ -1185,7 +1185,7 @@

    -

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and +

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and structure application code within purely A-Frame components for reusability, modularity, composability, decoupling, encapsulation, declarativeness, and testability.

    @@ -1202,8 +1202,8 @@

    recommended hardware specifications. -
  • Use the stats component to keep an eye on various metrics (FPS, +
  • Use recommended hardware specifications.
    • +
  • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities). We want to maximize FPS and minimize everything else.
  • Limit draw calls as much as possible. Each geometry, object, model without @@ -1213,7 +1213,7 @@

    asset management system to browser cache and +
  • Make use of the asset management system to browser cache and preload assets.
  • If using models, look to bake your lights into textures rather than relying on real-time lighting and shadows.
    • @@ -1230,16 +1230,16 @@

    background component instead of a-sky to define a +
  • Use the background component instead of a-sky to define a solid color as the scene background. This prevents the creation of unnecessary geometry.
  • Update position, rotation, scale, and visible at the three.js level (el.object3D.position, el.object3D.rotation, el.object3D.scale, el.object3D.visible) to avoid overhead on .setAttribute.
  • If you need to create, remove and re-create many entities of the same type, -use the pool component to pre-generate and reuse entities. This +use the pool component to pre-generate and reuse entities. This avoids the cost of creating entities on the fly and reduces garbage collection.
    • -
  • When using the animation component, animate values directly +
  • When using the animation component, animate values directly which will skip .setAttribute and animate JS values directly. For example, instead of material.opacity, animate components.material.material.opacity.
    • diff --git a/docs/1.6.0/introduction/developing-with-threejs.html b/docs/1.6.0/introduction/developing-with-threejs.html index 1340e0cdd..d79cd4735 100644 --- a/docs/1.6.0/introduction/developing-with-threejs.html +++ b/docs/1.6.0/introduction/developing-with-threejs.html @@ -1215,7 +1215,7 @@

    And every A-Frame entity also has a reference to <a-scene> via .sceneEl:

    document.querySelector('a-entity').sceneEl.object3D;  // THREE.Scene
    -

    From a component, we access the scene through its entity +

    From a component, we access the scene through its entity (i.e., this.el):

    AFRAME.registerComponent('foo', {
      init: function () {
        var scene = this.el.sceneEl.object3D;  // THREE.Scene
      }
    });
    diff --git a/docs/1.6.0/introduction/entity-component-system.html b/docs/1.6.0/introduction/entity-component-system.html index 9e4b3cd14..354437c31 100644 --- a/docs/1.6.0/introduction/entity-component-system.html +++ b/docs/1.6.0/introduction/entity-component-system.html @@ -1214,20 +1214,20 @@

    A well-known game engine implementing ECS is Unity. Although there are pain points in cross-entity communication, we’ll see how A-Frame, the DOM, and declarative HTML really make ECS shine.

    -
    +

    Concept

    ECS Minecraft

    A basic definition of ECS involves:

      -
    • Entities are container objects into which components can be +
    • Entities are container objects into which components can be attached. Entities are the base of all objects in the scene. Without components, entities neither do nor render anything, similar to empty <div>s.
      • -
    • Components are reusable modules or data containers that can +
    • Components are reusable modules or data containers that can be attached to entities to provide appearance, behavior, and/or functionality. Components are like plug-and-play for objects. All logic is implemented through components, and we define different types of objects by mixing, matching, and configuring components. Like alchemy!
      • -
    • Systems provide global scope, management, and services for +
    • Systems provide global scope, management, and services for classes of components. Systems are often optional, but we can use them to separate logic and data; systems handle the logic, components act as data containers.
      • @@ -1283,8 +1283,8 @@

      Syntax:) separating property names from property values, and a semicolon (;) separating different property declarations:

      <a-entity ${componentName}="${propertyName1}: ${propertyValue1}; ${propertyName2}: ${propertyValue2}">

      -

      For example, we have <a-entity> and attach the geometry, material, -light, and position components with various properties and property values:

      +

      For example, we have <a-entity> and attach the geometry, material, +light, and position components with various properties and property values:

      <a-entity geometry="primitive: sphere; radius: 1.5"
                light="type: point; color: white; intensity: 2"
                material="color: white; shader: flat; src: glow.jpg"
                position="0 0 -5"></a-entity>

      Composition

      From there, we could attach more components to add additional appearance, @@ -1335,7 +1335,7 @@

      write an A-Frame +

      We will later go over in detail how to write an A-Frame component. As a preview, the structure of a basic component may look like:

      AFRAME.registerComponent('foo', {
        schema: {
          bar: {type: 'number'},
          baz: {type: 'string'}
        },

        init: function () {
          // Do something when component first attached.
        },

        update: function () {
          // Do something when component's data is updated.
        },

        remove: function () {
          // Do something when the component or its entity is detached.
        },

        tick: function (time, timeDelta) {
          // Do something on every scene tick or frame.
        }
      });
      @@ -1360,12 +1360,12 @@

      Higher-Order Components

      Components can set other components on the entity, making them a higher-order or higher-level component in abstraction.

      -

      For example, the cursor component sets and builds on top of the -raycaster component. Or the hand-controls -component sets and builds on top of the vive-controls -component and oculus-touch-controls +

      For example, the cursor component sets and builds on top of the +raycaster component. Or the hand-controls +component sets and builds on top of the vive-controls +component and oculus-touch-controls component which in turn build on top of the -tracked-controls component.

      +tracked-controls component.

      Community Component Ecosystem

      Components can be shared into the A-Frame ecosystem for the community to use. The wonderful thing about A-Frame’s ECS is extensibility. An experienced developer can develop a physics system or graphics shader components, and an diff --git a/docs/1.6.0/introduction/faq.html b/docs/1.6.0/introduction/faq.html index c189ec683..626594599 100644 --- a/docs/1.6.0/introduction/faq.html +++ b/docs/1.6.0/introduction/faq.html @@ -1185,7 +1185,7 @@

      -
      +

      How is A-Frame’s performance?

      A-Frame can achieve native-like latency and framerate with proper browsers (e.g., Firefox with WebVR). For example, A-Painter is Tilt @@ -1218,10 +1218,10 @@

      best performance practices and guidelines to get started.

      +best performance practices and guidelines to get started.

      Why is my experience not entering VR or AR mode?

      If you are using A-Frame 1.6.0 or older you probably need to update to the latest release. Browsers are migrating to the WebXR standard and old versions might no longer work.

      You also have to serve your content over HTTPS. The WebXR API won’t be available over HTTP.

      -

      Why does my asset (e.g., image, video, model) not load?

      First, if you are doing local development, make sure you are using a local +

      Why does my asset (e.g., image, video, model) not load?

      First, if you are doing local development, make sure you are using a local server so that asset requests work properly.

      If you are loading the asset from a different domain, make sure that the asset is served with cross-origin resource sharing (CORS) headers. You could @@ -1230,14 +1230,14 @@

      video playback. Simple sample code can be found in the docs. Pay particular attention to the play-on-click component

      -

      Read the Hosting and Publishing guide for more +

      Read the Hosting and Publishing guide for more information.

      Why is the HTML not updating when I check the browser inspector?

      If you open up your browser’s developer tools, you’ll see that the HTML attribute values are empty.

      HTML

      To improve performance, A-Frame does not update the HTML to save on stringification operations. This also means mutation observations will not -fire. Use the debug component or .flushToDOM methods +fire. Use the debug component or .flushToDOM methods if you need to sync to the DOM.

      Why does my video not play?

      Mobile and now desktop browsers have limitations playing inline video.

      Because of an iOS platform restriction in order to get inline video @@ -1271,7 +1271,7 @@

      Which 3D model formats work?

      The ideal format is the GL Transmission Format glTF (.gltf) since glTF is feature-rich, compact, and efficient. glTF focuses on providing a transmission format rather than an editor format and is more interoperable -with web technologies. Read more about glTF and A-Frame’s glTF +with web technologies. Read more about glTF and A-Frame’s glTF component.

      Wavefront (.obj) is also a well-known format but has some limitations like the lack of animation and vertex color support.

      @@ -1330,16 +1330,16 @@

      How is A-Frame different from VRML?

      A-Frame is a JavaScript framework. Unlike VRML, A-Frame is not a 3D file format, markup language, nor a standard. A-Frame embraces the Extensible Web Manifesto. Only look at standardization as winning ideas emerge.

      -

      Technically, A-Frame is an entity-component-system game engine on top of +

      Technically, A-Frame is an entity-component-system game engine on top of three.js. As it is a JavaScript framework, coding is to be expected for more complex applications. Unlike 3D file formats, A-Frame provides power and interactivity via full access to JavaScript, three.js, and Web APIs.

      Does A-Frame support X feature?

      A-Frame ships with a number of components and primitives. Being based on top of -an entity-component-system architecture, if a feature doesn’t exist, you -can write or find a component to enable it. Or if one of +an entity-component-system architecture, if a feature doesn’t exist, you +can write or find a component to enable it. Or if one of the standard components doesn’t fit your use cases, you can copy and modify it.

      -

      Read Where to Find Components for more information.

      +

      Read Where to Find Components for more information.

      Does A-Frame support X library or framework?

      A-Frame is built on top of the DOM so most libraries and frameworks work including:

        @@ -1352,9 +1352,9 @@

        Which headsets, browsers, devices, and platforms does A-Frame support?

        Most of them. Read VR Headsets and WebVR Browsers for more +

        Which headsets, browsers, devices, and platforms does A-Frame support?

        Most of them. Read VR Headsets and WebVR Browsers for more information.

        -

        How can I improve performance?

        Read Best Practices — Performance for more information.

        +

        How can I improve performance?

        Read Best Practices — Performance for more information.

        How can I get in touch with the A-Frame team?

        We try to be responsive and helpful! We love questions, feedback, bug reports, and pull requests:

          @@ -1365,7 +1365,7 @@

          Where is the roadmap?

          The roadmap is on GitHub!

          Do I call it “A-Frame” or “aframe” or “aframevr” or “aFrame”?

          A-Frame!

          -

          Why do my textures render black?

          Phones with Adreno 300 series GPUs are notoriously problematic. Set renderer precision to medium as a workaround. Real fix has to happen at the driver / device level.

          +

          Why do my textures render black?

          Phones with Adreno 300 series GPUs are notoriously problematic. Set renderer precision to medium as a workaround. Real fix has to happen at the driver / device level.

          Why is the gyroscope / magic window mode not working?

          New browser policies require sites to prompt the user for permission before getting access to DeviceMotionEvents. Starting with iOS 13 DeviceMotionEvents are only available for pages served over https. Other browsers will also apply same policies and restrictions. A-Frame now incorporates customizable UI to request the necessary permissions to the user. Make sure to update to A-Frame latest version

          Can I use A-Frame offline or self hosted?

          Using A-Frame online sometimes is not possible or inconvenient, like for instance when traveling or during public events with poor Internet connectivity. A-Frame is mostly self-contained so including the build (aframe.min.js) in your project will be sufficient in many cases. Some specific parts are lazy loaded and only fetched when used. This is for example the case of the fonts for the text component and the 3D models for controllers. In order to make an A-Frame build work either offline or without relying on A-Frame hosting infrastructure (typically cdn.aframe.io), you can monitor network requests on your browser console. This will show precisely what assets are being loaded and thus as required for your specific experience. Fonts can be found via FONT_BASE_URL in the whereas controllers via MODEL_URLS. Both can be modified in the source and included in your own custom build

          Can I load A-Frame as an ES module?

          You can load A-Frame as an ES module using a side effect import. A-Frame will then initialize any <a-scene> in the document. It’s still important to register any components or systems you need before this happens:

          @@ -1385,7 +1385,7 @@

          renderOrder is set on the Object3D or a Group that it is a member of, the specified order will be respected
        • otherwise, opaque objects are rendered furthest to nearest, and transparent objects are rendered in the order they appear in the THREE.js Object tree (in most cases, this is the same as the order they appear in the DOM)

        -

        The renderer system has a sortTransparentObjects property, which can be used to render transparent objects furthest to nearest, rather than in DOM order.

        +

        The renderer system has a sortTransparentObjects property, which can be used to render transparent objects furthest to nearest, rather than in DOM order.

        diff --git a/docs/1.6.0/introduction/hosting-and-publishing.html b/docs/1.6.0/introduction/hosting-and-publishing.html index a1419af84..11c1f0482 100644 --- a/docs/1.6.0/introduction/hosting-and-publishing.html +++ b/docs/1.6.0/introduction/hosting-and-publishing.html @@ -1187,7 +1187,7 @@

        This section will show several ways to deploy, host, and publish an A-Frame site and its assets onto the Web for the world to see.

        -
        +

        Publishing a Site

        There are many free services to deploy and host a site. We’ll go over some of the more easy or popular options, but there are certainly other options such @@ -1309,7 +1309,7 @@

        A-Frame Blog.

      Embedding

      If we want to embed an A-Frame scene into the layout of 2D web page, we can use -the embedded component to remove fullscreen styles +the embedded component to remove fullscreen styles and allow us to style the canvas with CSS.

      Note we can only embed one scene at a time into a page. If we need multiple scenes, we can use diff --git a/docs/1.6.0/introduction/html-and-primitives.html b/docs/1.6.0/introduction/html-and-primitives.html index a2b160b18..05de79fe7 100644 --- a/docs/1.6.0/introduction/html-and-primitives.html +++ b/docs/1.6.0/introduction/html-and-primitives.html @@ -1187,9 +1187,9 @@

      This section will go over the concepts of A-Frame’s primitive elements and their relation to the entity-component framework. If you’re looking for a guide -on using HTML and primitives, check out the Building a Basic Scene +on using HTML and primitives, check out the Building a Basic Scene guide.

      -
      +

      HTML

      A-Frame is based on top of HTML and the DOM using a polyfill for Custom Elements. HTML is the building block of the Web, providing one of the @@ -1223,7 +1223,7 @@

      component data +
    • Map or proxy HTML attributes to component data

    Primitives are similar to prefabs in Unity. Some literature on the entity-component-system pattern refer to them as assemblages. diff --git a/docs/1.6.0/introduction/index.html b/docs/1.6.0/introduction/index.html index c2726face..10c9d51b4 100644 --- a/docs/1.6.0/introduction/index.html +++ b/docs/1.6.0/introduction/index.html @@ -1192,7 +1192,7 @@ 

    <html>
      <head>
        <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
          <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
          <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
          <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
          <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
          <a-sky color="#ECECEC"></a-sky>
        </a-scene>
      </body>
    </html>
    -

    The Installation page provides more options for getting started with A-Frame. +

    The Installation page provides more options for getting started with A-Frame. To get started learning A-Frame, check out A-Frame School for visual step-by-step lessons to complement the documentation.

    What is A-Frame?

    A-Frame

    @@ -1240,7 +1240,7 @@

    Fe web developers, VR enthusiasts, artists, designers, educators, makers, kids.

    electric_plug Entity-Component Architecture: A-Frame is a powerful three.js framework, providing a declarative, composable, reusable -entity-component structure. HTML is just the tip of the iceberg; +entity-component structure. HTML is just the tip of the iceberg; developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL.

    globe_with_meridians Cross-Platform VR: Build VR applications for Vive, @@ -1252,7 +1252,7 @@

    Fe object updates are all done in memory with little garbage and overhead. The most interactive and large scale WebVR applications have been done in A-Frame running smoothly at 90fps.

    -

    mag Visual Inspector: A-Frame provides a handy built-in visual 3D +

    mag Visual Inspector: A-Frame provides a handy built-in visual 3D inspector. Open up any A-Frame scene, hit <ctrl> + <alt> + i or <ctrl> + <option> + i, and fly around to peek under the hood!

    Inspector

    diff --git a/docs/1.6.0/introduction/installation.html b/docs/1.6.0/introduction/installation.html index 696277015..1c3eeee6a 100644 --- a/docs/1.6.0/introduction/installation.html +++ b/docs/1.6.0/introduction/installation.html @@ -1188,7 +1188,7 @@

    This installation section offers several ways to get started with A-Frame, although most methods don’t require any actual installation since A-Frame is primarily HTML and JavaScript.

    -
    +

    Code Editors in the Browser

    The fastest way is to start playing from within the browser.

    Remix on Glitch

    Glitch

    diff --git a/docs/1.6.0/introduction/interactions-and-controllers.html b/docs/1.6.0/introduction/interactions-and-controllers.html index efaa225d9..2df2e6e81 100644 --- a/docs/1.6.0/introduction/interactions-and-controllers.html +++ b/docs/1.6.0/introduction/interactions-and-controllers.html @@ -1196,9 +1196,9 @@

    interactions. And we can show how these input-based and interaction-based components are built in order to give us the knowledge to build our own interactions. In a sense, learn how to fish rather than being given a fish.

    -
    + -

    Events

    In the 2D Web, input and interactions are handled through browser +

    Events

    In the 2D Web, input and interactions are handled through browser events (e.g., click, mouseenter, mouseleave, touchstart, touchend). Whenever an input-based event happens, the browser will emit an event that we can listen to and handle with @@ -1226,13 +1226,13 @@

    cursor component that provides gaze-based interaction if +comes with a cursor component that provides gaze-based interaction if attached to the camera:

      -
    1. Explicitly define <a-camera> entity. +
    2. Explicitly define <a-camera> entity. Previously, A-Frame was providing the default camera.
      3. -
    3. Add <a-cursor> entity as a child element underneath the camera entity.
      4. -
    4. Optionally, configure the raycaster used by the cursor.
      5. +
    5. Add <a-cursor> entity as a child element underneath the camera entity.
      6. +
    6. Optionally, configure the raycaster used by the cursor.
    <a-scene>
      <a-camera>
        <a-cursor></a-cursor>
        <!-- Or <a-entity cursor></a-entity> -->
      </a-camera>
    </a-scene>
    @@ -1274,7 +1274,7 @@

    A-Frame +and for A-Frame, we prescribe that code be placed within A-Frame components.

    To demonstrate what the event set component does under the hood, let’s have a box change color on hover and on leaving hover with JavaScript:

    @@ -1302,7 +1302,7 @@

    tracked-controls Component

    The tracked-controls component is A-Frame’s base controller +

    tracked-controls Component

    The tracked-controls component is A-Frame’s base controller component that provides the foundation for all of A-Frame’s controller components. The tracked-controls component:

    -

    Hosting Models

    Refer to Hosting and Publishing — Hosting +

    Hosting Models

    Refer to Hosting and Publishing — Hosting Models.

    Modifying Materials

    To modify the material of a model, we need to wait for the model to load, and then modify the three.js meshes created from the model. What happens is an @@ -1236,7 +1236,7 @@ 

    <script>
      AFRAME.registerComponent('modify-materials', {
        init: function () {
          // Wait for model to load.
          this.el.addEventListener('model-loaded', () => {
            // Grab the mesh / scene.
            const obj = this.el.getObject3D('mesh');
            // Go over the submeshes and modify materials we want.
            obj.traverse(node => {
              if (node.name.indexOf('ship') !== -1) {
                node.material.color.set('red');
              }
            });
          });
        }
      });
    </script>

    <a-scene background="color: #ECECEC">
      <a-assets>
        <a-asset-item id="cityModel" src="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf"></a-asset-item>
      </a-assets>
      <a-entity gltf-model="#cityModel" modify-materials></a-entity>
    </a-scene>

    Troubleshooting

    Before anything else, check your console for errors. Common issues related to -CORS can be solved by properly hosting your models and the +CORS can be solved by properly hosting your models and the console will also tell you if your model needs additional files that are missing.

    I Don’t See My Model

    If there are no errors in the console, try scaling your model down. Often times @@ -1278,7 +1278,7 @@

    -

    Testing for Performance

    To get an idea of how our scene is performing, enable the stats component:

    +

    Testing for Performance

    To get an idea of how our scene is performing, enable the stats component:

    <a-scene stats>

    Move around our scene and test different scenarios while keeping an eye on the diff --git a/docs/1.6.0/introduction/visual-inspector-and-dev-tools.html b/docs/1.6.0/introduction/visual-inspector-and-dev-tools.html index 19a30bb7e..3a763af16 100644 --- a/docs/1.6.0/introduction/visual-inspector-and-dev-tools.html +++ b/docs/1.6.0/introduction/visual-inspector-and-dev-tools.html @@ -1200,7 +1200,7 @@

    We’ll go over GUI tools built on top of A-Frame that can be used without code. And touch on other tools that can ease development across multiple machines.

    -
    +

    A-Frame Inspector

    The A-Frame Inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:

    diff --git a/docs/1.6.0/introduction/vr-headsets-and-webxr-browsers.html b/docs/1.6.0/introduction/vr-headsets-and-webxr-browsers.html index c441ec782..53aad4e59 100644 --- a/docs/1.6.0/introduction/vr-headsets-and-webxr-browsers.html +++ b/docs/1.6.0/introduction/vr-headsets-and-webxr-browsers.html @@ -1185,7 +1185,7 @@

    -
    +

    What is Virtual Reality?

    Virtual reality (VR) is a technology that uses head-mounted headsets with displays to generate the realistic images, sounds, and other sensations to put diff --git a/docs/1.6.0/introduction/writing-a-component.html b/docs/1.6.0/introduction/writing-a-component.html index 6c9707ac8..975e671e4 100644 --- a/docs/1.6.0/introduction/writing-a-component.html +++ b/docs/1.6.0/introduction/writing-a-component.html @@ -1185,7 +1185,7 @@

    -

    Components of A-Frame’s entity-component framework are JavaScript +

    Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, @@ -1193,7 +1193,7 @@

    components.

    vehicleimage Image by Ruben Mueller from vrjump.de

    -

    This guide will take it pretty slow. We recommend skimming over the Component +

    This guide will take it pretty slow. We recommend skimming over the Component API documentation before going through this guide as that documentation will be more concise. Note that components should be defined before <a-scene> like:

    @@ -1207,12 +1207,12 @@

    Example: hello-world Component

    Let’s start with the most basic component to get a general idea. This component will log a simple message once when the component’s entity is attached using -the .init() handler.

    +the .init() handler.

    Registering the Component with AFRAME.registerComponent

    Components are registered with AFRAME.registerComponent(). We pass the name of the component, which will be used as the HTML attribute name in the component’s representation in the DOM. Then we pass the component definition which is a JavaScript object of methods and properties. Within the definition, we can -define lifecycle handler methods. One of which is .init(), which +define lifecycle handler methods. One of which is .init(), which is called once when the component is first plugged into its entity.

    In the example below, we just have our .init() handler log a simple message.

    AFRAME.registerComponent('hello-world', {
      init: function () {
        console.log('Hello, World!');
      }
    });
    @@ -1266,7 +1266,7 @@

    Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

    To demonstrate this, we’ll have our log component only log whenever its -entity emits an event. First, we’ll add an event property type that +entity emits an event. First, we’ll add an event property type that specifies which event the component should listen on.

    // ...
    schema: {
      event: {type: 'string', default: ''},
      message: {type: 'string', default: 'Hello, World!'},
    },
    // ...
    @@ -1275,7 +1275,7 @@

    add an event listener that will +

    What we want to do is add an event listener that will listen to the event before logging a message. If the event property type is not specified, we’ll just log the message:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      update: function () {
        var data = this.data;  // Component property values.
        var el = this.el;  // Reference to the component's entity.

        if (data.event) {
          // This will log the `message` when the entity emits the `event`.
          el.addEventListener(data.event, function () {
            console.log(data.message);
          });
        } else {
          // `event` not specified, just log the message.
          console.log(data.message);
        }
      }
    });
    @@ -1284,7 +1284,7 @@

    , we need a reference to the function. So +

    But to remove an event listener, we need a reference to the function. So let’s first store the function on this.eventHandlerFn whenever we attach an event listener. When we attach properties to the component via this, they’ll be available throughout all the other lifecycle handlers.

    @@ -1299,13 +1299,13 @@ 

    <a-scene>
      <a-entity log="event: anEvent; message: Hello, Metaverse!"></a-entity>
    </a-scene>
    -

    Let’s have our entity emit the event to test it out:

    +

    Let’s have our entity emit the event to test it out:

    var el = document.querySelector('a-entity');
    el.emit('anEvent');
    // >> "Hello, Metaverse!"

    Now let’s update our event to test the .update() handler:

    var el = document.querySelector('a-entity');
    el.setAttribute('log', {event: 'anotherEvent', message: 'Hello, new event!'});
    el.emit('anotherEvent');
    // >> "Hello, new event!"
    -

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity +

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity (i.e., .removeAttribute('log')). We can implement the .remove() handler which is called when the component is removed. For the log component, we remove any event listeners the component attached to the entity:

    @@ -1318,7 +1318,7 @@ 

    var el = document.querySelector('a-entity');
    el.removeAttribute('log');
    el.emit('anEvent');
    // >> Nothing should be logged...

    Allowing Multiple Instances of a Component

    Let’s allow having multiple log components attached to the same entity. To do -so, we enable multiple instancing with the .multiple flag. Let’s +so, we enable multiple instancing with the .multiple flag. Let’s set that to true:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      multiple: true,

      // ...
    });
    @@ -1335,13 +1335,13 @@

    Example: box Component

    For a less trivial example, let’s find out how we can add 3D objects and affect -the scene graph by writing a component that uses three.js. To get +the scene graph by writing a component that uses three.js. To get the idea, we’ll just make a basic box component that creates a box mesh with both geometry and material.

    boximage Image by Ruben Mueller from vrjump.de

    Note: this is just a 3D equivalent of writing a Hello, World! component. -A-Frame provides geometry and material components if we +A-Frame provides geometry and material components if we actually wanted to make a box in practice.

    Schema and API

    Let’s start with the schema. The schema defines the API of your component. We’ll make the width, height, depth, and color configurable through the @@ -1363,7 +1363,7 @@

    THREE.MeshStandardMaterial, and finally a THREE.Mesh. Then we set the mesh on our entity to add the mesh to the -three.js scene graph using .setObject3D(name, object):

    +three.js scene graph using .setObject3D(name, object):

    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);
      }
    });

    Now let’s handle updates. If the geometry-related properties (i.e., width, diff --git a/docs/1.6.0/primitives/a-circle.html b/docs/1.6.0/primitives/a-circle.html index b6479a32a..54a70240a 100644 --- a/docs/1.6.0/primitives/a-circle.html +++ b/docs/1.6.0/primitives/a-circle.html @@ -1185,7 +1185,7 @@

    -

    The circle primitive creates circles surfaces using the geometry +

    The circle primitive creates circles surfaces using the geometry component with the type set to circle.

    Example

    <a-scene>
      <a-assets>
        <img id="platform" src="platform.jpg">
      </a-assets>

      <!-- Basic circle. -->
      <a-circle color="#CCC" radius="20"></a-circle>

      <!-- Textured circle parallel to ground. -->
      <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
    </a-scene>
    diff --git a/docs/1.6.0/primitives/a-cubemap.html b/docs/1.6.0/primitives/a-cubemap.html index d85193301..f4d5dc0f0 100644 --- a/docs/1.6.0/primitives/a-cubemap.html +++ b/docs/1.6.0/primitives/a-cubemap.html @@ -1186,7 +1186,7 @@

    The cubemap primitive is used to create a CubeTexture environment map from 6 square images.

    -

    This can then be used as an envMap in the material component, or on a probe light.

    +

    This can then be used as an envMap in the material component, or on a probe light.

    Example

    <a-scene>
      <a-assets>
        <!-- Cubemap asset -->
        <a-cubemap id="reflection">
          <img src="milkyway/px.jpg">
          <img src="milkyway/nx.jpg">
          <img src="milkyway/py.jpg">
          <img src="milkyway/ny.jpg">
          <img src="milkyway/pz.jpg">
          <img src="milkyway/nz.jpg">
        </a-cubemap>
      </a-assets>

      <!-- Sphere with reflection. -->
      <a-sphere position="0 1 -2"
                material="envMap:#reflection; metalness:1.0; roughness:0.0">
      </a-sphere>
    </a-scene>

    Attributes

    No attributes. The cubemap is configured by creating 6 child elements beneath it.

    diff --git a/docs/1.6.0/primitives/a-cursor.html b/docs/1.6.0/primitives/a-cursor.html index 0d7574265..22a3c5071 100644 --- a/docs/1.6.0/primitives/a-cursor.html +++ b/docs/1.6.0/primitives/a-cursor.html @@ -1189,7 +1189,7 @@

    interactivity with a scene on devices that do not have a hand controller. The default appearance is a ring geometry. The cursor is usually placed as a child of the camera.

    -

    Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

    +

    Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

    Example

    <a-scene>
      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>

      <a-box></a-box>
    </a-scene>

    Attributes

    diff --git a/docs/1.6.0/primitives/a-gltf-model.html b/docs/1.6.0/primitives/a-gltf-model.html index ecf6ef090..c46e3fba8 100644 --- a/docs/1.6.0/primitives/a-gltf-model.html +++ b/docs/1.6.0/primitives/a-gltf-model.html @@ -1199,7 +1199,7 @@

    - +
    srcgltf-model.srcgltf-model.src null
    diff --git a/docs/1.6.0/primitives/a-obj-model.html b/docs/1.6.0/primitives/a-obj-model.html index 13e7bf44b..1d060984b 100644 --- a/docs/1.6.0/primitives/a-obj-model.html +++ b/docs/1.6.0/primitives/a-obj-model.html @@ -1187,7 +1187,7 @@

    We recommend glTF for distributing assets in production over the web. Check -out using the glTF model primitive. You can +out using the glTF model primitive. You can either instead export to COLLADA and use the converter or try out the OBJ converter.

    @@ -1214,7 +1214,7 @@

    null -

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    +

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    diff --git a/docs/1.6.0/primitives/a-plane.html b/docs/1.6.0/primitives/a-plane.html index 0fcb7a108..8f5c591ec 100644 --- a/docs/1.6.0/primitives/a-plane.html +++ b/docs/1.6.0/primitives/a-plane.html @@ -1185,7 +1185,7 @@

    -

    The plane primitive creates flat surfaces using the geometry +

    The plane primitive creates flat surfaces using the geometry component with the type set to plane.

    Example

    <a-scene>
      <a-assets>
        <img id="ground" src="ground.jpg">
      </a-assets>

      <!-- Basic plane. -->
      <a-plane color="#CCC" height="20" width="20"></a-plane>

      <!-- Textured plane parallel to ground. -->
      <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
    </a-scene>
    diff --git a/docs/1.6.0/primitives/a-sound.html b/docs/1.6.0/primitives/a-sound.html index 59dcd87b5..acc58286b 100644 --- a/docs/1.6.0/primitives/a-sound.html +++ b/docs/1.6.0/primitives/a-sound.html @@ -1185,7 +1185,7 @@

    -

    The sound primitive wraps the sound component.

    +

    The sound primitive wraps the sound component.

    Example

    <a-scene>
      <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
    </a-scene>

    Attributes

    diff --git a/docs/1.6.0/primitives/a-sphere.html b/docs/1.6.0/primitives/a-sphere.html index 636e30c40..fbed76772 100644 --- a/docs/1.6.0/primitives/a-sphere.html +++ b/docs/1.6.0/primitives/a-sphere.html @@ -1185,7 +1185,7 @@

    -

    The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

    +

    The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

    Example

    <a-sphere color="yellow" radius="5"></a-sphere>

    Attributes

    diff --git a/docs/1.6.0/primitives/a-text.html b/docs/1.6.0/primitives/a-text.html index f1e017b8c..9026755bd 100644 --- a/docs/1.6.0/primitives/a-text.html +++ b/docs/1.6.0/primitives/a-text.html @@ -1185,7 +1185,7 @@

    -

    Wraps the text component.

    +

    Wraps the text component.

    Example

    <a-text value="Hello, World!"></a-text>

    Attributes

    diff --git a/docs/1.6.0/primitives/a-torus-knot.html b/docs/1.6.0/primitives/a-torus-knot.html index bc89ce99b..b670ad35e 100644 --- a/docs/1.6.0/primitives/a-torus-knot.html +++ b/docs/1.6.0/primitives/a-torus-knot.html @@ -1185,7 +1185,7 @@

    -

    The torus knot primitive creates pretzel shapes using the geometry +

    The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

    Example

    <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
    diff --git a/docs/1.6.0/primitives/a-torus.html b/docs/1.6.0/primitives/a-torus.html index 97b388a94..2d0e3104d 100644 --- a/docs/1.6.0/primitives/a-torus.html +++ b/docs/1.6.0/primitives/a-torus.html @@ -1185,7 +1185,7 @@

    -

    The torus primitive creates donut or tube shapes using the geometry +

    The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

    Example

    <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
    diff --git a/docs/1.6.0/primitives/a-triangle.html b/docs/1.6.0/primitives/a-triangle.html index bda3c3ab3..de15dbc78 100644 --- a/docs/1.6.0/primitives/a-triangle.html +++ b/docs/1.6.0/primitives/a-triangle.html @@ -1185,7 +1185,7 @@

    -

    The triangle primitive creates triangle surfaces using the geometry +

    The triangle primitive creates triangle surfaces using the geometry component with the type set to triangle.

    Example

    <a-scene>
      <a-assets>
        <img id="platform" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <!-- Basic triangle. -->
      <a-triangle color="#CCC" vertex-c="1 -1 0"></a-triangle>

      <!-- Textured triangle parallel to ground. -->
      <a-triangle src="#platform" rotation="-90 0 0"></a-triangle>
    </a-scene>
    diff --git a/docs/1.6.0/primitives/a-videosphere.html b/docs/1.6.0/primitives/a-videosphere.html index 35e575104..34a0c3c7b 100644 --- a/docs/1.6.0/primitives/a-videosphere.html +++ b/docs/1.6.0/primitives/a-videosphere.html @@ -1192,7 +1192,7 @@

    Ex

    Methods

    More indepth knowledge on the methods to alter video material can be seen over here

    // 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();
    -

    Attributes

    Note that the videosphere primitive inherits common attributes.

    +

    Attributes

    Note that the videosphere primitive inherits common attributes.

    diff --git a/docs/master/components/animation.html b/docs/master/components/animation.html index 4a9f93007..7183bb721 100644 --- a/docs/master/components/animation.html +++ b/docs/master/components/animation.html @@ -1209,7 +1209,7 @@

    Read more below for additional options and discovering how to properly animate different types of values.

    -
    +

    API

    Properties

    diff --git a/docs/master/components/cursor.html b/docs/master/components/cursor.html index 713760b81..64656b4ea 100644 --- a/docs/master/components/cursor.html +++ b/docs/master/components/cursor.html @@ -1191,11 +1191,11 @@

    The cursor component provides hover and click states for interaction on top of -the raycaster component. The cursor component can be used for +the raycaster component. The cursor component can be used for both gaze-based and controller-based interactions, but the appearance needs -to be configured depending on the use case. The <a-cursor> +to be configured depending on the use case. The <a-cursor> primitive provides a default reticle appearance for a gaze-based -cursor, and the laser-controls component configures the +cursor, and the laser-controls component configures the cursor for all controllers.

    The cursor component listens to events and keeps state on what’s being hovered and pressed in order to provide mousedown, mouseup, mouseenter, @@ -1206,15 +1206,15 @@

    By default, the cursor is configured to be used in a gaze-based mode and will register user input via mouse or touch. Specifying the downEvents and upEvents properties allows the cursor to work with controllers. For example, -the laser-controls component automatically configures these +the laser-controls component automatically configures these properties to work with most controllers.

    To provide a shape or appearance to the cursor, we should apply either the -geometry and material components or use the raycaster -component’s showLine property to draw a line using the line +geometry and material components or use the raycaster +component’s showLine property to draw a line using the line component.

    Example

    For example, we can create a ring-shaped cursor fixed to the center of the screen. To fix the cursor to the screen so the cursor is always present no -matter where we look, we place it as a child of the active camera +matter where we look, we place it as a child of the active camera entity. We pull it in front of the camera by placing it on the negative Z axis. When the cursor clicks on the box, we can listen to the click event.

    <a-entity camera look-controls>
      <a-entity cursor="fuse: true; fuseTimeout: 500"
                position="0 0 -1"
                geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                material="color: black; shader: flat">
      </a-entity>
    </a-entity>

    <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>
    @@ -1261,7 +1261,7 @@

    To further customize the cursor component, we configure the cursor’s dependency -component, the raycaster component.

    +component, the raycaster component.

    Events

    @@ -1345,7 +1345,7 @@

    States

    Configuring the Cursor through the Raycaster Component

    The cursor builds on top of and depends on the raycaster component. If we want to customize the raycasting pieces of the cursor, we can do by changing -the raycaster component properties. Say we want set a max +the raycaster component properties. Say we want set a max distance, check for intersections less frequently, and set which objects are clickable:

    <a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>
    @@ -1360,7 +1360,7 @@

    Adding Visual Feedback

    To add visual feedback to the cursor to show when the cursor is clicking or -fusing, we can use the animation component. When the cursor +fusing, we can use the animation component. When the cursor intersects the entity, it will emit an event, and the animation system will pick up event with the begin attribute:

    <a-entity
      animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
      animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
      animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
      cursor="fuse: true;"
      material="color: black; shader: flat"
      position="0 0 -3"
      geometry="primitive: ring"></a-entity>
    diff --git a/docs/master/components/debug.html b/docs/master/components/debug.html index a3242b0a7..6aee7fc0b 100644 --- a/docs/master/components/debug.html +++ b/docs/master/components/debug.html @@ -1207,8 +1207,8 @@ 

    <a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

    Make sure that this component is not active in production.

    -

    Manually Serializing to DOM

    To manually serialize to DOM, use Entity.flushToDOM or -Component.flushToDOM:

    +

    Manually Serializing to DOM

    To manually serialize to DOM, use Entity.flushToDOM or +Component.flushToDOM:

    document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
    document.querySelector('a-entity').flushToDOM();  // Flush an entity.
    document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
    document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.
    diff --git a/docs/master/components/device-orientation-permission-ui.html b/docs/master/components/device-orientation-permission-ui.html index 5d6155893..e35c3c68c 100644 --- a/docs/master/components/device-orientation-permission-ui.html +++ b/docs/master/components/device-orientation-permission-ui.html @@ -1191,7 +1191,7 @@

    Starting with Safari on iOS 13 browsers require sites to be served over https and request user permission to access DeviceOrientation events. This component presents a permission dialog for the user to grant or deny access. -The device-orientation-permission-ui component applies only to the <a-scene> element

    +The device-orientation-permission-ui component applies only to the <a-scene> element

    To configure the style of the dialog one can redefine the associated css styles. To change the colors of the allow, deny and ok buttons:

    .a-dialog-allow-button {
      background-color: red;
    }

    .a-dialog-deny-button {
      background-color: blue;
    }

    .a-dialog-ok-button {
       background-color: green;
     }
    diff --git a/docs/master/components/fog.html b/docs/master/components/fog.html index a7e2cdf47..5da123a79 100644 --- a/docs/master/components/fog.html +++ b/docs/master/components/fog.html @@ -1191,7 +1191,7 @@

    The fog component obscures entities in fog given distance from the camera. The -fog component applies only to the <a-scene> element.

    +fog component applies only to the <a-scene> element.

    Example

    <a-scene fog="type: linear; color: #AAA"></a-scene>

    Properties

    Given the fog distribution type, different properties will apply.

    diff --git a/docs/master/components/geometry.html b/docs/master/components/geometry.html index 33d41e8d4..1b9260d60 100644 --- a/docs/master/components/geometry.html +++ b/docs/master/components/geometry.html @@ -1196,7 +1196,7 @@

    provide an appearance alongside the shape to create a complete mesh.

    Overview of available geometries: all-available-a-frame-geometries

    -
    +

    Base Properties

    Every geometry type will have these properties:

    @@ -1736,7 +1736,7 @@ 

    AFRAME.registerGeometry('box', {
      schema: {
        depth: {default: 1, min: 0},
        height: {default: 1, min: 0},
        width: {default: 1, min: 0},
        segmentsHeight: {default: 1, min: 1, max: 20, type: 'int'},
        segmentsWidth: {default: 1, min: 1, max: 20, type: 'int'},
        segmentsDepth: {default: 1, min: 1, max: 20, type: 'int'}
      },

      init: function (data) {
        this.geometry = new THREE.BoxGeometry(data.width, data.height, data.depth);
      }
    });

    Like with registering components, we provide a name, a -schema that will expose the properties of the geometry, and +schema that will expose the properties of the geometry, and lifecycle methods. Then we need to create the geometry and set on this.geometry through the init lifecycle method.

    When a geometry component sets its primitive property to the custom geometry diff --git a/docs/master/components/gltf-model.html b/docs/master/components/gltf-model.html index 30ab1ec5e..18b8e9572 100644 --- a/docs/master/components/gltf-model.html +++ b/docs/master/components/gltf-model.html @@ -1202,9 +1202,9 @@

    NOTE: A-Frame supports glTF 2.0. For models using older versions of the glTF format, use gltf-model-legacy from donmccurdy/aframe-extras.

    -
    + -

    Why use glTF?

    In comparison to the older OBJ format, which supports only +

    Why use glTF?

    In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features. In addition to all of the above, glTF offers:

      diff --git a/docs/master/components/hand-controls.html b/docs/master/components/hand-controls.html index c3e5d4bb3..0efefb40e 100644 --- a/docs/master/components/hand-controls.html +++ b/docs/master/components/hand-controls.html @@ -1191,8 +1191,8 @@

      The hand-controls component provides tracked hands (using a prescribed model) -with animated gestures. hand-controls wraps the vive-controls and -oculus-touch-controls which in turn wrap the tracked-controls +with animated gestures. hand-controls wraps the vive-controls and +oculus-touch-controls which in turn wrap the tracked-controls component. By specifying just hand-controls, we have something that works well with both Vive and Rift. The component gives extra events and handles hand animations and poses.

      diff --git a/docs/master/components/keyboard-shortcuts.html b/docs/master/components/keyboard-shortcuts.html index 9344b9406..d426c688c 100644 --- a/docs/master/components/keyboard-shortcuts.html +++ b/docs/master/components/keyboard-shortcuts.html @@ -1191,7 +1191,7 @@

      The keyboard-shortcuts component toggles global keyboard shortcuts. The -keyboard-shortcuts component applies only to the <a-scene> element.

      +keyboard-shortcuts component applies only to the <a-scene> element.

      Example

      <a-scene keyboard-shortcuts="enterVR: false"></a-scene>

      Properties

      diff --git a/docs/master/components/laser-controls.html b/docs/master/components/laser-controls.html index 7587dee92..46ec56488 100644 --- a/docs/master/components/laser-controls.html +++ b/docs/master/components/laser-controls.html @@ -1202,15 +1202,15 @@

      configures other components, rather than implementing any logic itself. Under the hood, laser-controls sets all of the tracked controller components:

      These controller components get activated if its respective controller is connected and detected via the Gamepad API. Then the model of the actual -controller is used. laser-controls then configures the cursor +controller is used. laser-controls then configures the cursor component for listen to the appropriate events and configures the -raycaster component to draw the laser.

      +raycaster component to draw the laser.

      When the laser intersects with an entity, the length of the line gets truncated to the distance to the intersection point.

      Example

      <a-entity laser-controls="hand: left"></a-entity>
      @@ -1235,11 +1235,11 @@

      Color for the default controller model. -

      Customizing the Raycaster

      Configure the raycaster properties.

      +

      Customizing the Raycaster

      Configure the raycaster properties.

      For example:

      <a-entity laser-controls raycaster="objects: .links; far: 5"></a-entity>
      -

      Customizing the Line

      See Raycaster: Customizing the Line.

      +

      Customizing the Line

      See Raycaster: Customizing the Line.

      For example:

      <a-entity laser-controls raycaster="lineColor: red; lineOpacity: 0.5"></a-entity>
      diff --git a/docs/master/components/light.html b/docs/master/components/light.html index 55fd30602..adcae9ba2 100644 --- a/docs/master/components/light.html +++ b/docs/master/components/light.html @@ -1205,7 +1205,7 @@

      To manually disable the defaults, without adding other lights:

      <a-scene light="defaultLightsEnabled: false">
        <!-- ... -->
      </a-scene>
      -
      +

      Properties

      All light types support a few basic properties:

      @@ -1348,7 +1348,7 @@

      Spot

      Sp

      Probe

      Probe lights are kind of like ambient lighting in that they don’t have a particular source or direction and light everything equally.

      -

      Where they differ though is that they will color each angle differently based upon a spherical harmonic. This spherical harmonic is generated by analyzing a cubemap. The cubemap you provide doesn’t need to be high resolution since it’s only used to generate the spherical harmonics.

      +

      Where they differ though is that they will color each angle differently based upon a spherical harmonic. This spherical harmonic is generated by analyzing a cubemap. The cubemap you provide doesn’t need to be high resolution since it’s only used to generate the spherical harmonics.

      @@ -1374,7 +1374,7 @@

      Probe

      <

      Configuring Shadows

      A-Frame includes support for realtime shadow rendering. With proper configuration, objects (both moving or stationary) will cast shadows adding depth and realism to a scene. Since shadows come with many properties, it -is very helpful to use the A-Frame Inspector to configure shadows

      +is very helpful to use the A-Frame Inspector to configure shadows

      Light types that support shadows (point, spot, and directional) include additional properties:

      diff --git a/docs/master/components/line.html b/docs/master/components/line.html index 61cacf629..dfa78f064 100644 --- a/docs/master/components/line.html +++ b/docs/master/components/line.html @@ -1192,8 +1192,8 @@

      The line component draws a line given a start coordinate and end coordinate using THREE.Line.

      -

      The raycaster component uses the line component for its showLine -property, which is then used by the laser-controls component.

      +

      The raycaster component uses the line component for its showLine +property, which is then used by the laser-controls component.

      Example

      <a-entity line="start: 0 1 0; end: 2 0 -5; color: red"
                line__2="start: -2 4 5; end: 0 4 -3; color: green"></a-entity>

      Note an entity can have multiple lines. The line mesh is set as line or diff --git a/docs/master/components/look-controls.html b/docs/master/components/look-controls.html index 85048f9f8..9bbb2113f 100644 --- a/docs/master/components/look-controls.html +++ b/docs/master/components/look-controls.html @@ -1196,7 +1196,7 @@

    • Rotates the entity when we move the mouse.
    • Rotates the entity when we touch-drag the touchscreen.

    -

    Example

    The look-controls component is usually used alongside the camera +

    Example

    The look-controls component is usually used alongside the camera component.

    <a-entity camera look-controls position="0 1.6 0"></a-entity>
    diff --git a/docs/master/components/magicleap-controls.html b/docs/master/components/magicleap-controls.html index e16d26a1d..fe4b73533 100644 --- a/docs/master/components/magicleap-controls.html +++ b/docs/master/components/magicleap-controls.html @@ -1191,7 +1191,7 @@

    The magicleap-controls component interfaces with the Magic Leap controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and Magic Leap controller model/

    Example

    <!-- Match Magic Leap controller if present, regardless of hand. -->
    <a-entity magicleap-controls></a-entity>

    <!-- Match Magic Leap controller if present and for specified hand. -->
    <a-entity magicleap-controls="hand: left"></a-entity>
    <a-entity magicleap-controls="hand: right"></a-entity>
    diff --git a/docs/master/components/material.html b/docs/master/components/material.html index 0aa42867e..1bbea74bc 100644 --- a/docs/master/components/material.html +++ b/docs/master/components/material.html @@ -1191,11 +1191,11 @@

    The material component gives appearance to an entity. We can define properties -such as color, opacity, or texture. This is often paired with the geometry +such as color, opacity, or texture. This is often paired with the geometry component which provides shape.

    We can register custom materials to extend the material component to provide a wide range of visual effects.

    -
    +

    Example

    Defining a red material using the default standard material:

    <a-entity geometry="primitive: box" material="color: red"></a-entity>
    @@ -1288,7 +1288,7 @@

    anisotropy -The anisotropic filtering sample rate to use for the textures. A value of 0 means the default value will be used, see renderer +The anisotropic filtering sample rate to use for the textures. A value of 0 means the default value will be used, see renderer 0 @@ -1391,12 +1391,12 @@

    or a comma-separated list of URLs. See below for more detail. +Environment cubemap texture for reflections. Can be a selector to or a comma-separated list of URLs. See below for more detail. None fog -Whether or not material is affected by fog. +Whether or not material is affected by fog. true @@ -1538,7 +1538,7 @@

    cubemap, six images put together +

    Unlike textures, the envMap property takes a cubemap, six images put together to form a cube. The cubemap wraps around the mesh and applied as a texture.

    For example:

    <a-scene>
      <a-assets>
        <a-cubemap id="sky">
          <img src="right.png">
          <img src="left.png">
          <img src="top.png">
          <img src="bottom.png">
          <img src="front.png">
          <img src="back.png">
        </a-cubemap>
      </a-assets>

      <a-entity geometry="primitive: box" material="envMap: #sky; roughness: 0"></a-entity>
    </a-scene>
    @@ -1568,7 +1568,7 @@

    fog. +Whether or not material is affected by fog. true @@ -1609,7 +1609,7 @@

    Textures

    To set a texture using one of the built-in materials, specify the src property. src can be a selector to either an <img> or <video> element in the -asset management system:

    +asset management system:

    <a-scene>
      <a-assets>
        <img id="my-texture" src="texture.png">
      </a-assets>

      <a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
    </a-scene>

    src can also be an inline URL. Note that we do not get browser caching or diff --git a/docs/master/components/obj-model.html b/docs/master/components/obj-model.html index cf8837e17..df26a829d 100644 --- a/docs/master/components/obj-model.html +++ b/docs/master/components/obj-model.html @@ -1208,7 +1208,7 @@

    mtl -Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead. +Selector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.

    Events

    @@ -1226,7 +1226,7 @@

    EventsLoading Inline

    We can also load assets by specifying the path directly within url(). Note this is less performant than going through the asset management system.

    <a-entity obj-model="obj: url(/path/to/tree.obj); mtl: url(/path/to/tree.mtl)"></a-entity>
    -

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    +

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    Additional Resources

    We can find and download models on the web to drop into our scenes:

    • Sketchup’s 3D Warehouse - Repository of models.
      • diff --git a/docs/master/components/oculus-touch-controls.html b/docs/master/components/oculus-touch-controls.html index 65a1b7926..939be78c9 100644 --- a/docs/master/components/oculus-touch-controls.html +++ b/docs/master/components/oculus-touch-controls.html @@ -1191,7 +1191,7 @@

      The oculus-touch-controls component interfaces with the Oculus Touch controllers (Rift, Rift S, Oculus Quest 1 and 2). It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Touch controller model.

      Example

      <a-entity oculus-touch-controls="hand: left"></a-entity>
      <a-entity oculus-touch-controls="hand: right"></a-entity>
      diff --git a/docs/master/components/position.html b/docs/master/components/position.html index 7ad529e64..b47b0e90c 100644 --- a/docs/master/components/position.html +++ b/docs/master/components/position.html @@ -1229,7 +1229,7 @@

      #child2‘s position would be 2 3 4.

      Updating Position

      For performance and ergonomics, we recommend updating position directly via the -three.js Object3D .position Vector3 versus via +three.js Object3D .position Vector3 versus via .setAttribute.

      This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1243,11 +1243,11 @@

      Getting Position

      To reflect updates done at the three.js level, A-Frame returns the actual Object3D.position vector object when doing .getAttribute('position'). Note modifying the return value will modify the entity itself.

      -

      See also reading position and rotation of the camera.

      +

      See also reading position and rotation of the camera.

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/master/components/raycaster.html b/docs/master/components/raycaster.html index efee3d6bd..7c4440da4 100644 --- a/docs/master/components/raycaster.html +++ b/docs/master/components/raycaster.html @@ -1202,7 +1202,7 @@

      is explicitly defined via the objects selector property described below. Raycasting is an expensive operation, and we should raycast against only targets that need to be interactable at any given time.

      -

      The cursor component and laser-controls components +

      The cursor component and laser-controls components both build on top of the raycaster component.

      Example

      <a-entity id="player" >
        <a-entity collider-check raycaster="objects: .collidable; showLine:true;" position="0 1 0"></a-entity>
      </a-entity>
      <a-entity class="collidable" geometry="primitive: box"  position="0 1 -3"></a-entity>
      @@ -1270,7 +1270,7 @@

      showLine -Whether or not to display the raycaster visually with the line component. +Whether or not to display the raycaster visually with the line component. false @@ -1297,7 +1297,7 @@

      Events raycaster-intersection -Emitted on the raycasting entity. Raycaster is intersecting with one or more entities. Event detail will contain els, an array with the newly intersected entities, and intersections, and .getIntersection (el) function which can be used to obtain current intersection data. For access to a complete list of intersections (existing & new), see Members intersectedEls. +Emitted on the raycasting entity. Raycaster is intersecting with one or more entities. Event detail will contain els, an array with the newly intersected entities, and intersections, and .getIntersection (el) function which can be used to obtain current intersection data. For access to a complete list of intersections (existing & new), see Members intersectedEls. raycaster-intersection-cleared diff --git a/docs/master/components/renderer.html b/docs/master/components/renderer.html index af5978d6a..96418d9d7 100644 --- a/docs/master/components/renderer.html +++ b/docs/master/components/renderer.html @@ -1329,7 +1329,7 @@

      here

      +

      Some more background on how A-Frame sorts objects for rendering can be found here

      physicallyCorrectLights

      By default, point and spot lights attenuate (or, appear dimmer as they become farther away) according to a model that is classically common, but physically inaccurate. For more realistic light attenuation, set renderer="physicallyCorrectLights: true". Light intensities may need to diff --git a/docs/master/components/rotation.html b/docs/master/components/rotation.html index 265ef9eda..d91511f6d 100644 --- a/docs/master/components/rotation.html +++ b/docs/master/components/rotation.html @@ -1234,7 +1234,7 @@

      15 45 30.

      Updating Rotation

      For performance and ergonomics, we recommend updating rotation directly via the three.js Object3D .rotation Euler (in radians) versus -via .setAttribute.

      +via .setAttribute.

      This method is easier because we have access to all the Euler utilities, and faster by skipping .setAttribute overhead and not needing to create an object to set rotation:

      @@ -1244,12 +1244,12 @@

      reading position and rotation of the camera.

      +

      See also reading position and rotation of the camera.

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/master/components/scale.html b/docs/master/components/scale.html index f5d0765f6..18a2a9090 100644 --- a/docs/master/components/scale.html +++ b/docs/master/components/scale.html @@ -1233,7 +1233,7 @@

      Relative Scale

      Similar to the rotation and position components, scales are applied in the local coordinate system and multiply in nested entities.

      Updating Scale

      For performance and ergonomics, we recommend updating scale directly via the -three.js Object3D .scale Vector3 versus via +three.js Object3D .scale Vector3 versus via .setAttribute.

      This method is easier because we have access to all the Vector3 utilities, and faster by skipping .setAttribute overhead and not @@ -1249,8 +1249,8 @@

      Order of Transformations

      Transformations are applied to entities in this order:

      diff --git a/docs/master/components/shadow.html b/docs/master/components/shadow.html index 055a29ad2..f0b0b2b62 100644 --- a/docs/master/components/shadow.html +++ b/docs/master/components/shadow.html @@ -1200,7 +1200,7 @@

      Examp

      IMPORTANT: Adding the shadow component alone is not enough to display shadows in your scene. We must have at least one light with castShadow: true enabled. Additionally, the light’s shadow camera (used for depth -projection) usually must be configured correctly. Refer to the light +projection) usually must be configured correctly. Refer to the light component for more information.

      Properties

      diff --git a/docs/master/components/sound.html b/docs/master/components/sound.html index 463e2b28f..4bde23ca3 100644 --- a/docs/master/components/sound.html +++ b/docs/master/components/sound.html @@ -1192,7 +1192,7 @@

      The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the -components-position.

      +components-position.

      NOTE: Playing sound on iOS — in any browser — requires a physical user interaction. This is a browser limitation, and internal A-Frame events (like fusing cursors) do diff --git a/docs/master/components/stats.html b/docs/master/components/stats.html index 2fc41cd98..34fe20dd7 100644 --- a/docs/master/components/stats.html +++ b/docs/master/components/stats.html @@ -1191,7 +1191,7 @@

      The stats component displays a UI with performance-related metrics. The stats -component applies only to the <a-scene> element.

      +component applies only to the <a-scene> element.

      Example

      <a-scene stats></a-scene>

      Metrics

        diff --git a/docs/master/components/text.html b/docs/master/components/text.html index 4f81b4654..9cf923f2d 100644 --- a/docs/master/components/text.html +++ b/docs/master/components/text.html @@ -1192,7 +1192,7 @@

        The text component renders signed distance field (SDF) font text.

        Example Image

        -
        +

        Introduction

        Note that rendering text in 3D is hard. In 2D web development, text is the most basic thing because the browser’s renderer and layout engine handle @@ -1440,8 +1440,8 @@

        SizingChange the width.
      • Change the wrapCount (roughly how many characters to fit inside the given width).
      • Change wrapPixels.
        • -
      • Change the scale component.
        • -
      • Position the text closer or farther away.
        • +
      • Change the scale component.
        • +
      • Position the text closer or farther away.

      Sizing

      Text can be wrapped by specifying width in A-Frame units.

      diff --git a/docs/master/components/tracked-controls.html b/docs/master/components/tracked-controls.html index e42e233b7..9cc416472 100644 --- a/docs/master/components/tracked-controls.html +++ b/docs/master/components/tracked-controls.html @@ -1192,9 +1192,9 @@

      The tracked-controls component interfaces with tracked controllers. tracked-controls uses the Gamepad API to handle tracked controllers, and is -abstracted by the hand-controls component as well as the -vive-controls, oculus-touch-controls, -windows-motion-controls components. +abstracted by the hand-controls component as well as the +vive-controls, oculus-touch-controls, +windows-motion-controls components. This component elects the appropriate controller, applies pose to the entity, observes buttons state and emits appropriate events. For non-6DOF controllers, a primitive arm model is used to emulate positional data.

      diff --git a/docs/master/components/visible.html b/docs/master/components/visible.html index 80600da7d..ced097928 100644 --- a/docs/master/components/visible.html +++ b/docs/master/components/visible.html @@ -1214,7 +1214,7 @@

      Value

      < The entity will not be rendered nor visible. The entity will still exist in the scene. -

      Updating Visibility

      It is slightly faster to update visibility at the three.js level versus via +

      Updating Visibility

      It is slightly faster to update visibility at the three.js level versus via .setAttribute.

      // With three.js
      el.object3D.visible = false;

      // With .setAttribute.
      el.setAttribute('visible', false);
      diff --git a/docs/master/components/vive-controls.html b/docs/master/components/vive-controls.html index 94cbdff6a..82ba506f2 100644 --- a/docs/master/components/vive-controls.html +++ b/docs/master/components/vive-controls.html @@ -1191,7 +1191,7 @@

      The vive-controls component interfaces with the HTC Vive controllers/wands. It -wraps the tracked-controls component while adding button +wraps the tracked-controls component while adding button mappings, events, and a Vive controller model that highlights the pressed buttons (trigger, grip, menu, system) and trackpad.

      Example

      <a-entity vive-controls="hand: left"></a-entity>
      <a-entity vive-controls="hand: right"></a-entity>
      diff --git a/docs/master/components/vive-focus-controls.html b/docs/master/components/vive-focus-controls.html index d6735bf5b..0e5578a33 100644 --- a/docs/master/components/vive-focus-controls.html +++ b/docs/master/components/vive-focus-controls.html @@ -1191,7 +1191,7 @@

      The vive-focus-controls component interfaces with the Vive Focus controller. -It wraps the tracked-controls component while adding button +It wraps the tracked-controls component while adding button mappings, events, and an Vive Focus controller model that highlights the touched and/or pressed buttons (trackpad, trigger).

      Example

      <!-- Match Vive Focus controller if present, regardless of hand. -->
      <a-entity vive-focus-controls></a-entity>

      <!-- Match Vive Focus controller if present and for specified hand. -->
      <a-entity vive-focus-controls="hand: left"></a-entity>
      <a-entity vive-focus-controls="hand: right"></a-entity>
      diff --git a/docs/master/components/wasd-controls.html b/docs/master/components/wasd-controls.html index 601846368..aa23a3b76 100644 --- a/docs/master/components/wasd-controls.html +++ b/docs/master/components/wasd-controls.html @@ -1191,7 +1191,7 @@

      The wasd-controls component controls an entity with the WASD or arrow keyboard -keys. The wasd-controls component is commonly attached to an entity with the camera +keys. The wasd-controls component is commonly attached to an entity with the camera component.

      Example

      <a-entity camera look-controls wasd-controls="acceleration:100" position="0 1.6 0"></a-entity>
      diff --git a/docs/master/components/windows-motion-controls.html b/docs/master/components/windows-motion-controls.html index c4657e216..8ad1fcadb 100644 --- a/docs/master/components/windows-motion-controls.html +++ b/docs/master/components/windows-motion-controls.html @@ -1192,7 +1192,7 @@

      The windows-motion-controls component 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 +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.)

      Example

      <a-entity windows-motion-controls="hand: left"></a-entity>
      <a-entity windows-motion-controls="hand: right"></a-entity>
      diff --git a/docs/master/components/xr-mode-ui.html b/docs/master/components/xr-mode-ui.html index 66d1bbe3b..70ee1acf9 100644 --- a/docs/master/components/xr-mode-ui.html +++ b/docs/master/components/xr-mode-ui.html @@ -1191,7 +1191,7 @@

      The xr-mode-ui component configures or disables the enter VR and AR buttons. Buttons only display if the browser supports the corresponding modes (AR or VR). The xr-mode-ui component applies only -to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

      +to the <a-scene> element. If we wish to simply toggle the UI, use CSS instead.

      Example

      <a-scene xr-mode-ui="enabled: false"></a-scene>

      Properties

      diff --git a/docs/master/core/asset-management-system.html b/docs/master/core/asset-management-system.html index 7060770bf..e91c81151 100644 --- a/docs/master/core/asset-management-system.html +++ b/docs/master/core/asset-management-system.html @@ -1208,7 +1208,7 @@

      The scene won’t render or initialize until the browser fetches (or errors out) all the assets or the asset system reaches the timeout.

      -
      +

      Example

      We can define our assets in <a-assets> and point to those assets from our entities using selectors:

      diff --git a/docs/master/core/component.html b/docs/master/core/component.html index 9baa51217..496e12fdb 100644 --- a/docs/master/core/component.html +++ b/docs/master/core/component.html @@ -1190,7 +1190,7 @@

      -

      In the entity-component-system pattern, a component is a reusable and +

      In the entity-component-system pattern, a component is a reusable and modular chunk of data that we plug into an entity to add appearance, behavior, and/or functionality.

      In A-Frame, components modify entities which are 3D objects in the scene. We @@ -1204,7 +1204,7 @@

      Components are roughly analogous to CSS. Like how CSS rules modify the appearance of elements, component properties modify the appearance, behavior, and functionality of entities.

      -
      +

      Component HTML Form

      A component holds a bucket of data in the form of one or more component properties. Components use this data to modify entities. Consider an engine @@ -1355,7 +1355,7 @@

      Definition Lifecycle Handler Methods

      With the schema being the anatomy, the lifecycle methods are the physiology; the schema defines the shape of the data, the lifecycle handler methods use the data to modify the entity. The handlers will usually interact with the -Entity API.

      +Entity API.

      methodsimage Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

      Overview of Methods

      @@ -1408,15 +1408,15 @@

      setAttribute. +

      - + - + @@ -1453,7 +1453,7 @@

      diffing the current +

      Granular modifications to the entity can be done by diffing the current dataset (this.data) with the previous dataset before the update (oldData).

      A-Frame calls .update() both at the beginning of a component’s lifecycle and every time a component’s data changes (e.g., as a result of setAttribute). The @@ -1461,7 +1461,7 @@

      visible component’s update sets the visibility of +

      For example, the visible component’s update sets the visibility of the entity.

      Parsed component properties computed from the schema default values, mixins, and the entity’s attributes.
      Important: Do not modify the data attribute directly. It is updated internally by A-Frame. To modify a component, use setAttribute.
      this.elReference to the entity as an HTML element.Reference to the entity as an HTML element.
      this.el.sceneElReference to the scene as an HTML element.Reference to the scene as an HTML element.
      this.id
      AFRAME.registerComponent('visible', {
        /**
         * this.el is the entity element.
         * this.el.object3D is the three.js object of the entity.
         * this.data is the component's property or properties.
         */
        update: function (oldData) {
          this.el.object3D.visible = this.data;
        }
        // ...
      });
      @@ -1476,7 +1476,7 @@

      Remove, undo, or clean up all of the component’s modifications to the entity.
    • Detach event listeners.

    -

    For example, when the light component is removed, the light component +

    For example, when the light component is removed, the light component will remove the light object that it had previously set on the entity, thus removing it from the scene.

    AFRAME.registerComponent('light', {
      // ...
      remove: function () {
        this.el.removeObject3D('light');
      }
      // ...
    });
    @@ -1498,7 +1498,7 @@

    time) and the time difference in milliseconds since the last frame (timeDelta). These can be used for interpolation or to only run parts of the tick handler on a set interval.

    -

    For example, the tracked controls component will progress +

    For example, the tracked controls component will progress the controller’s animations, update the controller’s position and rotation, and check for button presses.

    AFRAME.registerComponent('tracked-controls', {
      // ...
      tick: function (time, timeDelta) {
        this.updateMeshAnimation();
        this.updatePose();
        this.updateButtons();
      }
      // ...
    });
    @@ -1517,7 +1517,7 @@

    .
  • Remove event listeners.
  • Remove any chances of dynamic behavior.
    • -

    For example, the sound component will pause the sound and remove an +

    For example, the sound component will pause the sound and remove an event listener that would have played a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      pause: function () {
        this.pauseSound();
        this.removeEventListener();
      }
      // ...
    });
    @@ -1532,7 +1532,7 @@

    .pla
    • Add event listeners.
    -

    For example, the sound component will play the sound and update the +

    For example, the sound component will play the sound and update the event listener that would play a sound on an event:

    AFRAME.registerComponent('sound', {
      // ...
      play: function () {
        if (this.data.autoplay) { this.playSound(); }
        this.updateEventListener();
      }
      // ...
    });
    @@ -1542,7 +1542,7 @@

  • Dynamically update or extend the schema, usually depending on the value of a property.
    • -

    For example, the geometry component checks if the primitive +

    For example, the geometry component checks if the primitive property changed to determine whether to update the schema for a different type of geometry:

    AFRAME.registerComponent('geometry', {
      // ...
      updateSchema: (newData) {
        if (newData.primitive !== this.data.primitive) {
          this.extendSchema(GEOMETRIES[newData.primitive].schema);
        }
      }
      // ...
    });
    @@ -1620,7 +1620,7 @@ 

    document.querySelector('[geometry]').components.geometry.flushToDOM();
    -

    Read more about component-to-DOM serialization.

    +

    Read more about component-to-DOM serialization.

    Accessing a Component’s Members and Methods

    A component’s members and methods can be accessed through the entity from the .components object. Look up the component from the entity’s map of components, and we’ll have access to the component’s internals. Consider this diff --git a/docs/master/core/entity.html b/docs/master/core/entity.html index 5c95b826f..134df204d 100644 --- a/docs/master/core/entity.html +++ b/docs/master/core/entity.html @@ -1191,23 +1191,23 @@

    A-Frame represents an entity via the <a-entity> element. As defined in the -entity-component-system pattern, entities are placeholder objects to +entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

    -

    In A-Frame, entities are inherently attached with the position, -rotation, and scale components.

    -
    +

    In A-Frame, entities are inherently attached with the position, +rotation, and scale components.

    +

    Example

    Consider the entity below. By itself, it has no appearance, behavior, or functionality. It does nothing:

    <a-entity>

    We can attach components to it to make it render something or do something. To -give it shape and appearance, we can attach the geometry and -material components:

    +give it shape and appearance, we can attach the geometry and +material components:

    <a-entity geometry="primitive: box" material="color: red">
    -

    Or to make it emit light, we can further attach the light component:

    +

    Or to make it emit light, we can further attach the light component:

    <a-entity geometry="primitive: box" material="color: red"
              light="type: point; intensity: 2.0">

    Retrieving an Entity

    We can simply retrieve an entity using DOM APIs.

    @@ -1242,7 +1242,7 @@

    object3DMap

    An entity’s object3DMap is an object that gives access to the different types of THREE.Object3Ds (e.g., camera, meshes, lights, sounds) that components have set.

    -

    For an entity with a geometry and light components +

    For an entity with a geometry and light components attached, object3DMap might look like:

    {
      light: <THREE.Light Object>,
      mesh: <THREE.Mesh Object>
    }
    @@ -1257,7 +1257,7 @@

    Metho

    destroy ()

    Clean up memory related to the entity such as clearing all components and their data.

    emit (name, detail, bubbles)

    emit emits a custom DOM event on the entity. For example, we can emit an event to -trigger an animation:

    +trigger an animation:

    // <a-entity animation="property: rotation; to: 0 360 0; startEvents: rotate">
    entity.emit('rotate');

    We can also pass event detail or data as the second argument:

    @@ -1268,7 +1268,7 @@ 

    entity.emit('sink', null, false);

    flushToDOM (recursive)

    flushToDOM will manually serialize an entity’s components’ data and update the DOM. -Read more about component-to-DOM serialization.

    +Read more about component-to-DOM serialization.

    getAttribute (componentName)

    getAttribute retrieves parsed component data (including mixins and defaults).

    // <a-entity geometry="primitive: box; width: 3">

    entity.getAttribute('geometry');
    // >> {primitive: "box", depth: 2, height: 2, width: 3, ...}

    entity.getAttribute('geometry').primitive;
    // >> "box"

    entity.getAttribute('geometry').height;
    // >> 2

    entity.getAttribute('position');
    // >> {x: 0, y: 0, z: 0}
    @@ -1295,20 +1295,20 @@

    pa entity will call pause() on its child entities when we pause an entity.

    // <a-entity id="spinning-jumping-ball">
    entity.pause();
    -

    For example, the look-controls component on +

    For example, the look-controls component on pause will remove event handlers that listen for input.

    play ()

    play() will start any dynamic behavior as defined by animations and components. This is automatically called when the DOM attaches an entity. When an entity play(), the entity calls play() on its child entities.

    entity.pause();
    entity.play();
    -

    For example, the sound component on play will begin playing the sound.

    +

    For example, the sound component on play will begin playing the sound.

    setAttribute (componentName, value, [propertyValue | clobber])

    If componentName is not the name of a registered component or the component is a single-property component, setAttribute behaves as it normally would:

    entity.setAttribute('visible', false);

    Though if componentName is the name of a registered component, it may handle special -parsing for the value. For example, the position component is a +parsing for the value. For example, the position component is a single-property component, but its property type parser allows it to take an object:

    entity.setAttribute('position', { x: 1, y: 2, z: 3 });
    @@ -1376,7 +1376,7 @@

    Events componentchanged -One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. +One of the entity’s components was modified. This event is throttled. Do not use this for reading position and rotation changes, rather use a tick handler. componentinitialized diff --git a/docs/master/core/globals.html b/docs/master/core/globals.html index d3950b348..30aba4206 100644 --- a/docs/master/core/globals.html +++ b/docs/master/core/globals.html @@ -1202,11 +1202,11 @@

    AComponent -Component prototype. +Component prototype. AEntity -Entity prototype. +Entity prototype. ANode @@ -1214,7 +1214,7 @@

    AScene -Scene prototype. +Scene prototype. components @@ -1230,19 +1230,19 @@

    registerComponent -Function to register a component. +Function to register a component. registerGeometry -Function to register a geometry. +Function to register a geometry. registerPrimitive -Function to register a primitive like registering an A-Frame elements similar to <a-box>. +Function to register a primitive like registering an A-Frame elements similar to <a-box>. registerShader -Function to register a material or shader. +Function to register a material or shader. schema @@ -1262,7 +1262,7 @@

    utils -A-Frame utility modules. +A-Frame utility modules. version diff --git a/docs/master/core/mixins.html b/docs/master/core/mixins.html index a245f2cfb..bf7ad4709 100644 --- a/docs/master/core/mixins.html +++ b/docs/master/core/mixins.html @@ -1192,7 +1192,7 @@

    Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the <a-mixin> element and are placed in -<a-assets>. Mixins should be set with an id, and when an entity +<a-assets>. Mixins should be set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.

    <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-mixin>
      </a-assets>

      <a-entity mixin="red cube"></a-entity>
      <a-entity mixin="blue cube"></a-entity>
    </a-scene>
    @@ -1202,7 +1202,7 @@

    the entities above expand to:

    <a-entity material="color: red" geometry="primitive: box"></a-entity>
    <a-entity material="color: blue" geometry="primitive: box"></a-entity>
    -
    +

    Merging Component Properties

    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="height: 10"></a-mixin>
        <a-mixin id="wide" geometry="width: 10"></a-mixin>
      </a-assets>

      <a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
    </a-scene>
    diff --git a/docs/master/core/scene.html b/docs/master/core/scene.html index d5dc3ead7..d0a2cb083 100644 --- a/docs/master/core/scene.html +++ b/docs/master/core/scene.html @@ -1191,8 +1191,8 @@

    A scene is represented by the <a-scene> element. The scene is the global root -object, and all entities are contained within the scene.

    -

    The scene inherits from the Entity class so it inherits all of its +object, and all entities are contained within the scene.

    +

    The scene inherits from the Entity class so it inherits all of its properties, its methods, the ability to attach components, and the behavior to wait for all of its child nodes (e.g., <a-assets> and <a-entity>) to load before kicking off the render loop.

    @@ -1202,9 +1202,9 @@

  • Default camera and lights
  • Set up webvr-polyfill, VREffect
  • Add UI to Enter VR that calls WebVR API
    • -
  • Configure WebXR devices through the webxr system
    • +
  • Configure WebXR devices through the webxr system
    • -
    +

    Example

    <a-scene>
      <a-assets>
        <img id="texture" src="texture.png">
      </a-assets>

      <a-box src="#texture"></a-box>
    </a-scene>
    @@ -1249,7 +1249,7 @@

    systems -Instantiated systems. +Instantiated systems. time @@ -1313,12 +1313,12 @@

    embedded - Remove fullscreen styles from the canvas.

    • -
  • fog - Add fog.
    • -
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • -
  • inspector - Inject the A-Frame Inspector.
    • -
  • stats - Toggle performance stats.
    • -
  • xr-mode-ui - Toggle UI for entering and exiting VR.
    • +
  • embedded - Remove fullscreen styles from the canvas.
    • +
  • fog - Add fog.
    • +
  • keyboard-shortcuts - Toggle keyboard shortcuts.
    • +
  • inspector - Inject the A-Frame Inspector.
    • +
  • stats - Toggle performance stats.
    • +
  • xr-mode-ui - Toggle UI for entering and exiting VR.

    • Running Content Scripts on the Scene

    The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

    AFRAME.registerComponent('do-something', {
      init: function () {
        var sceneEl = this.el;
      }
    });
    diff --git a/docs/master/core/systems.html b/docs/master/core/systems.html index 2373d4ab2..0509b71c0 100644 --- a/docs/master/core/systems.html +++ b/docs/master/core/systems.html @@ -1190,16 +1190,16 @@

    -

    A system, of the entity-component-system pattern, provides global scope, +

    A system, of the entity-component-system pattern, provides global scope, services, and management to classes of components. It provides public APIs (methods and properties) for classes of components. A system can be accessed through the scene element, and can help components interface with the global scene.

    -

    For example, the camera system manages all entities with the camera +

    For example, the camera system manages all entities with the camera component, controlling which camera is the active camera.

    -
    + -

    Registering a System

    A system is registered similarly to a component.

    +

    Registering a System

    A system is registered similarly to a component.

    If the system name matches a component name, then the component will have a reference to the system as this.system:

    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);
      }
    });
    @@ -1221,7 +1221,7 @@

    schema -Behaves the same as component schemas. Parses to data. +Behaves the same as component schemas. Parses to data.

    Methods

    A system, like a component, defines lifecycle handlers. It can also define diff --git a/docs/master/core/utils.html b/docs/master/core/utils.html index 4cfb08cfc..72238d52e 100644 --- a/docs/master/core/utils.html +++ b/docs/master/core/utils.html @@ -1191,7 +1191,7 @@

    A-Frame’s utility modules are public through AFRAME.utils.

    -
    +

    AFRAME.utils.coordinates

    Module for handling vec3 and vec4 types.

    .isCoordinates (value)

    Tests whether a string is a vec3 or vec4.

    @@ -1203,7 +1203,7 @@

    .stringify (data)

    Stringifies an {x, y, z} vec3 object to an “x y z” string.Or Stringifies an {x, y, z, w} vec4 object to an “x y z w” string.

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3})
    // >> "1 2 -3"

    AFRAME.utils.coordinates.stringify({x: 1, y: 2, z: -3, w:4})
    // >> "1 2 -3 4"
    -

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for +

    AFRAME.utils.entity

    .getComponentProperty(entity, componentName, delimiter='.')

    Performs like Entity.getAttribute, but with support for return 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.

    @@ -1211,7 +1211,7 @@

    This is useful for components that need a way to reference a property of a multi-property component.

    -

    .setComponentProperty (entity, componentName, value, delimiter)

    Performs like Entity.setAttribute, but with support for setting an +

    .setComponentProperty (entity, componentName, value, delimiter)

    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.

    diff --git a/docs/master/guides/building-a-360-image-gallery.html b/docs/master/guides/building-a-360-image-gallery.html index ea405da02..1b2802883 100644 --- a/docs/master/guides/building-a-360-image-gallery.html +++ b/docs/master/guides/building-a-360-image-gallery.html @@ -1194,7 +1194,7 @@

    Let’s build an interactive gaze-based 360° image gallery. There will be three panels which the user can click on. Once clicked, the background will fade and swap the 360° images.

    -

    This guide will practice three concepts related to entity-component:

    +

    This guide will practice three concepts related to entity-component:

    1. Using the standard components that come with A-Frame.
    2. Using community components from the ecosystem.
      3. @@ -1202,18 +1202,18 @@

    Not to say 360° images are at all a focus use case of A-Frame, but it makes for an easy example that has a lot of demand as an early use case on the Web.

    -
    +

    Skeleton

    This is the starting point for our scene.

    <a-scene>
      <a-assets>
        <audio id="click-sound" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>

        <!-- Images. -->
        <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
        <img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
        <img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
        <img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
        <img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#city"></a-sky>

      <!-- Link template we will build. -->
      <a-entity class="link"></a-entity>

      <!-- Camera + Cursor. -->
      <a-camera>
        <a-cursor
          id="cursor"
          animation__click="property: scale; from: 0.1 0.1 0.1; to: 1 1 1; easing: easeInCubic; dur: 150; startEvents: click"
          animation__clickreset="property: scale; to: 0.1 0.1 0.1; dur: 1; startEvents: animationcomplete__click"
          animation__fusing="property: scale; from: 1 1 1; to: 0.1 0.1 0.1; easing: easeInCubic; dur: 150; startEvents: fusing"></a-cursor>
      </a-camera>
    </a-scene>

    We have predefined:

    Using Standard Components

    Standard components are components that ship with A-Frame, like any standard library. We’ll go over how to attach these components to entities and configure @@ -1223,20 +1223,20 @@ 

    <a-entity class="link"></a-entity>
    -

    To give our entity shape, we can attach the geometry component, +

    To give our entity shape, we can attach the geometry component, configured to a plane shape. We specify the component data using a syntax that resembles that of inline CSS styles:

    <a-entity
      class="link"
      geometry="primitive: plane; height: 1; width: 1"></a-entity>
    -

    Then to give our entity appearance, we can attach the material +

    Then to give our entity appearance, we can attach the material component. We set shader to flat so the image isn’t affected negatively by lighting. And we set src to #cubes-thumb, a selector to one -of the images preloaded in the Asset Management System. Alternatively, +of the images preloaded in the Asset Management System. Alternatively, we could pass a URL for the image:

    <a-entity class="link"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: #cubes-thumb"></a-entity>

    We can continue adding features to our entity by plugging in more components. -Let’s attach one more standard component, the sound component. We want +Let’s attach one more standard component, the sound component. We want to make it such that when we click (via gazing) on the link, it plays a click sound. The syntax is the same as before, but instead we are now using the sound component’s properties. We set on to click so the sound is played on click. @@ -1312,15 +1312,15 @@

    Lastly, we’ll add some visual feedback to our links. We want them to scale up and scale back when they are hovered or clicked. This involves writing an event -listener to do setAttributes on the scale component in response to -cursor events. This is a fairly common pattern so there is an +listener to do setAttributes on the scale component in response to +cursor events. This is a fairly common pattern so there is an event-set component that does setAttribute in response to events.

    Let’s attach event listeners on our links to scale them up when they are gazed over, scale them down as they are being clicked, and scale them back when they are no longer gazed upon. We can specify event names either the _event property or via the __<id> as shown below. The rest of the properties define the setAttribute calls. Notice that the event-set component can have -multiple instances:

    +multiple instances:

    <script id="link" type="text/html">
      <a-entity class="link"
        geometry="primitive: plane; height: 1; width: 1"
        material="shader: flat; src: ${thumb}"
        sound="on: click; src: #click-sound"
        event-set__mouseenter="scale: 1.2 1.2 1"
        event-set__mouseleave="scale: 1 1 1"
        event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"></a-entity>
    </script>

    Remember to add data-src attributes to the link entities to load the full image on click:

    @@ -1352,7 +1352,7 @@

    Writing a Component and +application-specific components. That is covered in Writing a Component and hopefully in later guides.

    Try it out!

    diff --git a/docs/master/guides/building-a-basic-scene.html b/docs/master/guides/building-a-basic-scene.html index cc6887523..e3a5d1873 100644 --- a/docs/master/guides/building-a-basic-scene.html +++ b/docs/master/guides/building-a-basic-scene.html @@ -1195,7 +1195,7 @@

    Let’s start by building a basic A-Frame scene. For this, we will need a basic understanding of HTML. We will learn how to:

      -
    • Add 3D entities (i.e., objects) with primitives
      • +
    • Add 3D entities (i.e., objects) with primitives
    • Transform entities in 3D space with position, rotation, scale
    • Add an environment
    • Add textures
      • @@ -1203,7 +1203,7 @@

    • Add text

    Remix the Basic Guide example on Glitch.

    -
    +

    Starting with HTML

    We start out with a minimal HTML structure:

    <html>
      <head>
        <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
        </a-scene>
      </body>
    </html>
    @@ -1212,18 +1212,18 @@

    before <a-scene> because A-Frame registers custom HTML elements which must be defined before <a-scene> is attached or else <a-scene> will do nothing.

    -

    Next, we include <a-scene> in the <body>. <a-scene> will contain every +

    Next, we include <a-scene> in the <body>. <a-scene> will contain every entity in our scene. <a-scene> handles all of the setup that is required for 3D: setting up WebGL, the canvas, camera, lights, renderer, render loop as well as out of the box WebVR support on platforms such as HTC Vive, Oculus Rift, Samsung GearVR, and smartphones (Google Cardboard). <a-scene> alone takes a lot of load off of us!

    Adding an Entity

    Within our <a-scene>, we attach 3D entities using one of A-Frame’s standard -primitives <a-box>. We can use <a-box> just like a normal HTML element, +primitives <a-box>. We can use <a-box> just like a normal HTML element, defining the tag and using HTML attributes to customize it. Some other examples of primitives that come with A-Frame include <a-cylinder>, <a-plane>, or <a-sphere>.

    -

    Here we define the color <a-box>, see <a-box>‘s documentation for +

    Here we define the color <a-box>, see <a-box>‘s documentation for the more attributes (e.g., width, height, depth).

    boximage Image by Ruben Mueller from vrjump.de

    @@ -1231,13 +1231,13 @@

    <a-entity> with the geometry and -material components:

    +underneath <a-box> is <a-entity> with the geometry and +material components:

    <a-entity id="box" geometry="primitive: box" material="color: red"></a-entity>
    -

    However, because the default camera and the box are positioned at the default +

    However, because the default camera and the box are positioned at the default position at the 0 0 0 origin, we won’t be able to see the box unless we move -it. We can do this by using the position component to transform the +it. We can do this by using the position component to transform the box in 3D space.

    Transforming an Entity in 3D

    Let’s first go over 3D space. A-Frame uses a right-handed coordinate system. With the default camera direction: positive X-axis extends right, positive @@ -1256,7 +1256,7 @@

    To translate, rotate, and scale the box, we can change the -position, rotation, and scale components. +position, rotation, and scale components. Let’s first apply the rotation and scale components:

    <a-scene>
      <a-box color="red" rotation="0 45 45" scale="2 2 2"></a-box>
    </a-scene>
    @@ -1313,7 +1313,7 @@ 

    <a-scene>
      <a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <!-- Out of the box environment! -->
      <a-entity environment="preset: forest; dressingAmount: 500"></a-entity>
    </a-scene>

    Applying an Image Texture

    -

    Make sure you’re serving your HTML using a local server +

    Make sure you’re serving your HTML using a local server for textures to load properly.

    We can apply an image texture to the box with an image, video, or <canvas> @@ -1325,7 +1325,7 @@

    -

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The +

    Using the Asset Management System

    However, we recommend using the asset management system for performance. The asset management system makes it easier for the browser to cache assets (e.g., images, videos, models) and A-Frame will make sure all of the assets are fetched before rendering.

    @@ -1345,7 +1345,7 @@

    Creating a Custom Environment (Optional)

    Previously we had the environment component generate the environment. Though it’s good to know a bit on creating a basic environment for learning purposes.

    -

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. +

    Adding a Background to the Scene

    We can add a background with <a-sky> that surrounds the scene. <a-sky>, which is a material applied to the inside of a large sphere, can be a flat color, a 360° image, or a 360° video. For example, a dark gray background would be:

    @@ -1355,7 +1355,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>
    </a-scene>
    -

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are +

    Adding a Ground

    To add a ground, we can use <a-plane>. By default, planes are oriented parallel to the XY axis. To make it parallel to the ground, we need to orient it along the XZ axis. We can do so by rotating the plane negative 90° on the X-axis.

    @@ -1373,7 +1373,7 @@ 

    <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
      repeat="10 10"></a-plane>
    -

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default +

    Tweaking Lighting

    We can change how the scene is lit by using <a-light>s. By default if we don’t specify any lights, A-Frame adds an ambient light and a directional light. If A-Frame didn’t add lights for us, the scene would be black. Once we add lights of our own, however, the default lighting setup is removed and @@ -1386,7 +1386,7 @@ 

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
        <img id="skyTexture"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
        <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

      <a-sky src="#skyTexture"></a-sky>

      <a-light type="ambient" color="#445451"></a-light>
      <a-light type="point" intensity="2" position="2 4 4"></a-light>
    </a-scene>
    -

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation +

    Adding Animation

    We can add animations to the box using A-Frame’s built-in animation system. Animations interpolate or tween a value over time. We can set the animation component on the entity. Let’s have the box hover up and down to add some motion to the scene.

    @@ -1394,7 +1394,7 @@

    entity’s object3D’s position’s Y axis. +
  • Animate the entity’s object3D’s position’s Y axis.
  • Animate to 2.2 which is 20 centimeters higher.
  • Alternate the dir (direction) of the animation on each repeated cycle of the animation so it goes back and forth.
  • Last for 2000 millisecond dur (duration) on each cycle.
    • @@ -1405,19 +1405,19 @@

    Given that many developers currently do not have proper VR hardware with controllers, we’ll focus this section on using basic mobile and desktop inputs -with the built-in cursor component. The cursor component by default provides +with the built-in cursor component. The cursor component by default provides the ability to “click” on entities by staring or gazing at them on mobile, or on desktop, looking at an entity and click the mouse. But know that the cursor component is just one way to add interactions, things open up if we have access to actual controllers.

    -

    To have a visible cursor fixed to the camera, we place the cursor as a child +

    To have a visible cursor fixed to the camera, we place the cursor as a child of the camera as explained above in Parent and Child Transforms.

    Since we didn’t specifically define a camera, A-Frame included a default camera for us. But since we need to add a cursor as a child of the camera, we will -need to now define <a-camera> containing <a-cursor>:

    +need to now define <a-camera> containing <a-cursor>:

    <a-scene>
      <a-assets>
        <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"
             animation="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true"></a-box>

      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
    </a-scene>
    -

    If we check the documentation of the cursor component that +

    If we check the documentation of the cursor component that <a-cursor> wraps, we see that it emits hover events such as mouseenter, mouseleave as well as click.

    Event Listener Component (Intermediate)

    One way to manually handle the cursor events is to add an event listener with @@ -1425,7 +1425,7 @@

    Animating on Events below.

    In JavaScript, we grab the box with querySelector, use -addEventListener, and then setAttribute +addEventListener, and then setAttribute to make the box grow its scale when its hovered over. Note that A-Frame adds features to setAttribute to work with multi-property components. We can pass a full {x, y, z} object as the second argument.

    @@ -1462,7 +1462,7 @@ 

    <a-scene>
      <!-- ... -->
      <a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
        position="-3 1 -4"></a-sound>
      <!-- ... -->
    </a-scene>
    -

    Adding Text

    A-Frame comes with a text component. There are several ways to render +

    Adding Text

    A-Frame comes with a text component. There are several ways to render text, each with their own advantages and disadvantages. A-Frame comes with an SDF text implementation using three-bmfont-text that is relatively sharp and performant:

    diff --git a/docs/master/guides/building-a-minecraft-demo.html b/docs/master/guides/building-a-minecraft-demo.html index 93843abf8..5822ae0eb 100644 --- a/docs/master/guides/building-a-minecraft-demo.html +++ b/docs/master/guides/building-a-minecraft-demo.html @@ -1196,7 +1196,7 @@

    Let’s build a basic Minecraft (voxel builder) demo that targets room scale VR with controllers (e.g., Quest, Vive, Rift). The example will be minimally usable on mobile and desktop.

    -
    +

    Example Skeleton

    We’ll start off with this skeleton HTML:

    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>

    <body>
      <a-scene>
      </a-scene>
    </body>
    diff --git a/docs/master/introduction/best-practices.html b/docs/master/introduction/best-practices.html index 6d97ec28d..15c43f91e 100644 --- a/docs/master/introduction/best-practices.html +++ b/docs/master/introduction/best-practices.html @@ -1190,7 +1190,7 @@

    -

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and +

    A-Frame

    The core structure of A-Frame is entity-component (ECS). Place and structure application code within purely A-Frame components for reusability, modularity, composability, decoupling, encapsulation, declarativeness, and testability.

    @@ -1207,8 +1207,8 @@

    recommended hardware specifications. -
  • Use the stats component to keep an eye on various metrics (FPS, +
  • Use recommended hardware specifications.
    • +
  • Use the stats component to keep an eye on various metrics (FPS, vertex and face count, geometry and material count, draw calls, number of entities). We want to maximize FPS and minimize everything else.
  • Limit draw calls as much as possible. Each geometry, object, model without @@ -1218,7 +1218,7 @@

    asset management system to browser cache and +
  • Make use of the asset management system to browser cache and preload assets.
  • If using models, look to bake your lights into textures rather than relying on real-time lighting and shadows.
    • @@ -1235,16 +1235,16 @@

    background component instead of a-sky to define a +
  • Use the background component instead of a-sky to define a solid color as the scene background. This prevents the creation of unnecessary geometry.
  • Update position, rotation, scale, and visible at the three.js level (el.object3D.position, el.object3D.rotation, el.object3D.scale, el.object3D.visible) to avoid overhead on .setAttribute.
  • If you need to create, remove and re-create many entities of the same type, -use the pool component to pre-generate and reuse entities. This +use the pool component to pre-generate and reuse entities. This avoids the cost of creating entities on the fly and reduces garbage collection.
    • -
  • When using the animation component, animate values directly +
  • When using the animation component, animate values directly which will skip .setAttribute and animate JS values directly. For example, instead of material.opacity, animate components.material.material.opacity.
    • diff --git a/docs/master/introduction/developing-with-threejs.html b/docs/master/introduction/developing-with-threejs.html index 1dc925bdc..9ac7dc7b3 100644 --- a/docs/master/introduction/developing-with-threejs.html +++ b/docs/master/introduction/developing-with-threejs.html @@ -1220,7 +1220,7 @@

    And every A-Frame entity also has a reference to <a-scene> via .sceneEl:

    document.querySelector('a-entity').sceneEl.object3D;  // THREE.Scene
    -

    From a component, we access the scene through its entity +

    From a component, we access the scene through its entity (i.e., this.el):

    AFRAME.registerComponent('foo', {
      init: function () {
        var scene = this.el.sceneEl.object3D;  // THREE.Scene
      }
    });
    diff --git a/docs/master/introduction/entity-component-system.html b/docs/master/introduction/entity-component-system.html index 66e4aa410..061fa014a 100644 --- a/docs/master/introduction/entity-component-system.html +++ b/docs/master/introduction/entity-component-system.html @@ -1219,20 +1219,20 @@

    A well-known game engine implementing ECS is Unity. Although there are pain points in cross-entity communication, we’ll see how A-Frame, the DOM, and declarative HTML really make ECS shine.

    -
    +

    Concept

    ECS Minecraft

    A basic definition of ECS involves:

      -
    • Entities are container objects into which components can be +
    • Entities are container objects into which components can be attached. Entities are the base of all objects in the scene. Without components, entities neither do nor render anything, similar to empty <div>s.
      • -
    • Components are reusable modules or data containers that can +
    • Components are reusable modules or data containers that can be attached to entities to provide appearance, behavior, and/or functionality. Components are like plug-and-play for objects. All logic is implemented through components, and we define different types of objects by mixing, matching, and configuring components. Like alchemy!
      • -
    • Systems provide global scope, management, and services for +
    • Systems provide global scope, management, and services for classes of components. Systems are often optional, but we can use them to separate logic and data; systems handle the logic, components act as data containers.
      • @@ -1288,8 +1288,8 @@

      Syntax:) separating property names from property values, and a semicolon (;) separating different property declarations:

      <a-entity ${componentName}="${propertyName1}: ${propertyValue1}; ${propertyName2}: ${propertyValue2}">

      -

      For example, we have <a-entity> and attach the geometry, material, -light, and position components with various properties and property values:

      +

      For example, we have <a-entity> and attach the geometry, material, +light, and position components with various properties and property values:

      <a-entity geometry="primitive: sphere; radius: 1.5"
                light="type: point; color: white; intensity: 2"
                material="color: white; shader: flat; src: glow.jpg"
                position="0 0 -5"></a-entity>

      Composition

      From there, we could attach more components to add additional appearance, @@ -1340,7 +1340,7 @@

      write an A-Frame +

      We will later go over in detail how to write an A-Frame component. As a preview, the structure of a basic component may look like:

      AFRAME.registerComponent('foo', {
        schema: {
          bar: {type: 'number'},
          baz: {type: 'string'}
        },

        init: function () {
          // Do something when component first attached.
        },

        update: function () {
          // Do something when component's data is updated.
        },

        remove: function () {
          // Do something when the component or its entity is detached.
        },

        tick: function (time, timeDelta) {
          // Do something on every scene tick or frame.
        }
      });
      @@ -1365,12 +1365,12 @@

      Higher-Order Components

      Components can set other components on the entity, making them a higher-order or higher-level component in abstraction.

      -

      For example, the cursor component sets and builds on top of the -raycaster component. Or the hand-controls -component sets and builds on top of the vive-controls -component and oculus-touch-controls +

      For example, the cursor component sets and builds on top of the +raycaster component. Or the hand-controls +component sets and builds on top of the vive-controls +component and oculus-touch-controls component which in turn build on top of the -tracked-controls component.

      +tracked-controls component.

      Community Component Ecosystem

      Components can be shared into the A-Frame ecosystem for the community to use. The wonderful thing about A-Frame’s ECS is extensibility. An experienced developer can develop a physics system or graphics shader components, and an diff --git a/docs/master/introduction/faq.html b/docs/master/introduction/faq.html index db8157658..a629151c9 100644 --- a/docs/master/introduction/faq.html +++ b/docs/master/introduction/faq.html @@ -1190,7 +1190,7 @@

      -
      +

      How is A-Frame’s performance?

      A-Frame can achieve native-like latency and framerate with proper browsers (e.g., Firefox with WebVR). For example, A-Painter is Tilt @@ -1223,10 +1223,10 @@

      best performance practices and guidelines to get started.

      +best performance practices and guidelines to get started.

      Why is my experience not entering VR or AR mode?

      If you are using A-Frame 1.6.0 or older you probably need to update to the latest release. Browsers are migrating to the WebXR standard and old versions might no longer work.

      You also have to serve your content over HTTPS. The WebXR API won’t be available over HTTP.

      -

      Why does my asset (e.g., image, video, model) not load?

      First, if you are doing local development, make sure you are using a local +

      Why does my asset (e.g., image, video, model) not load?

      First, if you are doing local development, make sure you are using a local server so that asset requests work properly.

      If you are loading the asset from a different domain, make sure that the asset is served with cross-origin resource sharing (CORS) headers. You could @@ -1235,14 +1235,14 @@

      video playback. Simple sample code can be found in the docs. Pay particular attention to the play-on-click component

      -

      Read the Hosting and Publishing guide for more +

      Read the Hosting and Publishing guide for more information.

      Why is the HTML not updating when I check the browser inspector?

      If you open up your browser’s developer tools, you’ll see that the HTML attribute values are empty.

      HTML

      To improve performance, A-Frame does not update the HTML to save on stringification operations. This also means mutation observations will not -fire. Use the debug component or .flushToDOM methods +fire. Use the debug component or .flushToDOM methods if you need to sync to the DOM.

      Why does my video not play?

      Mobile and now desktop browsers have limitations playing inline video.

      Because of an iOS platform restriction in order to get inline video @@ -1276,7 +1276,7 @@

      Which 3D model formats work?

      The ideal format is the GL Transmission Format glTF (.gltf) since glTF is feature-rich, compact, and efficient. glTF focuses on providing a transmission format rather than an editor format and is more interoperable -with web technologies. Read more about glTF and A-Frame’s glTF +with web technologies. Read more about glTF and A-Frame’s glTF component.

      Wavefront (.obj) is also a well-known format but has some limitations like the lack of animation and vertex color support.

      @@ -1335,16 +1335,16 @@

      How is A-Frame different from VRML?

      A-Frame is a JavaScript framework. Unlike VRML, A-Frame is not a 3D file format, markup language, nor a standard. A-Frame embraces the Extensible Web Manifesto. Only look at standardization as winning ideas emerge.

      -

      Technically, A-Frame is an entity-component-system game engine on top of +

      Technically, A-Frame is an entity-component-system game engine on top of three.js. As it is a JavaScript framework, coding is to be expected for more complex applications. Unlike 3D file formats, A-Frame provides power and interactivity via full access to JavaScript, three.js, and Web APIs.

      Does A-Frame support X feature?

      A-Frame ships with a number of components and primitives. Being based on top of -an entity-component-system architecture, if a feature doesn’t exist, you -can write or find a component to enable it. Or if one of +an entity-component-system architecture, if a feature doesn’t exist, you +can write or find a component to enable it. Or if one of the standard components doesn’t fit your use cases, you can copy and modify it.

      -

      Read Where to Find Components for more information.

      +

      Read Where to Find Components for more information.

      Does A-Frame support X library or framework?

      A-Frame is built on top of the DOM so most libraries and frameworks work including:

        @@ -1357,9 +1357,9 @@

        Which headsets, browsers, devices, and platforms does A-Frame support?

        Most of them. Read VR Headsets and WebVR Browsers for more +

        Which headsets, browsers, devices, and platforms does A-Frame support?

        Most of them. Read VR Headsets and WebVR Browsers for more information.

        -

        How can I improve performance?

        Read Best Practices — Performance for more information.

        +

        How can I improve performance?

        Read Best Practices — Performance for more information.

        How can I get in touch with the A-Frame team?

        We try to be responsive and helpful! We love questions, feedback, bug reports, and pull requests:

          @@ -1370,7 +1370,7 @@

          Where is the roadmap?

          The roadmap is on GitHub!

          Do I call it “A-Frame” or “aframe” or “aframevr” or “aFrame”?

          A-Frame!

          -

          Why do my textures render black?

          Phones with Adreno 300 series GPUs are notoriously problematic. Set renderer precision to medium as a workaround. Real fix has to happen at the driver / device level.

          +

          Why do my textures render black?

          Phones with Adreno 300 series GPUs are notoriously problematic. Set renderer precision to medium as a workaround. Real fix has to happen at the driver / device level.

          Why is the gyroscope / magic window mode not working?

          New browser policies require sites to prompt the user for permission before getting access to DeviceMotionEvents. Starting with iOS 13 DeviceMotionEvents are only available for pages served over https. Other browsers will also apply same policies and restrictions. A-Frame now incorporates customizable UI to request the necessary permissions to the user. Make sure to update to A-Frame latest version

          Can I use A-Frame offline or self hosted?

          Using A-Frame online sometimes is not possible or inconvenient, like for instance when traveling or during public events with poor Internet connectivity. A-Frame is mostly self-contained so including the build (aframe.min.js) in your project will be sufficient in many cases. Some specific parts are lazy loaded and only fetched when used. This is for example the case of the fonts for the text component and the 3D models for controllers. In order to make an A-Frame build work either offline or without relying on A-Frame hosting infrastructure (typically cdn.aframe.io), you can monitor network requests on your browser console. This will show precisely what assets are being loaded and thus as required for your specific experience. Fonts can be found via FONT_BASE_URL in the whereas controllers via MODEL_URLS. Both can be modified in the source and included in your own custom build

          Can I load A-Frame as an ES module?

          You can load A-Frame as an ES module using a side effect import. A-Frame will then initialize any <a-scene> in the document. It’s still important to register any components or systems you need before this happens:

          @@ -1390,7 +1390,7 @@

          renderOrder is set on the Object3D or a Group that it is a member of, the specified order will be respected
        • otherwise, opaque objects are rendered furthest to nearest, and transparent objects are rendered in the order they appear in the THREE.js Object tree (in most cases, this is the same as the order they appear in the DOM)

        -

        The renderer system has a sortTransparentObjects property, which can be used to render transparent objects furthest to nearest, rather than in DOM order.

        +

        The renderer system has a sortTransparentObjects property, which can be used to render transparent objects furthest to nearest, rather than in DOM order.

        diff --git a/docs/master/introduction/hosting-and-publishing.html b/docs/master/introduction/hosting-and-publishing.html index 7944b642d..c97e46868 100644 --- a/docs/master/introduction/hosting-and-publishing.html +++ b/docs/master/introduction/hosting-and-publishing.html @@ -1192,7 +1192,7 @@

        This section will show several ways to deploy, host, and publish an A-Frame site and its assets onto the Web for the world to see.

        -
        +

        Publishing a Site

        There are many free services to deploy and host a site. We’ll go over some of the more easy or popular options, but there are certainly other options such @@ -1314,7 +1314,7 @@

        A-Frame Blog.

      Embedding

      If we want to embed an A-Frame scene into the layout of 2D web page, we can use -the embedded component to remove fullscreen styles +the embedded component to remove fullscreen styles and allow us to style the canvas with CSS.

      Note we can only embed one scene at a time into a page. If we need multiple scenes, we can use diff --git a/docs/master/introduction/html-and-primitives.html b/docs/master/introduction/html-and-primitives.html index 4c63e69e9..1ffae77ef 100644 --- a/docs/master/introduction/html-and-primitives.html +++ b/docs/master/introduction/html-and-primitives.html @@ -1192,9 +1192,9 @@

      This section will go over the concepts of A-Frame’s primitive elements and their relation to the entity-component framework. If you’re looking for a guide -on using HTML and primitives, check out the Building a Basic Scene +on using HTML and primitives, check out the Building a Basic Scene guide.

      -
      +

      HTML

      A-Frame is based on top of HTML and the DOM using a polyfill for Custom Elements. HTML is the building block of the Web, providing one of the @@ -1228,7 +1228,7 @@

      component data +
    • Map or proxy HTML attributes to component data

    Primitives are similar to prefabs in Unity. Some literature on the entity-component-system pattern refer to them as assemblages. diff --git a/docs/master/introduction/index.html b/docs/master/introduction/index.html index 90769f081..58e56fe12 100644 --- a/docs/master/introduction/index.html +++ b/docs/master/introduction/index.html @@ -1197,7 +1197,7 @@ 

    <html>
      <head>
        <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
          <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
          <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
          <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
          <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
          <a-sky color="#ECECEC"></a-sky>
        </a-scene>
      </body>
    </html>
    -

    The Installation page provides more options for getting started with A-Frame. +

    The Installation page provides more options for getting started with A-Frame. To get started learning A-Frame, check out A-Frame School for visual step-by-step lessons to complement the documentation.

    What is A-Frame?

    A-Frame

    @@ -1244,7 +1244,7 @@

    Fe web developers, VR enthusiasts, artists, designers, educators, makers, kids.

    electric_plug Entity-Component Architecture: A-Frame is a powerful three.js framework, providing a declarative, composable, reusable -entity-component structure. HTML is just the tip of the iceberg; +entity-component structure. HTML is just the tip of the iceberg; developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL.

    globe_with_meridians Cross-Platform VR: Build VR applications for Vive, @@ -1256,7 +1256,7 @@

    Fe object updates are all done in memory with little garbage and overhead. The most interactive and large scale WebVR applications have been done in A-Frame running smoothly at 90fps.

    -

    mag Visual Inspector: A-Frame provides a handy built-in visual 3D +

    mag Visual Inspector: A-Frame provides a handy built-in visual 3D inspector. Open up any A-Frame scene, hit <ctrl> + <alt> + i or <ctrl> + <option> + i, and fly around to peek under the hood!

    Inspector

    diff --git a/docs/master/introduction/installation.html b/docs/master/introduction/installation.html index 9ae164a21..9b0ec4d29 100644 --- a/docs/master/introduction/installation.html +++ b/docs/master/introduction/installation.html @@ -1193,7 +1193,7 @@

    This installation section offers several ways to get started with A-Frame, although most methods don’t require any actual installation since A-Frame is primarily HTML and JavaScript.

    -
    +

    Code Editors in the Browser

    The fastest way is to start playing from within the browser.

    Remix on Glitch

    Glitch

    diff --git a/docs/master/introduction/interactions-and-controllers.html b/docs/master/introduction/interactions-and-controllers.html index bb053b5fb..7aae183ce 100644 --- a/docs/master/introduction/interactions-and-controllers.html +++ b/docs/master/introduction/interactions-and-controllers.html @@ -1201,9 +1201,9 @@

    interactions. And we can show how these input-based and interaction-based components are built in order to give us the knowledge to build our own interactions. In a sense, learn how to fish rather than being given a fish.

    -
    + -

    Events

    In the 2D Web, input and interactions are handled through browser +

    Events

    In the 2D Web, input and interactions are handled through browser events (e.g., click, mouseenter, mouseleave, touchstart, touchend). Whenever an input-based event happens, the browser will emit an event that we can listen to and handle with @@ -1231,13 +1231,13 @@

    cursor component that provides gaze-based interaction if +comes with a cursor component that provides gaze-based interaction if attached to the camera:

      -
    1. Explicitly define <a-camera> entity. +
    2. Explicitly define <a-camera> entity. Previously, A-Frame was providing the default camera.
      3. -
    3. Add <a-cursor> entity as a child element underneath the camera entity.
      4. -
    4. Optionally, configure the raycaster used by the cursor.
      5. +
    5. Add <a-cursor> entity as a child element underneath the camera entity.
      6. +
    6. Optionally, configure the raycaster used by the cursor.
    <a-scene>
      <a-camera>
        <a-cursor></a-cursor>
        <!-- Or <a-entity cursor></a-entity> -->
      </a-camera>
    </a-scene>
    @@ -1279,7 +1279,7 @@

    A-Frame +and for A-Frame, we prescribe that code be placed within A-Frame components.

    To demonstrate what the event set component does under the hood, let’s have a box change color on hover and on leaving hover with JavaScript:

    @@ -1307,7 +1307,7 @@

    tracked-controls Component

    The tracked-controls component is A-Frame’s base controller +

    tracked-controls Component

    The tracked-controls component is A-Frame’s base controller component that provides the foundation for all of A-Frame’s controller components. The tracked-controls component:

    -

    Hosting Models

    Refer to Hosting and Publishing — Hosting +

    Hosting Models

    Refer to Hosting and Publishing — Hosting Models.

    Modifying Materials

    To modify the material of a model, we need to wait for the model to load, and then modify the three.js meshes created from the model. What happens is an @@ -1241,7 +1241,7 @@ 

    <script>
      AFRAME.registerComponent('modify-materials', {
        init: function () {
          // Wait for model to load.
          this.el.addEventListener('model-loaded', () => {
            // Grab the mesh / scene.
            const obj = this.el.getObject3D('mesh');
            // Go over the submeshes and modify materials we want.
            obj.traverse(node => {
              if (node.name.indexOf('ship') !== -1) {
                node.material.color.set('red');
              }
            });
          });
        }
      });
    </script>

    <a-scene background="color: #ECECEC">
      <a-assets>
        <a-asset-item id="cityModel" src="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf"></a-asset-item>
      </a-assets>
      <a-entity gltf-model="#cityModel" modify-materials></a-entity>
    </a-scene>

    Troubleshooting

    Before anything else, check your console for errors. Common issues related to -CORS can be solved by properly hosting your models and the +CORS can be solved by properly hosting your models and the console will also tell you if your model needs additional files that are missing.

    I Don’t See My Model

    If there are no errors in the console, try scaling your model down. Often times @@ -1283,7 +1283,7 @@

    -

    Testing for Performance

    To get an idea of how our scene is performing, enable the stats component:

    +

    Testing for Performance

    To get an idea of how our scene is performing, enable the stats component:

    <a-scene stats>

    Move around our scene and test different scenarios while keeping an eye on the diff --git a/docs/master/introduction/visual-inspector-and-dev-tools.html b/docs/master/introduction/visual-inspector-and-dev-tools.html index 223cc0add..ae9431777 100644 --- a/docs/master/introduction/visual-inspector-and-dev-tools.html +++ b/docs/master/introduction/visual-inspector-and-dev-tools.html @@ -1205,7 +1205,7 @@

    We’ll go over GUI tools built on top of A-Frame that can be used without code. And touch on other tools that can ease development across multiple machines.

    -
    +

    A-Frame Inspector

    The A-Frame Inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:

    diff --git a/docs/master/introduction/vr-headsets-and-webxr-browsers.html b/docs/master/introduction/vr-headsets-and-webxr-browsers.html index 33616654b..b297c1137 100644 --- a/docs/master/introduction/vr-headsets-and-webxr-browsers.html +++ b/docs/master/introduction/vr-headsets-and-webxr-browsers.html @@ -1190,7 +1190,7 @@

    -
    +

    What is Virtual Reality?

    Virtual reality (VR) is a technology that uses head-mounted headsets with displays to generate the realistic images, sounds, and other sensations to put diff --git a/docs/master/introduction/writing-a-component.html b/docs/master/introduction/writing-a-component.html index 3b1d77d54..9e37ab16e 100644 --- a/docs/master/introduction/writing-a-component.html +++ b/docs/master/introduction/writing-a-component.html @@ -1190,7 +1190,7 @@

    -

    Components of A-Frame’s entity-component framework are JavaScript +

    Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, @@ -1198,7 +1198,7 @@

    components.

    vehicleimage Image by Ruben Mueller from vrjump.de

    -

    This guide will take it pretty slow. We recommend skimming over the Component +

    This guide will take it pretty slow. We recommend skimming over the Component API documentation before going through this guide as that documentation will be more concise. Note that components should be defined before <a-scene> like:

    @@ -1212,12 +1212,12 @@

    Example: hello-world Component

    Let’s start with the most basic component to get a general idea. This component will log a simple message once when the component’s entity is attached using -the .init() handler.

    +the .init() handler.

    Registering the Component with AFRAME.registerComponent

    Components are registered with AFRAME.registerComponent(). We pass the name of the component, which will be used as the HTML attribute name in the component’s representation in the DOM. Then we pass the component definition which is a JavaScript object of methods and properties. Within the definition, we can -define lifecycle handler methods. One of which is .init(), which +define lifecycle handler methods. One of which is .init(), which is called once when the component is first plugged into its entity.

    In the example below, we just have our .init() handler log a simple message.

    AFRAME.registerComponent('hello-world', {
      init: function () {
        console.log('Hello, World!');
      }
    });
    @@ -1271,7 +1271,7 @@

    Lifecycle method handlers. Image by Ruben Mueller from vrjump.de

    To demonstrate this, we’ll have our log component only log whenever its -entity emits an event. First, we’ll add an event property type that +entity emits an event. First, we’ll add an event property type that specifies which event the component should listen on.

    // ...
    schema: {
      event: {type: 'string', default: ''},
      message: {type: 'string', default: 'Hello, World!'},
    },
    // ...
    @@ -1280,7 +1280,7 @@

    add an event listener that will +

    What we want to do is add an event listener that will listen to the event before logging a message. If the event property type is not specified, we’ll just log the message:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      update: function () {
        var data = this.data;  // Component property values.
        var el = this.el;  // Reference to the component's entity.

        if (data.event) {
          // This will log the `message` when the entity emits the `event`.
          el.addEventListener(data.event, function () {
            console.log(data.message);
          });
        } else {
          // `event` not specified, just log the message.
          console.log(data.message);
        }
      }
    });
    @@ -1289,7 +1289,7 @@

    , we need a reference to the function. So +

    But to remove an event listener, we need a reference to the function. So let’s first store the function on this.eventHandlerFn whenever we attach an event listener. When we attach properties to the component via this, they’ll be available throughout all the other lifecycle handlers.

    @@ -1304,13 +1304,13 @@ 

    <a-scene>
      <a-entity log="event: anEvent; message: Hello, Metaverse!"></a-entity>
    </a-scene>
    -

    Let’s have our entity emit the event to test it out:

    +

    Let’s have our entity emit the event to test it out:

    var el = document.querySelector('a-entity');
    el.emit('anEvent');
    // >> "Hello, Metaverse!"

    Now let’s update our event to test the .update() handler:

    var el = document.querySelector('a-entity');
    el.setAttribute('log', {event: 'anotherEvent', message: 'Hello, new event!'});
    el.emit('anotherEvent');
    // >> "Hello, new event!"
    -

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity +

    Handling Component Removal

    Let’s handle the case where the component unplugs from the entity (i.e., .removeAttribute('log')). We can implement the .remove() handler which is called when the component is removed. For the log component, we remove any event listeners the component attached to the entity:

    @@ -1323,7 +1323,7 @@ 

    var el = document.querySelector('a-entity');
    el.removeAttribute('log');
    el.emit('anEvent');
    // >> Nothing should be logged...

    Allowing Multiple Instances of a Component

    Let’s allow having multiple log components attached to the same entity. To do -so, we enable multiple instancing with the .multiple flag. Let’s +so, we enable multiple instancing with the .multiple flag. Let’s set that to true:

    AFRAME.registerComponent('log', {
      schema: {
        event: {type: 'string', default: ''},
        message: {type: 'string', default: 'Hello, World!'}
      },

      multiple: true,

      // ...
    });
    @@ -1340,13 +1340,13 @@

    Example: box Component

    For a less trivial example, let’s find out how we can add 3D objects and affect -the scene graph by writing a component that uses three.js. To get +the scene graph by writing a component that uses three.js. To get the idea, we’ll just make a basic box component that creates a box mesh with both geometry and material.

    boximage Image by Ruben Mueller from vrjump.de

    Note: this is just a 3D equivalent of writing a Hello, World! component. -A-Frame provides geometry and material components if we +A-Frame provides geometry and material components if we actually wanted to make a box in practice.

    Schema and API

    Let’s start with the schema. The schema defines the API of your component. We’ll make the width, height, depth, and color configurable through the @@ -1368,7 +1368,7 @@

    THREE.MeshStandardMaterial, and finally a THREE.Mesh. Then we set the mesh on our entity to add the mesh to the -three.js scene graph using .setObject3D(name, object):

    +three.js scene graph using .setObject3D(name, object):

    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);
      }
    });

    Now let’s handle updates. If the geometry-related properties (i.e., width, diff --git a/docs/master/primitives/a-circle.html b/docs/master/primitives/a-circle.html index 3aeaefca7..494dbb878 100644 --- a/docs/master/primitives/a-circle.html +++ b/docs/master/primitives/a-circle.html @@ -1190,7 +1190,7 @@

    -

    The circle primitive creates circles surfaces using the geometry +

    The circle primitive creates circles surfaces using the geometry component with the type set to circle.

    Example

    <a-scene>
      <a-assets>
        <img id="platform" src="platform.jpg">
      </a-assets>

      <!-- Basic circle. -->
      <a-circle color="#CCC" radius="20"></a-circle>

      <!-- Textured circle parallel to ground. -->
      <a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
    </a-scene>
    diff --git a/docs/master/primitives/a-cubemap.html b/docs/master/primitives/a-cubemap.html index 53252ffb8..f98779b57 100644 --- a/docs/master/primitives/a-cubemap.html +++ b/docs/master/primitives/a-cubemap.html @@ -1191,7 +1191,7 @@

    The cubemap primitive is used to create a CubeTexture environment map from 6 square images.

    -

    This can then be used as an envMap in the material component, or on a probe light.

    +

    This can then be used as an envMap in the material component, or on a probe light.

    Example

    <a-scene>
      <a-assets>
        <!-- Cubemap asset -->
        <a-cubemap id="reflection">
          <img src="milkyway/px.jpg">
          <img src="milkyway/nx.jpg">
          <img src="milkyway/py.jpg">
          <img src="milkyway/ny.jpg">
          <img src="milkyway/pz.jpg">
          <img src="milkyway/nz.jpg">
        </a-cubemap>
      </a-assets>

      <!-- Sphere with reflection. -->
      <a-sphere position="0 1 -2"
                material="envMap:#reflection; metalness:1.0; roughness:0.0">
      </a-sphere>
    </a-scene>

    Attributes

    No attributes. The cubemap is configured by creating 6 child elements beneath it.

    diff --git a/docs/master/primitives/a-cursor.html b/docs/master/primitives/a-cursor.html index 30bf116b1..69c18548a 100644 --- a/docs/master/primitives/a-cursor.html +++ b/docs/master/primitives/a-cursor.html @@ -1194,7 +1194,7 @@

    interactivity with a scene on devices that do not have a hand controller. The default appearance is a ring geometry. The cursor is usually placed as a child of the camera.

    -

    Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

    +

    Read the cursor component documentation for detailed information about how the cursor works and how to use the cursor.

    Example

    <a-scene>
      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>

      <a-box></a-box>
    </a-scene>

    Attributes

    diff --git a/docs/master/primitives/a-gltf-model.html b/docs/master/primitives/a-gltf-model.html index 737a3bef9..5e4d1ba75 100644 --- a/docs/master/primitives/a-gltf-model.html +++ b/docs/master/primitives/a-gltf-model.html @@ -1204,7 +1204,7 @@

    - +
    srcgltf-model.srcgltf-model.src null
    diff --git a/docs/master/primitives/a-obj-model.html b/docs/master/primitives/a-obj-model.html index 02ec5c66a..c8a4d9ad3 100644 --- a/docs/master/primitives/a-obj-model.html +++ b/docs/master/primitives/a-obj-model.html @@ -1192,7 +1192,7 @@

    We recommend glTF for distributing assets in production over the web. Check -out using the glTF model primitive. You can +out using the glTF model primitive. You can either instead export to COLLADA and use the converter or try out the OBJ converter.

    @@ -1219,7 +1219,7 @@

    null -

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    +

    Troubleshooting

    See Introduction → 3D Models → Troubleshooting.

    diff --git a/docs/master/primitives/a-plane.html b/docs/master/primitives/a-plane.html index caf0d10c0..3ea183f62 100644 --- a/docs/master/primitives/a-plane.html +++ b/docs/master/primitives/a-plane.html @@ -1190,7 +1190,7 @@

    -

    The plane primitive creates flat surfaces using the geometry +

    The plane primitive creates flat surfaces using the geometry component with the type set to plane.

    Example

    <a-scene>
      <a-assets>
        <img id="ground" src="ground.jpg">
      </a-assets>

      <!-- Basic plane. -->
      <a-plane color="#CCC" height="20" width="20"></a-plane>

      <!-- Textured plane parallel to ground. -->
      <a-plane src="#ground" height="100" width="100" rotation="-90 0 0"></a-plane>
    </a-scene>
    diff --git a/docs/master/primitives/a-sound.html b/docs/master/primitives/a-sound.html index e06c03338..e94bad3f0 100644 --- a/docs/master/primitives/a-sound.html +++ b/docs/master/primitives/a-sound.html @@ -1190,7 +1190,7 @@

    -

    The sound primitive wraps the sound component.

    +

    The sound primitive wraps the sound component.

    Example

    <a-scene>
      <a-sound src="src: url(click.mp3)" autoplay="true" position="0 2 5"></a-sound>
    </a-scene>

    Attributes

    diff --git a/docs/master/primitives/a-sphere.html b/docs/master/primitives/a-sphere.html index 5c30fcd12..e9ef5c918 100644 --- a/docs/master/primitives/a-sphere.html +++ b/docs/master/primitives/a-sphere.html @@ -1190,7 +1190,7 @@

    -

    The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

    +

    The sphere primitive creates a spherical or polyhedron shapes. It wraps an entity that prescribes the geometry component with its geometric primitive set to sphere.

    Example

    <a-sphere color="yellow" radius="5"></a-sphere>

    Attributes

    diff --git a/docs/master/primitives/a-text.html b/docs/master/primitives/a-text.html index ec43abd85..f4d798488 100644 --- a/docs/master/primitives/a-text.html +++ b/docs/master/primitives/a-text.html @@ -1190,7 +1190,7 @@

    -

    Wraps the text component.

    +

    Wraps the text component.

    Example

    <a-text value="Hello, World!"></a-text>

    Attributes

    diff --git a/docs/master/primitives/a-torus-knot.html b/docs/master/primitives/a-torus-knot.html index e79ecf252..c26798c39 100644 --- a/docs/master/primitives/a-torus-knot.html +++ b/docs/master/primitives/a-torus-knot.html @@ -1190,7 +1190,7 @@

    -

    The torus knot primitive creates pretzel shapes using the geometry +

    The torus knot primitive creates pretzel shapes using the geometry component with the type set to torusKnot.

    Example

    <a-torus-knot color="#B84A39" arc="180" p="2" q="7" radius="5" radius-tubular="0.1"></a-torus-knot>
    diff --git a/docs/master/primitives/a-torus.html b/docs/master/primitives/a-torus.html index c45e3919f..f8b0b305d 100644 --- a/docs/master/primitives/a-torus.html +++ b/docs/master/primitives/a-torus.html @@ -1190,7 +1190,7 @@

    -

    The torus primitive creates donut or tube shapes using the geometry +

    The torus primitive creates donut or tube shapes using the geometry component with the type set to torus.

    Example

    <a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
    diff --git a/docs/master/primitives/a-triangle.html b/docs/master/primitives/a-triangle.html index 8e9cd57fe..f63f3c2c7 100644 --- a/docs/master/primitives/a-triangle.html +++ b/docs/master/primitives/a-triangle.html @@ -1190,7 +1190,7 @@

    -

    The triangle primitive creates triangle surfaces using the geometry +

    The triangle primitive creates triangle surfaces using the geometry component with the type set to triangle.

    Example

    <a-scene>
      <a-assets>
        <img id="platform" src="https://i.imgur.com/mYmmbrp.jpg">
      </a-assets>

      <!-- Basic triangle. -->
      <a-triangle color="#CCC" vertex-c="1 -1 0"></a-triangle>

      <!-- Textured triangle parallel to ground. -->
      <a-triangle src="#platform" rotation="-90 0 0"></a-triangle>
    </a-scene>
    diff --git a/docs/master/primitives/a-videosphere.html b/docs/master/primitives/a-videosphere.html index 77e4a0e87..ddc03125b 100644 --- a/docs/master/primitives/a-videosphere.html +++ b/docs/master/primitives/a-videosphere.html @@ -1197,7 +1197,7 @@

    Ex

    Methods

    More indepth knowledge on the methods to alter video material can be seen over here

    // 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();
    -

    Attributes

    Note that the videosphere primitive inherits common attributes.

    +

    Attributes

    Note that the videosphere primitive inherits common attributes.

    diff --git a/feed.xml b/feed.xml index 9ebfcfc51..678407cab 100644 --- a/feed.xml +++ b/feed.xml @@ -214,7 +214,7 @@ experiences. What started as a little personal project it’s today a community - +

    ?ref_src=twsrc%5Etfw”>April 27, 2020

    @@ -712,7 +712,7 @@ project.

    - +

    ?ref_src=twsrc%5Etfw”>December 15, 2019

    @@ -1666,7 +1666,7 @@ set your location and see constellations above you in real time.

    - +