@hology/react
v0.0.3
Published
Utilities for integrating Hology Engine in a react app.
Downloads
106
Readme
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;
}