@hology/react v0.0.11

Utilities for integrating Hology with a react application.

Initiating a game

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 with a specific scene and game class.

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;
}