wip

src/effects/EffectComposer.js

@@ -20,8 +20,19 @@ export default {
         this.composer.addPass(pass);
       });
       this.three.composer = this.composer;
+
+      this.resize();
+      this.three.onAfterResize(this.resize);
     });
   },
+  unmounted() {
+    this.three.offAfterResize(this.resize);
+  },
+  methods: {
+    resize() {
+      this.composer.setSize(this.three.size.width, this.three.size.height);
+    },
+  },
   render() {
     return this.$slots.default();
   },

src/effects/FXAAPass.js

@@ -9,7 +9,7 @@ export default {
     this.passes.push(pass);
     this.pass = pass;
 
-    this.resize();
+    // resize will be called in three init
     this.three.onAfterResize(this.resize);
   },
   unmounted() {

src/effects/SMAAPass.js

@@ -0,0 +1,13 @@
+import { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass.js';
+import EffectPass from './EffectPass.js';
+
+export default {
+  extends: EffectPass,
+  mounted() {
+    // three size is not set yet, but this pass will be resized by effect composer
+    const pass = new SMAAPass(this.three.size.width, this.three.size.height);
+    this.passes.push(pass);
+    this.pass = pass;
+  },
+  __hmrId: 'SMAAPass',
+};