add geometries (generated code)

src/geometries/BoxGeometry.js

@@ -4,23 +4,12 @@ import Geometry from './Geometry.js';
 export default {
   extends: Geometry,
   props: {
-    size: {
-      type: Number,
+    size: { type: Number },
+    width: { type: Number, default: 1 },
+    height: { type: Number, default: 1 },
+    depth: { type: Number, default: 1 },
   },
-    width: {
-      type: Number,
-      default: 1,
-    },
-    height: {
-      type: Number,
-      default: 1,
-    },
-    depth: {
-      type: Number,
-      default: 1,
-    },
-  },
-  mounted() {
+  created() {
     if (this.size) {
       this.parent.geometry = new BoxBufferGeometry(this.size, this.size, this.size);
     } else {

src/geometries/CircleGeometry.js

@@ -0,0 +1,15 @@
+import { CircleBufferGeometry } from 'three';
+import Geometry from './Geometry.js';
+
+export default {
+  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 },
+  },
+  created() {
+    this.parent.geometry = new CircleBufferGeometry(this.radius, this.segments, this.thetaStart, this.thetaLength);
+  },
+};

src/geometries/ConeGeometry.js

@@ -0,0 +1,18 @@
+import { ConeBufferGeometry } from 'three';
+import Geometry from './Geometry.js';
+
+export default {
+  extends: Geometry,
+  props: {
+    radius: { type: Number, default: 1 },
+    height: { type: Number, default: 1 },
+    radialSegments: { type: Number, default: 8 },
+    heightSegments: { type: Number, default: 1 },
+    openEnded: { type: Boolean, default: false },
+    thetaStart: { type: Number, default: 0 },
+    thetaLength: { type: Number, default: Math.PI * 2 },
+  },
+  created() {
+    this.parent.geometry = new ConeBufferGeometry(this.radius, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength);
+  },
+};

src/geometries/CylinderGeometry.js

@@ -0,0 +1,19 @@
+import { CylinderBufferGeometry } from 'three';
+import Geometry from './Geometry.js';
+
+export default {
+  extends: Geometry,
+  props: {
+    radiusTop: { type: Number, default: 1 },
+    radiusBottom: { type: Number, default: 1 },
+    height: { type: Number, default: 1 },
+    radialSegments: { type: Number, default: 8 },
+    heightSegments: { type: Number, default: 1 },
+    openEnded: { type: Boolean, default: false },
+    thetaStart: { type: Number, default: 0 },
+    thetaLength: { type: Number, default: Math.PI * 2 },
+  },
+  created() {
+    this.parent.geometry = new CylinderBufferGeometry(this.radiusTop, this.radiusBottom, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength);
+  },
+};

src/geometries/DodecahedronGeometry.js

@@ -0,0 +1,13 @@
+import { DodecahedronBufferGeometry } from 'three';
+import Geometry from './Geometry.js';
+
+export default {
+  extends: Geometry,
+  props: {
+    radius: { type: Number, default: 1 },
+    detail: { type: Number, default: 0 },
+  },
+  created() {
+    this.parent.geometry = new DodecahedronBufferGeometry(this.radius, this.detail);
+  },
+};

src/geometries/IcosahedronGeometry.js

@@ -0,0 +1,13 @@
+import { IcosahedronBufferGeometry } from 'three';
+import Geometry from './Geometry.js';
+
+export default {
+  extends: Geometry,
+  props: {
+    radius: { type: Number, default: 1 },
+    detail: { type: Number, default: 0 },
+  },
+  created() {
+    this.parent.geometry = new IcosahedronBufferGeometry(this.radius, this.detail);
+  },
+};

src/geometries/LatheGeometry.js

@@ -0,0 +1,15 @@
+import { LatheBufferGeometry } from 'three';
+import Geometry from './Geometry.js';
+
+export default {
+  extends: Geometry,
+  props: {
+    points: Array,
+    segments: { type: Number, default: 12 },
+    phiStart: { type: Number, default: 0 },
+    phiLength: { type: Number, default: Math.PI * 2 },
+  },
+  created() {
+    this.parent.geometry = new LatheBufferGeometry(this.points, this.segments, this.phiStart, this.phiLength);
+  },
+};

src/geometries/OctahedronGeometry.js

@@ -0,0 +1,13 @@
+import { OctahedronBufferGeometry } from 'three';
+import Geometry from './Geometry.js';
+
+export default {
+  extends: Geometry,
+  props: {
+    radius: { type: Number, default: 1 },
+    detail: { type: Number, default: 0 },
+  },
+  created() {
+    this.parent.geometry = new OctahedronBufferGeometry(this.radius, this.detail);
+  },
+};

src/geometries/PolyhedronGeometry.js

@@ -0,0 +1,13 @@
+import { PolyhedronBufferGeometry } from 'three';
+import Geometry from './Geometry.js';
+
+export default {
+  extends: Geometry,
+  props: {
+    radius: { type: Number, default: 1 },
+    detail: { type: Number, default: 0 },
+  },
+  created() {
+    this.parent.geometry = new PolyhedronBufferGeometry(this.radius, this.detail);
+  },
+};

src/geometries/RingGeometry.js

@@ -0,0 +1,17 @@
+import { RingBufferGeometry } from 'three';
+import Geometry from './Geometry.js';
+
+export default {
+  extends: Geometry,
+  props: {
+    innerRadius: { type: Number, default: 0.5 },
+    outerRadius: { type: Number, default: 1 },
+    thetaSegments: { type: Number, default: 8 },
+    phiSegments: { type: Number, default: 1 },
+    thetaStart: { type: Number, default: 0 },
+    thetaLength: { type: Number, default: Math.PI * 2 },
+  },
+  created() {
+    this.parent.geometry = new RingBufferGeometry(this.innerRadius, this.outerRadius, this.thetaSegments, this.phiSegments, this.thetaStart, this.thetaLength);
+  },
+};

src/geometries/SphereGeometry.js

@@ -5,16 +5,10 @@ export default {
   extends: Geometry,
   props: {
     radius: Number,
-    widthSegments: {
-      type: Number,
-      default: 12,
+    widthSegments: { type: Number, default: 12 },
+    heightSegments: { type: Number, default: 12 },
   },
-    heightSegments: {
-      type: Number,
-      default: 12,
-    },
-  },
-  mounted() {
+  created() {
     this.parent.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments);
   },
 };

src/geometries/TetrahedronGeometry.js

@@ -0,0 +1,13 @@
+import { TetrahedronBufferGeometry } from 'three';
+import Geometry from './Geometry.js';
+
+export default {
+  extends: Geometry,
+  props: {
+    radius: { type: Number, default: 1 },
+    detail: { type: Number, default: 0 },
+  },
+  created() {
+    this.parent.geometry = new TetrahedronBufferGeometry(this.radius, this.detail);
+  },
+};

src/geometries/TorusGeometry.js

@@ -0,0 +1,16 @@
+import { TorusBufferGeometry } from 'three';
+import Geometry from './Geometry.js';
+
+export default {
+  extends: Geometry,
+  props: {
+    radius: { type: Number, default: 1 },
+    tube: { type: Number, default: 0.4 },
+    radialSegments: { type: Number, default: 8 },
+    tubularSegments: { type: Number, default: 6 },
+    arc: { type: Number, default: Math.PI * 2 },
+  },
+  created() {
+    this.parent.geometry = new TorusBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.arc);
+  },
+};

src/geometries/TorusKnotGeometry.js

@@ -0,0 +1,17 @@
+import { TorusKnotBufferGeometry } from 'three';
+import Geometry from './Geometry.js';
+
+export default {
+  extends: Geometry,
+  props: {
+    radius: { type: Number, default: 1 },
+    tube: { type: Number, default: 0.4 },
+    radialSegments: { type: Number, default: 64 },
+    tubularSegments: { type: Number, default: 8 },
+    p: { type: Number, default: 2 },
+    q: { type: Number, default: 3 },
+  },
+  created() {
+    this.parent.geometry = new TorusKnotBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.p, this.q);
+  },
+};

