Skip to content

Conversation

@sm-heard
Copy link

@sm-heard sm-heard commented Nov 27, 2025

Implemented a Scene Hierarchy Inspector feature for three.js.

Screenshot 2025-11-27 at 04 20 56

https://raw.githack.com/sm-heard/three.js/feature/inspector-scene-hierarchy/examples/index.html#webgpu_tsl_compute_attractors_particles

Files Created

examples/jsm/inspector/tabs/Hierarchy.js (new file, ~450 lines)

  • Hierarchical tree view of the scene graph using existing List/Item components
  • Click-to-select with row highlighting
  • BoxHelper visualization for selected objects in 3D viewport
  • Editable property panel with:
    • Position (X, Y, Z)
    • Rotation (X, Y, Z in degrees)
    • Scale (X, Y, Z)
    • Name (editable text)
    • Type (read-only)
    • Visible (checkbox)
  • Real-time updates (throttled to 250ms)
  • Two-way binding between panel inputs and object transforms

Files Modified

  1. examples/jsm/inspector/Inspector.js
    - Added import for Hierarchy
    - Created and registered the new tab
    - Hooked into resolveFrame() to update hierarchy from scene renders
  2. examples/jsm/inspector/ui/Style.js
    - Added .list-item-row.selected styling for selection highlighting
    - Added .hierarchy-property-panel styling for the property panel

@mrdoob mrdoob requested a review from sunag November 27, 2025 03:24
@mrdoob mrdoob added this to the r183 milestone Nov 27, 2025
@mrdoob
Copy link
Owner

mrdoob commented Nov 27, 2025

Can you ask Claude to not include the builds in the PR?

@sm-heard
Copy link
Author

Yes sir. My bad, I thought I had kept that build folder out.

@mrdoob
Copy link
Owner

mrdoob commented Nov 27, 2025

Also revert the changes in‎ .gitignore please.
We'll probably have to add .claude and CLAUDE.md anyway, but better to leave that change out of this PR.

@sm-heard
Copy link
Author

Yes sir. Will do.

@sunag
Copy link
Collaborator

sunag commented Nov 28, 2025

I prefer to separate the Hierarchy from the Object and Material Properties. Besides being more flexible to have the two tabs like Unity has, for example, it wouldn't break the layout as it is in Transform division.

Example: Hierarchy in left, Inspector( for us Properties) in Right We're not going to consider the dock here.
image

--
The object or material properties should follow a similar pattern to what we saw in Parameters tabs using List.

Another thing about the Material PR, let's try to unify this into just one tab called Properties where, depending on the object selected, the related properties appear. In this sense, the Hierarchy should also show the materials and geometry of the meshes.

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.

3 participants