diff --git a/src/effects/EffectComposer.js b/src/effects/EffectComposer.js index 1f141a4..6516f1b 100644 --- a/src/effects/EffectComposer.js +++ b/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(); }, diff --git a/src/effects/FXAAPass.js b/src/effects/FXAAPass.js index 00ebb80..3442acf 100644 --- a/src/effects/FXAAPass.js +++ b/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() { diff --git a/src/effects/SMAAPass.js b/src/effects/SMAAPass.js new file mode 100644 index 0000000..b762eb1 --- /dev/null +++ b/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', +};