Navigate in sprite texture

Questions
, ,
1

I have the following png:
snakeSpriteSheet

I want to load this texture and then create multiple SpriteMaterials by choosing subparts of the image. For example, the head would be from [0, 0] to [x, y].

I have the following code currently:

const map = new TextureLoader().load('url');

const material = new SpriteMaterial({ map: map  })

How could I achieve that?

2

If animation texture is in js, then into fragment shader it will be:
For billboard sprite
gl_FragColor=texture2D(map,vUv/vFrame.xy+vFrame.zw);
where vFrame.xy is scale of frame and vFrame.zw offset
Need array of frames.
Head is frame:[13,13,0,0],[13,13,0,0.33],[13,13,0,0.66]
Tail: [13,13,0.33,0.66],[13,13,0.33,0.99]
image

1 Like
3

I don’t quite understand. Could you explain a little more? Also, it would help if you point me to some documentation and/or examples.