Dynamically changing props (e.g. visibleEdgeColor) of Outline breaks it / no longer renders

Offen

#143 erstellt am 06.8.2022 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit: 4/5
Geschätzter Aufwand: 3-5 Tage
Anfängerfreundlichkeit: 38/100

Issue-Typ: Bug
Klarheit: Größtenteils klar
Aktivitätsstatus: Veraltet
Tech-Stack: react, three.js, typescript
Bereich: computer-graphics, frontend

Rechercherichtung

Die Reproduktion ist die verlinkte CodeSandbox mit EffectComposer und Outline; führe sie zunächst aus und vergleiche fixed mit changing visibleEdgeColor. Verfolge diese Component-Entry-Points, um herauszufinden, warum das Prop-Update das Rendern beendet, und betrachte das Problem als gelöst, wenn sich die Farbe ändern kann, ohne den key von EffectComposer zu ändern, während das Rendern fortgesetzt wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Problem

Demo of bug and workaround: https://codesandbox.io/s/bug-change-outline-color-dmu52j?file=/src/App.js

✅ Constant/fixed visibleEdgeColor

<EffectComposer multisampling={8} autoClear={false}>
  <Outline
    blur edgeStrength={100} width={500}
    visibleEdgeColor="red"
  />
</EffectComposer>

🔥 Dynamically changing visibleEdgeColor breaks Outline, stops rendering

+ // `color` variable is dynamically changing
  <EffectComposer multisampling={8} autoClear={false}>
    <Outline
      blur edgeStrength={100} width={500}
+     visibleEdgeColor={color}
    />
  </EffectComposer>

Workaround

Changing the visibleEdgeColor of Outline element breaks it.
Workaround is to change the key of EffectComposer so everything re-mounts and re-renders.

  <EffectComposer
   multisampling={8} autoClear={false}
+  key={color}
  >
    <Outline
      blur edgeStrength={100} width={500}
-     visibleEdgeColor={"red"}
+     visibleEdgeColor={color}
    />
  </EffectComposer>

To see this in action, change the APPLY_WORKAROUND in the demo sandbox.

Is this expected behaviour? Thanks!

Vorherrschende Sprache: TypeScript
Sterne: 1.4k
Forks: 134
Ø Merge: 4 Min.
Gemergte PRs (30 T.): 4

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
Forken Sie das Repository und arbeiten Sie in einem Branch.
Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus pmndrs/react-postprocessing

Three.js bloom issue with Next.js 14 Offen

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 42/100

pmndrs/react-postprocessing#343 · 1 Kommentar · Erstellt am 25.9.2025
Using Custom Effect with Bloom, Bloom doesn't work Offen

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100

pmndrs/react-postprocessing#286 · Erstellt am 16.6.2024
[Bug] - N8AO works incorrectly with adaptiveDpr Offen

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 35/100

pmndrs/react-postprocessing#280 · 2 Kommentare · 1 Reaktion · Erstellt am 23.4.2024
Added the Custom Effect of Sharpeness Offen

enhancement

pmndrs/react-postprocessing#253 · 4 Reaktionen · 1 zugewiesene Person · Erstellt am 09.11.2023
Bloom Filter breaking Scene in Chrome - Cannot read properties of null (reading 'alpha') Offen

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 25/100

pmndrs/react-postprocessing#240 · 1 Kommentar · 1 Reaktion · Erstellt am 02.10.2023

Alle Issues in pmndrs/react-postprocessing