React Three DOM 용 Google Chrome

Chrome DevTools 내에서 React Three Fiber 장면 검사 및 편집

Poimandres에 의해 만들어진 React Three DOM은 React Three Fiber 구성 요소 트리를 Three.js 장면 그래프와 연결하여 브라우저 내에서 검사 및 디버깅할 수 있는 Chrome 확장 프로그램입니다. 개발자가 장면 계층을 탐색하고 메쉬 뒤에 있는 React 구성 요소를 찾으며 Three.js 속성을 즉각적인 캔버스 업데이트로 편집할 수 있도록 DevTools에 통합됩니다. 이 확장 프로그램은 R3F 탭, 시각적 강조 및 더 빠른 반복을 위한 실시간 소품 편집 기능을 추가합니다. 웹 개발자와 3D 기술 아티스트를 대상으로 하며, 위치, 재료 또는 조명을 조정할 때 피드백 루프를 단축시킵니다.

이 도구는 어떤 React 컴포넌트가 어떤 메쉬를 렌더링하는지를 명확히 합니다.

DevTools R3F 탭 내부에서 장면 그래프는 3D 객체와 그들의 React 대응물을 나란히 제시하여 컴포넌트 인스턴스와 그들의 실시간 props를 검사할 수 있게 합니다. 컴포넌트 매핑은 어떤 컴포넌트가 메쉬를 생성했는지를 식별하고 선택은 캔버스에서 시각적 강조를 유발합니다. 패널은 속성 이름과 현재 값을 나열하여 개발자들이 레이아웃, 애니메이션 또는 재료 문제에 책임이 있는 정확한 노드를 타겟팅할 수 있게 합니다.

실시간 prop 편집은 전체 페이지 새로 고침 없이 반복적인 조정을 가속화합니다.

이 확장 프로그램은 컴포넌트 props와 Three.js 속성에 대한 직접 편집을 지원하며 즉각적인 시각적 피드백을 제공하여 앱이 실행되는 동안 위치, 회전 및 재료 매개변수를 핫 조정할 수 있게 합니다. 이 도구는 많은 R3F 라이브러리 뒤에 있는 개발자 집단에 의해 유지 관리되기 때문에, 그 객체 모델은 선언적 React 패턴을 따르며 소스와 검사기 간에 속성 이름을 보존하여 시각적 아티팩트의 출처를 추적할 때 추측 작업을 줄입니다.

이 도구는 React Three Fiber를 위해 특별히 제작되었으며 범위가 좁습니다.

탐지는 호환 가능한 React Three Fiber 구현과 완전히 로드된 페이지를 요구하므로 검사기는 일반 Three.js 장면에서는 나타나지 않을 수 있습니다. 이 확장 프로그램은 Chromium DevTools에 통합되어 Chromium 기반 브라우저 전반에 걸쳐 접근할 수 있지만, 그 전문화로 인해 일반 Three.js와 R3F 코드를 혼합하는 팀은 이를 보편적인 장면 검사기로 사용할 수 없습니다; 이는 이미 React 기반 접근 방식을 사용하는 프로젝트를 위해 의도되었습니다.

R3F 팀을 위한 집중된 유틸리티, 명확한 범위와 트레이드 오프.

React Three DOM은 컴포넌트 코드와 렌더링된 장면 간의 피드백을 더 긴밀하게 필요로 하는 React Three Fiber에 전념하는 팀을 위한 실용적인 선택입니다. 이 확장은 R3F를 특별히 목표로 하기 때문에, 일반 Three.js를 사용하는 프로젝트는 다른 곳을 찾아야 합니다. 팁: 구조적 불일치를 프로파일링하기 전에 포착하기 위해 초기 개발 스프린트에 확장을 추가하여 R3F 중심의 워크플로우에 대한 디버깅 단계를 더 효율적으로 만드세요.