src/geometries/TubeGeometry.js

@@ -0,0 +1,16 @@
+import { Curve, TubeBufferGeometry } from 'three';
+import Geometry from './Geometry.js';
+
+export default {
+  extends: Geometry,
+  props: {
+    path: Curve,
+    tubularSegments: { type: Number, default: 64 },
+    radius: { type: Number, default: 1 },
+    radiusSegments: { type: Number, default: 8 },
+    closed: { type: Boolean, default: false },
+  },
+  created() {
+    this.parent.geometry = new TubeBufferGeometry(this.path, this.tubularSegments, this.radius, this.radiusSegments, this.closed);
+  },
+};

src/geometries/index.js

@@ -1,2 +1,14 @@
 export { default as BoxGeometry } from './BoxGeometry.js';
+export { default as CircleGeometry } from './CircleGeometry.js';
+export { default as CylinderGeometry } from './CylinderGeometry.js';
+export { default as DodecahedronGeometry } from './DodecahedronGeometry.js';
+export { default as IcosahedronGeometry } from './IcosahedronGeometry.js';
+export { default as LatheGeometry } from './LatheGeometry.js';
+export { default as OctahedronGeometry } from './OctahedronGeometry.js';
+export { default as PolyhedronGeometry } from './PolyhedronGeometry.js';
+export { default as RingGeometry } from './RingGeometry.js';
 export { default as SphereGeometry } from './SphereGeometry.js';
+export { default as TetrahedronGeometry } from './TetrahedronGeometry.js';
+export { default as TorusGeometry } from './TorusGeometry.js';
+export { default as TorusKnotGeometry } from './TorusKnotGeometry.js';
+export { default as TubeGeometry } from './TubeGeometry.js';

src/meshes/Box.js

@@ -1,33 +1,26 @@
 import { BoxBufferGeometry } from 'three';
+import { watch } from 'vue';
 import Mesh from './Mesh.js';
 
 export default {
   extends: Mesh,
   props: {
-    size: {
-      type: Number,
-    },
-    width: {
-      type: Number,
-      default: 1,
-    },
-    height: {
-      type: Number,
-      default: 1,
-    },
-    depth: {
-      type: Number,
-      default: 1,
-    },
-  },
-  watch: {
-    size() { this.refreshGeometry(); },
-    width() { this.refreshGeometry(); },
-    height() { this.refreshGeometry(); },
-    depth() { this.refreshGeometry(); },
+    size: { type: 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();
+
+    ['size', 'width', 'height', 'depth', 'widthSegments', 'heightSegments', 'depthSegments'].forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
   },
   methods: {
     createGeometry() {

src/plugin.js

@@ -9,7 +9,20 @@ export const TroisJSVuePlugin = {
       'Scene',
 
       'BoxGeometry',
+      'CircleGeometry',
+      'ConeGeometry',
+      'CylinderGeometry',
+      'DodecahedronGeometry',
+      'IcosahedronGeometry',
+      'LatheGeometry',
+      'OctahedronGeometry',
+      'PolyhedronGeometry',
+      'RingGeometry',
       'SphereGeometry',
+      'TetrahedronGeometry',
+      'TorusGeometry',
+      'TorusKnotGeometry',
+      'TubeGeometry',
 
       'AmbientLight',
       'DirectionalLight',