In my Next.js application I want to load a 3D object. The application works perfectly on my local environment, but when deployed to Vercel, I encounter the following error:
THREE.WebGLRenderer: Context LostThis error prevents the 3D object from rendering in production. Below is the relevant code snippet:
'use client'import { Canvas } from '@react-three/fiber'import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'import { useLoader } from '@react-three/fiber'import { OrbitControls } from '@react-three/drei'function Model() { const obj = useLoader( OBJLoader, 'https://res.cloudinary.com/restoftheurl.obj' ) return <primitive object={obj} scale={1} />}export default function TestUploadComponent() { return ( <div style={{ width: '100%', height: '100vh' }}> <Canvas camera={{ position: [0, 0, 5] }} fallback={<div>Loading...</div>} > <ambientLight intensity={0.5} /> <pointLight position={[10, 10, 10]} /> <Model /> <OrbitControls /> </Canvas> </div> )}Used webglcontextlost and webglcontextrestored events but couldn’t find a solution for the issue.