From 9e17559fc98066db79b02b7ea0c98ae3037ac906 Mon Sep 17 00:00:00 2001
From: Jakob Hock <96245357+JakobHock@users.noreply.github.com>
Date: Sun, 9 Jun 2024 22:05:31 +0200
Subject: [PATCH] feat: Add cylinder component

* add cylinder component + docs
---
 docs/component-list/components.ts |   1 +
 docs/guide/shapes/cylinder.md     |  31 ++++++++++++++++++++
 docs/public/cientos/cylinder.png  | Bin 0 -> 6074 bytes
 src/core/shapes/Cylinder.vue      |  45 ++++++++++++++++++++++++++++++
 src/core/shapes/index.ts          |   2 ++
 5 files changed, 79 insertions(+)
 create mode 100644 docs/guide/shapes/cylinder.md
 create mode 100644 docs/public/cientos/cylinder.png
 create mode 100644 src/core/shapes/Cylinder.vue

diff --git a/docs/component-list/components.ts b/docs/component-list/components.ts
index 0328e5d4..59f4f26c 100644
--- a/docs/component-list/components.ts
+++ b/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' },
diff --git a/docs/guide/shapes/cylinder.md b/docs/guide/shapes/cylinder.md
new file mode 100644
index 00000000..e3578d67
--- /dev/null
+++ b/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>
+```
\ No newline at end of file
diff --git a/docs/public/cientos/cylinder.png b/docs/public/cientos/cylinder.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3f2282073425701e7b63fb344e71fde0082aca7
GIT binary patch
literal 6074
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
D^{Pz?

literal 0
HcmV?d00001

diff --git a/src/core/shapes/Cylinder.vue b/src/core/shapes/Cylinder.vue
new file mode 100644
index 00000000..4566ef42
--- /dev/null
+++ b/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>
diff --git a/src/core/shapes/index.ts b/src/core/shapes/index.ts
index c9a9e359..d2dc0e4e 100644
--- a/src/core/shapes/index.ts
+++ b/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,