ตรวจสอบและแก้ไขฉาก React Three Fiber ภายใน Chrome DevTools
React Three DOM ซึ่งสร้างโดย Poimandres เป็นส่วนขยายของ Chrome ที่เชื่อมโยงต้นไม้ของคอมโพเนนต์ React Three Fiber กับกราฟฉากของ Three.js สำหรับการตรวจสอบและการดีบักในเบราว์เซอร์ มันรวมเข้ากับ DevTools เพื่อให้นักพัฒนาสามารถสำรวจลำดับชั้นของฉาก ค้นหาคอมโพเนนต์ React ที่อยู่เบื้องหลัง mesh และแก้ไขคุณสมบัติของ Three.js ด้วยการอัปเดตบนแคนวาสทันที ส่วนขยายนี้เพิ่มแท็บ R3F การเน้นภาพ และการแก้ไข prop แบบเรียลไทม์เพื่อการวนซ้ำที่รวดเร็วขึ้น มุ่งเป้าไปที่นักพัฒนาเว็บและศิลปินเทคนิค 3D มันช่วยลดระยะเวลาในการให้ข้อเสนอแนะแม้ในขณะที่ปรับตำแหน่ง วัสดุ หรือแสงสว่าง.
เครื่องมือชี้แจงว่าองค์ประกอบ React ใดแสดงเมชใด
ภายในแท็บ DevTools R3F กราฟฉากจะแสดงวัตถุ 3D พร้อมกับองค์ประกอบ React ของพวกเขา ทำให้คุณสามารถตรวจสอบอินสแตนซ์ขององค์ประกอบและพร็อพสด การแมพองค์ประกอบ ระบุว่าองค์ประกอบใดสร้างเมชและการเลือกจะกระตุ้นการเน้นภาพในแคนวาส แผงจะแสดงชื่อคุณสมบัติและค่าปัจจุบัน เพื่อให้นักพัฒนาสามารถกำหนดเป้าหมายโหนดที่รับผิดชอบต่อเลย์เอาต์ การเคลื่อนไหว หรือปัญหาวัสดุ
การแก้ไขพร็อพสดช่วยเร่งการปรับแต่งแบบวนซ้ำโดยไม่ต้องโหลดหน้าใหม่ทั้งหมด
ส่วนขยายสนับสนุนการแก้ไขโดยตรงต่อพร็อพขององค์ประกอบและคุณสมบัติของ 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
