diff --git a/src/meshes/Circle.js b/src/meshes/Circle.js
new file mode 100644
index 0000000..4fc46a3
--- /dev/null
+++ b/src/meshes/Circle.js
@@ -0,0 +1,30 @@
+import { CircleBufferGeometry } from 'three';
+import { watch } from 'vue';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  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.createGeometry();
+
+    const watchProps = ['radius', 'segments', 'thetaStart', 'thetaLength'];
+    watchProps.forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new CircleBufferGeometry(this.radius, this.segments, this.thetaStart, this.thetaLength);
+    },
+  },
+  __hmrId: 'Circle',
+};
diff --git a/src/meshes/Cone.js b/src/meshes/Cone.js
new file mode 100644
index 0000000..6c18791
--- /dev/null
+++ b/src/meshes/Cone.js
@@ -0,0 +1,33 @@
+import { ConeBufferGeometry } from 'three';
+import { watch } from 'vue';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  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.createGeometry();
+
+    const watchProps = ['radius', 'height', 'radialSegments', 'heightSegments', 'openEnded', 'thetaStart', 'thetaLength'];
+    watchProps.forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new ConeBufferGeometry(this.radius, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength);
+    },
+  },
+  __hmrId: 'Cone',
+};
diff --git a/src/meshes/Cylinder.js b/src/meshes/Cylinder.js
new file mode 100644
index 0000000..0d0832f
--- /dev/null
+++ b/src/meshes/Cylinder.js
@@ -0,0 +1,34 @@
+import { CylinderBufferGeometry } from 'three';
+import { watch } from 'vue';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  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.createGeometry();
+
+    const watchProps = ['radiusTop', 'radiusBottom', 'height', 'radialSegments', 'heightSegments', 'openEnded', 'thetaStart', 'thetaLength'];
+    watchProps.forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new CylinderBufferGeometry(this.radiusTop, this.radiusBottom, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength);
+    },
+  },
+  __hmrId: 'Cylinder',
+};
diff --git a/src/meshes/Dodecahedron.js b/src/meshes/Dodecahedron.js
new file mode 100644
index 0000000..8497326
--- /dev/null
+++ b/src/meshes/Dodecahedron.js
@@ -0,0 +1,28 @@
+import { DodecahedronBufferGeometry } from 'three';
+import { watch } from 'vue';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  props: {
+    radius: { type: Number, default: 1 },
+    detail: { type: Number, default: 0 },
+
+  },
+  created() {
+    this.createGeometry();
+
+    const watchProps = ['radius', 'detail'];
+    watchProps.forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new DodecahedronBufferGeometry(this.radius, this.detail);
+    },
+  },
+  __hmrId: 'Dodecahedron',
+};
diff --git a/src/meshes/Icosahedron.js b/src/meshes/Icosahedron.js
new file mode 100644
index 0000000..16419e9
--- /dev/null
+++ b/src/meshes/Icosahedron.js
@@ -0,0 +1,28 @@
+import { IcosahedronBufferGeometry } from 'three';
+import { watch } from 'vue';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  props: {
+    radius: { type: Number, default: 1 },
+    detail: { type: Number, default: 0 },
+
+  },
+  created() {
+    this.createGeometry();
+
+    const watchProps = ['radius', 'detail'];
+    watchProps.forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new IcosahedronBufferGeometry(this.radius, this.detail);
+    },
+  },
+  __hmrId: 'Icosahedron',
+};
diff --git a/src/meshes/Lathe.js b/src/meshes/Lathe.js
new file mode 100644
index 0000000..33917f6
--- /dev/null
+++ b/src/meshes/Lathe.js
@@ -0,0 +1,30 @@
+import { LatheBufferGeometry } from 'three';
+import { watch } from 'vue';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  props: {
+    points: Array,
+    segments: { type: Number, default: 12 },
+    phiStart: { type: Number, default: 0 },
+    phiLength: { type: Number, default: Math.PI * 2 },
+
+  },
+  created() {
+    this.createGeometry();
+
+    const watchProps = ['points', 'segments', 'phiStart', 'phiLength'];
+    watchProps.forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new LatheBufferGeometry(this.points, this.segments, this.phiStart, this.phiLength);
+    },
+  },
+  __hmrId: 'Lathe',
+};
diff --git a/src/meshes/Octahedron.js b/src/meshes/Octahedron.js
new file mode 100644
index 0000000..1a4c638
--- /dev/null
+++ b/src/meshes/Octahedron.js
@@ -0,0 +1,28 @@
+import { OctahedronBufferGeometry } from 'three';
+import { watch } from 'vue';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  props: {
+    radius: { type: Number, default: 1 },
+    detail: { type: Number, default: 0 },
+
+  },
+  created() {
+    this.createGeometry();
+
+    const watchProps = ['radius', 'detail'];
+    watchProps.forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new OctahedronBufferGeometry(this.radius, this.detail);
+    },
+  },
+  __hmrId: 'Octahedron',
+};
diff --git a/src/meshes/Polyhedron.js b/src/meshes/Polyhedron.js
new file mode 100644
index 0000000..c24cfd1
--- /dev/null
+++ b/src/meshes/Polyhedron.js
@@ -0,0 +1,28 @@
+import { PolyhedronBufferGeometry } from 'three';
+import { watch } from 'vue';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  props: {
+    radius: { type: Number, default: 1 },
+    detail: { type: Number, default: 0 },
+
+  },
+  created() {
+    this.createGeometry();
+
+    const watchProps = ['radius', 'detail'];
+    watchProps.forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new PolyhedronBufferGeometry(this.radius, this.detail);
+    },
+  },
+  __hmrId: 'Polyhedron',
+};
diff --git a/src/meshes/Ring.js b/src/meshes/Ring.js
new file mode 100644
index 0000000..43b0bce
--- /dev/null
+++ b/src/meshes/Ring.js
@@ -0,0 +1,32 @@
+import { RingBufferGeometry } from 'three';
+import { watch } from 'vue';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  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.createGeometry();
+
+    const watchProps = ['innerRadius', 'outerRadius', 'thetaSegments', 'phiSegments', 'thetaStart', 'thetaLength'];
+    watchProps.forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new RingBufferGeometry(this.innerRadius, this.outerRadius, this.thetaSegments, this.phiSegments, this.thetaStart, this.thetaLength);
+    },
+  },
+  __hmrId: 'Ring',
+};
diff --git a/src/meshes/Tetrahedron.js b/src/meshes/Tetrahedron.js
new file mode 100644
index 0000000..1f96e68
--- /dev/null
+++ b/src/meshes/Tetrahedron.js
@@ -0,0 +1,28 @@
+import { TetrahedronBufferGeometry } from 'three';
+import { watch } from 'vue';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  props: {
+    radius: { type: Number, default: 1 },
+    detail: { type: Number, default: 0 },
+
+  },
+  created() {
+    this.createGeometry();
+
+    const watchProps = ['radius', 'detail'];
+    watchProps.forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new TetrahedronBufferGeometry(this.radius, this.detail);
+    },
+  },
+  __hmrId: 'Tetrahedron',
+};
diff --git a/src/meshes/Torus.js b/src/meshes/Torus.js
new file mode 100644
index 0000000..649f201
--- /dev/null
+++ b/src/meshes/Torus.js
@@ -0,0 +1,31 @@
+import { TorusBufferGeometry } from 'three';
+import { watch } from 'vue';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  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.createGeometry();
+
+    const watchProps = ['radius', 'tube', 'radialSegments', 'tubularSegments', 'arc'];
+    watchProps.forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new TorusBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.arc);
+    },
+  },
+  __hmrId: 'Torus',
+};
diff --git a/src/meshes/TorusKnot.js b/src/meshes/TorusKnot.js
new file mode 100644
index 0000000..8635f1b
--- /dev/null
+++ b/src/meshes/TorusKnot.js
@@ -0,0 +1,32 @@
+import { TorusKnotBufferGeometry } from 'three';
+import { watch } from 'vue';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  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.createGeometry();
+
+    const watchProps = ['radius', 'tube', 'radialSegments', 'tubularSegments', 'p', 'q'];
+    watchProps.forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new TorusKnotBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.p, this.q);
+    },
+  },
+  __hmrId: 'TorusKnot',
+};
diff --git a/src/meshes/Tube.js b/src/meshes/Tube.js
new file mode 100644
index 0000000..61a5bf8
--- /dev/null
+++ b/src/meshes/Tube.js
@@ -0,0 +1,31 @@
+import { Curve, TubeBufferGeometry } from 'three';
+import { watch } from 'vue';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  props: {
+    path: Curve,
+    tubularSegments: { type: Number, default: 64 },
+    radius: { type: Number, default: 1 },
+    radialSegments: { type: Number, default: 8 },
+    closed: { type: Boolean, default: false },
+
+  },
+  created() {
+    this.createGeometry();
+
+    const watchProps = ['path', 'tubularSegments', 'radius', 'radialSegments', 'closed'];
+    watchProps.forEach(prop => {
+      watch(() => this[prop], () => {
+        this.refreshGeometry();
+      });
+    });
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new TubeBufferGeometry(this.path, this.tubularSegments, this.radius, this.radialSegments, this.closed);
+    },
+  },
+  __hmrId: 'Tube',
+};