Utilities for integrating Hology with a react application.

Initiating an application

HologyScene is the browser adapter for a long-lived Hology application. Without a sceneName, its children render as soon as the renderer and application services are ready. Use useHologyRuntime() to load and unload temporary gameplay sessions.

function Menu() {
  const runtime = useHologyRuntime()
  return <button onClick={() => runtime.loadGame({ sceneName: 'main' })}>New game</button>
}

function App() {
  return (
    <HologyScene gameClass={Game} actors={actors} shaders={shaders} dataDir="data">
      <Menu />
    </HologyScene>
  )
}

useGameState() exposes initializing, menu, loading, playing, unloading, error, and stopped transitions. useWorld() returns the current session world or undefined outside gameplay.

useHologyEngine hook

Setup Hology Engine with a reference to a HTML Element in which it will render the game.

HologyScene component

A component that can simply be dropped into your application to run the engine. Passing sceneName still auto-loads a scene for compatibility, but new applications should load sessions explicitly.

You can pass in a JSX Element for a UI overlay.

function Game() {
  return (
    <HologyScene
      gameClass={GameInstance}
      sceneName="demo"
      actors={{}}
      shaders={{}}
      dataDir="data"
    ></HologyScene>
  );
}

class GameInstance {
  private world = inject(World)

  onStart() {
    world.spawn(Player)
  }
}

Pointer events

When using pointer events to detect events like clicks in a scene, these events are blocked by the UI overlay when using the HologyScene component. To still be able to detect touch and mouse events, add the following CSS code to your project.

.hology-overlay {
  pointer-events: none;
}
.hology-overlay * {
  pointer-events: auto;
}