It is important to understand the differences of these lights.

By default, A-Frame scenes always shows a default lighting, a mixture of ambient and a directional light. Of course, it is possible to deactivate the default light. When we add any lights by code, A-Frame removes automatically the default lights from the scene.

Disable default lighting

The attribute

light="defaultLightsEnabled: false"

in the a-scene tag disables the standard light:

<a-scene light="defaultLightsEnabled: false">
  <!-- ... -->
</a-scene>

Default lights

A-Frame uses the following standard light:

<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>

Tags for the light

The lights can be defined with with the <a-light> or the <a-entity> Tag:

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

Preparation

It is recommended to prepare the scene before placing the light:

<a-scene>
   <a-camera zoom="1" user-height="1" position="0 0 3"></a-camera>
   <a-box position="0 0 0" rotation="0 45 0" color="#FF0000"></a-box>
   <a-plane id="myPlane" position="0 -.5 0" rotation="-90 0 0" width="2" height="2" color="#FFFF00"></a-plane>
</a-scene>

The red box with the standard dimensions of 1 is placed at the origin, it is rotated by 45 degrees in the Y axis. The horizontal yellow plane is below the box and has a dimension of 2.

The first picture shows the standard lights, the second picture uses the attribute light=”defaultLightsEnabled: false”.

Important points to remember

• A-Frame supports different kind of lights: ambient, directional, hemisphere, point and spot.
• When we add any lights by code, A-Frame removes automatically the default lights from the scene.
• The lights can be defined with with the <a-light> or the <a-entity> Tag.