add PlaneGeometry

src/geometries/PlaneGeometry.js

@@ -0,0 +1,23 @@
+import { PlaneGeometry } from 'three';
+import Geometry from './Geometry.js';
+
+export const props = {
+  width: { type: Number, default: 1 },
+  height: { type: Number, default: 1 },
+  widthSegments: { type: Number, default: 1 },
+  heightSegments: { type: Number, default: 1 },
+};
+
+export function createGeometry(comp) {
+  return new PlaneGeometry(comp.width, comp.height, comp.widthSegments, comp.heightSegments);
+};
+
+export default {
+  extends: Geometry,
+  props,
+  methods: {
+    createGeometry() {
+      this.geometry = createGeometry(this);
+    },
+  },
+};

src/meshes/Plane.js

@@ -1,28 +1,16 @@
-import { PlaneGeometry } from 'three';
-import { watch } from 'vue';
 import Mesh from './Mesh.js';
+import { props, createGeometry } from '../geometries/PlaneGeometry.js';
 
 export default {
   extends: Mesh,
-  props: {
+  props,
-    width: { type: Number, default: 1 },
-    height: { type: Number, default: 1 },
-    widthSegments: { type: Number, default: 1 },
-    heightSegments: { type: Number, default: 1 },
-  },
   created() {
     this.createGeometry();
-
+    this.addGeometryWatchers(props);
-    const watchProps = ['width', 'height', 'widthSegments', 'heightSegments'];
-    watchProps.forEach(prop => {
-      watch(() => this[prop], () => {
-        this.refreshGeometry();
-      });
-    });
   },
   methods: {
     createGeometry() {
-      this.geometry = new PlaneGeometry(this.width, this.height, this.widthSegments, this.heightSegments);
+      this.geometry = createGeometry(this);
     },
   },
   __hmrId: 'Plane',