Three.js Context Lost Error and Performance Issues with Multiple 3D Animations in Next.js

Question

I'm working on a Next.js project where I’m using Three.js to render multiple 3D animations. However, I'm facing two main issues:

• The 3D animations are not showing up correctly, and the console logs the error: THREE.WebGLRenderer: Context Lost.
• I'm experiencing performance issues, likely due to the multiple 3D animations

https://sinanptm.vercel.app

https://github.com/sinanptm/portfolio

Here’s what I’ve tried:

Ensured that each 3D model has optimized textures and geometries. Attempted to control rendering updates manually.

Questions:

• How can I improve performance when rendering multiple 3D animations in Three.js within Next.js?
• Are there best practices or common pitfalls to avoid context loss in scenarios like this?