...

/

Lighting in VR

Lighting in VR

Learn about different types of lights and how to use them to illuminate the virtual environment in A-Frame.

Light is an essential part of our lives. Colors are visible to the human eye when light hits the surface of objects around us. It plays a significant role in how we perceive and experience an environment. Having optimal lighting conditions can enhance the overall look and feel of an environment and, therefore, our mood.

In this lesson, we’ll understand lighting and its types and how to use them in different scenes.

Default lighting

By default, there’s directional and ambient lighting in the scene with the parameters shown below:

Press + to interact
<!-- Default lighting in 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>

Adding a light to our scene

To add light to our A-Frame scene, we’ll need to use the <a-light> primitive. Here’s an example:

Press + to interact
<a-scene>
<a-light
type="point"
color="#FFF"
intensity="1"
position="0 3 -5"></a-light>
</a-scene>

In this example, we’re adding a point light to the scene. The color attribute sets the color of the light and the intensity attribute sets the strength/brightness of the light.

Light types

A-Frame supports four types of lights: ambient, directional, spot, and point. Here’s an overview of each:

Ambient light

A good lighting design is all about layers. Different layers are employed to define the overall environment. We need to blend different light sources into the space to create contrast and accentuate colors and textures. Ambient light is the base layer of light in any space. The main purpose of ambient lighting is overall illumination of the room. In A-Frame, ambient light is a type of light source that simulates the overall lighting of a scene without creating any visible shadows. It’s also known as “global illumination.”

Press + to interact
...