geometries refactoring

src/geometries/BoxGeometry.js

@@ -4,16 +4,21 @@ import Geometry from './Geometry.js';
 export default {
   extends: Geometry,
   props: {
-    size: { type: Number },
+    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() {
+  methods: {
+    createGeometry() {
+      let w = this.width, h = this.height, d = this.depth;
       if (this.size) {
-      this.parent.geometry = new BoxBufferGeometry(this.size, this.size, this.size);
+        w = this.size; h = this.size; d = this.size;
-    } else {
-      this.parent.geometry = new BoxBufferGeometry(this.width, this.height, this.depth);
       }
+      this.geometry = new BoxBufferGeometry(w, h, d, this.widthSegments, this.heightSegments, this.depthSegments);
+    },
   },
 };

src/geometries/CircleGeometry.js

@@ -9,7 +9,9 @@ export default {
     thetaStart: { type: Number, default: 0 },
     thetaLength: { type: Number, default: Math.PI * 2 },
   },
-  created() {
+  methods: {
-    this.parent.geometry = new CircleBufferGeometry(this.radius, this.segments, this.thetaStart, this.thetaLength);
+    createGeometry() {
+      this.geometry = new CircleBufferGeometry(this.radius, this.segments, this.thetaStart, this.thetaLength);
+    },
   },
 };

src/geometries/ConeGeometry.js

@@ -12,7 +12,9 @@ export default {
     thetaStart: { type: Number, default: 0 },
     thetaLength: { type: Number, default: Math.PI * 2 },
   },
-  created() {
+  methods: {
-    this.parent.geometry = new ConeBufferGeometry(this.radius, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength);
+    createGeometry() {
+      this.geometry = new ConeBufferGeometry(this.radius, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength);
+    },
   },
 };

src/geometries/CylinderGeometry.js

@@ -13,7 +13,9 @@ export default {
     thetaStart: { type: Number, default: 0 },
     thetaLength: { type: Number, default: Math.PI * 2 },
   },
-  created() {
+  methods: {
-    this.parent.geometry = new CylinderBufferGeometry(this.radiusTop, this.radiusBottom, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength);
+    createGeometry() {
+      this.geometry = new CylinderBufferGeometry(this.radiusTop, this.radiusBottom, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength);
+    },
   },
 };

src/geometries/DodecahedronGeometry.js

@@ -7,7 +7,9 @@ export default {
     radius: { type: Number, default: 1 },
     detail: { type: Number, default: 0 },
   },
-  created() {
+  methods: {
-    this.parent.geometry = new DodecahedronBufferGeometry(this.radius, this.detail);
+    createGeometry() {
+      this.geometry = new DodecahedronBufferGeometry(this.radius, this.detail);
+    },
   },
 };

src/geometries/Geometry.js

@@ -1,12 +1,39 @@
+import { watch } from 'vue';
+
 export default {
-  inject: ['parent'],
+  emits: ['ready'],
-  beforeMount() {
+  inject: ['mesh'],
-    if (!this.parent) {
+  created() {
+    if (!this.mesh) {
       console.error('Missing parent Mesh');
     }
+    this.watchProps = [];
+    Object.entries(this.$props).forEach(e => this.watchProps.push(e[0]));
+  },
+  beforeMount() {
+    this.createGeometry();
+    this.mesh.setGeometry(this.geometry);
+  },
+  mounted() {
+    this.addWatchers();
   },
   unmounted() {
-    this.parent.geometry.dispose();
+    this.geometry.dispose();
+  },
+  methods: {
+    addWatchers() {
+      this.watchProps.forEach(prop => {
+        watch(() => this[prop], () => {
+          this.refreshGeometry();
+        });
+      });
+    },
+    refreshGeometry() {
+      const oldGeo = this.geometry;
+      this.createGeometry();
+      this.mesh.setGeometry(this.geometry);
+      oldGeo.dispose();
+    },
   },
   render() {
     return [];

src/geometries/IcosahedronGeometry.js

@@ -7,7 +7,9 @@ export default {
     radius: { type: Number, default: 1 },
     detail: { type: Number, default: 0 },
   },
-  created() {
+  methods: {
-    this.parent.geometry = new IcosahedronBufferGeometry(this.radius, this.detail);
+    createGeometry() {
+      this.geometry = new IcosahedronBufferGeometry(this.radius, this.detail);
+    },
   },
 };

src/geometries/LatheGeometry.js

@@ -9,7 +9,9 @@ export default {
     phiStart: { type: Number, default: 0 },
     phiLength: { type: Number, default: Math.PI * 2 },
   },
-  created() {
+  methods: {
-    this.parent.geometry = new LatheBufferGeometry(this.points, this.segments, this.phiStart, this.phiLength);
+    createGeometry() {
+      this.geometry = new LatheBufferGeometry(this.points, this.segments, this.phiStart, this.phiLength);
+    },
   },
 };

src/geometries/OctahedronGeometry.js

@@ -7,7 +7,9 @@ export default {
     radius: { type: Number, default: 1 },
     detail: { type: Number, default: 0 },
   },
-  created() {
+  methods: {
-    this.parent.geometry = new OctahedronBufferGeometry(this.radius, this.detail);
+    createGeometry() {
+      this.geometry = new OctahedronBufferGeometry(this.radius, this.detail);
+    },
   },
 };

src/geometries/PolyhedronGeometry.js

@@ -9,7 +9,9 @@ export default {
     radius: { type: Number, default: 1 },
     detail: { type: Number, default: 0 },
   },
-  created() {
+  methods: {
-    this.parent.geometry = new PolyhedronBufferGeometry(this.vertices, this.indices, this.radius, this.detail);
+    createGeometry() {
+      this.geometry = new PolyhedronBufferGeometry(this.vertices, this.indices, this.radius, this.detail);
+    },
   },
 };

src/geometries/RingGeometry.js

@@ -11,7 +11,9 @@ export default {
     thetaStart: { type: Number, default: 0 },
     thetaLength: { type: Number, default: Math.PI * 2 },
   },
-  created() {
+  methods: {
-    this.parent.geometry = new RingBufferGeometry(this.innerRadius, this.outerRadius, this.thetaSegments, this.phiSegments, this.thetaStart, this.thetaLength);
+    createGeometry() {
+      this.geometry = new RingBufferGeometry(this.innerRadius, this.outerRadius, this.thetaSegments, this.phiSegments, this.thetaStart, this.thetaLength);
+    },
   },
 };

src/geometries/SphereGeometry.js

@@ -4,11 +4,13 @@ import Geometry from './Geometry.js';
 export default {
   extends: Geometry,
   props: {
-    radius: Number,
+    radius: { type: Number, default: 1 },
     widthSegments: { type: Number, default: 12 },
     heightSegments: { type: Number, default: 12 },
   },
-  created() {
+  methods: {
-    this.parent.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments);
+    createGeometry() {
+      this.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments);
+    },
   },
 };

src/geometries/TetrahedronGeometry.js

@@ -7,7 +7,9 @@ export default {
     radius: { type: Number, default: 1 },
     detail: { type: Number, default: 0 },
   },
-  created() {
+  methods: {
-    this.parent.geometry = new TetrahedronBufferGeometry(this.radius, this.detail);
+    createGeometry() {
+      this.geometry = new TetrahedronBufferGeometry(this.radius, this.detail);
+    },
   },
 };

src/geometries/TorusGeometry.js

@@ -10,7 +10,9 @@ export default {
     tubularSegments: { type: Number, default: 6 },
     arc: { type: Number, default: Math.PI * 2 },
   },
-  created() {
+  methods: {
-    this.parent.geometry = new TorusBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.arc);
+    createGeometry() {
+      this.geometry = new TorusBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.arc);
+    },
   },
 };

src/geometries/TorusKnotGeometry.js

@@ -11,7 +11,9 @@ export default {
     p: { type: Number, default: 2 },
     q: { type: Number, default: 3 },
   },
-  created() {
+  methods: {
-    this.parent.geometry = new TorusKnotBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.p, this.q);
+    createGeometry() {
+      this.geometry = new TorusKnotBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.p, this.q);
+    },
   },
 };

src/geometries/TubeGeometry.js

@@ -10,7 +10,9 @@ export default {
     radiusSegments: { type: Number, default: 8 },
     closed: { type: Boolean, default: false },
   },
-  created() {
+  methods: {
-    this.parent.geometry = new TubeBufferGeometry(this.path, this.tubularSegments, this.radius, this.radiusSegments, this.closed);
+    createGeometry() {
+      this.geometry = new TubeBufferGeometry(this.path, this.tubularSegments, this.radius, this.radiusSegments, this.closed);
+    },
   },
 };

src/geometries/index.js

@@ -1,5 +1,6 @@
 export { default as BoxGeometry } from './BoxGeometry.js';
 export { default as CircleGeometry } from './CircleGeometry.js';
+export { default as ConeGeometry } from './ConeGeometry.js';
 export { default as CylinderGeometry } from './CylinderGeometry.js';
 export { default as DodecahedronGeometry } from './DodecahedronGeometry.js';
 export { default as IcosahedronGeometry } from './IcosahedronGeometry.js';