3D User Interfaces

The troika-3d-ui package allows creating flexbox user interfaces in 3D scenes. It behaves largely like CSS flexbox, but renders in WebGL so it can make use of Three.js materials, can include fully 3D objects within its layout, and remains functional in WebXR.

It uses the text layout engine from troika-3d-text, so the flexbox layout can auto-size elements based on the size of their text content, and the final rendering includes high quality antialiased text.

Examples:

• Example 1

• Example 2

More documentation to come.

---

Last update: 2024-11-11