chore: add Cylinder to v4 (#439)

* chore: add Cylinder to v4

* chore: fix playground link

docs/.vitepress/config.ts

@@ -117,6 +117,7 @@ export default defineConfig({
           { 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/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>
+```

playground/src/pages/shapes/Cylinder.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { TresCanvas } from '@tresjs/core'
+import { Cylinder, OrbitControls } from '@tresjs/cientos'
+
+const { random: r, floor: fl, PI } = Math
+const choice = (arr) => {
+  return arr[fl(r() * arr.length)]
+}
+const COLORS = [0x81DBC5, 0xEFAC35, 0xFFFFFF, 0x444444]
+const colorsArgs = Array.from({ length: 9 }).fill({}).map(() =>
+  [choice(COLORS), [r() * 0.5, r() * 0.5, r(), fl(r() * 20) + 4, fl(r() * 10) + 4, false, 0, 2 * PI]],
+)
+</script>
+
+<template>
+  <TresCanvas
+    window-size
+    clear-color="#111"
+  >
+    <TresPerspectiveCamera
+      :position="[0, 0, 7]"
+      :fov="45"
+      :aspect="1"
+      :near="0.1"
+      :far="1000"
+    />
+    <OrbitControls />
+    <Cylinder
+      v-for="[color, args], i of colorsArgs"
+      :key="i"
+      :args="args"
+      :position="[i % 3 - 1, Math.floor(i / 3) - 1, 0]"
+    >
+      <TresMeshStandardMaterial
+        :color="color"
+      />
+    </Cylinder>
+    <TresDirectionalLight
+      :position="[0, 2, 4]"
+      :intensity="2"
+    />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>

playground/src/router/routes/shapes.ts

@@ -4,6 +4,11 @@ export const shapesRoutes = [
     name: 'CatmullRomCurve3',
     component: () => import('../../pages/shapes/CatmullRomCurve3Demo.vue'),
   },
+  {
+    path: '/shapes/cylinder',
+    name: 'Cylinder',
+    component: () => import('../../pages/shapes/Cylinder.vue'),
+  },
   {
     path: '/shapes/line2',
     name: 'Line2',