Hooks

Reactylon offers several custom React hooks to provide an intuitive way to access core elements of the Babylon.js scene directly from the React context, streamlining the integration of Babylon.js into a React-based application.

useEngine

useEngine<T>(selector?: (engine: Engine) => T): T | Engine

This hook retrieves the engine instance from the context, allowing you to interact with the Babylon.js engine, which is responsible for rendering 3D content and managing the scene.

Passing a selector function extracts a specific part of the engine, enabling reactivity when used with React’s flow.

useScene

useScene<T>(selector?: (scene: Scene) => T): T | Scene

This hook retrieves the scene object from the context and should only be used in read mode. Manually adding or removing elements won’t trigger a re-render, as updates are managed by React.

Passing a selector function extracts a specific part of the scene, enabling reactivity when used with React’s flow.

useModel

useModel(url: string | File | ArrayBufferView, options?: ImportMeshOptions, onCreate?: (model: ISceneLoaderAsyncResult) => void): ISceneLoaderAsyncResult

This hook facilitates loading a model by abstracting Babylon.js’s ImportMeshAsync function.

It auto-disposes the imported model (and his related entities) and it activates Suspense.

useCanvas

useCanvas(): HTMLCanvasElement | WebGLRenderingContext

This hook provides access to the HTML canvas element (or WebGL context) used by Babylon.js for rendering. It’s useful when you need to interact with the underlying canvas, such as adjusting properties or integrating with other components.

useXrExperience

useXrExperience<T>(selector?: (xrExperience: WebXRDefaultExperience) => T): T | WebXRDefaultExperience

This hook returns the WebXR experience from the context, giving you direct access to Babylon.js’ WebXR integration, enabling you to create immersive VR/AR experiences by managing XR sessions and device inputs.

Passing a selector function extracts a specific part of the scene, enabling reactivity when used with React’s flow.

usePhysics

usePhysics<T>(selector?: (physicsEngine: IPhysicsEngine) => T): T | IPhysicsEngine

This hook returns the physics engine from the context, giving you direct access to the physics system.

Passing a selector function extracts a specific part of the scene, enabling reactivity when used with React’s flow.

useHavok

useHavok() => HavokPlugin

This hook returns the Havok plugin injected during the physics initalization.