meshes cleanup

src/meshes/Circle.js

@@ -9,7 +9,6 @@ export default {
     segments: { type: Number, default: 8 },
     thetaStart: { type: Number, default: 0 },
     thetaLength: { type: Number, default: Math.PI * 2 },
-
   },
   created() {
     this.createGeometry();

src/meshes/Cone.js

@@ -12,7 +12,6 @@ export default {
     openEnded: { type: Boolean, default: false },
     thetaStart: { type: Number, default: 0 },
     thetaLength: { type: Number, default: Math.PI * 2 },
-
   },
   created() {
     this.createGeometry();

src/meshes/Cylinder.js

@@ -13,7 +13,6 @@ export default {
     openEnded: { type: Boolean, default: false },
     thetaStart: { type: Number, default: 0 },
     thetaLength: { type: Number, default: Math.PI * 2 },
-
   },
   created() {
     this.createGeometry();

src/meshes/Dodecahedron.js

@@ -7,7 +7,6 @@ export default {
   props: {
     radius: { type: Number, default: 1 },
     detail: { type: Number, default: 0 },
-
   },
   created() {
     this.createGeometry();

src/meshes/Icosahedron.js

@@ -7,7 +7,6 @@ export default {
   props: {
     radius: { type: Number, default: 1 },
     detail: { type: Number, default: 0 },
-
   },
   created() {
     this.createGeometry();

src/meshes/Lathe.js

@@ -9,7 +9,6 @@ export default {
     segments: { type: Number, default: 12 },
     phiStart: { type: Number, default: 0 },
     phiLength: { type: Number, default: Math.PI * 2 },
-
   },
   created() {
     this.createGeometry();

src/meshes/Octahedron.js

@@ -7,7 +7,6 @@ export default {
   props: {
     radius: { type: Number, default: 1 },
     detail: { type: Number, default: 0 },
-
   },
   created() {
     this.createGeometry();

src/meshes/Plane.js

@@ -1,34 +1,24 @@
 import { PlaneBufferGeometry } from 'three';
+import { watch } from 'vue';
 import Mesh from './Mesh.js';
 
 export default {
   extends: Mesh,
   props: {
-    width: {
-      type: Number,
-      default: 1,
-    },
-    height: {
-      type: Number,
-      default: 1,
-    },
-    widthSegments: {
-      type: Number,
-      default: 1,
-    },
-    heightSegments: {
-      type: Number,
-      default: 1,
-    },
-  },
-  watch: {
-    width() { this.refreshGeometry(); },
-    height() { this.refreshGeometry(); },
-    widthSegments() { this.refreshGeometry(); },
-    heightSegments() { this.refreshGeometry(); },
+    width: { type: Number, default: 1 },
+    height: { type: Number, default: 1 },
+    widthSegments: { type: Number, default: 1 },
+    heightSegments: { type: Number, default: 1 },
   },
   created() {
     this.createGeometry();
+
+    const watchProps = ['width', 'height', 'widthSegments', 'heightSegments'];
+    watchProps.forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
   },
   methods: {
     createGeometry() {

src/meshes/Polyhedron.js

@@ -7,7 +7,6 @@ export default {
   props: {
     radius: { type: Number, default: 1 },
     detail: { type: Number, default: 0 },
-
   },
   created() {
     this.createGeometry();

src/meshes/Ring.js

@@ -11,7 +11,6 @@ export default {
     phiSegments: { type: Number, default: 1 },
     thetaStart: { type: Number, default: 0 },
     thetaLength: { type: Number, default: Math.PI * 2 },
-
   },
   created() {
     this.createGeometry();

src/meshes/Sphere.js

@@ -5,14 +5,8 @@ export default {
   extends: Mesh,
   props: {
     radius: Number,
-    widthSegments: {
-      type: Number,
-      default: 12,
-    },
-    heightSegments: {
-      type: Number,
-      default: 12,
-    },
+    widthSegments: { type: Number, default: 12 },
+    heightSegments: { type: Number, default: 12 },
   },
   watch: {
     radius() { this.refreshGeometry(); },

src/meshes/Tetrahedron.js

@@ -7,7 +7,6 @@ export default {
   props: {
     radius: { type: Number, default: 1 },
     detail: { type: Number, default: 0 },
-
   },
   created() {
     this.createGeometry();

src/meshes/Torus.js

@@ -10,7 +10,6 @@ export default {
     radialSegments: { type: Number, default: 8 },
     tubularSegments: { type: Number, default: 6 },
     arc: { type: Number, default: Math.PI * 2 },
-
   },
   created() {
     this.createGeometry();

src/meshes/TorusKnot.js

@@ -11,7 +11,6 @@ export default {
     tubularSegments: { type: Number, default: 8 },
     p: { type: Number, default: 2 },
     q: { type: Number, default: 3 },
-
   },
   created() {
     this.createGeometry();

src/meshes/Tube.js

@@ -10,7 +10,6 @@ export default {
     radius: { type: Number, default: 1 },
     radialSegments: { type: Number, default: 8 },
     closed: { type: Boolean, default: false },
-
   },
   created() {
     this.createGeometry();