From 5ebe40b9628d6faddaa48c1a493f09a541f36310 Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Mon, 15 Mar 2021 20:01:08 +0100
Subject: [PATCH] cylinder

---
 src/geometries/CylinderGeometry.js | 28 +++++++++++++++++-----------
 src/meshes/Cylinder.js             | 24 ++++--------------------
 2 files changed, 21 insertions(+), 31 deletions(-)

diff --git a/src/geometries/CylinderGeometry.js b/src/geometries/CylinderGeometry.js
index 3be02c2..415f5b2 100644
--- a/src/geometries/CylinderGeometry.js
+++ b/src/geometries/CylinderGeometry.js
@@ -1,21 +1,27 @@
 import { CylinderGeometry } from 'three';
 import Geometry from './Geometry.js';
 
+export const props = {
+  radiusTop: { type: Number, default: 1 },
+  radiusBottom: { type: Number, default: 1 },
+  height: { type: Number, default: 1 },
+  radialSegments: { type: Number, default: 8 },
+  heightSegments: { type: Number, default: 1 },
+  openEnded: { type: Boolean, default: false },
+  thetaStart: { type: Number, default: 0 },
+  thetaLength: { type: Number, default: Math.PI * 2 },
+};
+
+export function createGeometry(comp) {
+  return new CylinderGeometry(comp.radiusTop, comp.radiusBottom, comp.height, comp.radialSegments, comp.heightSegments, comp.openEnded, comp.thetaStart, comp.thetaLength);
+};
+
 export default {
   extends: Geometry,
-  props: {
-    radiusTop: { type: Number, default: 1 },
-    radiusBottom: { type: Number, default: 1 },
-    height: { type: Number, default: 1 },
-    radialSegments: { type: Number, default: 8 },
-    heightSegments: { type: Number, default: 1 },
-    openEnded: { type: Boolean, default: false },
-    thetaStart: { type: Number, default: 0 },
-    thetaLength: { type: Number, default: Math.PI * 2 },
-  },
+  props,
   methods: {
     createGeometry() {
-      this.geometry = new CylinderGeometry(this.radiusTop, this.radiusBottom, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength);
+      this.geometry = createGeometry(this);
     },
   },
 };
diff --git a/src/meshes/Cylinder.js b/src/meshes/Cylinder.js
index fa771a5..f258f4e 100644
--- a/src/meshes/Cylinder.js
+++ b/src/meshes/Cylinder.js
@@ -1,32 +1,16 @@
-import { CylinderBufferGeometry } from 'three';
-import { watch } from 'vue';
 import Mesh from './Mesh.js';
+import { props, createGeometry } from '../geometries/CylinderGeometry.js';
 
 export default {
   extends: Mesh,
-  props: {
-    radiusTop: { type: Number, default: 1 },
-    radiusBottom: { type: Number, default: 1 },
-    height: { type: Number, default: 1 },
-    radialSegments: { type: Number, default: 8 },
-    heightSegments: { type: Number, default: 1 },
-    openEnded: { type: Boolean, default: false },
-    thetaStart: { type: Number, default: 0 },
-    thetaLength: { type: Number, default: Math.PI * 2 },
-  },
+  props,
   created() {
     this.createGeometry();
-
-    const watchProps = ['radiusTop', 'radiusBottom', 'height', 'radialSegments', 'heightSegments', 'openEnded', 'thetaStart', 'thetaLength'];
-    watchProps.forEach(prop => {
-      watch(() => this[prop], () => {
-        this.refreshGeometry();
-      });
-    });
+    this.addGeometryWatchers(props);
   },
   methods: {
     createGeometry() {
-      this.geometry = new CylinderBufferGeometry(this.radiusTop, this.radiusBottom, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength);
+      this.geometry = createGeometry(this);
     },
   },
   __hmrId: 'Cylinder',