So i want to repeat each frame from atlas texture 64 times. Its easy to do when i just load all 50 png frames separately as textures
let textures = [];
for(let i=1;i<=50;i++){
let texture = new THREE.TextureLoader().load( 'lib/textures/water/'+i+'.png' );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 64, 64 );
textures.push(texture);
};
What if i want to do that on atlas texture? Is it possible to extract each frame from UV and treat that as separate texture like above?
let texture = new THREE.TextureLoader().load( 'lib/textures/water/atlas.png' );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 0.1, 0.2 );
let currentTile = 0;
let horizontal = 5, vertical = 10;
let material = new THREE.MeshBasicMaterial( { map: texture } );
water = new THREE.Mesh( geometry, material );
water.rotateX(-Math.PI/2);
scene.add( water );
animWater = setInterval( () => {
currentTile++;
if (currentTile == 50)
currentTile = 0;
let currentColumn = currentTile % horizontal;
texture.offset.x = currentColumn / horizontal;
let currentRow = Math.floor( currentTile / horizontal );
texture.offset.y = currentRow / vertical;
}, 75);
or should i just make gif from 50pngs and then extract each frame from that gif as a texture? Is that even a right choice to make that many textures for one ‘key object’ in scene?
