light

Note: This documentation is for the old 0.3.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

The light component defines the entity as a source of light. Light affects all materials that have not specified a flat shading model with shader: flat. Note that lights are computationally expensive and the number of lights in a scene should be limited.

<a-entity light="color: #AFA; intensity: 1.5" position="-1 1 0"></a-entity>

By default, A-Frame scenes inject default lighting, an ambient light and a directional light. These default lights are visible in the DOM with the data-aframe-default-light attribute. Whenever any lights are added, the default lights are removed from the scene.

<!-- Default lighting injected by A-Frame. -->
<a-entity light="type: ambient; color: #BBB"></a-entity>
<a-entity light="type: directional; color: #FFF; intensity: 0.6" position="-0.5 1 1"></a-entity>

Properties

We will go through the different types of lights and their respective properties one by one.

Ambient

Ambient lights are applied to all entities in the scene globally. They are defined by the color and intensity properties. Additionally, position, rotation, and scale have no effect on ambient lights.

It is recommended to have some form of ambient light such that shadowed areas are not completely black and to mimic indirect lighting.

<a-entity light="type: ambient; color: #CCC"></a-entity>

Directional

Directional lights can be thought of as a light source infinitely far away, but shining from a specific direction, like the sun. Thus, absolute position do not have an effect on the intensity of the light on an entity. We can specify the direction using the position component.

The example below creates a light source shining from the upper-left at a 45-degree angle. Note that because only the vector matters, position="-100 100 0" and position="-1 1 0" are equivalent.

<a-entity light="type: directional; color: #EEE; intensity: 0.5" position="-1 1 0"></a-entity>

It is also possible to specify the direction of the directional light with it’s orientation by creating a child entity it targets. for example pointing down it’s -Z axis:

<a-light type="directional" position="0 0 0" rotation="-90 0 0" target="#directionaltarget">
	<a-entity id="directionaltarget" position="0 0 -1"></a-entity>
</a-light>

Hemisphere

Hemisphere lights can be thought of as an ambient light, but with two colors of light, one from above (color) and one from below (groundColor). This can be useful for scenes with two distinct lighting colors (e.g., a grassy field under a gray sky).

<a-entity light="type: hemisphere; color: #33C; groundColor: #3C3; intensity: 2"></a-entity>

Point

Point lights, unlike directional lights, are omni-directional and affect materials depending on their position and distance. They can be thought of as a light bulb. The closer the light bulb gets to an object, the greater the object is lit.

<a-entity light="type: point; intensity: 0.75; distance: 50; decay: 2"
          position="0 10 10"></a-entity>

Spot

Spot lights are like point lights in the sense that they affect materials depending on its position and distance, but spot lights are not omni-directional. They mainly cast light in one direction, like the Bat-Signal.

<a-entity light="type: spot; angle: 45"></a-entity>