Skip to content
On this page


CircleGeometry is a simple component for a circle with given radius. It is constructed from a number of triangular segments. It is built counter-clockwise from a start angle and a given central angle.

It can also be used to create regular polygons, where the number of segments determines the number of sides.

Any modifications to the radius, segments, thetaStart and thetaLength properties will update the underlying THREE.BufferGeometry.


Click me to view the example code
  <div style="width: 100vh; height: 100vh;">
    <Renderer :antialias="true">
      <PerspectiveCamera :position="[5, 5, 5]" :up="[0, 0, 1]">
        <OrbitControls />
      <Scene background="#f9f9f9">
          <MeshNormalMaterial :side="DoubleSide" />
          <CircleGeometry :radius="4" />

<script setup lang="ts">
import { DoubleSide } from "three";

import { Renderer, Scene } from "@janvorisek/drie";
import { PerspectiveCamera, OrbitControls } from "@janvorisek/drie";
import { Mesh, CircleGeometry, MeshNormalMaterial } from "@janvorisek/drie";


Prop nameDescriptionTypeDefault
name Name of the geometry.string""
radius Radius of the circle.number1
segments Number of segments (triangles).
Minimum value is 3.
thetaStart Start angle for first segment.number0
thetaLengthThe central angle, often called theta, of the circular sector.
The default is , which makes for a complete circle.
number2 * Math.PI



You can access the managed THREE.BufferGeometry instance using the exposed three property.

Example code

<CircleGeometry ref="geometry" />
const geometry = ref(null);

onMounted(() => {
  // Do something with the THREE.BufferGeometry instance
  const threeGeometry = geometry.value.three;

Released under the MIT License.