Apply different material maps on an animating object in specific intervals

Questions
,
1

I have three different material maps for my rotating chair. I want to apply each material at constant time intervals in a loop so the material keeps changing every 2seconds on the chair. how do i achieve it ?

example
0-2s - original material on the chair
2-4s - apply material_1
4-6s - apply material_2
6-8s - apply material_3
loop back to material_1

Also I am not asking for the entire code, I just want to know how may i achieve this.

2

Let’s all 5 maps are in an array:

var maps = [
    // texture 1,
    // texture 2,
    // texture 3,
    // texture 4,
    // original texture
]

You can set the map inside the animation loop, like this:

function animationLoop( t )
{
   :
   var cycle = Math.floor( t/2000 ); // a new cycle begins each two seconds
   var index = cycle>0 ? (cycle-1)%4 : 4; // calculate map index
   object.material.map = maps[index]; // use index-th map
  
   renderer.render( scene, camera );
}

Another approach is to use a timer outside the animation loop:

var index = 0;
object.material.map = maps[4];
setInterval( ()=>{object.material.map = maps[(index++)%4]}, 2000 );
1 Like