Inspektera och redigera React Three Fiber-scener inuti Chrome DevTools
React Three DOM, byggd av Poimandres, är en Chrome-tillägg som kopplar React Three Fiber-komponentträd med Three.js scen graf för inspektion och felsökning i webbläsaren. Den integreras i DevTools så att utvecklare kan navigera i scenhierarkier, hitta React-komponenten bakom ett mesh och redigera Three.js-egenskaper med omedelbara canvasuppdateringar. Tillägget lägger till en R3F-flik, visuell markeringsfunktion och realtidsredigering av egenskaper för snabbare iteration. Riktad mot webbutvecklare och 3D-tekniska konstnärer, förkortar den feedbackloopen när man justerar positioner, material eller belysning.
Verktyget klargör vilka React-komponenter som renderar vilka nät.
Inuti DevTools R3F-fliken presenterar scen grafen 3D-objekt tillsammans med sina React-motsvarigheter, vilket låter dig inspektera komponentinstanser och deras aktuella props. Komponentkartläggning identifierar vilken komponent som skapade ett nät och val utlöser visuell framhävning i duken. Panelen listar egenskapsnamn och aktuella värden, så att utvecklare kan rikta in sig på den exakta noden som är ansvarig för layout, animation eller materialproblem.
Live prop-redigeringar snabbar upp iterativ justering utan fullständig siduppdatering.
Förlängningen stöder direkta redigeringar av komponentprops och Three.js-attribut med omedelbar visuell feedback, vilket möjliggör snabbjustering av positioner, rotationer och materialparametrar medan appen körs. Eftersom verktyget underhålls av utvecklarkollektivet bakom många R3F-bibliotek, följer dess objektmodell deklarativa React-mönster och bevarar egenskapsnamn mellan källa och inspektör, vilket minskar gissningsarbetet när man spårar ursprunget till ett visuellt artefakt.
Verktyget är specialbyggt för React Three Fiber och har en smal omfattning.
Upptäckten kräver en kompatibel React Three Fiber-implementation och en helt laddad sida, så inspektören kanske inte visas för vanliga Three.js-scener. Förlängningen integreras i Chromium DevTools, vilket ger räckvidd över Chromium-baserade webbläsare, men dess specialisering innebär att team som blandar vanlig Three.js och R3F-kod inte kan använda det som en universell sceninspektör; det är avsett för projekt som redan använder det React-baserade tillvägagångssättet.
En fokuserad nytta för R3F-team, med tydlig omfattning och avvägningar.
React Three DOM är ett praktiskt val för team som är engagerade i React Three Fiber och som behöver tätare feedback mellan komponentkod och renderade scener. Eftersom tillägget riktar sig specifikt till R3F måste projekt som använder vanlig Three.js leta någon annanstans. Tips: lägg till tillägget i tidiga utvecklingssprintar för att fånga strukturella mismatchar innan profilering, vilket gör felsökningsfasen mer effektiv för R3F-tunga arbetsflöden.
