Inspekcja i edycja scen React Three Fiber w narzędziach dewelopera Chrome
React Three DOM, stworzony przez Poimandres, to rozszerzenie Chrome, które łączy drzewa komponentów React Three Fiber z grafem sceny Three.js do inspekcji i debugowania w przeglądarce. Integruje się z DevTools, dzięki czemu deweloperzy mogą przeszukiwać hierarchie scen, znaleźć komponent React za siatką i edytować właściwości Three.js z natychmiastowymi aktualizacjami na płótnie. Rozszerzenie dodaje zakładkę R3F, wizualne podświetlanie i edytowanie właściwości w czasie rzeczywistym dla szybszej iteracji. Skierowane do deweloperów webowych i technicznych artystów 3D, skraca czas reakcji podczas dostosowywania pozycji, materiałów lub oświetlenia.
Narzędzie wyjaśnia, które komponenty React renderują które siatki.
W zakładce DevTools R3F graf sceny przedstawia obiekty 3D obok ich odpowiedników React, umożliwiając inspekcję instancji komponentów i ich bieżących właściwości. Mapowanie komponentów identyfikuje, który komponent stworzył siatkę, a wybór wyzwala wizualne podświetlenie na kanwie. Panel wymienia nazwy właściwości i ich aktualne wartości, dzięki czemu deweloperzy mogą celować w dokładny węzeł odpowiedzialny za układ, animację lub problemy z materiałem.
Edytowanie właściwości na żywo przyspiesza iteracyjne dostosowywanie bez pełnych przeładowań strony.
Rozszerzenie wspiera bezpośrednie edytowanie właściwości komponentów i atrybutów Three.js z natychmiastową wizualną informacją zwrotną, umożliwiając szybkie dostosowywanie pozycji, rotacji i parametrów materiałów podczas działania aplikacji. Ponieważ narzędzie jest utrzymywane przez zbiorowość deweloperów odpowiedzialnych za wiele bibliotek R3F, jego model obiektowy podąża za deklaratywnymi wzorcami React i zachowuje nazwy właściwości między źródłem a inspektorem, co zmniejsza domysły podczas śledzenia pochodzenia wizualnych artefaktów.
Narzędzie zostało zaprojektowane specjalnie dla React Three Fiber i ma wąski zakres.
Wykrywanie wymaga kompatybilnej implementacji React Three Fiber i w pełni załadowanej strony, więc inspektor może nie pojawić się dla standardowych scen Three.js. Rozszerzenie integruje się z Chromium DevTools, zapewniając zasięg w przeglądarkach opartych na Chromium, ale jego specjalizacja oznacza, że zespoły, które mieszają czysty kod Three.js i R3F, nie mogą używać go jako uniwersalnego inspektora scen; jest przeznaczone dla projektów już korzystających z podejścia opartego na React.
Skoncentrowane narzędzie dla zespołów R3F, z wyraźnym zakresem i kompromisami.
React Three DOM to praktyczny wybór dla zespołów zaangażowanych w React Three Fiber, które potrzebują ściślejszej informacji zwrotnej między kodem komponentów a renderowanymi scenami. Ponieważ rozszerzenie celuje w R3F, projekty korzystające z czystego Three.js muszą szukać gdzie indziej. Wskazówka: dodaj rozszerzenie do wczesnych sprintów rozwojowych, aby wychwycić strukturalne niezgodności przed profilowaniem, co uczyni fazę debugowania bardziej efektywną dla przepływów pracy intensywnie korzystających z R3F.
