reflection

NOTE: This version of the documentation tracks unstable development happening on A-Frame’s master branch. If you wish to try it out, grab the unstable build. Otherwise, head to the documentation for the current 1.5.0 version

The reflection component generates a default environment cube map for all materials, this is useful in case you find GLB models end up too dark or reflective materials don’t look right because they are not reflecting the environment this will provide a default reflective environment.

Scene Lighting and Lighting Estimation

The reflection component will generate an environment map from your surroundings using WebXR Lighting estimation in Augmented Reality if it is available.

During this it will also take control of your scene’s main directional light to ensure it’s direction and color matches that of the rest of the environment. This works really well for your scene’s shadows. It will also create a probe light to match the lighting of the real world. So you should turn off any additional global scene lights, such as other directional lights, hemisphere lights or ambient lights, when the user enters AR. You can do this with the hide-on-enter-ar component.

Once the user leaves AR this light may have a different color, intensity and position than when they entered AR as it has been altered by the lighting estimation.

Example

The example below sets the reflection color to red and use lighting estimation for AR.

<a-scene reflection="directionalLight:a-light#dirlight;"></a-scene>
	<a-light id="dirlight" intensity="1" light="castShadow:true;type:directional" position="1 1 1"></a-light>

Properties