-
-
Notifications
You must be signed in to change notification settings - Fork 4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
40 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -102,7 +102,7 @@ and publishing now, remix the starter example on Glitch: | |
```html | ||
<html> | ||
<head> | ||
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
</head> | ||
<body> | ||
<a-scene> | ||
|
@@ -117,7 +117,7 @@ and publishing now, remix the starter example on Glitch: | |
``` | ||
|
||
With A-Frame's [entity-component | ||
architecture](https://aframe.io/docs/0.8.2/core/), we can drop in community | ||
architecture](https://aframe.io/docs/0.9.0/core/), we can drop in community | ||
components from the ecosystem (e.g., ocean, physics) and plug them into our | ||
objects straight from HTML: | ||
|
||
|
@@ -126,7 +126,7 @@ objects straight from HTML: | |
```html | ||
<html> | ||
<head> | ||
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.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> | ||
|
@@ -158,11 +158,11 @@ objects straight from HTML: | |
|
||
### Builds | ||
|
||
To use the latest stable build of A-Frame, include [`aframe.min.js`](https://aframe.io/releases/0.8.2/aframe.min.js): | ||
To use the latest stable build of A-Frame, include [`aframe.min.js`](https://aframe.io/releases/0.9.0/aframe.min.js): | ||
|
||
```js | ||
<head> | ||
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
</head> | ||
``` | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -160,7 +160,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/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.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> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -26,7 +26,7 @@ mobile and desktop. | |
We'll start off with this skeleton HTML: | ||
|
||
```html | ||
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
|
||
<body> | ||
<a-scene> | ||
|
@@ -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/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.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> | ||
|
@@ -58,7 +58,7 @@ our assets, and create a thin cylinder entity pointing to that texture: | |
|
||
### Preloading Assets | ||
|
||
[assets]: https://aframe.io/docs/0.8.2/core/asset-management-system.html | ||
[assets]: https://aframe.io/docs/0.9.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 | ||
|
@@ -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/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
|
||
<a-scene> | ||
<a-assets> | ||
|
@@ -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/0.8.2/primitives/a-sky.html | ||
[a-sky]: https://aframe.io/docs/0.9.0/primitives/a-sky.html | ||
[flickr]: https://www.flickr.com/groups/equirectangular/ | ||
|
||
[gradient]: https://github.com/zcanter/aframe-gradient-sky | ||
|
@@ -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/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
|
||
<a-scene> | ||
<a-assets> | ||
|
@@ -140,15 +140,15 @@ from scratch. | |
|
||
### Entity-Component Pattern | ||
|
||
[entity]: https://aframe.io/docs/0.8.2/core/entity.html | ||
[entity]: https://aframe.io/docs/0.9.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/0.8.2/components/geometry.html | ||
[material]: https://aframe.io/docs/0.8.2/components/material.html | ||
[geometry]: https://aframe.io/docs/0.9.0/components/geometry.html | ||
[material]: https://aframe.io/docs/0.9.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 | ||
|
@@ -190,7 +190,7 @@ AFRAME.registerComponent('random-color', { | |
}); | ||
``` | ||
|
||
[js]: https://aframe.io/docs/0.8.2/guides/using-javascript-and-dom-apis.html | ||
[js]: https://aframe.io/docs/0.9.0/guides/using-javascript-and-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 | ||
|
@@ -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/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
<script src="components/random-color.js"></script> | ||
|
||
<a-scene> | ||
|
@@ -300,7 +300,7 @@ to describe all the voxels in our scene. | |
|
||
### Mixins | ||
|
||
[mixin]: https://aframe.io/docs/0.8.2/core/mixins.html | ||
[mixin]: https://aframe.io/docs/0.9.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 | ||
|
@@ -309,7 +309,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/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
<script src="components/random-color.js"></script> | ||
<script src="components/snap.js"></script> | ||
|
||
|
@@ -392,7 +392,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/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
<script src="https://unpkg.com/[email protected]/dist/aframe-teleport-controls.min.js"></script> | ||
|
||
<!-- ... --> | ||
|
@@ -429,7 +429,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/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
<script src="https://unpkg.com/[email protected]/dist/aframe-teleport-controls.min.js"></script> | ||
|
||
<!-- ... --> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -429,7 +429,7 @@ Now we can include it into our HTML: | |
```html | ||
<html> | ||
<head> | ||
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
<script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script> | ||
</head> | ||
<body> | ||
|
@@ -450,7 +450,7 @@ Now we can include it into our HTML: | |
```html | ||
<html> | ||
<head> | ||
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
<script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script> | ||
</head> | ||
<body> | ||
|
@@ -474,7 +474,7 @@ Glitch][glitch]. | |
```html | ||
<html> | ||
<head> | ||
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.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> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -59,7 +59,7 @@ environment, place the camera, etc. | |
```html | ||
<html> | ||
<head> | ||
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
</head> | ||
<body> | ||
<a-scene> | ||
|
@@ -130,7 +130,7 @@ the physics components via HTML attributes: | |
```html | ||
<html> | ||
<head> | ||
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
<script src="https://unpkg.com/[email protected]/dist/aframe-physics-system.min.js"></script> | ||
</head> | ||
<body> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script> | ||
<body> | ||
<a-scene> | ||
|
@@ -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/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script> | ||
<body> | ||
<a-scene> | ||
|
@@ -180,7 +180,7 @@ properties using A-Frame component dot syntax (i.e., | |
`${componentName}.${propertyName}`): | ||
|
||
```html | ||
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
<script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script> | ||
<body> | ||
<a-scene> | ||
|
@@ -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/0.8.2/aframe.min.js"></script> | ||
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> | ||
<script> | ||
AFRAME.registerComponent('change-color-on-hover', { | ||
schema: { | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters