From 98c74aa1c4082ab8c51717f9ea19e05d3c232ba9 Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Sun, 4 Apr 2021 21:02:21 +0200 Subject: [PATCH] defineComponent for effects (#10) --- src/effects/BokehPass.js | 5 +++-- src/effects/EffectComposer.js | 5 +++-- src/effects/EffectPass.js | 6 ++++-- src/effects/FXAAPass.js | 5 +++-- src/effects/FilmPass.js | 25 +++++++------------------ src/effects/HalftonePass.js | 6 +++--- src/effects/RenderPass.js | 5 +++-- src/effects/SMAAPass.js | 5 +++-- src/effects/SSAOPass.js | 5 +++-- src/effects/TiltShiftPass.js | 6 +++--- src/effects/UnrealBloomPass.js | 5 +++-- src/effects/ZoomBlurPass.js | 5 +++-- 12 files changed, 41 insertions(+), 42 deletions(-) diff --git a/src/effects/BokehPass.js b/src/effects/BokehPass.js index bb38876..616c1ae 100644 --- a/src/effects/BokehPass.js +++ b/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', -}; +}); diff --git a/src/effects/EffectComposer.js b/src/effects/EffectComposer.js index 6516f1b..195d08c 100644 --- a/src/effects/EffectComposer.js +++ b/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', -}; +}); diff --git a/src/effects/EffectPass.js b/src/effects/EffectPass.js index 82a4ced..4cf08e0 100644 --- a/src/effects/EffectPass.js +++ b/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', -}; +}); diff --git a/src/effects/FXAAPass.js b/src/effects/FXAAPass.js index 3a69ffe..b48078b 100644 --- a/src/effects/FXAAPass.js +++ b/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', -}; +}); diff --git a/src/effects/FilmPass.js b/src/effects/FilmPass.js index 2c49018..ab055a9 100644 --- a/src/effects/FilmPass.js +++ b/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: { - type: Number, - default: 0.5, - }, - scanlinesIntensity: { - type: Number, - default: 0.05, - }, - scanlinesCount: { - type: Number, - default: 4096, - }, - grayscale: { - type: Number, - default: 0, - }, + noiseIntensity: { type: Number, default: 0.5 }, + 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', -}; +}); diff --git a/src/effects/HalftonePass.js b/src/effects/HalftonePass.js index 3da12e8..fc893c6 100644 --- a/src/effects/HalftonePass.js +++ b/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', -}; +}); diff --git a/src/effects/RenderPass.js b/src/effects/RenderPass.js index c82875f..a3a45f5 100644 --- a/src/effects/RenderPass.js +++ b/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', -}; +}); diff --git a/src/effects/SMAAPass.js b/src/effects/SMAAPass.js index 06a70fd..4d45a21 100644 --- a/src/effects/SMAAPass.js +++ b/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', -}; +}); diff --git a/src/effects/SSAOPass.js b/src/effects/SSAOPass.js index ba625a0..ed6d919 100644 --- a/src/effects/SSAOPass.js +++ b/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', -}; +}); diff --git a/src/effects/TiltShiftPass.js b/src/effects/TiltShiftPass.js index bc9167b..0ec41f3 100644 --- a/src/effects/TiltShiftPass.js +++ b/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', -}; +}); diff --git a/src/effects/UnrealBloomPass.js b/src/effects/UnrealBloomPass.js index 83a4006..862df34 100644 --- a/src/effects/UnrealBloomPass.js +++ b/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', -}; +}); diff --git a/src/effects/ZoomBlurPass.js b/src/effects/ZoomBlurPass.js index b6786af..6c8c177 100644 --- a/src/effects/ZoomBlurPass.js +++ b/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', -}; +});