defineComponent for meshes and simplify (#10)

src/meshes/Box.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/BoxGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Box',
-};
+export default meshComponent('Box', props, createGeometry);

src/meshes/Circle.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/CircleGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Circle',
-};
+export default meshComponent('Circle', props, createGeometry);

src/meshes/Cone.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/ConeGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Cone',
-};
+export default meshComponent('Cone', props, createGeometry);

src/meshes/Cylinder.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/CylinderGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Cylinder',
-};
+export default meshComponent('Cylinder', props, createGeometry);

src/meshes/Dodecahedron.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/DodecahedronGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Dodecahedron',
-};
+export default meshComponent('Dodecahedron', props, createGeometry);

src/meshes/Gem.js

@@ -1,3 +1,4 @@
+import { defineComponent } from 'vue';
 import {
   BackSide,
   CubeCamera,
@@ -10,7 +11,7 @@ import {
 import Mesh from './Mesh.js';
 import { bindProp } from '../tools';
 
-export default {
+export default defineComponent({
   extends: Mesh,
   props: {
     cubeRTSize: { type: Number, default: 256 },
@@ -69,4 +70,4 @@ export default {
     },
   },
   __hmrId: 'Gem',
-};
+});

src/meshes/Icosahedron.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/IcosahedronGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Icosahedron',
-};
+export default meshComponent('Icosahedron', props, createGeometry);

src/meshes/Image.js

@@ -1,8 +1,8 @@
+import { defineComponent, watch } from 'vue';
 import { DoubleSide, MeshBasicMaterial, PlaneGeometry, TextureLoader } from 'three';
-import { watch } from 'vue';
 import Mesh from './Mesh.js';
 
-export default {
+export default defineComponent({
   emits: ['loaded'],
   extends: Mesh,
   props: {
@@ -66,4 +66,4 @@ export default {
     },
   },
   __hmrId: 'Image',
-};
+});

src/meshes/InstancedMesh.js

@@ -1,9 +1,10 @@
+import { defineComponent } from 'vue';
 import { InstancedMesh } from 'three';
 import Object3D from '../core/Object3D';
 import { bindProp } from '../tools';
 import { pointerProps } from './Mesh';
 
-export default {
+export default defineComponent({
   extends: Object3D,
   props: {
     castShadow: Boolean,
@@ -60,4 +61,4 @@ export default {
     }
   },
   __hmrId: 'InstancedMesh',
-};
+});

src/meshes/Lathe.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/LatheGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Lathe',
-};
+export default meshComponent('Lathe', props, createGeometry);

src/meshes/Mesh.js

@@ -1,5 +1,5 @@
-import { watch } from 'vue';
-import { Mesh } from 'three';
+import { defineComponent, watch } from 'vue';
+import { Mesh as TMesh } from 'three';
 import Object3D from '../core/Object3D.js';
 import { bindProp } from '../tools';
 
@@ -13,7 +13,7 @@ export const pointerProps = {
   onClick: Function,
 };
 
