Loading an updating Texture Seamlessly

Questions
,
1

Hello guys, I am trying to write a ThreeJs script that will run over a server for an art project.
Let’s say I have a script that collects a live stream frames as png and let’s assume I am saving and updating them as the same name texturePlane1.png and texturePlane2.png. For the threejs script, I have 2 planes and I want to update the texture constantly with a preselected frame rate.
I have 2 problems right now, when I change the texture manually on vscode, the image didn’t change, it’s probably something to do with the cache, can I solve this? What can I do to solve this?
The second problem I have is when I’m updating the texture, while the texture is updating, there’s a sudden instance where the object becomes black before the texture is loaded and it makes the object flicker. It wouldn’t happen if it held the previous texture before loading the new one. If these are not possible, I need to use a different technology probably. Thanks a lot in advance.

2

It’ll be probably easier if you give each new image a sequential number i.e. texturePlane1_012.png, that will fix potential cache issues.

You should change the existing texture only after the new one is arrived, that will solve the problem with the plane blinking black.

You could use .needsUpdate to update the texture in the texture loader call, like so:

... new THREE.TextureLoader().load(
    'texturePlane1_012.png', 
    texture => { 
        someMaterial.map = texture;
        someMaterial.map.needsUpdate = true;
    }
),