Skip to content

Commit ad425c2

Browse files
committed
[docs] update scene docs
1 parent d99357d commit ad425c2

File tree

1 file changed

+38
-12
lines changed

1 file changed

+38
-12
lines changed

‎docs/core/scene.md‎

Lines changed: 38 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ parent_section: core
66
order: 5
77
---
88

9+
[entity]: ./entity.md
10+
911
A scene is represented by the `<a-scene>` element. The scene is the global root
1012
object, and all [entities][entity] are contained within the scene.
1113

@@ -14,6 +16,13 @@ properties, its methods, the ability to attach components, and the behavior to
1416
wait for all of its child nodes (e.g., `<a-assets>` and `<a-entity>`) to load
1517
before kicking off the render loop.
1618

19+
`<a-scene>` handles all of the three.js and WebVR boilerplate is handled for us:
20+
21+
- Set up canvas, renderer, render loop
22+
- Default camera and lights
23+
- Set up webvr-polyfill, VREffect
24+
- Add UI to Enter VR that calls WebVR API
25+
1726
<!--toc-->
1827

1928
## Example
@@ -30,6 +39,9 @@ before kicking off the render loop.
3039

3140
## Properties
3241

42+
[scene]: http://threejs.org/docs/#Reference/Scenes/Scene
43+
[systems]: ../core/systems.md
44+
3345
| Name | Description |
3446
|---------------|---------------------------------------------------------------------------|
3547
| behaviors | Array of components with tick methods that will be run on every frame. |
@@ -65,20 +77,28 @@ before kicking off the render loop.
6577
Components can be attached to the scene as well as entities:
6678

6779
```html
68-
<a-scene canvas="canvas: #my-canvas" fog stats>
80+
<a-scene fog stats>
6981
```
7082

83+
[embedded]: ../components/embedded.md
84+
[fog]: ../components/fog.md
85+
[keyboard-shortcuts]: ../components/keyboard-shortcuts.md
86+
[inspector]: ../components/inspector.md
87+
[stats]: ../components/stats.md
88+
[vr-mode-ui]: ../components/vr-mode-ui.md
89+
7190
A-Frame ships with a few components to configure the scene:
7291

73-
- [canvas][canvas] - Configure which canvas to render to, or the width/height of the injected canvas.
74-
- [fog][fog] - Scene fog.
92+
- [embedded][embedded] - Remove fullscreen styles from the canvas.
93+
- [fog][fog] - Add fog.
7594
- [keyboard-shortcuts][keyboard-shortcuts] - Toggle keyboard shortcuts.
95+
- [inspector][inspector] - Inject the A-Frame Inspector.
7696
- [stats][stats] - Toggle performance stats.
7797
- [vr-mode-ui][vr-mode-ui] - Toggle UI for entering and exiting VR.
7898

7999
## Running Content Scripts on the Scene
80100

81-
When running JavaScript on the scene, wait for it to finish loading first:
101+
We usually need to wait for the scene to finish initializing and attaching:
82102

83103
```js
84104
var scene = document.querySelector('a-scene');
@@ -95,11 +115,17 @@ function run () {
95115
}
96116
```
97117

98-
[canvas]: ../components/canvas.md
99-
[entity]: ./entity.md
100-
[fog]: ../components/fog.md
101-
[keyboard-shortcuts]: ../components/keyboard-shortcuts.md
102-
[scene]: http://threejs.org/docs/#Reference/Scenes/Scene
103-
[stats]: ../components/stats.md
104-
[systems]: ../core/systems.md
105-
[vr-mode-ui]: ../components/vr-mode-ui.md
118+
But the recommended way is to write a component. When a component initializes,
119+
it is ensured that everything is attached and ready:
120+
121+
```js
122+
AFRAME.registerComponent('do-something', {
123+
init: function () {
124+
var sceneEl = this.el;
125+
}
126+
});
127+
```
128+
129+
```html
130+
<a-scene do-something></a-scene>
131+
```

0 commit comments

Comments
 (0)