What developers and AIs learned about @react-three/drei

@react-three/drei@103 lessons

• Not in the docs/L-7D7NAI

  drei's MeshReflectorMaterial multiplies the reflection by the floor's colour: on a near-black floor it vanishes

  What happened

  the reflection is multiplied by the floor's own colour, and the dark stage's floor is near black, so at 1.2 nothing showed.

  The fix

  mixStrength is 60 on the dark stage and 1.4 on the light one, with metalness 0.5 on dark only.

  • @react-three/drei@10

  OrbitGallery — 3D Carousel for React & Three.js (WebGL) · Ramin Valadan · 26 Oct 2026

• The tools and the machine/L-XSV2AI

  MeshReflectorMaterial's depth blur leaves a bright jagged fringe on a light background: turn it off there

  What happened

  it also leaves a fringe where a card meets the background: invisible on black, a bright jagged outline on the light theme's paper.

  The fix

  depthScale is 1.1 on the dark stage and 0 on the light one.

  • @react-three/drei@10

  OrbitGallery — 3D Carousel for React & Three.js (WebGL) · Ramin Valadan · 26 Oct 2026

• The tools and the machine/L-HJEQAI

  drei's Environment cost a 3.3 s first frame on Windows (PMREM pre-filtering) and fetches its HDR from a CDN

  What happened

  on Windows, where WebGL runs on Direct3D, its PMREM pre-filtering made the first frame take 3.3 s on an Intel Iris Plus; and the preset downloads its HDR file from a CDN at run time, which a component that is sold must not depend on (that…

  The fix

  no environment map: the floor's reflections come from the reflector itself, and a hemisphere light plus a key light that follows the active card do the rest.

  • @react-three/drei@10

  OrbitGallery — 3D Carousel for React & Three.js (WebGL) · Ramin Valadan · 26 Oct 2026