refactor box

src/geometries/BoxGeometry.js

@@ -1,9 +1,7 @@
 import { BoxGeometry } from 'three';
 import Geometry from './Geometry.js';
 
-export default {
+export const props = {
-  extends: Geometry,
-  props: {
   size: Number,
   width: { type: Number, default: 1 },
   height: { type: Number, default: 1 },
@@ -11,14 +9,22 @@ export default {
   widthSegments: { type: Number, default: 1 },
   heightSegments: { type: Number, default: 1 },
   depthSegments: { type: Number, default: 1 },
-  },
+};
+
+export function createGeometry(comp) {
+  if (comp.size) {
+    return new BoxGeometry(comp.size, comp.size, comp.size, comp.widthSegments, comp.heightSegments, comp.depthSegments);
+  } else {
+    return new BoxGeometry(comp.width, comp.height, comp.depth, comp.widthSegments, comp.heightSegments, comp.depthSegments);
+  }
+};
+
+export default {
+  extends: Geometry,
+  props,
   methods: {
     createGeometry() {
-      let w = this.width, h = this.height, d = this.depth;
+      this.geometry = createGeometry(this);
-      if (this.size) {
-        w = this.size; h = this.size; d = this.size;
-      }
-      this.geometry = new BoxGeometry(w, h, d, this.widthSegments, this.heightSegments, this.depthSegments);
     },
   },
 };

src/meshes/Box.js

@@ -1,22 +1,13 @@
-import { BoxBufferGeometry } from 'three';
 import { watch } from 'vue';
 import Mesh from './Mesh.js';
+import { props, createGeometry } from '../geometries/BoxGeometry.js';
 
 export default {
   extends: Mesh,
-  props: {
+  props,
-    size: Number,
-    width: { type: Number, default: 1 },
-    height: { type: Number, default: 1 },
-    depth: { type: Number, default: 1 },
-    widthSegments: { type: Number, default: 1 },
-    heightSegments: { type: Number, default: 1 },
-    depthSegments: { type: Number, default: 1 },
-  },
   created() {
     this.createGeometry();
-
+    Object.keys(props).forEach(prop => {
-    ['size', 'width', 'height', 'depth', 'widthSegments', 'heightSegments', 'depthSegments'].forEach(prop => {
       watch(() => this[prop], () => {
         this.refreshGeometry();
       });
@@ -24,11 +15,7 @@ export default {
   },
   methods: {
     createGeometry() {
-      if (this.size) {
+      this.geometry = createGeometry(this);
-        this.geometry = new BoxBufferGeometry(this.size, this.size, this.size);
-      } else {
-        this.geometry = new BoxBufferGeometry(this.width, this.height, this.depth);
-      }
     },
   },
   __hmrId: 'Box',