Note: This documentation is for the old 0.3.0 version of A-Frame. Check out the documentation for the current 0.8.0 version
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-entity>) to load
before kicking off the render loop.
<a-scene> handles all of the three.js and WebVR boilerplate for us:
- Set up canvas, renderer, render loop
- Default camera and lights
- Set up webvr-polyfill, VREffect
- Add UI to Enter VR that calls WebVR API
|behaviors||Array of components with tick methods that will be run on every frame.|
|camera||Active three.js camera.|
|canvas||Reference to the canvas element.|
|isMobile||Whether or not environment is detected to be mobile.|
|renderStarted||Whether scene is rendering.|
|effect||Renderer for VR created by passing active renderer into
|time||Global uptime of scene in seconds.|
|enterVR||Switch to stereo render and push content to the headset. Needs to be called within a user-generated event handler like
|exitVR||Switch to mono renderer and stops presenting content on the headset.|
|reload||Revert the scene to its original state.|
|enter-vr||User has entered VR and headset started presenting content.|
|exit-vr||User has exited VR and headset stopped presenting content.|
|loaded||All nodes have loaded.|
|renderstart||Render loop has started.|
Components can be attached to the scene as well as entities:
<a-scene fog stats>
A-Frame ships with a few components to configure the scene:
- 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.
We usually need to wait for the scene to finish initializing and attaching:
var scene = document.querySelector('a-scene');
But the recommended way is to write a component. When a component initializes, it is ensured that everything is attached and ready: