From 9288a3eedf7fc2b90d9246612314ae344a40b6eb Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Wed, 21 Apr 2021 16:07:03 +0200
Subject: [PATCH] effects

---
 src/effects/EffectPass.ts | 7 +++++--
 src/effects/FXAAPass.ts   | 9 +++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/effects/EffectPass.ts b/src/effects/EffectPass.ts
index 948c7f1..74dcede 100644
--- a/src/effects/EffectPass.ts
+++ b/src/effects/EffectPass.ts
@@ -1,21 +1,24 @@
 import { Pass } from 'three/examples/jsm/postprocessing/Pass'
 import { defineComponent, inject } from 'vue'
+import { RendererInterface } from '../core/Renderer'
 import { ThreeInterface } from '../core/useThree'
 import { EffectComposerInterface } from './EffectComposer'
 
 interface EffectSetupInterface {
+  renderer: RendererInterface
   three: ThreeInterface
   composer: EffectComposerInterface
   pass?: Pass
 }
 
 export default defineComponent({
-  inject: ['three', 'composer'],
+  inject: ['renderer', 'three', 'composer'],
   emits: ['ready'],
   setup(): EffectSetupInterface {
+    const renderer = inject('renderer') as RendererInterface
     const three = inject('three') as ThreeInterface
     const composer = inject('composer') as EffectComposerInterface
-    return { three, composer }
+    return { renderer, three, composer }
   },
   created() {
     if (!this.composer) {
diff --git a/src/effects/FXAAPass.ts b/src/effects/FXAAPass.ts
index fafa847..84c263e 100644
--- a/src/effects/FXAAPass.ts
+++ b/src/effects/FXAAPass.ts
@@ -2,7 +2,7 @@ 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'
-import { ThreeResizeEventInterface } from '../core/useThree'
+import { SizeInterface } from '../core/useThree'
 
 export default defineComponent({
   extends: EffectPass,
@@ -10,15 +10,16 @@ export default defineComponent({
     const pass = new ShaderPass(FXAAShader)
 
     // resize will be called in three init
-    this.three.onAfterResize(this.resize)
+    this.renderer.addListener('resize', this.resize)
 
     this.initEffectPass(pass)
   },
   unmounted() {
-    this.three.offAfterResize(this.resize)
+    this.renderer.removeListener('resize', this.resize)
   },
   methods: {
-    resize({ size }: ThreeResizeEventInterface) {
+    resize({ size }: { size: SizeInterface }) {
+      console.log(size)
       if (this.pass) {
         const { resolution } = (this.pass as ShaderPass).material.uniforms
         resolution.value.x = 1 / size.width