Perspective and Environment: Camera, Sky, and Ground
Get an introduction to the camera component and its features. Learn to add sky and ground components to your scene.
The camera component in A-Frame represents the perspective from which the user views the scene. To create a camera component in A-Frame, we can use the <a-camera> primitive, which is a convenience layer (i.e., syntactic sugar) for the <a-entity> element with camera components.
Recreating the default camera
A-Frame adds a default camera on its own if we don’t explicitly define the camera in the scene. The camera component is just an entity with the camera, look-controls, and wasd-controls properties as shown below:
<a-entitycamera="active: true"look-controlswasd-controlsposition="0 1.6 0"></a-entity>
The default camera’s height is set at 1.6 meters because this is the human eye level. As we can see in the example below, when we zoom into the model, we’re at the average human eye level. We can experiment with changing the height to 0 and we’ll feel the differences that varying the height level can cause. This is why the height level is a critical piece of information that we take into account when designing virtual scenes. Remember that we can always change the height of the camera to cater to different user groups. For instance, a height of 1.6 meters won’t be suitable if we’re designing a science exhibition for children. We’ll have to decrease the height level to the average height of the child.
Let’s take a look at the camera properties for the above demo.