Atmosphere
You can provide your scenes with a sense of atmosphere by adding features that enhance your scene, such as: terrain, water, weather, background sounds, and other particle effects.
VR-only effects will render in VR (desktop or headset), but not in AR, since the real world environment should take precedence to provide terrain and sky:
AR/VR (full XR) effects are useful in any scene:
Environment & Presets
ARENA provides the aframe-environment-component to render VR scene terrain by default, and it includes dozens of parameters. Some preset
parameters are included as recipes, see the forest
preset below.
{
"object_id": "scene-options",
"type": "scene-options",
"data": {
"env-presets": {
"active": true,
"preset": "forest"
}
}
}
Sky, Ground, Fog
Many of these parameters can be individually adjusted to your needs, see the env-presets section of our scene-options
schema.
{
"object_id": "scene-options",
"type": "scene-options",
"data": {
"env-presets": {
"active": true,
"preset": "none",
"dressing": "mushrooms",
"fog": 0.5,
"ground": "hills",
"groundTexture": "walkernoise",
"lighting": "distant",
"skyType": "atmosphere"
}
}
}
Particle Effects
We include the aframe-spe-particles-component to generate particle effects for weather, fire, fireworks, and more. Many of these effects from that component’s examples are on display in our particles demo scene.
warning
The spe-particles
component does not interact well with the scene fog
component. Many env-presets
enable fog < 0
, so you many have to manually set fog = 0
, or your particle effects may not run:
{
"object_id": "scene-options",
"type": "scene-options",
"data": {
"env-presets": {
"fog": 0
}
}
}
Some examples of rain, snow, dust, water, and ambient sounds can be experienced in our weather demo scene.
Rain
This rain example is translated from the rain
preset of aframe-particle-system-component.
{
"object_id": "rain",
"type": "object",
"data": {
"object_type": "entity",
"spe-particles": {
"rotation": 3.14,
"particleCount": 1000,
"texture": "static/images/textures/raindrop.png",
"positionSpread": { "x": 100, "y": 100, "z": 100 },
"acceleration": { "x": 0, "y": 3, "z": 0 },
"accelerationSpread": { "x": 2, "y": 1, "z": 2 },
"velocitySpread": { "x": 10, "y": 50, "z": 10 },
"velocity": { "x": 0, "y": 75, "z": 0 },
"blending": "additive",
"color": ["#ffffff"],
"maxAge": 1,
"size": [0.4]
}
}
}
Snow
This snow example is translated from the snow
preset of aframe-particle-system-component.
{
"object_id": "snow",
"type": "object",
"data": {
"object_type": "entity",
"spe-particles": {
"rotation": 3.14,
"texture": "static/images/textures/smokeparticle.png",
"particleCount": 200,
"positionSpread": { "x": 100, "y": 100, "z": 100 },
"acceleration": { "x": 0, "y": 0, "z": 0 },
"accelerationSpread": { "x": 0.2, "y": 0, "z": 0.2 },
"velocitySpread": { "x": 2, "y": 0, "z": 2 },
"blending": "additive",
"color": ["#ffffff"],
"velocity": { "x": 0, "y": 8, "z": 0 },
"maxAge": 20
}
}
}
Dust
This dust example is translated from the dust
preset of aframe-particle-system-component.
{
"object_id": "dust",
"type": "object",
"data": {
"object_type": "entity",
"spe-particles": {
"rotation": 3.14,
"texture": "static/images/textures/smokeparticle.png",
"particleCount": 100,
"positionSpread": { "x": 100, "y": 100, "z": 100 },
"acceleration": { "x": 0, "y": 0, "z": 0 },
"accelerationSpread": { "x": 0, "y": 0, "z": 0 },
"velocitySpread": { "x": 0.5, "y": 1, "z": 0.5 },
"velocity": { "x": 1, "y": 0.3, "z": 1 },
"color": ["#ffffff"],
"blending": "additive",
"maxAge": 20
}
}
}
Fire
Multiple particle effects can be combined to create an effect like fire, as in this smoke, sparks, and flames example from our classic render demo scene.
{
"object_id": "smoke",
"type": "object",
"data": {
"object_type": "entity",
"spe-particles": {
"texture": "static/images/textures/fog.png",
"velocity": { "x": 0.4, "y": 2, "z": 0 },
"velocitySpread": { "x": 1.4, "y": 0, "z": 1.4 },
"particleCount": 50,
"maxAge": 4,
"size": [8, 16],
"opacity": [0, 1, 0],
"color": ["#666", "#222"]
}
}
}
{
"object_id": "sparks",
"type": "object",
"data": {
"object_type": "entity",
"spe-particles": {
"texture": "static/images/textures/square.png",
"color": ["yellow", "red"],
"particleCount": 10,
"maxAge": 0.5,
"maxAgeSpread": 0.4,
"velocity": { "x": 0, "y": 5, "z": 0 },
"velocitySpread": { "x": 0, "y": 3, "z": 0 },
"wiggle": 1,
"wiggleSpread": 5,
"emitterScale": 50,
"sizeSpread": [0.5],
"randomizeVelocity": true
}
}
}
{
"object_id": "flames",
"type": "object",
"data": {
"object_type": "entity",
"spe-particles": {
"texture": "static/images/textures/explosion_sheet.png",
"textureFrames": { "x": 5, "y": 5 },
"velocity": { "x": 0.4, "y": 0.1, "z": 0 },
"acceleration": { "x": 0, "y": 2, "z": 0 },
"accelerationSpread": { "x": 0, "y": 2, "z": 0 },
"velocitySpread": { "x": 0.4, "y": 0, "z": 0.4 },
"particleCount": 15,
"maxAge": 1,
"size": [4, 8],
"sizeSpread": [2],
"opacity": [1, 0],
"wiggle": 0,
"blending": "additive"
}
}
}
Water
We include the aframe-extras library, so you can make use of the ocean
primitive to create water.
{
"object_id": "ocean",
"type": "object",
"data": {
"object_type": "ocean",
"width": 100,
"depth": 100,
"color": "#7ad2f7",
"rotation": { "w": -0.70711, "x": 0.70711, "y": 0, "z": 0 },
"amplitude": 1,
"opacity": 1
}
}
Sounds
The a-frame sound component is a great way to create an ambient sound atmosphere for your scene.
{
"object_id": "ambiance",
"type": "object",
"data": {
"object_type": "entity",
"sound": {
"src": "store/users/wiselab/audio/ocean.mp3",
"positional": false,
"loop": true,
"autoplay": true,
"volume": 0.1
}
}
}