docs: added circle

docs/.vitepress/config.ts

@@ -88,6 +88,7 @@ export default defineConfig({
             text: 'Shapes',
             items: [
               { text: 'Box', link: '/cientos/shapes/box' },
+              { text: 'Circle', link: '/cientos/shapes/circle' },
               { text: 'Plane', link: '/cientos/shapes/plane' },
               { text: 'Sphere', link: '/cientos/shapes/sphere' },
               { text: 'Torus', link: '/cientos/shapes/torus' },

docs/cientos/shapes/box.md

@@ -10,7 +10,7 @@ The `cientos` package provides a `<Box />` component that serves as a short-cut
 <Box :args="[1, 1, 1]" color="orange" />
 
 // Box with a custom material transformations
-<Box ref="planeRef" :args="[1, 1, 1]" :position="[0, 4, 0]">
+<Box ref="boxRef" :args="[1, 1, 1]" :position="[0, 4, 0]">
   <TresMeshToonMaterial color="orange" />
 </Box>
 ```

docs/cientos/shapes/circle.md

@@ -0,0 +1,18 @@
+# Circle
+
+![](/cientos/circle.png)
+
+The `cientos` package provides a `<Circle />` component that serves as a short-cut for a `CircleGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+## Usage
+
+```html
+<Circle :args="[1, 32]" color="lightsalmon" />
+
+// Circle with a custom material transformations
+<Circle ref="circleRef" :args="[1, 32]" :position="[0, 0, 0]">
+  <TresMeshToonMaterial color="lightsalmon" />
+</Circle>
+```
+
+

docs/cientos/shapes/torus.md

@@ -7,7 +7,7 @@ The `cientos` package provides a `<Torus />` component that serves as a short-cu
 ## Usage
 
 ```html
-<Torus :args="[1, 1, 1]" color="cyan" />
+<Torus :args="[2, 0.4, 42, 100]" color="cyan" />
 
 // Torus with a custom material transformations
 <Torus ref="torusRef" :args="[0.75, 0.4, 16, 80]" :position="[-2, 6, 0]">