Skip to content

Commit

Permalink
Update docs with new A-Frame version
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmarcos
dmarcos committed Feb 4, 2022
1 parent 90d70d4 commit 2c4509a
Show file tree
Hide file tree
Showing 14 changed files with 46 additions and 46 deletions.
12 changes: 6 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ and publishing now, remix the starter example on:
```html
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
Expand All @@ -127,7 +127,7 @@ and publishing now, remix the starter example on:
```

With A-Frame's [entity-component
architecture](https://aframe.io/docs/1.2.0/introduction/entity-component-system.html), we can drop in community
architecture](https://aframe.io/docs/1.3.0/introduction/entity-component-system.html), we can drop in community
components from the ecosystem (e.g., ocean, physics) and plug them into our
objects straight from HTML:

Expand All @@ -136,10 +136,10 @@ objects straight from HTML:
```html
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>
<script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
<script src="https://unpkg.com/aframe-gradient-sky@1.2.0/dist/gradientsky.min.js"></script>
<script src="https://unpkg.com/aframe-gradient-sky@1.3.0/dist/gradientsky.min.js"></script>
</head>
<body>
<a-scene>
Expand Down Expand Up @@ -167,11 +167,11 @@ objects straight from HTML:

### Builds

To use the latest stable build of A-Frame, include [`aframe.min.js`](https://aframe.io/releases/1.2.0/aframe.min.js):
To use the latest stable build of A-Frame, include [`aframe.min.js`](https://aframe.io/releases/1.3.0/aframe.min.js):

```js
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
```

Expand Down
4 changes: 2 additions & 2 deletions docs/components/animation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ Accessed as `el.components.animation.<MEMBER>`.

### Controlling Animations using setAttribute

Like any A-Frame component, the animation component can be configured from JavaScript by calling [setAttribute()]( https://aframe.io/docs/1.2.0/introduction/javascript-events-dom-apis.html#updating-a-component-with-setattribute) on an element.
Like any A-Frame component, the animation component can be configured from JavaScript by calling [setAttribute()]( https://aframe.io/docs/1.3.0/introduction/javascript-events-dom-apis.html#updating-a-component-with-setattribute) on an element.

By default, the animation will begin playing immediately (autoplay is true by default).

Expand Down Expand Up @@ -154,7 +154,7 @@ To start an animation by explicitly emitting an event, you can do the following:
el.emit(`startanim001`, null, false);
```

The [third parameter of emit](https://aframe.io/docs/1.2.0/core/entity.html#emit-name-detail-bubbles) set to "false" parameter ensures the event won't bubble up to parents, so that you can target the animation at just one particular element.
The [third parameter of emit](https://aframe.io/docs/1.3.0/core/entity.html#emit-name-detail-bubbles) set to "false" parameter ensures the event won't bubble up to parents, so that you can target the animation at just one particular element.

This assumes that an animation has already been configured to respond to that custom start event, for example like this:

Expand Down
2 changes: 1 addition & 1 deletion docs/components/embedded.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ a-scene {

An inline example of an embedded scene:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>

<style>
#myEmbeddedScene {
Expand Down
2 changes: 1 addition & 1 deletion docs/components/material.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -393,7 +393,7 @@ Let's walk through an [example CodePen][example] with step-by-step commentary.
As always, we need to include the A-Frame script.

```js
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
```

Next, we define any components and shaders we need after the A-Frame
Expand Down
2 changes: 1 addition & 1 deletion docs/components/text.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ Lastly, you should specify the character set used in your HTML by using `<meta>`
<html>
<head>
<meta charset="UTF-8">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/building-a-360-image-gallery.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ need to know the component's npm package name and the path:
<html>
<head>
<title>360° Image Browser</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-template-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-layout-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
Expand Down
4 changes: 2 additions & 2 deletions docs/guides/building-a-basic-scene.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ We start out with a minimal HTML structure:
```html
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
Expand Down Expand Up @@ -228,7 +228,7 @@ First, include the environment component using a script tag after A-Frame:

```html
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
</head>
```
Expand Down
30 changes: 15 additions & 15 deletions docs/guides/building-a-minecraft-demo.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ mobile and desktop.
We'll start off with this skeleton HTML:

```html
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>

<body>
<a-scene>
Expand All @@ -49,7 +49,7 @@ our assets, and create a thin cylinder entity pointing to that texture:
<p data-height="265" data-theme-id="dark" data-slug-hash="MpbXXe" data-default-tab="html,result" data-user="mozvr" data-embed-version="2" data-pen-title="Minecraft VR Demo (Part 1)" data-preview="true" data-editable="true" class="codepen">See the Pen <a href="http://codepen.io/mozvr/pen/MpbXXe/">Minecraft VR Demo (Part 1)</a> by mozvr (<a href="http://codepen.io/mozvr">@mozvr</a>) on <a href="http://codepen.io">CodePen</a>.</p>

```html
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>

<a-scene>
<a-cylinder id="ground" src="https://cdn.aframe.io/a-painter/images/floor.jpg" radius="32" height="0.1"></a-cylinder>
Expand All @@ -58,7 +58,7 @@ our assets, and create a thin cylinder entity pointing to that texture:

### Preloading Assets

[assets]: https://aframe.io/docs/1.2.0/core/asset-management-system.html
[assets]: https://aframe.io/docs/1.3.0/core/asset-management-system.html

Specifying a URL via the `src` attribute will load the texture at runtime.
Since network requests can negatively impact render performance, we can
Expand All @@ -76,7 +76,7 @@ Let's move our ground texture to `<a-assets>` to be preloaded using an
<p data-height="265" data-theme-id="dark" data-slug-hash="LWbrBQ" data-default-tab="html,result" data-user="mozvr" data-embed-version="2" data-pen-title="Minecraft VR Demo (Part 2: Preloading Texture)" data-preview="true" data-editable="true" class="codepen">See the Pen <a href="http://codepen.io/mozvr/pen/LWbrBQ/">Minecraft VR Demo (Part 2: Preloading Texture)</a> by mozvr (<a href="http://codepen.io/mozvr">@mozvr</a>) on <a href="http://codepen.io">CodePen</a>.</p>

```html
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>

<a-scene>
<a-assets>
Expand All @@ -89,7 +89,7 @@ Let's move our ground texture to `<a-assets>` to be preloaded using an

## Adding a Background

[a-sky]: https://aframe.io/docs/1.2.0/primitives/a-sky.html
[a-sky]: https://aframe.io/docs/1.3.0/primitives/a-sky.html
[flickr]: https://www.flickr.com/groups/equirectangular/

[gradient]: https://github.com/zcanter/aframe-gradient-sky
Expand All @@ -112,7 +112,7 @@ to match the ground:
<p data-height="265" data-theme-id="dark" data-slug-hash="PpbaBL" data-default-tab="html,result" data-user="mozvr" data-embed-version="2" data-pen-title="Minecraft VR Demo (Part 3: Adding a Background)" data-preview="true" data-editable="true" class="codepen">See the Pen <a href="http://codepen.io/mozvr/pen/PpbaBL/">Minecraft VR Demo (Part 3: Adding a Background)</a> by mozvr (<a href="http://codepen.io/mozvr">@mozvr</a>) on <a href="http://codepen.io">CodePen</a>.</p>

```html
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>

<a-scene>
<a-assets>
Expand Down Expand Up @@ -140,15 +140,15 @@ from scratch.

### Entity-Component Pattern

[entity]: https://aframe.io/docs/1.2.0/core/entity.html
[entity]: https://aframe.io/docs/1.3.0/core/entity.html

Every single object in an A-Frame scene is [`<a-entity>`][entity], which by itself
doesn't do anything, like an empty `<div>`. We plug in components (**not to be
confused with Web or React Components**) to that entity to provide with
appearance, behavior , and logic.

[geometry]: https://aframe.io/docs/1.2.0/components/geometry.html
[material]: https://aframe.io/docs/1.2.0/components/material.html
[geometry]: https://aframe.io/docs/1.3.0/components/geometry.html
[material]: https://aframe.io/docs/1.3.0/components/material.html

For a box, we attach and configure A-Frame's basic [geometry] and [material]
components. Components are represented as HTML attributes, and component
Expand Down Expand Up @@ -190,7 +190,7 @@ AFRAME.registerComponent('random-color', {
});
```

[js]: https://aframe.io/docs/1.2.0/introduction/javascript-events-dom-apis.html
[js]: https://aframe.io/docs/1.3.0/introduction/javascript-events-dom-apis.html

For the random color component, we want to set a random color on the entity
that this component is attached to. Components have a reference to the entity
Expand Down Expand Up @@ -237,7 +237,7 @@ and include it before the scene:
<p data-height="265" data-theme-id="dark" data-slug-hash="ryWKqy" data-default-tab="html,result" data-user="mozvr" data-embed-version="2" data-pen-title="Minecraft VR Demo (Part 4: Random Color Component)" data-preview="true" data-editable="true" class="codepen">See the Pen <a href="http://codepen.io/mozvr/pen/ryWKqy/">Minecraft VR Demo (Part 4: Random Color Component)</a> by mozvr (<a href="http://codepen.io/mozvr">@mozvr</a>) on <a href="http://codepen.io">CodePen</a>.</p>

```html
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="components/random-color.js"></script>

<a-scene>
Expand Down Expand Up @@ -301,7 +301,7 @@ to describe all the voxels in our scene.

### Mixins

[mixin]: https://aframe.io/docs/1.2.0/core/mixins.html
[mixin]: https://aframe.io/docs/1.3.0/core/mixins.html

We can create [a mixin][mixin] to define a reusable bundle of components.
Instead of `<a-entity>`, which adds an object to the scene, we'll describe it
Expand All @@ -310,7 +310,7 @@ using `<a-mixin>` which can be reused to create voxels like a prefab:
<p data-height="265" data-theme-id="dark" data-slug-hash="OpbEaY" data-default-tab="html,result" data-user="mozvr" data-embed-version="2" data-pen-title="Minecraft VR Demo (Part 5: Mixins)" data-preview="true" data-editable="true" class="codepen">See the Pen <a href="http://codepen.io/mozvr/pen/OpbEaY/">Minecraft VR Demo (Part 5: Mixins)</a> by mozvr (<a href="http://codepen.io/mozvr">@mozvr</a>) on <a href="http://codepen.io">CodePen</a>.</p>

```html
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="components/random-color.js"></script>
<script src="components/snap.js"></script>

Expand Down Expand Up @@ -391,7 +391,7 @@ add the component via a `<script>` tag and just set the `teleport-controls`
component on the controller on the entity:

```html
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-teleport-controls.min.js"></script>

<!-- ... -->
Expand Down Expand Up @@ -428,7 +428,7 @@ that attaches the clicking laser to VR tracked controllers. Like the
`laser-controls` component. This time to the right hand:

```html
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-teleport-controls.min.js"></script>

<!-- ... -->
Expand Down
8 changes: 4 additions & 4 deletions docs/introduction/entity-component-system.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,7 +419,7 @@ Now we can include it into our HTML:
```html
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>
</head>
<body>
Expand All @@ -440,7 +440,7 @@ Now we can include it into our HTML:
```html
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>
</head>
<body>
Expand All @@ -464,11 +464,11 @@ Glitch][glitch].
```html
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-animation-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>
<script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
<script src="https://unpkg.com/aframe-gradient-sky@1.2.0/dist/gradientsky.min.js"></script>
<script src="https://unpkg.com/aframe-gradient-sky@1.3.0/dist/gradientsky.min.js"></script>
</head>
<body>
<a-scene>
Expand Down
2 changes: 1 addition & 1 deletion docs/introduction/faq.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ use of resources, we will need deeper understanding about 3D graphics. See
[release]: https://github.com/aframevr/aframe/releases
[webxr]: https://immersive-web.github.io/webxr/

If you are using A-Frame 1.2.0 or older you probably need to update to the [latest release][release]. Browsers are migrating to the [WebXR standard][webxr] and old versions might no longer work.
If you are using A-Frame 1.3.0 or older you probably need to update to the [latest release][release]. Browsers are migrating to the [WebXR standard][webxr] 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.

Expand Down
6 changes: 3 additions & 3 deletions docs/introduction/html-and-primitives.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ environment, place the camera, etc.
```html
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
Expand Down Expand Up @@ -127,12 +127,12 @@ for [Don McCurdy's
`aframe-physics-system`](https://github.com/n5ro/aframe-physics-system) and attach
the physics components via HTML attributes:

> :warning: **If you are using A-Frame 1.2.0 or later**: [`aframe-physics-system`](https://github.com/donmccurdy/aframe-physics-system) and you're having issues make sure you're no longer using the now deprecated THREE.Geometry. More info on [this GitHub issue](https://github.com/n5ro/aframe-physics-system/issues/187).
> :warning: **If you are using A-Frame 1.3.0 or later**: [`aframe-physics-system`](https://github.com/donmccurdy/aframe-physics-system) and you're having issues make sure you're no longer using the now deprecated THREE.Geometry. More info on [this GitHub issue](https://github.com/n5ro/aframe-physics-system/issues/187).
```html
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-physics-system.min.js"></script>
</head>
<body>
Expand Down
2 changes: 1 addition & 1 deletion docs/introduction/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ free. Alternatively, create an `.html` file and include A-Frame in the
```html
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
Expand Down
8 changes: 4 additions & 4 deletions docs/introduction/installation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,14 +90,14 @@ CDN build:

```html
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
```

If we want to serve it ourselves, we can download the JS build:

<a id="builds-prod" class="btn btn-download" href="https://aframe.io/releases/1.2.0/aframe.min.js" download>Production Version <span>1.2.0</span></a> <em class="install-note">Minified</em>
<a id="builds-dev" class="btn btn-download" href="https://aframe.io/releases/1.2.0/aframe.js" download>Development Version <span>1.2.0</span></a> <em class="install-note">Uncompressed with Source Maps</em>
<a id="builds-prod" class="btn btn-download" href="https://aframe.io/releases/1.3.0/aframe.min.js" download>Production Version <span>1.3.0</span></a> <em class="install-note">Minified</em>
<a id="builds-dev" class="btn btn-download" href="https://aframe.io/releases/1.3.0/aframe.js" download>Development Version <span>1.3.0</span></a> <em class="install-note">Uncompressed with Source Maps</em>

### Install from npm

Expand Down Expand Up @@ -170,7 +170,7 @@ In your `index.html`, adjust as follows:
"
/>
...
<script src="https://cdn.jsdelivr.net/npm/aframe@1.2.0/dist/aframe-master.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe@1.3.0/dist/aframe-master.min.js"></script>
<script id='my-scene' type="text/html">
...your scene goes here...
</script>
Expand Down
8 changes: 4 additions & 4 deletions docs/introduction/interactions-and-controllers.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ If we want to change the color of a box on hover and restore it when no longer
hovering:

```html
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
<body>
<a-scene>
Expand All @@ -157,7 +157,7 @@ ${selector}`. If we want to display a text label when an entity is hovered
over:

```html
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
<body>
<a-scene>
Expand All @@ -180,7 +180,7 @@ properties using A-Frame component dot syntax (i.e.,
`${componentName}.${propertyName}`):

```html
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script>
<body>
<a-scene>
Expand Down Expand Up @@ -213,7 +213,7 @@ 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:

```html
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('change-color-on-hover', {
schema: {
Expand Down

0 comments on commit 2c4509a

Please sign in to comment.