<a-circle>

NOTE: This version of the documentation tracks unstable development happening on A-Frame’s master branch. If you wish to try it out, grab the unstable build. Otherwise, head to the documentation for the current 1.5.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
ambient-occlusion-map	material.ambientOcclusionMap	None
ambient-occlusion-map-intensity	material.ambientOcclusionMapIntensity	1
ambient-occlusion-texture-offset	material.ambientOcclusionTextureOffset	0 0
ambient-occlusion-texture-repeat	material.ambientOcclusionTextureRepeat	1 1
color	material.color	#FFF
displacement-bias	material.displacementBias	0.5
displacement-map	material.displacementMap	None
displacement-scale	material.displacementScale	1
displacement-texture-offset	material.displacementTextureOffset	0 0
displacement-texture-repeat	material.displacementTextureRepeat	1 1
env-map	material.envMap	None
fog	material.fog	true
height	material.height	256
metalness	material.metalness	0
normal-map	material.normalMap	None
normal-scale	material.normalScale	1 1
normal-texture-offset	material.normalTextureOffset	0 0
normal-texture-repeat	material.normalTextureRepeat	1 1
radius	geometry.radius	1
repeat	material.repeat	1 1
roughness	material.roughness	0.5
segments	geometry.segments	32
spherical-env-map	material.sphericalEnvMap	None
src	material.src	None
theta-length	geometry.thetaLength	360
theta-start	geometry.thetaStart	0
width	material.width	512
wireframe	material.wireframe	false
wireframe-linewidth	material.wireframeLinewidth	2

Parallelizing to the Ground

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

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