# \#drei

**URL:** https://discourse.threejs.org/tag/drei/1155.md

[Latest](https://discourse.threejs.org/latest.md) · [Categories](https://discourse.threejs.org/categories.md) · [Tags](https://discourse.threejs.org/tags.md)

---

## [Playable 2D Pixel-Art Resume Built with Three.js, R3F and Rapier](https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263)

<div class="topic-metadata">

**Author:** [@SrPumpkin](https://discourse.threejs.org/u/SrPumpkin)\
**Replies:** 10\
**Last updated:** [July 9, 2026, 12:05pm UTC](https://discourse.threejs.org/t/playable-2d-pixel-art-resume-built-with-three-js-r3f-and-rapier/91263 "2026-07-09T12:05:27Z")

</div>

Hi everyone, I’m sharing a playable resume implemented as a 2D pixel-art platformer using Three.js, React Three Fiber, and Rapier. The project uses Three.js/R3F for real-time rendering and scene composition, with Rap…

---

## [\[R3F\] @react-three/drei Html distanceFactor scaling breaks during camera transitions](https://discourse.threejs.org/t/r3f-react-three-drei-html-distancefactor-scaling-breaks-during-camera-transitions/90429)

<div class="topic-metadata">

**Author:** [@notharshprajapati](https://discourse.threejs.org/u/notharshprajapati)\
**Replies:** 1\
**Last updated:** [April 5, 2026, 6:23am UTC](https://discourse.threejs.org/t/r3f-react-three-drei-html-distancefactor-scaling-breaks-during-camera-transitions/90429 "2026-04-05T06:23:46Z")

</div>

I’m working on a React Three Fiber project where I use the Html component from @react-three/drei to label equipment on 3D vessels. To keep the UI clean, I use the distanceFactor prop to maintain a constant screen-space s…

---

## [R3F Drei PivotControls disappear after adding an anchor tag to a light](https://discourse.threejs.org/t/r3f-drei-pivotcontrols-disappear-after-adding-an-anchor-tag-to-a-light/87475)

<div class="topic-metadata">

**Author:** [@DoruProgramatoru](https://discourse.threejs.org/u/DoruProgramatoru)\
**Replies:** 0\
**Last updated:** [October 11, 2025, 2:21pm UTC](https://discourse.threejs.org/t/r3f-drei-pivotcontrols-disappear-after-adding-an-anchor-tag-to-a-light/87475 "2025-10-11T14:21:34Z")

</div>

I’m trying to use PivotControls from Drei to move a light in my R3F scene but when I add the anchor prop, the gizmo disappears. Without the anchor it works fine. \<PivotControls depthTest={false} anchor={\[0, 0, 0\]}\> \<d…

---

## [Drei MeshTransmissionMaterial WebGPU](https://discourse.threejs.org/t/drei-meshtransmissionmaterial-webgpu/87427)

<div class="topic-metadata">

**Author:** [@user-123](https://discourse.threejs.org/u/user-123)\
**Replies:** 0\
**Last updated:** [October 8, 2025, 4:49pm UTC](https://discourse.threejs.org/t/drei-meshtransmissionmaterial-webgpu/87427 "2025-10-08T16:49:59Z")

</div>

Hi, I noticed that Drei’s MeshTransmissionMaterial is not working anymore with threejs 0.180.0 due to ShaderMaterial of DiscardMaterial incompatibility. Is there a way to fix that? Or is it possible to make MeshTransmi…

---

## [Drei useDepthBuffer gives mes feedback loop errors](https://discourse.threejs.org/t/drei-usedepthbuffer-gives-mes-feedback-loop-errors/87117)

<div class="topic-metadata">

**Author:** [@tommhuth](https://discourse.threejs.org/u/tommhuth)\
**Replies:** 2\
**Last updated:** [September 23, 2025, 7:55am UTC](https://discourse.threejs.org/t/drei-usedepthbuffer-gives-mes-feedback-loop-errors/87117 "2025-09-23T07:55:32Z")

</div>

A while ago I posted Reading from depth texture where I read the depth texture from Drei’s useDepthBuffer. When trying the same thing now, I keep getting GL\_INVALID\_OPERATION: glDrawElements: Feedback loop formed between…

---

## [Why isn't Bounds correctly centering the camera until I resize the element?](https://discourse.threejs.org/t/why-isnt-bounds-correctly-centering-the-camera-until-i-resize-the-element/60684)

<div class="topic-metadata">

**Author:** [@leo2](https://discourse.threejs.org/u/leo2)\
**Replies:** 2\
**Last updated:** [September 6, 2025, 10:58pm UTC](https://discourse.threejs.org/t/why-isnt-bounds-correctly-centering-the-camera-until-i-resize-the-element/60684 "2025-09-06T22:58:21Z")

</div>

I have a react app. I am using a drei Bounds element to fit the models to the view. It does not work when the view is first rendered, the models do not fit on the screen. But when I resize the view, Bounds adjusts the ca…

---

## [Can click on mesh through Drei Html](https://discourse.threejs.org/t/can-click-on-mesh-through-drei-html/86346)

<div class="topic-metadata">

**Author:** [@siobh](https://discourse.threejs.org/u/siobh)\
**Replies:** 0\
**Last updated:** [August 18, 2025, 9:56pm UTC](https://discourse.threejs.org/t/can-click-on-mesh-through-drei-html/86346 "2025-08-18T21:56:35Z")

</div>

Hi! I am having a bug with drei Html that I haven’t been able to figure out. I have a mesh that you can click on and then in a completely separate component some html. You seem to be able to “click” on the mesh from insi…

---

## [WebGL lost when adding Environment](https://discourse.threejs.org/t/webgl-lost-when-adding-environment/79484)

<div class="topic-metadata">

**Author:** [@Randy\_Kevin](https://discourse.threejs.org/u/Randy_Kevin)\
**Replies:** 1\
**Last updated:** [June 30, 2025, 3:34pm UTC](https://discourse.threejs.org/t/webgl-lost-when-adding-environment/79484 "2025-06-30T15:34:44Z")

</div>

is anyone know why i got THREE.WebGLRenderer: Context Lost each time i add Environment in my React three now.knowing that before it still worked very well. Code exemple : const RotatingCubeScene: React.FC\<{ angle: numb…

---

## [FBO ping-pong texture mapping issue R3F](https://discourse.threejs.org/t/fbo-ping-pong-texture-mapping-issue-r3f/81852)

<div class="topic-metadata">

**Author:** [@crookshankkz](https://discourse.threejs.org/u/crookshankkz)\
**Replies:** 0\
**Last updated:** [April 30, 2025, 8:52pm UTC](https://discourse.threejs.org/t/fbo-ping-pong-texture-mapping-issue-r3f/81852 "2025-04-30T20:52:25Z")

</div>

Hello!!. I’m trying to make an interactive particle system using R3F and Frame Buffer Objects. So, at this point there should be a disc shape with particles. And it works too. But when I’m doing the ping-pong texture map…

---

## [Where is threshold measured from in LOD?](https://discourse.threejs.org/t/where-is-threshold-measured-from-in-lod/81339)

<div class="topic-metadata">

**Author:** [@Jim\_Rend](https://discourse.threejs.org/u/Jim_Rend)\
**Replies:** 3\
**Last updated:** [April 17, 2025, 3:50pm UTC](https://discourse.threejs.org/t/where-is-threshold-measured-from-in-lod/81339 "2025-04-17T15:50:08Z")

</div>

I’m doing LOD rendering for multiple objects. Im confused about where the threshold is measured from. I have a demo that works except the high and low resolution meshes are swapped out for both the red and blue dots at …

---

## [Stats not visible when in Fullscreen (sandbox included)](https://discourse.threejs.org/t/stats-not-visible-when-in-fullscreen-sandbox-included/79949)

<div class="topic-metadata">

**Author:** [@tabetVercetti](https://discourse.threejs.org/u/tabetVercetti)\
**Replies:** 0\
**Last updated:** [March 22, 2025, 4:51pm UTC](https://discourse.threejs.org/t/stats-not-visible-when-in-fullscreen-sandbox-included/79949 "2025-03-22T16:51:33Z")

</div>

Hello :slight\_smile: im hoping this is an easy fix, but i cant get the stats to appear when in fullscreen mode. Here’s a sandbox that recreates the issue. You’ll find a “general settings” button at the bottom where you …

---

## [Unexpected Shadows from HTML (Drei) Component in Cached Scene](https://discourse.threejs.org/t/unexpected-shadows-from-html-drei-component-in-cached-scene/79797)

<div class="topic-metadata">

**Author:** [@gianoseduto](https://discourse.threejs.org/u/gianoseduto)\
**Replies:** 0\
**Last updated:** [March 19, 2025, 8:38am UTC](https://discourse.threejs.org/t/unexpected-shadows-from-html-drei-component-in-cached-scene/79797 "2025-03-19T08:38:37Z")

</div>

Hi everyone! I’m currently trying to fix the bug shown in the picture. It seems to be caused by the HTML (Drei) component, but it only manifests itself if the scene I’m loading has already been loaded in the same sessio…

---

## [HTML Content Positioned Wrong in iOS](https://discourse.threejs.org/t/html-content-positioned-wrong-in-ios/77066)

<div class="topic-metadata">

**Author:** [@tnjsrf](https://discourse.threejs.org/u/tnjsrf)\
**Replies:** 3\
**Last updated:** [March 17, 2025, 2:33pm UTC](https://discourse.threejs.org/t/html-content-positioned-wrong-in-ios/77066 "2025-03-17T14:33:39Z")

</div>

iOS Rendering Issue with \<Html\> from @react-three/drei Hi everyone, I’m a beginner with Three.js, so I apologize in advance if I’m missing something obvious! I’m working on a React + Three.js project using @react-three/…

---

## [React DREI \<HTML\>](https://discourse.threejs.org/t/react-drei-html/78525)

<div class="topic-metadata">

**Author:** [@Abhirup\_Das](https://discourse.threejs.org/u/Abhirup_Das)\
**Replies:** 5\
**Last updated:** [February 23, 2025, 10:15pm UTC](https://discourse.threejs.org/t/react-drei-html/78525 "2025-02-23T22:15:41Z")

</div>

\<Canvas\> \<axesHelper /\> \<CameraRig position={cameraPos} /\> \<Floor props={floorProps} /\> \<WallContainer props={wallData} isSelectionDisabled={true} /\> \<ambientLight intensity={5} /\> \<pointLight p…

---

## [useTexture in next.js has some trouble handling caching](https://discourse.threejs.org/t/usetexture-in-next-js-has-some-trouble-handling-caching/77624)

<div class="topic-metadata">

**Author:** [@gianoseduto](https://discourse.threejs.org/u/gianoseduto)\
**Replies:** 0\
**Last updated:** [February 5, 2025, 4:02pm UTC](https://discourse.threejs.org/t/usetexture-in-next-js-has-some-trouble-handling-caching/77624 "2025-02-05T16:02:28Z")

</div>

Hi everyone, I’m pretty new to the Drei + react-three-fiber + Next.js stack. I have a lot of experience with React Native and vanilla three.js, but I’ve never used r3f for complex work or projects, only to try out some …

---

## [How do I display markets on a plane with onclick events without dropping fps after a few minutes?](https://discourse.threejs.org/t/how-do-i-display-markets-on-a-plane-with-onclick-events-without-dropping-fps-after-a-few-minutes/76988)

<div class="topic-metadata">

**Author:** [@Conor\_V](https://discourse.threejs.org/u/Conor_V)\
**Replies:** 2\
**Last updated:** [January 24, 2025, 4:58pm UTC](https://discourse.threejs.org/t/how-do-i-display-markets-on-a-plane-with-onclick-events-without-dropping-fps-after-a-few-minutes/76988 "2025-01-24T16:58:37Z")

</div>

I’m trying to display a large number of markers (0–1000, depending on the search query). When I add an onClick event to them, it works fine initially, but after a while, it starts slowing down and causes my FPS to drop f…

---

## [How to move img in background behind the 3d model ?](https://discourse.threejs.org/t/how-to-move-img-in-background-behind-the-3d-model/75964)

<div class="topic-metadata">

**Author:** [@abhigk](https://discourse.threejs.org/u/abhigk)\
**Replies:** 5\
**Last updated:** [January 11, 2025, 9:20am UTC](https://discourse.threejs.org/t/how-to-move-img-in-background-behind-the-3d-model/75964 "2025-01-11T09:20:50Z")

</div>

'use client' import { Canvas, useThree } from '@react-three/fiber' import { ScrollControls, Scroll, Html } from '@react-three/drei' import { Scene } from './components/Scene' import { ScrollContainer } from './compone…

---

## [Three JS imports Error](https://discourse.threejs.org/t/three-js-imports-error/76079)

<div class="topic-metadata">

**Author:** [@alpha-3x](https://discourse.threejs.org/u/alpha-3x)\
**Replies:** 1\
**Last updated:** [January 6, 2025, 4:19pm UTC](https://discourse.threejs.org/t/three-js-imports-error/76079 "2025-01-06T16:19:22Z")

</div>

I was making a react three fiber application with drei and postprocessing, i have used the default versions labeled by npm and also the latest version by npm but the post processing file has a missing import which isn’t …

---

## [React-Three/Drei Html's 'occlude="blending"' prop hides Html, leva etc when post processing pass is used](https://discourse.threejs.org/t/react-three-drei-htmls-occlude-blending-prop-hides-html-leva-etc-when-post-processing-pass-is-used/74487)

<div class="topic-metadata">

**Author:** [@oceanep](https://discourse.threejs.org/u/oceanep)\
**Replies:** 0\
**Last updated:** [November 27, 2024, 12:49pm UTC](https://discourse.threejs.org/t/react-three-drei-htmls-occlude-blending-prop-hides-html-leva-etc-when-post-processing-pass-is-used/74487 "2024-11-27T12:49:54Z")

</div>

I’ve found that setting Drei’s Html component’s prop occlude="blending", which seems to be the only way to currently get html/3d depth to place nice, will cause Html, Leva and any similar html overlay to not render to th…

---

## [Drei DragControls independant of "children"](https://discourse.threejs.org/t/drei-dragcontrols-independant-of-children/73948)

<div class="topic-metadata">

**Author:** [@ACampbell](https://discourse.threejs.org/u/ACampbell)\
**Replies:** 0\
**Last updated:** [November 13, 2024, 1:59am UTC](https://discourse.threejs.org/t/drei-dragcontrols-independant-of-children/73948 "2024-11-13T01:59:21Z")

</div>

Does anyone have an example of how the heck to use the Drei DragControls component without the ‘draggable’ being the inner child? I have been struggling for days attempting to get DragControls working with a Drei Decal… …

---

## [How to set events on \<PresentationControls\> React three fiber drei plugin?](https://discourse.threejs.org/t/how-to-set-events-on-presentationcontrols-react-three-fiber-drei-plugin/73681)

<div class="topic-metadata">

**Author:** [@prenx4x](https://discourse.threejs.org/u/prenx4x)\
**Replies:** 0\
**Last updated:** [November 5, 2024, 9:11pm UTC](https://discourse.threejs.org/t/how-to-set-events-on-presentationcontrols-react-three-fiber-drei-plugin/73681 "2024-11-05T21:11:45Z")

</div>

Hello, I have code like this - \<Canvas gl={{ preserveDrawingBuffer: false, antialias: true, }} \> \<PresentationControls polar={\[-Math.PI / 2, Math.PI / 2\]} …

---

## [Sparkles become far too visible since post-processing was activated](https://discourse.threejs.org/t/sparkles-become-far-too-visible-since-post-processing-was-activated/73632)

<div class="topic-metadata">

**Author:** [@TAKI0N](https://discourse.threejs.org/u/TAKI0N)\
**Replies:** 0\
**Last updated:** [November 4, 2024, 4:17pm UTC](https://discourse.threejs.org/t/sparkles-become-far-too-visible-since-post-processing-was-activated/73632 "2024-11-04T16:17:59Z")

</div>

I recently added postProcessing into my project, i think the pictures explain them selves before post-processing was activated After post-processing was activated here is the post-processing code : export funct…

---

## [Explore the planets in great quality with realistic rotations!](https://discourse.threejs.org/t/explore-the-planets-in-great-quality-with-realistic-rotations/73476)

<div class="topic-metadata">

**Author:** [@nova\_13](https://discourse.threejs.org/u/nova_13)\
**Replies:** 0\
**Last updated:** [October 30, 2024, 2:12pm UTC](https://discourse.threejs.org/t/explore-the-planets-in-great-quality-with-realistic-rotations/73476 "2024-10-30T14:12:56Z")

</div>

I’m excited to share my latest project – a solar system showcase website! Explore the vibrant colors of each planet with dynamic camera movements and rotations, enhanced by the direction of the sun’s light. Using GLSL sh…

---

## [🎨 Dynamic Keyboard Showcase: Customize, Scroll, Explore!](https://discourse.threejs.org/t/dynamic-keyboard-showcase-customize-scroll-explore/72753)

<div class="topic-metadata">

**Author:** [@nova\_13](https://discourse.threejs.org/u/nova_13)\
**Replies:** 0\
**Last updated:** [October 13, 2024, 9:12am UTC](https://discourse.threejs.org/t/dynamic-keyboard-showcase-customize-scroll-explore/72753 "2024-10-13T09:12:32Z")

</div>

:rocket: Excited to share my latest project – a keyboard showcase website! It features cool scroll animations and lets you change the keyboard color. I’ve added responsive design and audio effects to enhance the experien…

---

## [Drei + using KeyboardControls](https://discourse.threejs.org/t/drei-using-keyboardcontrols/62698)

<div class="topic-metadata">

**Author:** [@christinalan](https://discourse.threejs.org/u/christinalan)\
**Replies:** 2\
**Last updated:** [October 4, 2024, 1:21pm UTC](https://discourse.threejs.org/t/drei-using-keyboardcontrols/62698 "2024-10-04T13:21:57Z")

</div>

Hi! I’m trying to implement a simple camera-following controller, and am basing this off of Drei’s Minecraft example Minecraft - CodeSandbox but without the raycasting or the laser. I’m noticing however, that the keys s…

---

## [Exploring My Interactive 3D Garden Portfolio](https://discourse.threejs.org/t/exploring-my-interactive-3d-garden-portfolio/70924)

<div class="topic-metadata">

**Author:** [@nova\_13](https://discourse.threejs.org/u/nova_13)\
**Replies:** 7\
**Last updated:** [September 30, 2024, 6:46am UTC](https://discourse.threejs.org/t/exploring-my-interactive-3d-garden-portfolio/70924 "2024-09-30T06:46:28Z")

</div>

Excited to share my latest project – an immersive portfolio experience where you can explore a garden-like scene showcasing my work! :cherry\_blossom::sparkles: Every model in the scene was crafted by me using Blender, h…

---

## [Sparkle Transparency issue with other effects in EffectComposer](https://discourse.threejs.org/t/sparkle-transparency-issue-with-other-effects-in-effectcomposer/59325)

<div class="topic-metadata">

**Author:** [@Gandarufuuu](https://discourse.threejs.org/u/Gandarufuuu)\
**Replies:** 0\
**Last updated:** [December 17, 2023, 1:07pm UTC](https://discourse.threejs.org/t/sparkle-transparency-issue-with-other-effects-in-effectcomposer/59325 "2023-12-17T13:07:00Z")

</div>

Hi all, I’m experiencing black borders around the particles from R3F drei’s Sparkle component, as soon as I add other effects with an EffectComposer (like Bloom, Vignette, Noise etc.). Any idea how to prevent this? I…

---

## [React drei useprogress is giving 67% when we load the glb files as blob](https://discourse.threejs.org/t/react-drei-useprogress-is-giving-67-when-we-load-the-glb-files-as-blob/69606)

<div class="topic-metadata">

**Author:** [@cvdaniel](https://discourse.threejs.org/u/cvdaniel)\
**Replies:** 1\
**Last updated:** [August 22, 2024, 6:00pm UTC](https://discourse.threejs.org/t/react-drei-useprogress-is-giving-67-when-we-load-the-glb-files-as-blob/69606 "2024-08-22T18:00:54Z")

</div>

In react application, I am using following snippet to load the glb files: const loadAndGetArtifactUrl = async(artifactName: string) =\> { let data = await localWindow?.electron.userDetails("3d\_artifacts", \[artifa…

---

## [\<Environment\> from @react-three/drei causes a rerender](https://discourse.threejs.org/t/environment-from-react-three-drei-causes-a-rerender/68224)

<div class="topic-metadata">

**Author:** [@iseafish69](https://discourse.threejs.org/u/iseafish69)\
**Replies:** 1\
**Last updated:** [July 16, 2024, 8:14pm UTC](https://discourse.threejs.org/t/environment-from-react-three-drei-causes-a-rerender/68224 "2024-07-16T20:14:20Z")

</div>

So I have a Canvas \<Canvas className="App" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: "black", zIndex: 1}}…

---

## [How to setup drei PivotControls with Glb file Objects for select and move](https://discourse.threejs.org/t/how-to-setup-drei-pivotcontrols-with-glb-file-objects-for-select-and-move/67485)

<div class="topic-metadata">

**Author:** [@lalamax3d](https://discourse.threejs.org/u/lalamax3d)\
**Replies:** 5\
**Last updated:** [July 1, 2024, 4:05pm UTC](https://discourse.threejs.org/t/how-to-setup-drei-pivotcontrols-with-glb-file-objects-for-select-and-move/67485 "2024-07-01T16:05:20Z")

</div>

Hey Community. Here is my example of third failure attempt to make it work. What i am trying to acheive, is simple basic editor with glb files (for user). i managed to have lot of things working but this (concept of co…

[Next page](https://discourse.threejs.org/tag/drei/1155.md?match_all_tags=true&page=1&tags%5B%5D=drei)