@number10/jsx-three

Three.js surface bridge for PhaserJSX. Render portable UI into an offscreen Konva surface and map that canvas onto Three.js meshes.

Status

First public release. Useful for interactive monitor, kiosk, and in-world screen setups. It is intentionally a bridge layer, not a standalone JSX renderer.

What this is

@number10/jsx-three is not a native 3D UI framework. It is a bridge for rendering portable, declarative 2D JSX interfaces onto interactive Three.js surfaces.

The goal is not to replace spatial 3D UI systems, but to make application-style UI easy to build, iterate on, and reuse inside 3D scenes such as monitors, control panels, kiosks, and in-world displays.

Install

pnpm add @number10/jsx-core @number10/jsx-components @number10/jsx-konva @number10/jsx-three
pnpm add react react-dom konva three @react-three/fiber

Add @react-three/drei if you want helpers such as OrbitControls.

What it does

• Creates offscreen Konva-backed panels via PanelManager
• Exposes ready-to-use mesh components: PlanePanelMesh, CurvedPanelMesh, CubePanelMesh
• Forwards pointer and wheel input from mesh hits back into the panel UI
• Coordinates scene controls with panel interaction via usePanelBlocking()
• Supports panel textures with portal-backed overlays because the Konva surface is composited

Minimal example

const manager = new PanelManager()
const panel = manager.createPanel({
  id: id('monitor'),
  component: MonitorPanel,
  width: 1024,
  height: 640,
})

<Canvas camera={{ position: [0, 0.9, 3.6], fov: 38 }}>
  <CurvedPanelMesh
    panel={panel}
    radius={1.64}
    height={1.06}
    arc={1.02}
    position={[0, 0, 0.03]}
    insideOut
  />
</Canvas>

Package roles

| Package | Responsibility | | ------------------------------ | ------------------------------------------ | | @number10/jsx-core | VDOM, hooks, theme, portable types | | @number10/jsx-components | Portable UI components | | @number10/jsx-konva | Offscreen panel rendering into a canvas | | @number10/jsx-three | Mesh binding, texture sync, hit forwarding | | three / @react-three/fiber | 3D scene, camera, materials, controls |

License

GPL-3.0-only