refactor circle

src/geometries/CircleGeometry.js

@@ -1,17 +1,23 @@
 import { CircleGeometry } from 'three';
 import Geometry from './Geometry.js';
 
-export default {
+export const props = {
-  extends: Geometry,
-  props: {
   radius: { type: Number, default: 1 },
   segments: { type: Number, default: 8 },
   thetaStart: { type: Number, default: 0 },
   thetaLength: { type: Number, default: Math.PI * 2 },
-  },
+};
+
+export function createGeometry(comp) {
+  return new CircleGeometry(comp.radius, comp.segments, comp.thetaStart, comp.thetaLength);
+};
+
+export default {
+  extends: Geometry,
+  props,
   methods: {
     createGeometry() {
-      this.geometry = new CircleGeometry(this.radius, this.segments, this.thetaStart, this.thetaLength);
+      this.geometry = createGeometry(this);
     },
   },
 };

src/meshes/Circle.js

@@ -1,28 +1,16 @@
-import { CircleBufferGeometry } from 'three';
-import { watch } from 'vue';
 import Mesh from './Mesh.js';
+import { props, createGeometry } from '../geometries/CircleGeometry.js';
 
 export default {
   extends: Mesh,
-  props: {
+  props,
-    radius: { type: Number, default: 1 },
-    segments: { type: Number, default: 8 },
-    thetaStart: { type: Number, default: 0 },
-    thetaLength: { type: Number, default: Math.PI * 2 },
-  },
   created() {
     this.createGeometry();
-
+    this.addGeometryWatchers(props);
-    const watchProps = ['radius', 'segments', 'thetaStart', 'thetaLength'];
-    watchProps.forEach(prop => {
-      watch(() => this[prop], () => {
-        this.refreshGeometry();
-      });
-    });
   },
   methods: {
     createGeometry() {
-      this.geometry = new CircleBufferGeometry(this.radius, this.segments, this.thetaStart, this.thetaLength);
+      this.geometry = createGeometry(this);
     },
   },
   __hmrId: 'Circle',