-export default {
+const Mesh = defineComponent({
   name: 'Mesh',
   extends: Object3D,
   props: {
@@ -33,7 +33,7 @@ export default {
   },
   methods: {
     initMesh() {
-      this.mesh = new Mesh(this.geometry, this.material);
+      this.mesh = new TMesh(this.geometry, this.material);
       this.mesh.component = this;
 
       bindProp(this, 'castShadow', this.mesh);
@@ -81,4 +81,24 @@ export default {
     if (this.geometry) this.geometry.dispose();
   },
   __hmrId: 'Mesh',
+});
+
+export default Mesh;
+
+export function meshComponent(name, props, createGeometry) {
+  return defineComponent({
+    name,
+    extends: Mesh,
+    props,
+    created() {
+      this.createGeometry();
+      this.addGeometryWatchers(props);
+    },
+    methods: {
+      createGeometry() {
+        this.geometry = createGeometry(this);
+      },
+    },
+    __hmrId: name,
+  });
 };

src/meshes/MirrorMesh.js

@@ -1,3 +1,4 @@
+import { defineComponent } from 'vue';
 import {
   CubeCamera,
   LinearMipmapLinearFilter,
@@ -6,7 +7,7 @@ import {
 } from 'three';
 import Mesh from './Mesh.js';
 
-export default {
+export default defineComponent({
   extends: Mesh,
   props: {
     cubeRTSize: { type: Number, default: 256 },
@@ -39,4 +40,4 @@ export default {
     },
   },
   __hmrId: 'MirrorMesh',
-};
+});

src/meshes/Octahedron.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/OctahedronGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Octahedron',
-};
+export default meshComponent('Octahedron', props, createGeometry);

src/meshes/Plane.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/PlaneGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Plane',
-};
+export default meshComponent('Plane', props, createGeometry);

src/meshes/Polyhedron.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/PolyhedronGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Polyhedron',
-};
+export default meshComponent('Polyhedron', props, createGeometry);

src/meshes/RefractionMesh.js

@@ -1,3 +1,4 @@
+import { defineComponent } from 'vue';
 import {
   CubeCamera,
   CubeRefractionMapping,
@@ -8,7 +9,7 @@ import {
 import Mesh from './Mesh.js';
 import { bindProp } from '../tools';
 
-export default {
+export default defineComponent({
   extends: Mesh,
   props: {
     cubeRTSize: { type: Number, default: 256 },
@@ -44,4 +45,4 @@ export default {
     },
   },
   __hmrId: 'RefractionMesh',
-};
+});

src/meshes/Ring.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/RingGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Ring',
-};
+export default meshComponent('Ring', props, createGeometry);

src/meshes/Sphere.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/SphereGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Sphere',
-};
+export default meshComponent('Sphere', props, createGeometry);

src/meshes/Sprite.js

@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import { Sprite, SpriteMaterial, TextureLoader } from 'three';
 import Object3D from '../core/Object3D.js';
 
-export default {
+export default defineComponent({
   extends: Object3D,
   emits: ['loaded'],
   props: {
@@ -50,4 +51,4 @@ export default {
     },
   },
   __hmrId: 'Sprite',
-};
+});

src/meshes/Tetrahedron.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/TetrahedronGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Tetrahedron',
-};
+export default meshComponent('Tetrahedron', props, createGeometry);

src/meshes/Text.js

@@ -1,13 +1,25 @@
+import { defineComponent, watch } from 'vue';
 import { FontLoader, TextGeometry } from 'three';
-import { watch } from 'vue';
 import Mesh from './Mesh.js';
-import TextProps from './TextProps.js';
 
-export default {
+const props = {
+  text: String,
+  fontSrc: String,
+  size: { type: Number, default: 80 },
+  height: { type: Number, default: 5 },
+  depth: { type: Number, default: 1 },
+  curveSegments: { type: Number, default: 12 },
+  bevelEnabled: { type: Boolean, default: false },
+  bevelThickness: { type: Number, default: 10 },
+  bevelSize: { type: Number, default: 8 },
+  bevelOffset: { type: Number, default: 0 },
+  bevelSegments: { type: Number, default: 5 },
+  align: { type: [Boolean, String], default: false },
+};
+
+export default defineComponent({
   extends: Mesh,
-  props: {
-    ...TextProps,
-  },
+  props,
   data() {
     return {
       loading: true,
@@ -54,4 +66,4 @@ export default {
       }
     },
   },
-};
+});

src/meshes/TextProps.js

@@ -1,14 +0,0 @@
-export default {
-  text: String,
-  fontSrc: String,
-  size: { type: Number, default: 80 },
-  height: { type: Number, default: 5 },
-  depth: { type: Number, default: 1 },
-  curveSegments: { type: Number, default: 12 },
-  bevelEnabled: { type: Boolean, default: false },
-  bevelThickness: { type: Number, default: 10 },
-  bevelSize: { type: Number, default: 8 },
-  bevelOffset: { type: Number, default: 0 },
-  bevelSegments: { type: Number, default: 5 },
-  align: { type: [Boolean, String], default: false },
-};

src/meshes/Torus.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/TorusGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Torus',
-};
+export default meshComponent('Torus', props, createGeometry);

src/meshes/TorusKnot.js

@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/TorusKnotGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'TorusKnot',
-};
+export default meshComponent('TorusKnot', props, createGeometry);

src/meshes/Tube.js

@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import Mesh from './Mesh.js';
 import { props, createGeometry, updateTubeGeometryPoints } from '../geometries/TubeGeometry.js';
 
-export default {
+export default defineComponent({
   extends: Mesh,
   props,
   created() {
@@ -18,4 +19,4 @@ export default {
     },
   },
   __hmrId: 'Tube',
-};
+});