This component orbits an entity at a fixed point on a constant radius. It is not a universial control, because it is mostly designed for mobile devices using the tilting of the head to control the orbital track. You can therefor not set it directly on the camera entity, but it needs to be set as a rig around the camera (aka camera rig pattern).
It differs from the Orbit Controls component in that way that it does not substitute look-controls component, but uses it rather for determing the movement direction.
For A-Frame.
The component sets the matrix of the entity directly. Use the position and rotation properties from the object to obtain positional and rotational data.
| Property | Description | Default Value |
|---|---|---|
| radius | The radius of the spherical movement | 1 |
| minRadius | The minimum offset from the radius for of the spherical movement | 0 |
| maxRadius | The maximum offset from the radius of the spherical movement | 0 |
| speed | Movement speed | 1 |
| lat | Sets the spherical position according to the planar latitude (between -90 and 90) coordinate in degrees | 0 |
| lng | Sets the spherical position according to the planar longitude (between -180 and 180) coordinate in degrees | 0 |
| upVector | Sets the up vector like in the lookAt function of Three.JS. Hardly ever needed to set manually |
0 1 0 |
| vrMode | Whether the controls are only enabled when in mobile VR mode | false |
| tilt | Tilt of camera in degrees | 0 |
| enabled | Whether the controls are enabled | true |
| Property | Description | Default Value |
|---|---|---|
| getLatLngAzimuth | Returns the current latitude and longitude coordinates and looking direction azimuth in degrees | {lat: 0, lng: 0, azimuth: 0} |
Do not set the position or rotation directly on this component because the get overriden. Always create a surrounding entity for relative moving.
The current implementation does not work with together with the other movement controls like wasd-controls on the camera entity.
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-spherical-controls-component/dist/aframe-spherical-controls-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity spherical-controls="foo: bar"></a-entity>
</a-scene>
</body>Install via npm:
npm install aframe-spherical-controls-componentThen require and use.
require('aframe');
require('aframe-spherical-controls-component');