defineComponent for materials (#10)

src/materials/BasicMaterial.js

@@ -1,8 +1,9 @@
+import { defineComponent } from 'vue';
 import { MeshBasicMaterial } from 'three';
 import { bindProps, propsValues } from '../tools';
 import Material, { wireframeProps } from './Material';
 
-export default {
+export default defineComponent({
   extends: Material,
   props: {
     ...wireframeProps,
@@ -16,4 +17,4 @@ export default {
     },
   },
   __hmrId: 'BasicMaterial',
-};
+});

src/materials/CubeTexture.js

@@ -1,7 +1,7 @@
+import { defineComponent, watch } from 'vue';
 import { CubeTextureLoader, CubeRefractionMapping } from 'three';
-import { watch } from 'vue';
 
-export default {
+export default defineComponent({
   inject: ['material'],
   emits: ['loaded'],
   props: {
@@ -49,4 +49,4 @@ export default {
   render() {
     return [];
   },
-};
+});

src/materials/LambertMaterial.js

@@ -1,8 +1,9 @@
+import { defineComponent } from 'vue';
 import { MeshLambertMaterial } from 'three';
 import { bindProps, propsValues } from '../tools';
 import Material, { wireframeProps } from './Material';
 
-export default {
+export default defineComponent({
   extends: Material,
   props: {
     ...wireframeProps,
@@ -16,4 +17,4 @@ export default {
     },
   },
   __hmrId: 'LambertMaterial',
-};
+});

src/materials/Map.js

@@ -1,6 +1,7 @@
+import { defineComponent } from 'vue';
 import Texture from './Texture.js';
 
-export default {
+export default defineComponent({
   extends: Texture,
   inject: ['material'],
   created() {
@@ -16,4 +17,4 @@ export default {
     },
   },
   __hmrId: 'Map',
-};
+});

src/materials/MatcapMaterial.js

@@ -1,9 +1,9 @@
+import { defineComponent } from 'vue';
 import { MeshMatcapMaterial, TextureLoader } from 'three';
-// import { watch } from 'vue';
 import { propsValues, getMatcapUrl } from '../tools';
 import Material from './Material';
 
-export default {
+export default defineComponent({
   extends: Material,
   props: {
     src: String,
@@ -22,4 +22,4 @@ export default {
     },
   },
   __hmrId: 'MatcapMaterial',
-};
+});

src/materials/Material.js

@@ -1,7 +1,7 @@
-import { watch } from 'vue';
+import { defineComponent, watch } from 'vue';
 import { FrontSide } from 'three';
 
-export default {
+export default defineComponent({
   inject: ['three', 'mesh'],
   props: {
     color: { type: [String, Number], default: '#ffffff' },
@@ -52,7 +52,7 @@ export default {
     return this.$slots.default ? this.$slots.default() : [];
   },
   __hmrId: 'Material',
-};
+});
 
 export const wireframeProps = {
   wireframe: { type: Boolean, default: false },

src/materials/PhongMaterial.js

@@ -1,9 +1,9 @@
+import { defineComponent, watch } from 'vue';
 import { MeshPhongMaterial } from 'three';
-import { watch } from 'vue';
 import { bindProps, propsValues } from '../tools';
 import Material, { wireframeProps } from './Material';
 
-export default {
+export default defineComponent({
   extends: Material,
   props: {
     emissive: { type: [Number, String], default: 0 },
@@ -33,4 +33,4 @@ export default {
     },
   },
   __hmrId: 'PhongMaterial',
-};
+});

src/materials/PhysicalMaterial.js

@@ -1,8 +1,9 @@
+import { defineComponent } from 'vue';
 import { MeshPhysicalMaterial } from 'three';
 import { propsValues } from '../tools';
 import StandardMaterial from './StandardMaterial';
 
-export default {
+export default defineComponent({
   extends: StandardMaterial,
   props: {
     flatShading: Boolean,
@@ -16,4 +17,4 @@ export default {
     },
   },
   __hmrId: 'PhysicalMaterial',
-};
+});

src/materials/ShaderMaterial.js

@@ -1,8 +1,8 @@
+import { defineComponent, watch } from 'vue';
 import { ShaderMaterial } from 'three';
-import { watch } from 'vue';
 import { propsValues, defaultFragmentShader, defaultVertexShader } from '../tools';
 
-export default {
+export default defineComponent({
   inject: ['three', 'mesh'],
   props: {
     uniforms: { type: Object, default: () => { return {}; } },
@@ -37,4 +37,4 @@ export default {
     return this.$slots.default ? this.$slots.default() : [];
   },
   __hmrId: 'ShaderMaterial',
-};
+});

src/materials/StandardMaterial.js

@@ -1,5 +1,5 @@
+import { defineComponent, watch } from 'vue';
 import { MeshStandardMaterial } from 'three';
-import { watch } from 'vue';
 import { bindProp, bindProps, propsValues } from '../tools';
 import Material, { wireframeProps } from './Material';
 
@@ -19,7 +19,7 @@ const props = {
   flatShading: Boolean,
 };
 
-export default {
+export default defineComponent({
   extends: Material,
   props: {
     ...props,
@@ -46,4 +46,4 @@ export default {
     },
   },
   __hmrId: 'StandardMaterial',
-};
+});

src/materials/SubSurfaceMaterial.js

@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import { Color, ShaderMaterial as TShaderMaterial, UniformsUtils } from 'three';
 import SubsurfaceScatteringShader from './SubsurfaceScatteringShader.js';
 
-export default {
+export default defineComponent({
   inject: ['three', 'mesh'],
   props: {
     color: { type: String, default: '#ffffff' },
@@ -51,4 +52,4 @@ export default {
     return [];
   },
   __hmrId: 'SubSurfaceMaterial',
-};
+});

src/materials/Texture.js

@@ -1,8 +1,8 @@
+import { defineComponent, watch } from 'vue';
 import { ClampToEdgeWrapping, LinearFilter, LinearMipmapLinearFilter, TextureLoader, UVMapping } from 'three';
-import { watch } from 'vue';
 import { bindProp } from '../tools';
 
-export default {
+export default defineComponent({
   inject: ['material'],
   emits: ['loaded'],
   props: {
@@ -57,4 +57,4 @@ export default {
     },
   },
   render() { return []; },
-};
+});

src/materials/ToonMaterial.js

@@ -1,8 +1,9 @@
+import { defineComponent } from 'vue';
 import { MeshToonMaterial } from 'three';
 import { bindProps, propsValues } from '../tools';
 import Material, { wireframeProps } from './Material';
 
-export default {
+export default defineComponent({
   extends: Material,
   props: {
     ...wireframeProps,
@@ -16,4 +17,4 @@ export default {
     },
   },
   __hmrId: 'ToonMaterial',
-};
+});