Note: This documentation is for the old 0.2.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.
|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.|
|renderer||Active renderer, one of
|stereoRenderer||Renderer for VR created by passing the
|time||Global uptime of scene in seconds.|
|enterVR||Switch to stereo renderer and enter fullscreen. Needs to be called within a user-generated event handler like
|exitVR||Switch to mono renderer and exit fullscreen.|
|reload||Revert the scene to its original state.|
|enter-vr||User has entered VR and fullscreen.|
|exit-vr||User has exited VR and fullscreen.|
|loaded||All nodes have loaded.|
|render-start||Render loop has started.|
Components can be attached to the scene as well as entities:
<a-scene canvas="canvas: #my-canvas" fog stats>
A-Frame ships with a few components to configure the scene:
- canvas - Configure which canvas to render to, or the width/height of the injected canvas.
- fog - Scene fog.
- keyboard-shortcuts - Toggle keyboard shortcuts.
- stats - Toggle performance stats.
- vr-mode-ui - Toggle UI for entering and exiting VR.
var scene = document.querySelector('a-scene');