Skip to content

WEBVR Lesson 3

What you will learn about WEBVR in Lesson Three:

  1. Adding, Lights, Shadows and 3D Models
  2. Physics and Sound
  3. Entity

 

What is an Entity?

A-Frame represents an entity via the <a-entity> element. As defined in the entity-component-system pattern, entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality.

In A-Frame, entities are inherently attached with the position, rotation, and scale components.

For example, we can define an animation that waits 2 seconds before scaling an entity.

<a-entity>

<a-animation attribute=”scale” begin=”2000″ to=”2 2 2″></a-animation>

</a-entity>

 

Lights:

The light component defines the entity as a source of light. Light affects all materials that have not specified a flat shading model with shader: flat. Note that lights are computationally expensive we should limit the number of lights in a scene.

Example:

<a-entity light=“color: #AFA; intensity: 1.5” position=“-1 1 0”></a-entity>

 

Shadow:

The shadow component enables shadows for an entity and its children. Receiving shadows from surrounding objects and casting shadows onto other objects may (and often should) be allowed independently. Without this component, an entity will not cast nor receive shadows.

this example includes a GLTF model (3D model)

<a-entity light="type:directional; castShadow:true;" position="1 1 1"></a-entity>
<a-gltf-model src="tree.gltf" shadow="receive: false"></a-gltf-model>

Sound:

The sound component defines the entity as a source of sound or audio. The sound component is positional and is thus affected by the components-position.

Example:

<a-entity id=“river” geometry=“primitive: plane” material=“color: blue”
position=“-10 0 0” sound=“src: url(river.mp3); autoplay: true”></a-entity>

 

Physics:

The physics library is a component for A-Frame physics integration and in this lesson, we will apply it for sound position and interaction.

Example fo an animated sphere including sound interaction:

<a-sphere
src=”#test”
position=”-3 2 -10″
radius=”.5″
animation=”property: rotation;
to: 0 360 0;
loop: true;
dur: 80000;
easing: linear”
sound=”src:#space; on: click; refDistance:4; rolloffFactor:4″></a-sphere>

 

 Download Lesson 3 Resources