React-Three-Fiber: Enhancing Scene Quality with Drei + Performance Tips

In the previous article, we built a basic 3D scene using React-Three-Fiber (R3F), created a rotating cube, and then integrated a 3D model in GLTF/GLB format into the scene.

In this article, we will explore some powerful components of the @react-three/drei library to build more realistic and impressive scenes. In addition, I will share important points and some tips regarding performance optimization.

Enhancing Visuals with Drei

Drei is a helper library that simplifies many commonly used R3F components and saves time. It provides tools that make scenes more impressive, especially for environmental lighting, background effects, and text elements.

Environment (Realistic Lighting and Reflections)

This component adds HDRI-based ambient light and reflections to the scene. This way, much more realistic light reflections are created on material surfaces.

import { Environment } from '@react-three/drei'

<Canvas>
  <Suspense fallback={<div>Loading...</div>}>
    <Environment preset="sunset" background />
    <Box />
  </Suspense>
</Canvas>

Note: In the example above, we’re using the <Box /> component created in the previous article. You can replace this cube with your own GLTF model to take advantage of the same environment lighting.

• preset: Offers ready-made environments such as sunset, city, dawn.
• background: Also uses the HDRI image as the scene background.
• Alternatively, you can load your own .hdr file with the files prop.

Sky (Atmospheric Background)

If you want a lighter atmospheric look instead of HDRI, you can use the <Sky /> component. Depending on the sun’s position, it dynamically adjusts the sky color, lighting, and shadows.

import { Sky } from '@react-three/drei'

<Sky
  // Sun position (x,y,z)
  sunPosition={[100, 20, 100]}
  // Turbidity (clean/polluted air)
  turbidity={10}
  // Affects how blue the sky looks
  rayleigh={6}
/>

Tip: If performance is your priority, prefer Sky instead of HDR.

Text (3D Text Component)

import { Text } from '@react-three/drei'

<Text
  font="/fonts/Inter-Bold.woff"
  fontSize={1}
  position={[0, 2, 0]}          
  color="white"
  // Horizontal alignment
  anchorX="center"
  // Vertical alignment              
  anchorY="middle"              
>
  Enjoy Reading!
</Text>

Note: If you want to quickly set up a scene and test a model, Drei’s <Stage /> component makes things easier. This component automatically handles many settings for you, including <Environment>, lighting, ground, and shadows. However, if you want more customization, using <Environment> with your own lighting setup is much more flexible.

Performance Optimization Tips

When creating impressive scenes with R3F, performance is often overlooked. Especially on mobile devices, low FPS, slowly loaded models, or laggy scenes can seriously affect user experience.

Below are some practical techniques to optimize the scene.

frameloop=“demand” (Render When Needed)

By default, R3F re-renders the scene every frame. However, if nothing is changing in the scene, this causes unnecessary resource usage. With frameloop=“demand”, rendering only occurs when needed (interaction, animation, etc.).

<Canvas frameloop="demand">
  <Box />
</Canvas>

Important: This creates a significant performance difference, especially in static scenes or projects where updates are only needed during user interaction.

What Does the invalidate() Function Do?

If you are using frameloop=“demand” and make a manual change to the scene, you need to tell R3F to “re-render.” You do this with the invalidate() function.

import { invalidate } from '@react-three/fiber'

// For example, update the scene when a button is clicked:
<button onClick={() => {
  changeBoxColor()
  invalidate()
}}>
  Change Color
</button>

useMemo and useCallback (Preventing Unnecessary Re-Creations)

Just like in the React world, repeatedly recreating the same objects in R3F affects performance.

For this reason:

• Use useMemo for geometry, materials, and lights.
• Use useCallback for event functions.
• This positively affects performance.

const geometry = useMemo(() => new THREE.BoxGeometry(1, 1, 1), [])

Note: This usage becomes noticeably effective as the scene grows. Although React 19 introduces some automatic optimizations, manual control is still important.

Lazy Loading and Preload (Asset Management)

Large GLTF models, texture files, and HDRIs can cause performance problems while loading the page.

To prevent this:

• Use Suspense to control the loading process.
• Use functions like useGLTF.preload() to pre-load assets in the background.

useGLTF.preload('/models/model.glb')

<Suspense fallback={<div>Loading...</div>}>
  <Box />
</Suspense>

Here, we again used <Box /> as an example. However, you can apply the same structure by replacing it with your own model component (e.g. <PhoneModel />, <Avatar />). Also, splitting your scene structure by route (/products/car, /products/laptop) and loading only the required models is an important optimization technique.

Conclusion

In this article, we explored how to enrich our scenes visually with Drei and examined R3F techniques we can use to maintain performance at the same time.

In the next article:

• Customizing controls (approaches beyond OrbitControls)
• Animations with useFrame
• Scene customization with shaders & custom materials

If you want to follow this article series, don’t forget to follow me on Medium!