Performance Issues with R3F drei CameraControls on Low-End Devices

Questions
1

Hello everyone,
I’m currently working on a project using React Three Fiber (R3F) and encountered significant performance issues when enabling CameraControls from the drei library. Here’s the situation:

  1. Issue: When I enable CameraControls, low-end devices experience severe lag and buffering.
  2. Temporary Solution: Removing CameraControls resolves the performance issue.

My project includes:

  • A 3D globe model that rotates.
  • HTML elements (using drei's Html) placed on the globe.
  • Interaction between the globe and the camera.

Here’s the relevant CameraControls setup:

 <>
      <CameraControls
        ref={controlsRef}
        setLookAt={[0, 0, 0]}
        azimuthAngle={Math.PI * 1.8}
        polarAngle={1} 
        distance={getDistance()}
        minPolarAngle={MIN_POLAR_ANGLE} 
        maxPolarAngle={MAX_POLAR_ANGLE}
        minDistance={getDistance()-4} 
        maxDistance={getDistance()+3} 
        draggingSmoothTime={0.3} 
        truckSpeed={0} 
        enabled={cameraEnabled}
        dollySpeed={1}
        />
    </>

Please note: The parameter values are for testing purposes, and I’ve intentionally used some odd values during experimentation, so please don’t focus on those.

My question is:

  • Is the performance issue likely caused by the high computational cost of CameraControls itself?
  • Or is it more likely due to optimization issues in my project?

I’d appreciate any advice or insights on improving performance with CameraControls or debugging whether it’s the main culprit.

Thank you in advance for your help!

2

To isolate whether this is the case, you can just delete the <CameraControls ...> JSX and see what difference it makes in performance.
If you need to test it with some interaction, then temporarily swap it with the OrbitControls and see what difference that makes.

No difference? then it’s not the CameraControls that is your issue.

There is a difference? Have a closer look at the attributes. Experiment with taking them away, for example the getDistance() looks like a possible candidate to me. It’s being called 3 times every frame.

You also have these tools to know whether any changes you make during development have a detrimental effect.

1 Like
3

Thank you for your advice!

I removed CameraControls, and the performance has noticeably improved. I’ll test with OrbitControls to see if the issue persists and confirm whether it’s specific to CameraControls.

I didn’t realize that getDistance() could be causing a problem, so I’ll investigate that as well—thank you for pointing it out.

Also, thanks for suggesting the performance monitoring tools! I’ll make use of them to better understand how my changes affect performance.

4

I tried using OrbitControls, but the FPS still dropped to around 36. After several tests, I discovered that the issue might not be entirely with the controls.

It turns out that the occlude property in R3F drei’s HTML component was continuously updating the position, which seems to have been computationally expensive. Once I commented it out, the performance became much smoother!

Thank you again for suggesting the optimization tools—they were very helpful!

1 Like