@pmndrs/uikit

Every uikit component is a three.js Object3D. Yoga lays the components out with flexbox, and they render as instanced panels and MSDF text, so a whole interface costs only a few draw calls. Properties mirror CSS in camelCase, and lengths are in pixels.

Scene setup

import { Container, Text, reversePainterSortStable } from '@pmndrs/uikit'
import { forwardHtmlEvents } from '@pmndrs/pointer-events'

renderer.localClippingEnabled = true
renderer.setTransparentSort(reversePainterSortStable)

const root = new Container({ sizeX: 2, sizeY: 1, padding: 16, flexDirection: 'column', backgroundColor: '#222' })
root.position.set(0, 1.5, -1)
scene.add(root)
root.add(new Text({ text: 'Hello', color: 'white' }))