Scene

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.

<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

Table of Contents

Example

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

Properties

NameDescription
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.
object3DTHREE.Scene object.
rendererActive THREE.WebGLRenderer.
renderStartedWhether scene is rendering.
effectRenderer for VR created by passing active renderer into THREE.VREffect.
systemsInstantiated systems.
timeGlobal uptime of scene in seconds.

Methods

NameDescription
enterVRSwitch to stereo render and push content to the headset. Needs to be called within a user-generated event handler like click. the first time a page enters VR.
exitVRSwitch to mono renderer and stops presenting content on the headset.
reloadRevert the scene to its original state.

Events

NameDescription
enter-vrUser has entered VR and headset started presenting content.
exit-vrUser has exited VR and headset stopped presenting content.
loadedAll nodes have loaded.
renderstartRender loop has started.

Scene Components

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:

Running Content Scripts on the Scene

The recommended way is to write a component, and attach it to the scene element. The scene and its children will be initialized before this component.

AFRAME.registerComponent('do-something', {
init: function () {
var sceneEl = this.el;
}
});
<a-scene do-something></a-scene>

If for some particular reason you prefer not to write a dedicated component you need to wait for the scene to finish initializing and attaching:

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