Old project model rendering

Hello, I am struggling with something that I hope you will be able to help me with:
I have a project that I’m working on which uses React 17.0.2 (three: 0.133.0; @react-thre/fiber: 7.0.10; @react-three/drei: 7.13.0; @types/three: 0133.0). I have also set up a quick test React app with the newest stable React 18.2.0 and plugins (three: 0.156.0; @react-three/fiber: 8.14.0; @react-three/drei: 9.81.0; @types/three: 0.155.1).
On my test app I have managed to render the model as it could be seen in other online 3d model viewer apps. However, when I render the same model in the main project (older plugin versions) I get a much more pale model (black becomes gray and the light turquoise color is barely visible.)
I have played around with lighting and shadows and managed to get it darker, but the colors were still without their original intensity (and the shadows would also be gone then).
Is there a way to achieve the same or at least similar rendering of colors/materials that is possible when using the latest versions of the plugins?
Also, the code for rendering is exactly the same.

Thanks in advance.

threejs went through a series of changes that affect lights and colors.

fiber is not really wrapping threejs or changing it, you pair it with any threejs version you like and it will display in accordance with that version. so from version 152 on until latest you need to be aware of new encodings and how physical lights work.

1 Like

I did update three to the latest version. I’ve tried updating other related plugins but they were not compatible. Now I have another challenge. The color is ok, but somehow it does not react to the light the same way it did (it has lost its shininess). I have managed to mitigate it to a degree using 6 directional lights (from all directions).
Thank you for your help!

more lights === more expense. since three 155 light works very differently than before, you need to go through these posts to figure out how to get back to old results, and it may not even be fully possible. the lights now work in the same way as they do in blender.

alternatively you can do

<Canvas gl={{ useLegacyLights: true }}>
1 Like

Also note legacy lights will be removed.