import { defineComponent , watch } from 'vue' ; import { HalftonePass } from 'three/examples/jsm/postprocessing/HalftonePass.js' ; import EffectPass from './EffectPass' ; const props = { shape : { type : Number , default : 1 } , radius : { type : Number , default : 4 } , rotateR : { type : Number , default : Math . PI / 12 * 1 } , rotateG : { type : Number , default : Math . PI / 12 * 2 } , rotateB : { type : Number , default : Math . PI / 12 * 3 } , scatter : { type : Number , default : 0 } , } as const ; export default defineComponent ( { extends : EffectPass , props , created ( ) { if ( ! this . renderer ) return ; const pass = new HalftonePass ( this . renderer . size . width , this . renderer . size . height , { } ) ; Object . keys ( props ) . forEach ( p => { pass . uniforms [ p ] . value = this [ p ] ; watch ( ( ) => this [ p ] , ( value ) => { pass . uniforms [ p ] . value = value ; } ) ; } ) ; this . initEffectPass ( pass ) ; } , __hmrId : 'HalftonePass' , } ) ;