@@ -26,7 +26,7 @@ mobile and desktop.
26
26
We'll start off with this skeleton HTML:
27
27
28
28
``` html
29
- <script src =" https://aframe.io/releases/0.8.2 /aframe.min.js" ></script >
29
+ <script src =" https://aframe.io/releases/0.9.0 /aframe.min.js" ></script >
30
30
31
31
<body >
32
32
<a-scene >
@@ -49,7 +49,7 @@ our assets, and create a thin cylinder entity pointing to that texture:
49
49
<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 >
50
50
51
51
``` html
52
- <script src =" https://aframe.io/releases/0.8.2 /aframe.min.js" ></script >
52
+ <script src =" https://aframe.io/releases/0.9.0 /aframe.min.js" ></script >
53
53
54
54
<a-scene >
55
55
<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:
58
58
59
59
### Preloading Assets
60
60
61
- [ assets ] : https://aframe.io/docs/0.8.2 /core/asset-management-system.html
61
+ [ assets ] : https://aframe.io/docs/0.9.0 /core/asset-management-system.html
62
62
63
63
Specifying a URL via the ` src ` attribute will load the texture at runtime.
64
64
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
76
76
<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 >
77
77
78
78
``` html
79
- <script src =" https://aframe.io/releases/0.8.2 /aframe.min.js" ></script >
79
+ <script src =" https://aframe.io/releases/0.9.0 /aframe.min.js" ></script >
80
80
81
81
<a-scene >
82
82
<a-assets >
@@ -89,7 +89,7 @@ Let's move our ground texture to `<a-assets>` to be preloaded using an
89
89
90
90
## Adding a Background
91
91
92
- [ a-sky ] : https://aframe.io/docs/0.8.2 /primitives/a-sky.html
92
+ [ a-sky ] : https://aframe.io/docs/0.9.0 /primitives/a-sky.html
93
93
[ flickr ] : https://www.flickr.com/groups/equirectangular/
94
94
95
95
[ gradient ] : https://github.com/zcanter/aframe-gradient-sky
@@ -112,7 +112,7 @@ to match the ground:
112
112
<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 >
113
113
114
114
``` html
115
- <script src =" https://aframe.io/releases/0.8.2 /aframe.min.js" ></script >
115
+ <script src =" https://aframe.io/releases/0.9.0 /aframe.min.js" ></script >
116
116
117
117
<a-scene >
118
118
<a-assets >
@@ -140,15 +140,15 @@ from scratch.
140
140
141
141
### Entity-Component Pattern
142
142
143
- [ entity ] : https://aframe.io/docs/0.8.2 /core/entity.html
143
+ [ entity ] : https://aframe.io/docs/0.9.0 /core/entity.html
144
144
145
145
Every single object in an A-Frame scene is [ ` <a-entity> ` ] [ entity ] , which by itself
146
146
doesn't do anything, like an empty ` <div> ` . We plug in components (** not to be
147
147
confused with Web or React Components** ) to that entity to provide with
148
148
appearance, behavior , and logic.
149
149
150
- [ geometry ] : https://aframe.io/docs/0.8.2 /components/geometry.html
151
- [ material ] : https://aframe.io/docs/0.8.2 /components/material.html
150
+ [ geometry ] : https://aframe.io/docs/0.9.0 /components/geometry.html
151
+ [ material ] : https://aframe.io/docs/0.9.0 /components/material.html
152
152
153
153
For a box, we attach and configure A-Frame's basic [ geometry] and [ material]
154
154
components. Components are represented as HTML attributes, and component
@@ -190,7 +190,7 @@ AFRAME.registerComponent('random-color', {
190
190
});
191
191
```
192
192
193
- [ js ] : https://aframe.io/docs/0.8.2 /guides/using-javascript-and-dom-apis.html
193
+ [ js ] : https://aframe.io/docs/0.9.0 /guides/using-javascript-and-dom-apis.html
194
194
195
195
For the random color component, we want to set a random color on the entity
196
196
that this component is attached to. Components have a reference to the entity
@@ -237,7 +237,7 @@ and include it before the scene:
237
237
<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 >
238
238
239
239
``` html
240
- <script src =" https://aframe.io/releases/0.8.2 /aframe.min.js" ></script >
240
+ <script src =" https://aframe.io/releases/0.9.0 /aframe.min.js" ></script >
241
241
<script src =" components/random-color.js" ></script >
242
242
243
243
<a-scene >
@@ -300,7 +300,7 @@ to describe all the voxels in our scene.
300
300
301
301
### Mixins
302
302
303
- [ mixin ] : https://aframe.io/docs/0.8.2 /core/mixins.html
303
+ [ mixin ] : https://aframe.io/docs/0.9.0 /core/mixins.html
304
304
305
305
We can create [ a mixin] [ mixin ] to define a reusable bundle of components.
306
306
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:
309
309
<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 >
310
310
311
311
``` html
312
- <script src =" https://aframe.io/releases/0.8.2 /aframe.min.js" ></script >
312
+ <script src =" https://aframe.io/releases/0.9.0 /aframe.min.js" ></script >
313
313
<script src =" components/random-color.js" ></script >
314
314
<script src =" components/snap.js" ></script >
315
315
@@ -392,7 +392,7 @@ add the component via a `<script>` tag and just set the `teleport-controls`
392
392
component on the controller on the entity:
393
393
394
394
``` html
395
- <script src =" https://aframe.io/releases/0.8.2 /aframe.min.js" ></script >
395
+ <script src =" https://aframe.io/releases/0.9.0 /aframe.min.js" ></script >
396
396
<script src =" https://unpkg.com/aframe-teleport-controls@0.2.x/dist/aframe-teleport-controls.min.js" ></script >
397
397
398
398
<!-- ... -->
@@ -429,7 +429,7 @@ that attaches the clicking laser to VR tracked controllers. Like the
429
429
` laser-controls ` component. This time to the right hand:
430
430
431
431
``` html
432
- <script src =" https://aframe.io/releases/0.8.2 /aframe.min.js" ></script >
432
+ <script src =" https://aframe.io/releases/0.9.0 /aframe.min.js" ></script >
433
433
<script src =" https://unpkg.com/aframe-teleport-controls@0.2.x/dist/aframe-teleport-controls.min.js" ></script >
434
434
435
435
<!-- ... -->
0 commit comments