Skip to content

Conversation

@sm-heard
Copy link

Implemented materials in inspector:

Implementation Summary

Files Created

  • examples/jsm/inspector/tabs/Materials.js (~515 lines)
    • New tab extending Tab class
    • Material list with usage counts
    • Editable property panel (color, opacity, metalness, roughness, etc.)
    • Compiled WGSL shader code viewer with vertex/fragment tabs

Files Modified

  • examples/jsm/inspector/Inspector.js
    • Added import for Materials tab
    • Created and registered tab in constructor
    • Added scene-based material updates in resolveFrame()
  • examples/jsm/inspector/ui/Style.js
    • Added CSS for material list selection
    • Added CSS for property panel layout
    • Added CSS for shader code viewer (tabs, scrollable code)

Features Implemented

Feature Status
Material list with type and usage count
Click-to-select materials
Editable material properties (color, opacity, etc.)
Shader code viewer (vertex/fragment tabs)
Real-time updates (throttled ~250ms)

Testing

  • Linting: ✅ Passes
  • Unit tests: ✅ 1286 pass, 0 fail

@sm-heard
Copy link
Author

Woops, will fix build folder issue.

@mrdoob
Copy link
Owner

mrdoob commented Nov 27, 2025

Can you add a screenshot and a live link like I did to your other PR? #32387

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants