Setting up multiple textures

Questions
1

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:

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!

2

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.

3

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?

4

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.

5

Hey,

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

1 Like