Jump to content


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

Recommended Posts

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.081.552.2), // dimensions of the new mesh plane
                    new THREE.MeshBasicMaterial({ // new material called vidTxt1 hereby added to plane2
                        map: vidTxt1
                plane2.position.set(0.110);    // 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.fromvidTxt1 );  
                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

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. :)


Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.