THREE.WebGLRenderer: Context Lost when loading a 3D object on Vercel

Help
1

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 Lost

This 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.

2

Hi, @shoyebwritescode! Welcome to the Vercel Community :smile:

Could you create a minimal reproducible example for us to look at? It’d help a lot :pray: