14. Environments and Other Components
The functionality present in A-Frame can be extended by external components. Many contributors to A-Frame have created and published components that we can use in our A-Frame scenes. In this chapter, we will explore a few to demonstrate how to use these external components and create more complex VR environments.
<head> of the HTML:
- As new components (attributes) that we can attach to A-Frame elements
- As new primitives (new HTML elements)
The Environment component allows us to quickly populate an A-Frame scene with visual elements.
The Environment component is loaded by inserting the following
<script> element inside the
After the component is loaded, we can use an
<a-entity> element (an
<a-entity> is a generic entity in A-Frame without any default geometry) to automatically create large environments by adding the
<a-entity environment="preset: <name of the preset>"></a-entity>
The name of the preset can be one of: 'none', 'default', 'contact', 'egypt', 'checkerboard', 'forest', 'goaland', 'yavapai', 'goldmine', 'arches', 'threetowers', 'poison', 'tron', 'japan', 'dream', 'volcano', 'starry', 'osiris'.
This element is used in a slightly different way from previous ones: we use a generic
<a-entity> and them inside the
environment attribute we define the various details of the environment (
preset is just one). Also note that the syntax is
parameter:value instead of
- Explore the different presets by running the example and changing the preset name.
Customizing the environment
The Environment component allows various customizations beyond the available presets. Let's take a look at two: Dressing and Play area.
Dressings are additional objects scattered throughout the environment. Various parameters allow us to control these:
dressingparameter allows us to define the type of object. Possible value are:
dressingAmountparameter controls the number of objects.
dressingColorparameter controls de color of the objects.
dressingScaleparameter controls the height of the objects in meters.
<a-entity environment="preset: goldmine; dressing: mushrooms; dressingAmount: 20; dressingColor: orange; dressingScale: 1"></a-entity>
The play area is an area cleared of objects in the center of the environment. In this area we can then add our own 3D objects to create our scene.
playArea parameter defines a radius where the ground is flat and no objects are automatically placed. This allows us to create an environment and then populate it with our own objects:
<a-entity environment="preset: tron; playArea: 10"></a-entity>
Particle System Component
The Particle System component allows us to create what is usually called… particle systems: a number of small objects with pre-defined movement that live for a short time.
There is an incompatability between the Particle System component and A-Frame versions above 1.0.4. To use the Particle System component you should use A-Frame 1.0.4.
Particle systems are also an external component that requires the following
Once we include the script, we can use a generic
<a-entity> and configure the particles in the
particle-system attribute, in a similar way as we did with the Environment component.
The most simple way is to use a particle system preset. There are presets for
<a-entity particle-system="preset: rain"></a-entity>
In the example above, we are using algo the Environment component, but we can use the Particle System without the Environment.
There is a slight incompatibility between Environment and Particle System. For them to work together you need to disable the fog in the Environment:
<a-entity environment="preset: contact; playArea: 10; fog: 0"> </a-entity>
- In the example above, try changing the preset (we may need to adjust the sky's color to see the particles).
Customizing the Particle System
Color and Size
To change the particle's color just add the
color parameter to its configuration (note that just like in the Environment component, different parameters must be separated by a semi-colon
;). To change the size, we use the
<a-entity position="0 2.25 -15" particle-system="preset: rain; color: red; size: 5"></a-entity>
Making a fountain
To make a particle system that resembles a fountain we need to control additional parameters like the velocity, and texture applied to the particles:
<a-entity position="0 1.25 -15" particle-system="velocityValue: 0 12 0; velocitySpread: 0 0.1 0; texture: https://cdn.rawgit.com/IdeaSpaceVR/aframe-particle-system-component/master/dist/images/raindrop.png; color: red; opacity: 1"></a-entity>
Oceans are also an external component, so we need to add another
<script> tag to our code (inside the
Once we add the script, we have access to another primitive:
<a-ocean position="0 0 0" width="10" depth="10" opacity="1"></a-ocean>
This primitive creates a rectangular surface that is animated, and mimics the ocean waves. We can control the position, and size of this surface with the
We can also control the speed and amplitude of the waves with the
forest environment using the Environments component. Add cylinder textured with a tree bark texture
Using the Ocean component, create a scene with a "lake" and a boat on it. Use your imagination to create a boat-like object using simple shapes.
Using the Particle System and the Environment components, create a scene with a forest and strong wind that carries particles horizontaly across the screen.
- Environment Component
- Particle Systems Component
- Oceans Component