Tutorial by Examples

Ambient lights globally affect all entities in the scene. The color and intensity properties define ambient lights. Additionally, position, rotation, and scale have no effect on ambient lights. We recommend to have some form of ambient light such that shadowed areas are not fully black and to mimic...

Directional lights are like a light source that is 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...

Hemisphere lights are like an ambient light, but with two different colors, 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; groun...

Point lights, unlike directional lights, are omni-directional and affect materials depending on their position and distance. Point likes are like 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: ...

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

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 we add any lights, A-Frame removes the default lights from the scene. <!-- Default lighting injected by...