Package upgrade => texture not loaded and lighting and / or unreal bloom problem

Questions
,
1

Hi,

I made all this package upgrade and as a result, some texture seems to be black. It seems that there is no more light also, so perhaps, textures are loaded but we can’t see it. There is some unreal bllom not working I think, it may be related to light problem.

@babel/core                   ^7.20.7  →   ^7.24.4
 @babel/preset-env             ^7.23.2  →   ^7.24.4
 @babel/preset-react          ^7.22.15  →   ^7.24.1
 @google-cloud/vision           ^4.0.2  →    ^4.2.1
 @react-spring/three            ^9.6.1  →    ^9.7.3
 @react-three/cannon            ^6.5.0  →    ^6.6.0
 @react-three/drei             ^9.48.1  →  ^9.105.5
 @react-three/fiber             ^8.9.1  →   ^8.16.2
 @react-three/postprocessing    ^2.7.0  →   ^2.16.2
 @testing-library/jest-dom      ^6.1.4  →    ^6.4.2
 @testing-library/react        ^14.0.0  →   ^15.0.5
 @types/three                 ^0.160.0  →  ^0.164.0
 autoprefixer                 ^10.4.13  →  ^10.4.19
 eslint                         8.32.0  →     9.1.1
 eslint-config-next             13.1.5  →    14.2.3
 gsap                          ^3.11.4  →   ^3.12.5
 html-react-parser             ^3.0.12  →   ^5.1.10
 jest-image-snapshot            ^6.3.0  →    ^6.4.0
 next                           13.1.5  →    14.2.3
 next-video                    ^0.11.1  →    ^1.0.4
 puppeteer                     ^20.5.0  →   ^22.7.1
 react                         ^18.2.0  →   ^18.3.1
 react-dom                     ^18.2.0  →   ^18.3.1
 react-player                  ^2.14.1  →   ^2.16.0
 react-responsive               ^9.0.2  →   ^10.0.0
 sass                          ^1.57.1  →   ^1.75.0
 three                        ^0.149.0  →  ^0.164.1
 three-stdlib                  ^2.21.8  →   ^2.29.9
 typescript                     ^5.3.3  →    ^5.4.5
 zustand                        ^4.3.6  →    ^4.5.2

Is it a known problem ? It is related to this ? : Why is threejs lighting fun such as pointlight and ambientlight not working with version "three": "^0.164.1"

Thanks

2
  1. Don’t update all project packages at once. There’s breaking changes often introduced, and updating everything at once makes debugging pretty much unviable.
  2. Try adding an ambient light with intensity of 5.0 to the scene and see if it fixes the textures. The lights in most recent releases of three (r162+ iirc) require intensity set to 3.14 by default to match the previous versions.
  3. If stuffs still not working - comment out everything and start uncommenting step by step - starting from the renderer / postprocessing setup, then scene with static objects, then dynamic assets, then state.
1 Like
3

Thank you. Changing the light does work. I have a mix of ambienlight spotlight and pointLight. Is there any change for those elements also ?

4

I don’t see any details, any shadow of some of my gltf model either

5

Also see Migration Guide · mrdoob/three.js Wiki · GitHub, in particular the lighting changes in r155 and the color changes in r152. We tend to recommend upgrading three.js in increments of <=10, as deprecation warnings (which can be helpful for debugging upgrades) are kept for only 10 releases.

1 Like