feat: Add cylinder component

* add cylinder component + docs

docs/component-list/components.ts

@@ -68,6 +68,7 @@ export default [
       { text: 'CatmullRomCurve3', link: '/guide/shapes/catmullromcurve3' },
       { text: 'Circle', link: '/guide/shapes/circle' },
       { text: 'Cone', link: '/guide/shapes/cone' },
+	    { text: 'Cylinder', link: '/guide/shapes/cylinder' },
       { text: 'Dodecahedron', link: '/guide/shapes/dodecahedron' },
       { text: 'Icosahedron', link: '/guide/shapes/icosahedron' },
       { text: 'Line2', link: '/guide/shapes/line2' },

docs/guide/shapes/cylinder.md

@@ -0,0 +1,31 @@
+# Cylinder <Badge type="warning" text="^4.0.0" />
+
+![](/cientos/cylinder.png)
+
+The `cientos` package provides a `<Cylinder />` component that serves as a short-cut for a `CylinderGeometry` and a `MeshBasicMaterial` with a `Mesh` object.
+
+``` 
+args: [
+  radiusTop: number,
+  radiusBottom: number,
+  height: number,
+  radialSegments: number,
+  heightSegments: number,
+  openEnded: boolean,
+  thetaStart: number,
+  thetaLength: number
+]
+```
+
+Reference: [CylinderGeometry](https://threejs.org/docs/?q=cylinder#api/en/geometries/CylinderGeometry)
+
+## Usage
+
+```vue
+<Cylinder :args="[1, 1, 1, 32, 1, false, 0, Math.PI * 2]" color="orange" />
+
+// Cylinder with a custom material transformations
+<Cylinder ref="cylinderRef" :args="[1, 1, 1, 32, 1, false, 0, Math.PI * 2]" :position="[0, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Cylinder>
+```

src/core/shapes/Cylinder.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+	import type { TresColor } from '@tresjs/core'
+	import type { CylinderGeometry } from 'three'
+	import { shallowRef, toRefs } from 'vue'
+
+	export interface CylinderProps {
+		/**
+		 * The radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength of the cylinder.
+		 * @default [1, 1, 1, 32, 1, false, 0, Math.PI * 2]
+		 * @type {any[]}
+		 * @memberof CylinderProps
+		 * @see https://threejs.org/docs/#api/en/geometries/CylinderGeometry
+		 */
+		args?: ConstructorParameters<typeof CylinderGeometry>
+		/**
+		 * The color of the cylinder.
+		 * @default 0xffffff
+		 * @type {TresColor}
+		 * @memberof CylinderProps
+		 * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+		 */
+		color?: TresColor
+	}
+
+	const props = withDefaults(defineProps<CylinderProps>(), {
+		args: () => [1, 1, 1, 32, 1, false, 0, Math.PI * 2],
+		color: '#ffffff',
+	})
+	const { args, color } = toRefs(props)
+
+	const cylinderRef = shallowRef()
+
+	defineExpose({
+		value: cylinderRef,
+	})
+</script>
+
+<template>
+	<TresMesh ref="cylinderRef" v-bind="$attrs">
+		<TresCylinderGeometry :args="args" />
+		<slot>
+			<TresMeshBasicMaterial :color="color" />
+		</slot>
+	</TresMesh>
+</template>

src/core/shapes/index.ts

@@ -2,6 +2,7 @@ import Box from './Box.vue'
 import CatmullRomCurve3 from './CatmullRomCurve3.vue'
 import Circle from './Circle.vue'
 import Cone from './Cone.vue'
+import Cylinder from './Cylinder.vue'
 import Dodecahedron from './Dodecahedron.vue'
 import Icosahedron from './Icosahedron.vue'
 import Line2 from './Line2.vue'
@@ -20,6 +21,7 @@ export {
   Box,
   CatmullRomCurve3,
   Circle,
+  Cylinder,
   Cone,
   Dodecahedron,
   Icosahedron,