Develop

UIKit (3D UI Runtime)

Updated: Sep 4, 2026

UIKit is a Three.js UI runtime with Yoga layout, MSDF text, and batched rendering. IWSDK adds asset loading, scene placement, pointer integration, and lifecycle management around UIKit documents.

Core concepts

Yoga provides Flexbox-style layout.

UIKit renders panels, media, controls, and text as Three.js content.

MSDF text remains sharp across a range of scene scales.

Class and interaction state drive visual changes.

IWSDK updates every live UIKit document from its render loop.

UIKitML source → UIKit components → UIKitDocument → UIKitMLAsset

See UIKitML for the authoring language.

Units and world-space size

UIKit dimensions are centimeters. At entity scale 1, a root width of 100 UIKit units is one meter wide.

Use the host entity transform to resize an entire world-space panel.

const panel = await world.assets.instantiate<UIKitMLAsset>('menu');
const entity = world.createTransformEntity(panel);

entity.object3D!.position.set(0, 1.4, -1.5);
entity.object3D!.scale.setScalar(0.25);

This follows the same placement model as a glTF or procedural Three.js object.

Layout and styling

UIKit supports flex layout properties such as direction, alignment, gap, padding, margin, growth, shrink, and size constraints. In UIKitML, write these properties in kebab case.

<style>
  .toolbar {
    flex-direction: row;
    align-items: center;
    gap: 8;
    padding: 12;
  }

  .action:hover {
    background-color: #3f3f46;
  }
</style>

Use classes for reusable appearance and IDs for elements that application code needs to query.

Access the component tree

UIKitMLAsset contains a UIKitDocument and forwards ID lookup.

const panel = world.requireSceneObject<UIKitMLAsset>('toolbar-panel');
const action = panel.requireElementById('primary-action');

action.addEventListener('click', runPrimaryAction);
action.classList.add('selected');

See UIKitDocument for selectors and lifecycle details.

Input integration

IWSDK connects its pointer stack to UIKit. Browser canvas, XR ray, grab, and touch interactions can update hover, active, and focus state and dispatch pointer events.

Add RayInteractable to the panel’s owning entity for browser-pointer and XR-ray events. Add PokeInteractable for touch events. Without the matching interaction tag, the pointer stack does not target the panel through that path.

Keep application behavior in event handlers or ECS systems. Keep visual state in UIKit styles and class changes.