Note: This documentation is for the old 0.8.0 version of A-Frame. Check out the documentation for the current 1.3.0 version
The camera component defines from which perspective the user views the scene. The camera is commonly paired with controls components that allow input devices to move and rotate the camera.
A camera situated at the average height of human eye level (1.6 meters).
<a-entity position="0 1.6 0" camera look-controls></a-entity>
|active||Whether the camera is the active camera in a scene with more than one camera.||true|
|far||Camera frustum far clipping plane.||10000|
|fov||Field of view (in degrees).||80|
|near||Camera frustum near clipping plane.||0.005|
|spectator||Whether the camera is used to render a third-person view of the scene on the 2D display while in VR mode.|
|zoom||Zoom factor of the camera.||1|
If a camera is not specified, A-Frame will inject a default camera:
<a-entity camera="active: true" look-controls wasd-controls position="0 0 0" data-aframe-default-camera></a-entity>
If a camera is specified (e.g., our own
then the default camera will not be added.
When exiting VR, the camera will restore its rotation to its rotation before it entered VR. This is so when we exit VR, the rotation of the camera is back to normal for a desktop screen.
active property gets toggled, the component will notify the camera system
to change the current camera used by the renderer:
var secondCameraEl = document.querySelector('#second-camera');
To fix entities onto the camera such that they stay within view no matter where the user looks, you can attach those entities as a child of the camera. Use cases might be a heads-up display (HUD).
<a-entity camera look-controls>
Note that you should use HUDs sparingly as they cause irritation and eye strain in VR. Consider integrating menus into the fabric of the world itself. If you do create a HUD, make sure that the HUD is more in the center of the field of view such that the user does not have to strain their eyes to read it.