Animate material.map image

Questions
, ,
1

Hi,

I’m new to three.js, and javascript mostly, but I am a seasoned programmer in other languages (C++, python, Supercollider, …).

I’m building an Electron app and I want to have planes render PNG sequences.
I’m stuck at the animation stage. I got everything working ok, but I don’t have a clue on what’s the best approach to animate. I ran into GSAP, but haven’t managed to make it work.

I’ve done this in OpenFrameworks before, and there I would have each texture have an update() method that would change the texture image rendering the next in the sequence array, taking into account framerate, loop status and play direction.

I reckon there’s a much nicer way of doing it in three.js, and GSAP seemed to be the answer, but I don’t quite get how to make it work.

This is ImageSequence code and the not-working play() method that would be playing the sequence.

class ImageSequence extends THREE.MeshBasicMaterial {
    constructor( name, path, digits=3 ) {
        super({
            color: 0xffffff,
            transparent: true,
            side: THREE.DoubleSide
        });
        this.name = name;
        this.path = path;
        let imgfiles = fs.readdirSync(this.path);
        this.imgs = new Array(imgfiles.length);
        for(let i=0; i < this.imgs.length; i++) {
            this.imgs[i] = textureloader.load(this.path + "/" + imgfiles[i]);
        }
        this.frameindex = 0;
        this.frameimg = this.imgs[this.frameindex]
        this.map = this.frameimg;
    }

    setFrame( framenumber ) {
        this.frameindex = framenumber % this.imgs.length;
        this.map = this.imgs[this.frameindex];
    }

    play() {
        gsap.to(this, {
            duration: 1,
            frameindex: 2,
            repeat: -1,
            ease: "stepped(12)",
            onUpdate: () => {
                this.frameimg = this.imgs[this.frameindex];
            }
        })
    }
}

Is there a way to have a set of play, framerate, loopstatus and direction (and maybe ease) variables that play/stop/change the gsap animation?

Is this a good approach or am I headed in the complete wrong direction?

Cheers!

1 Like
2

Hi!
Maybe this topic will be helpful: 💃 SpriteMixer for easy sprite animations

3

Hey, thanks! That’s very interesing although I’m not working with sprites, just PNG collections. But I will take a look to see if I can use it :slight_smile:

I managed to kinda make it work:

        this.anim = gsap.to(this, {
            duration: 1,
            frameindex: this.imgs.length-1,
            repeat: -1,
            yoyoEase: true,
            onUpdate: () => {
                this.map = this.imgs[Math.floor( this.frameindex )];
            }
        })

I still have to figure out how to completely control it, but It works.

1 Like
4

Hi ! Do you mind giving a little bit more context, how (where) exactly did you implement this ? I am also looking to do the same :slight_smile:

Thanks !