We can change how the scene is lit by using the <a-light> primitive. By default, if we don’t specify any lights, A-Frame adds a light source. If A-Frame didn’t add lights for us, the default scene would be black.

Once we add lights of our own, however, the default lighting setup is removed and replaced with our setup.

ambient lights are applied to all entities in the scene. Think of it as the color of the sunlight in your scene (it doesn’t have to be yellow!). Below, we’re adding an ambient light that has a slight-blue-green-hue:

<a-scene> <a-light type="ambient" color="#445451"></a-light> </a-scene>

The other type of light in a scene is the "point" light.

Point lights are like light bulbs; we can position them around the scene, and the effect of the point light on an entity depends on its distance to the entity:

<a-scene> <a-light type="point" intensity="2" position="2 4 4"></a-light> </a-scene>
  • The intensity of the light. The default is 1.
  • The position component is the location of the point light.

Check out the <a-light> documentation for more info.



Scroll down in the code editor and add a point light that has:

  • intensity of "2"
  • position of "2 4 4"

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?