Get a fresh and new environment for your A-Frame demos and experiments with the aframe-environment component!
Just include the aframe-environment-component.min.js component in your html file, add an
<a-entity environment></a-entity> to your
<a-scene>, and voila!
<html> <head> <script src="path/to/aframe.js"></script> <script src="path/to/aframe-environment-component.js"></script> </head> <body> <a-scene> <a-entity environment><a-entity> </a-scene> </body> </html>
The component generates a new environment with presets for lights and geometry. These presets can be easily customized by using the inspector (
ctrl + alt + i) and tweaking the individual values until you find the look you like. Presets are a combination of property values that define a particular style, they are a starting point that you can later customize:
<a-entity environment="preset: goldmine; sunPosition: 1 5 -2; groundColor: #742"><a-entity>
You can view and try all the presets from the aframe-environment-component example page.
And of course, the component is fully customizable without a preset:
<a-entity environment="skyType: gradient; skyColor: #1d7444; horizonColor: #7ae0e0; groundTexture: checkerboard; groundColor: #523c60; groundColor2: #544264; dressing: cubes; dressingAmount: 15; dressingColor: #7c5c45"></a-entity>
TIP: If you are using the inspector and are happy with the look of your environment, open your browser's dev tools (F12) and copy the latest parameters from the console.
Customizing your environment
The environment component defines four different aspects of the scene: lighting, sky, ground terrain and dressing objects.
Lighting and mood
The lighting in your scene is easily adjusted by changing the
sunPosition property. Scene objects will subtly receive a bounce light from the ground, and the color of the fog will also change to match the sky color at the horizon.
To fully control the lighting of the scene, you can disable the environment lights with
lighting: none, and you can set
lighting: point if you want a point light instead of a distant light for the sun.
Add realism to your scene by adding shadows toggling on the
shadow parameter and adding the
shadow component on objects that should cast shadows onto the ground. Learn more about A-Frame shadows.
Sky and atmosphere
The 200m radius sky dome can have a basic color, a top-down gradient, or a realistic looking atmospheric look by using
skyType: atmosphere sky type. Lowering the sun near or below the horizon will give you a starry night sky.
The ground is a flat subdivided plane that can be deformed to various different terrain patterns like hills, canyons, or spikes. The appearance can also be customized by its texture and colors.
The center play area where the player is initially positioned is always flat, so nobody will get buried ;)
grid property will add a grid texture to the ground and can be adjusted to different colors and patterns.
A sky and ground with nothing more could be a little too simple sometimes. The environment component includes many families of objects that can be used to spice up your scene, including cubes, pyramids, towers, mushrooms and more. Among other parameters, you can adjust their variation using
dressingVariance, or the ratio of objects that will be inside or outside the play area with
All dressing objects share the same material and are all merged in one single geometry for better performance.
To see the full list of parameters of the component, check out GitHub's aframe-environment-component repository.
Help make this component better
We could use your help!
- File github issues
- Create a new preset
- Share your presets! So anyone can copy/paste and even try live
- Create new dressing geometries
- Create new procedural textures
- Create new ground types
- Create new grid styles
Feel free to send a pull request to the repository!
Apart from the parameter
dressingAmount, there is not much difference among different parameters in terms of performance.
Subscribe to Mozilla Mixed Reality Blog
Get the latest posts delivered right to your inbox