Setting up multiple textures

Hello,

Im pretty new to this and I have what is probably a fairly basic question. Im importing 60 images as different textures. They are each of a number in a particular font which will count down from 59 to 0 and then in my scene a plane will have its material cycle through the different textures every second(to create a countdown timer).

I was going to use the method discussed in this post to update the texture:

Here is the example:

https://jsfiddle.net/f2Lommf5/4991/

My question is, to create these 60 textures and then do the repeat wrapping on them, is there a better way than writing this code out 60 times?

var tex059 = textureLoader.load('assets/numbers/059.png');


tex059.wrapS = THREE.RepeatWrapping;
tex059.wrapT = THREE.RepeatWrapping;
tex059.repeat.set(1,1);

Let me know if more info is needed.

Thanks!

If you’re going to have 60 textures, then the only thing to change above would be putting that code in a loop, and maybe storing all the textures in an array. You don’t need 60 variables, just an array.

You might have an easier time using something like Troika-3d-text: library for SDF text rendering. With images you have a tradeoff — large images are slow to upload, small images don’t show crisp text. SDF fonts are crisper and more efficient, especially if the text is dynamic.

Hi and thanks very much for getting back.

That Troika 3d text looks great however for this I think as the aesthetic of what I’m doing is actually quite lo-fi and the image files are really tiny I think a loop should work well.

Sorry it may be a fairly basic question but how would you go about constructing a loop for this so they are stored in an array?

Something like this, for example:

// Create texture loader.
var textureLoader = new THREE.TextureLoader();

// Fill an array with textures.
var textures = new Array(60).fill(0).map((_, index) => {
  return textureLoader.load('path/' + pad(index, 3) + '.png');
});

// Helper function to pad numbers with leading zeroes. (3 --> '003')
function pad (num, size) {
  return ('000000000' + num).substr(-size);
}

console.log( textures[ 25 ] );

For more help with JavaScript arrays see https://eloquentjavascript.net/04_data.html.

Hey,

Thanks so much for that, that’s very useful. Im going to have a crack at this now!