Hi everyone,
I’m working on a React Three.js project that involves some complex animations. Most of them made with GSAP and not permanent. While the scene runs smoothly on high-end devices, I’m experiencing performance drops on mid-to-low-end hardware due to heating issue.
Here are some details about my setup:
Rendering Approach: I’m using useFrame hook to animate blades rotation of my 3d turbine model. Rotation speed and light intensity are varying after user clicks or taps on the model.
Object: main .glb model of wind turbine (1.1Mb). R3F implementation of simple water surface and background that uses jpg pictures.
Material Usage: multiple MeshStandardMaterials, custom shaders, which are absolutely not heavy in terms of computational usage.
Lighting Setup: ReactareaLight (yes, I know it’s heavy, but it’s not the reason) and directionalLight from three-drei.
Postprocessing: R3F EffectComposer and Bloom effect.
I know that Bloom is a heavy thing, but even being turned off, overheating persist. Disabled anti-aliasing have improved thing more, but after a while phone overheating (iPhone 14 Pro Max). Now I’m out of any ideas of further improvements. But maybe it is OK for this particular scene and I exaggerate? Because this scene is used as some kind of “visualizer”, so there are another processes that going on in background and use system resources.
Here’s the link to deployed scene: live
And here is the code of this component: code
I’ll be thankful for any advice!