<a-circle>

Note: This documentation is for the old 0.3.0 version of A-Frame. Check out the documentation for the current 1.7.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>