Is the GSAP PixiPlugins' ColorMatrixFilter usable on images that are being used in my three.js project?

[JFP 6 Likes (Newbie)]

Hi there!

Im trying to use the gsap-pixi colormatrix filter plugin on images that are mapped to geometry in my three.js module, but I dont know exactly how to tell pixi that its talking to a three.js image map, or if that is even possible.

Might help to show how Im loading the images onto the geometry in three

                

 

const vidTxt1 = new THREE.TextureLoader().load( 'txtrs/welcome.png' ); // load png, have three recognize it as 'vidTxt1'                        

                var plane2 = new THREE.Mesh( // makes a new mesh called plane2

                    new THREE.PlaneGeometry(2.08, 1.55, 2.2), // dimensions of the new mesh plane

                    new THREE.MeshBasicMaterial({ // new material called vidTxt1 hereby added to plane2

                        map: vidTxt1

                    })

                );

 

                plane2.position.set(0.1, 1, 0);    // position plane2 in space

                scene.add(plano2); // add plane2 to scene

// alrighty.. heres where I'm lost?

// I would have thought to proceed like this:
 

                var image1 = new PIXI.Sprite.from( vidTxt1 );  

                gsap.timeline({ repeat: -1 })

                    .to(image1, { pixi: { colorize: "red", colorizeAmount: 1 } })

                    .to(image1, { pixi: { hue: 180 } })

                    .to(image1, { pixi: { saturation: 0 } })

// but the console tells me

Uncaught TypeError: PIXI.Sprite is undefined

// Any idea how I could tell pixi that I want it to mess with vidTxt1 ? Your insights would be really helpful. :)

 

 

 

 

[GreenSock 18,243 Likes (Superhero)]

Hi @JFP. We really try to keep these forums focused on GSAP-specific questions. Of course anyone is welcome to chime in here to help you, but I just wanted to set expectations properly. We're not experts with combining Three.js and PIXI, sorry. 

[OSUblake 18,474 Likes (Superhero)]

Pixi objects don't work with three.js and vise versa. If you need color matrix filter for three.js, you'll need to find a shader that can do that. I'm sure someone has already written one for three.js.

 

[JFP 6 Likes (Newbie)]

Hi there, oh. Thank you both, I already looked around.. couldnt find any as cool as what I see you guys doing. Thanks for your thoughts anyhow.