<a-circle>

Note: This documentation is for the old 0.3.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

The circle primitive creates circles surfaces using the geometry component with the type set to circle.

Example

<a-scene>
<a-assets>
<img id="platform" src="platform.jpg">
</a-assets>

<!-- Basic circle. -->
<a-circle color="#CCC" radius="20"></a-circle>

<!-- Textured circle parallel to ground. -->
<a-circle src="#platform" radius="50" rotation="-90 0 0"></a-circle>
</a-scene>

Attributes

Attribute Component Mapping Default Value
color material.color #FFF
metalness material.metalness None
opacity material.opacity 1
radius geometry.radius 1
repeat material.repeat None
roughness material.roughness 0.5
segments geometry.segments 32
shader material.shader standard
side material.side front
src material.src None
theta-length geometry.thetaLength 360
theta-start geometry.thetaStart 0
transparent material.transparent None

Parallelizing to the Ground

To make a circle parallel to the ground, rotate it around the X-axis:

<a-plane rotation="-90 0 0"></a-plane>