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)[https://www.npmjs.com/package/@hiber3d/hdk-react-components] and helper libraries like (hdk-utils)[https://www.npmjs.com/package/@hiber3d/hdk-utils].

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

Documentation

See Hiber3D HDK