<a-camera>
Note: This documentation is for the old 0.1.0 version of A-Frame. Check out the documentation for the current 1.5.0 version
The camera primitive makes it easy to customize the controls and viewing parameters of our scene. It wraps an entity that contains a camera component, and within that a second entity for the cursor, which has geometry and material components.
| Attribute | Default Value | Component Mapping |
|---|---|---|
| cursor-color | #FFF | |
| cursor-maxdistance | 1000 | cursor.maxDistance |
| cursor-offset | 1 | |
| cursor-opacity | 1 | |
| cursor-scale | 1 | |
| cursor-visible | true | |
| far | 10000 | camera.far |
| fov | 80 | camera.fov |
| look-controls-enabled | true | look-controls |
| near | 0.5 | camera.near |
| wasd-controls-enabled | true | wasd-controls |
Replacing the default scene camera
When we manually add a camera primitive to our scene, A-Frame does not create a default scene camera. This has the potential for confusion because the default scene camera is positioned at 0 1.8 4, whereas a new instance of <a-camera> is positioned at 0 0 0. This means that with the following markup, we can see a cube:
<a-cube></a-cube> |
But if we add a camera primitive and do not adjust its position…
<a-camera></a-camera> |
… the cube seems to disappear, because both the cube and camera are positioned at 0 0 0, and the camera is therefore inside the cube.
Examples
A camera with all the defaults:
<a-camera></a-camera> |
A camera with the cursor hidden and positioned in the scene:
<a-camera cursor-visible="false" position="6 1.8 23"></a-camera> |
A camera with keyboard controls disabled and a large red cursor:
<a-camera wasd-controls-enabled="false" cursor-scale="3" cursor-color="red"></a-camera> |