Note: This documentation is for the old 0.2.0 version of A-Frame. Check out the documentation for the current 0.5.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-assets> and <a-entity>) to load before kicking off the render loop.


<img id="texture" src="texture.png">
<a-box src="#texture"></a-box>


behaviorsArray of components with tick methods that will be run on every frame.
cameraActive three.js camera.
canvasReference to the canvas element.
isMobileWhether or not environment is detected to be mobile.
monoRendererInstance of THREE.WebGlRenderer.
object3DTHREE.Scene object.
rendererActive renderer, one of monoRenderer or stereoRenderer.
stereoRendererRenderer for VR created by passing the monoRenderer into THREE.VREffect.
systemsInstantiated systems.
timeGlobal uptime of scene in seconds.


enterVRSwitch to stereo renderer and enter fullscreen. Needs to be called within a user-generated event handler like click.
exitVRSwitch to mono renderer and exit fullscreen.
reloadRevert the scene to its original state.


enter-vrUser has entered VR and fullscreen.
exit-vrUser has exited VR and fullscreen.
loadedAll nodes have loaded.
render-startRender loop has started.

Scene Components

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.

Running Content Scripts on the Scene

When running JavaScript on the scene, wait for it to finish loading first:

var scene = document.querySelector('a-scene');
if (scene.hasLoaded) {
} else {
scene.addEventListener('loaded', run);
function run () {
var entity = scene.querySelector('a-entity');
entity.setAttribute('material', 'color', 'red');