React Core API
Introduction

Hiber3D HDK React

Hiber3D HDK is a Typescript library for creating web-based 3d experiences. Powered by the lightweight Hiber engine it is compatible across all major mobile, tablet, and desktop browsers. It features built-in multiplayer, character controls, gameplay mechanics, customizable avatars and more, allowing you to create interactive 3D worlds rapidly.

The hdk-react package contains only basic renderer and core functions for working with a scene graph with a React component architecture. It is typically used together with component libraries like hdk-react-components (opens in a new tab) and helper libraries like hdk-utils (opens in a new tab).

Installation

Install with NPM:

npm i @hiber3d/hdk-react-components

or with yarn:

yarn add @hiber3d/hdk-react-components

Usage

import { HNode, Prefab, render } from '@hiber3d/hdk-react';
import { Ground, ImagePanel } from '@hiber3d/hdk-react-components';
 
const World = () => (
  <HNode>
    <Ground material="t_snow_01" water waterOffset={0.2} />
    <Prefab id="gpl_spawn_point_01" y={1} rotY={270} />
 
    <ImagePanel
      src="https://cdn.hibervr.com/demo/img/Lunch.jpg"
      scale={2}
      x={15}
      y={3}
      rotY={90}
      ratio={1000 / 750}
      backside
      frame="modern"
    />
  </HNode>
);
 
render(<World />, { environment: 'planet_01' });
ModulesModules