# CircleGeometry

Class · extends [`Geometry`](https://api.playcanvas.com/engine/classes/Geometry.md) · category: Graphics

Source: https://github.com/playcanvas/engine/blob/f059dc005842f76e052cdf44d8370c8c7ec475ac/src/scene/geometry/circle-geometry.js#L33

A procedural circle-shaped geometry - a flat disc in the XZ plane.

Typically, you would:

1. Create a CircleGeometry instance.
2. Generate a [Mesh](https://api.playcanvas.com/engine/classes/Mesh.md) from the geometry.
3. Create a [MeshInstance](https://api.playcanvas.com/engine/classes/MeshInstance.md) referencing the mesh.
4. Create an [Entity](https://api.playcanvas.com/engine/classes/Entity.md) with a [RenderComponent](https://api.playcanvas.com/engine/classes/RenderComponent.md) and assign the [MeshInstance](https://api.playcanvas.com/engine/classes/MeshInstance.md) to it.
5. Add the entity to the [Scene](https://api.playcanvas.com/engine/classes/Scene.md).

```javascript
// Create a mesh instance
const geometry = new CircleGeometry();
const mesh = Mesh.fromGeometry(app.graphicsDevice, geometry);
const material = new StandardMaterial();
const meshInstance = new MeshInstance(mesh, material);

// Create an entity
const entity = new Entity();
entity.addComponent('render', {
    meshInstances: [meshInstance]
});

// Add the entity to the scene hierarchy
app.scene.root.addChild(entity);
```

## Constructors

### constructor

```ts
new CircleGeometry(opts?: object)
```

Create a new CircleGeometry instance.

By default, the constructor creates a circle centered on the object space origin with a
radius of 0.5, 64 sectors and 8 rings. The normal vector of the circle is aligned along the
positive Y axis. The circle is created with UVs in the range of 0 to 1, mapped planarly
across its bounding square.

**Parameters**

- `opts` (`object`, optional, default `{}`): Options object.
    - `opts.calculateTangents` (`boolean`, optional): Generate tangent information. Defaults to false.
    - `opts.radius` (`number`, optional): The radius of the circle. Defaults to 0.5.
    - `opts.ringExponent` (`number`, optional): Controls the radial distribution of the rings. A value
      of 1 spaces the rings uniformly, larger values concentrate the rings (and so the
      tessellation detail) towards the center of the circle. Defaults to 1.
    - `opts.rings` (`number`, optional): The number of concentric rings of vertices between the center
      and the outer edge of the circle. Defaults to 8.
    - `opts.sectors` (`number`, optional): The number of divisions around the circumference of the
      circle. Defaults to 64.

**Example**

```ts
const geometry = new CircleGeometry({
    radius: 100,
    sectors: 128,
    rings: 64,
    ringExponent: 2
});
```

## Inherited from [Geometry](https://api.playcanvas.com/engine/classes/Geometry.md)

- `blendIndices: ArrayLike<number> | undefined`
- `blendWeights: ArrayLike<number> | undefined`
- `colors: ArrayLike<number> | undefined`
- `tangents: ArrayLike<number> | undefined`
- `calculateNormals(): void`
- `calculateTangents(): void`