Dynamically Change Three.js texture in externally loaded Collada file

Question

I am using the three.js collada loader to import an .dae file with a texture (.png) image applied. I need to overwrite the .png file with a new texture, and am creating this texture using a canvas element that exports to .png format. If I clear my cache, it will change the texture (I am naming the exported "new" .png texture as the same filename as the original .png texture referenced in the .dae file).

How can I ensure that the new texture is recognized/rendered without having the user clear their cache? Example: User creates a new texture, and it is exported over the original texture, and the collada file re-renders after a user clicks a button to render the box.

Answer 1

Once you have a Javascript Image object in memory, regardless of the source, you can assign it to your objects' materials' textures via the .image attribute. You'll need to let THRE.js know to alter the binding. For example, if you have a new Image called, say, img and a mesh called mesh with a typical material:

mesh.material.map.image = img;
mesh.material.map.needsUpdate = true;

should do the trick. No need to send a DOM elemetn to disk as a .png, just use it.