Introduction to Light
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
|
1 |
light="defaultLightsEnabled: false" |
in the a-scene tag disables the standard light:
|
1 2 3 |
<a-scene light="defaultLightsEnabled: false"> <!-- ... --> </a-scene> |
Default lights
A-Frame uses the following standard light:
|
1 2 |
<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:
|
1 2 |
<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:
|
1 2 3 4 5 |
<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.