Ever since i’ve updated my three.js from r128 to (initialy) 149 and beyond, the textures of my effect were no longer showing up. This has been an ongoing issue for over a year now and i can’t seem to figure out what’s wrong.
The issue can be found here, when clicking on any of the 3 images:
I believe it’s related to the changes that took place in r135, so textures could no longer be resized if already initialized prior.
Similiar to this report here i’ve had the same error:
And it seems that it was also caused by calling “.needsUpdate” just like in that support case.
Commenting those specific entries got rid of the warnings, but the black textures persist.
I’ve solely updated it for gsap3 and latest three.js compatibility with very minor changes.
But must have missed something with three.js so that the textures are no longer showing during the animation phase.
I’ve opened an issue now. Just note that I’ve updated the specific portion i use already, so if the author follows the update steps given by three.js and gsap patch notes he will almost certainly run into the exact same issue. Which will bring me back here eventually.
It was fully functional with three.js r128 and broke when i updated to r149. Now using r156.1 though.
Would be really appreciated if you could take a look.
It was fully functional with three.js r128 and broke when i updated to r149
Over 20 releases is a fairly big jump. That’s almost two years of updates. It would be best to incrementally try new versions between those two to pinpoint where it broke and check the migration guide for the given release.
Unfortunately the creator is not interested into updating his project, even with offering a pull request of all my library updates.
I still believe the issue is related to .needsUpdate no longer being supported since r135.
Are there any workarounds for .needsUpdate, or how am i supposed to update the texture now that this feature has been removed?
Currently the needsUpdate portion is commented, but that’s how it worked before.
createTextures(images) {
const textures = [];
for (let i = 0; i < images.length; i++) {
const imageSet = images[i];
const largeTexture = new THREE.Texture(imageSet.large.image);
// So It doesnt get resized to the power of 2
largeTexture.generateMipmaps = false;
largeTexture.wrapS = largeTexture.wrapT = THREE.ClampToEdgeWrapping;
largeTexture.minFilter = THREE.LinearFilter;
//largeTexture.needsUpdate = true;
const smallTexture = new THREE.Texture(imageSet.small.image);
smallTexture.generateMipmaps = false;
smallTexture.wrapS = smallTexture.wrapT = THREE.ClampToEdgeWrapping;
smallTexture.minFilter = THREE.LinearFilter;
//smallTexture.needsUpdate = true;
const textureSet = {
large: {
element: imageSet.large.element,
texture: largeTexture
},
small: {
element: imageSet.small.element,
texture: smallTexture
}
};
textures.push(textureSet);
}
this.textures = textures;
this.setCurrentTextures();
}
texture.needsUpdate hasn’t been removed, and remains supported in newer releases. Perhaps there’s something more subtle happening here, like setting .needsUpdate before the texture data has loaded? If it’s still not working, a minimal reproducible example would be helpful.