:sunrise_over_mountains: Infinite background environments for A-Frame in a line of HTML.
A simple way of setting up a whole basic environment for your A-Frame VR scene.
Make sure you are using A-Frame 0.6.0 or later. Then just include
aframe-environment-component.js in your HTML:
and add the
environment component to an entity:
That's it! :)
The previous code will setup a default scene, but you have a bunch of already predefined presets to choose from, using the
preset parameter, like this:
<a-entity environment="preset: <name of the preset>"></a-entity>
You can view and try all the presets in the aframe-environment-component Test Page. The current list of presets are listed in the next section.
Apart from using a preset, you can tweak the environment with many parameters, like this:
<a-entity environment="lightPosition: 1 5 -2; groundColor: #445"></a-entity>
You can also select a preset but change some of its parameters:
<a-entity environment="preset: forest; groundColor: #445; grid: cross"></a-entity>
This is the list of the available parameters.
|active||true||Show/hides the component. Use this instead of using the
|seed||1||Seed for randomization. If you don't like the layout of the elements, try another value for the seed.|
|shadow||false||Shadows on/off. Sky light casts shadows on the ground of all those objects with
|lightPosition||0 1 -0.2||Position of the main light. If
|fog||0||Amount of fog (0 = none, 1 = full fog). The color is estimated automatically.|
|flatShading||false||Whether to show everything smoothed (false) or polygonal (true).|
|playArea||1||Radius of the area in the center reserved for the player and the gameplay. The ground is flat in there and no objects are placed inside.|
|groundYScale||3||Maximum height (in meters) of ground's features (hills, mountains, peaks..)|
|groundColor||'#553e35'||Main color of the ground|
|groundColor2||'#694439'||Secondary color of the ground. Used for textures, ignored if
|dressingAmount||10||Number of objects used for dressing|
|dressingColor||'#795449'||Base color of dressing objects|
|dressingScale||5||Height (in meters) of dressing objects|
|dressingVariance||'1 1 1'||Maximum x,y,z meters to randomize the size and rotation of each dressing object. Use
|gridColor||'#ccc'||Color of the grid.|
The best way to work with them is to press
ctrl-alt-i to open the inspector, search for 'environment' in the filter box and select it, and tweak the parameters while checking the changes in realtime. When you are happy, you can use the
Copy attributes button or even better, copy the attributes logged in the browser's dev tools console.
The main idea of this component is to have a complete and visually interesting environment by just including one .js file, with no extra includes or requests. This requires to store all the assets inside the js or (in most of cases) to procedurally generate them. Despite of the computing time and increased file size, both options are normally faster than requesting and waiting for additional textures or model files.
Apart from the parameter
dressingAmount, there is not much difference among different values in parameters in terms of performance. Just keep
dressingAmount value under watch and lower it if the performance is not optimal.
Help and contact
PRs are appreciated, issues are welcomed. For any question, ping @feiss at aframevr in Slack or Twitter.