defineComponent for effects (#10)

src/effects/BokehPass.js

@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import { BokehPass } from 'three/examples/jsm/postprocessing/BokehPass.js';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   props: {
     focus: {
@@ -40,4 +41,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'BokehPass',
-};
+});

src/effects/EffectComposer.js

@@ -1,6 +1,7 @@
+import { defineComponent } from 'vue';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 
-export default {
+export default defineComponent({
   setup() {
     return {
       passes: [],
@@ -37,4 +38,4 @@ export default {
     return this.$slots.default();
   },
   __hmrId: 'EffectComposer',
-};
+});

src/effects/EffectPass.js

@@ -1,4 +1,6 @@
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   inject: ['three', 'passes'],
   emits: ['ready'],
   beforeMount() {
@@ -20,4 +22,4 @@ export default {
     return [];
   },
   __hmrId: 'EffectPass',
-};
+});

src/effects/FXAAPass.js

@@ -1,8 +1,9 @@
+import { defineComponent } from 'vue';
 import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   mounted() {
     const pass = new ShaderPass(FXAAShader);
@@ -22,4 +23,4 @@ export default {
     },
   },
   __hmrId: 'FXAAPass',
-};
+});

src/effects/FilmPass.js

@@ -1,25 +1,14 @@
+import { defineComponent } from 'vue';
 import { FilmPass } from 'three/examples/jsm/postprocessing/FilmPass.js';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   props: {
-    noiseIntensity: {
+    noiseIntensity: { type: Number, default: 0.5 },
-      type: Number,
+    scanlinesIntensity: { type: Number, default: 0.05 },
-      default: 0.5,
+    scanlinesCount: { type: Number, default: 4096 },
-    },
+    grayscale: { type: Number, default: 0 },
-    scanlinesIntensity: {
-      type: Number,
-      default: 0.05,
-    },
-    scanlinesCount: {
-      type: Number,
-      default: 4096,
-    },
-    grayscale: {
-      type: Number,
-      default: 0,
-    },
   },
   watch: {
     noiseIntensity() { this.pass.uniforms.nIntensity.value = this.noiseIntensity; },
@@ -32,4 +21,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'FilmPass',
-};
+});

src/effects/HalftonePass.js

@@ -1,8 +1,8 @@
+import { defineComponent, watch } from 'vue';
 import { HalftonePass } from 'three/examples/jsm/postprocessing/HalftonePass.js';
-import { watch } from 'vue';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   props: {
     shape: { type: Number, default: 1 },
@@ -25,4 +25,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'HalftonePass',
-};
+});

src/effects/RenderPass.js

@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   mounted() {
     if (!this.three.scene) {
@@ -14,4 +15,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'RenderPass',
-};
+});

src/effects/SMAAPass.js

@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass.js';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   mounted() {
     // three size is not set yet, but this pass will be resized by effect composer
@@ -9,4 +10,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'SMAAPass',
-};
+});

src/effects/SSAOPass.js

@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import { SSAOPass } from 'three/examples/jsm/postprocessing/SSAOPass.js';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   props: {
     scene: null,
@@ -26,4 +27,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'SSAOPass',
-};
+});

src/effects/TiltShiftPass.js

@@ -1,11 +1,11 @@
+import { defineComponent, watch } from 'vue';
 import { Vector2 } from 'three';
 import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
-import { watch } from 'vue';
 import EffectPass from './EffectPass.js';
 import TiltShift from '../shaders/TiltShift.js';
 import { bindProp } from '../tools';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   props: {
     blurRadius: { type: Number, default: 10 },
@@ -54,4 +54,4 @@ export default {
     },
   },
   __hmrId: 'TiltShiftPass',
-};
+});

src/effects/UnrealBloomPass.js

@@ -1,8 +1,9 @@
+import { defineComponent } from 'vue';
 import { Vector2 } from 'three';
 import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   props: {
     strength: { type: Number, default: 1.5 },
@@ -20,4 +21,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'UnrealBloomPass',
-};
+});

src/effects/ZoomBlurPass.js

@@ -1,9 +1,10 @@
+import { defineComponent } from 'vue';
 import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 import EffectPass from './EffectPass.js';
 import ZoomBlur from '../shaders/ZoomBlur.js';
 import { bindProp } from '../tools';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   props: {
     center: { type: Object, default: { x: 0.5, y: 0.5 } },
@@ -19,4 +20,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'ZoomBlurPass',
-};
+});