Hiber3D HDK React

npm i @hiber3d/hdk-react-components

yarn add @hiber3d/hdk-react-components

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

function Animation(animation): HDK React Component

type AssetIDOptions: object;

type BloomOptions: object;

type ColorGradingOptions: object;

type CubeMapFace: object;

type CubeMapOptions: object;

type FogOptions: object;

type SunOptions: object;

type WeatherOptions: Pick<EnvironmentOptions, "weather">;

function Audio(
   attenuationModel, 
   enabled, 
   looping, 
   maxAttenuationDist, 
   minAttenuationDist, 
   playOnSignal, 
   playSpeed, 
   rollOffFactor, 
   solo, 
   soundType, 
   src, 
   startPlayingDist, 
   volume): HDK React Component

<Audio src={{ id: "a_am_city_01" }} volume={3} />

function Environment(
   assetIDs, 
   bloom, 
   colorGrading, 
   extendEnvironment, 
   fog, 
   id, 
   lightboxBrightness, 
   reflectionboxBrightness, 
   skybox, 
   skyboxBrightness, 
   skyboxSaturation, 
   sun, 
   weather): HDK React Component

const World = () => (
  <HNode>
    <Prefab id={'sphere_01'} scale={3} scaleY={1.5} y={-3} material={'chrome'} />
    <Environment
      id="my_env"
      sun={{
        position: [-1, 1, 1],
        color: '#63c5ea',
      }}
      fog={{
        color: '#63c5ea',
        density: 0.0000001,
      }}
      weather={weather.dandelion}
      skybox={{
        back: { url: 'https://cdn.hibervr.com/skybox_cubemaps/underwater_realm/cube_back.png' },
        bottom: { url: 'https://cdn.hibervr.com/skybox_cubemaps/underwater_realm/cube_down.png' },
        front: { url: 'https://cdn.hibervr.com/skybox_cubemaps/underwater_realm/cube_front.png' },
        left: { url: 'https://cdn.hibervr.com/skybox_cubemaps/underwater_realm/cube_left.png' },
        right: { url: 'https://cdn.hibervr.com/skybox_cubemaps/underwater_realm/cube_right.png' },
        top: { url: 'https://cdn.hibervr.com/skybox_cubemaps/underwater_realm/cube_up.png' },
      }}
    />
  </HNode>
);
render(<World />, { environment: 'my_env' });

function Prefab(id, material): HDK React Component

<Prefab id="cube_01" />

function PrefabSpawner(
   angularVelocity, 
   firstSpawnShouldBeInstant, 
   intervalRule, 
   linearVelocity, 
   networkSynced, 
   prefabID, 
   resetOnPlayerIntentChanged, 
   resetOnPlayerRespawn, 
   spawnAmount, 
   spawnAmountMax, 
   spawnAmountMin, 
   spawnAmountRule, 
   spawnInterval, 
   spawnIntervalMax, 
   spawnIntervalMin, 
   spawnRule, 
   spawnedAmountLimit, 
   startIdle): HDK React Component

<PrefabSpawner prefabID="cube_01" />

<PrefabSpawner y={2} z={2}>
  <Spinning>
    <Hovering>
      <Prefab id="cube_01" />
    </Hovering>
  </Spinning>
</PrefabSpawner>

function Temporary(lifespan): HDK React Component

<Temporary lifespan={5}>
  <HNode z={2}>
    <Prefab id="cube_01" />
    <Prefab id="cube_01" x={5} y={2} />
    <Prefab id="cylinder_01" />
  </HNode>
</Temporary>

function Text(
   billboard, 
   color, 
   shadow, 
   size, 
   transparency): HDK React Component

<Text billboard size={2} shadow>Hello, world!</Text>

function Apply(props): HDK React Component

// Apply x:2 on all nodes named 'arm', even if 'x' is explicitly set.
<Apply props={{ x: 2 }} when={node => node.name === 'arm'}>
  <HNode z={2}>
    <Prefab id="cube_01" name="arm" />
    <Prefab id="cube_01" name="arm" x={5} y={2} />
    <Prefab id="cylinder_01" name="body" />
  </HNode>
</Apply>

function Random(seed): HDK React Component

// Lets create a component that returns a set number of items with random values.
type MyRandomThingProps = {
  numberOfThings?: number;
};
 
const MyRandomThing: HDKComponent<MyRandomThingProps> = ({ numberOfThings = 10, ...props }) => {
 const things = [];
 const random = useRandom();
 for (let index = 0; index < numberOfThings; index++) {
   things.push(
     <Prefab
       id="rounded_cube_01"
       scaleX={random.range(1, 3)}
       scaleY={random.range(1, 3)}
       scaleZ={random.range(1, 3)}
       x={random.range(-4, 4)}
       y={random.range(0, 8)}
       z={random.range(-4, 4)}
       rotX={random.range(0, 360)}
       rotY={random.range(0, 360)}
       rotZ={random.range(0, 360)}
       material={random.fromArray(['palette_01_green', 'palette_01_red', 'palette_01_blue', 'palette_01_yellow'])}
     />
   );
 }
 return <HNode {...props}>{things}</HNode>;
}
 
// Now we can use this component in our scene.
// We wrap the component in a <Random> component to set the seed.
<Random seed={42}>
  <MyRandomThing z={10} />
</Random>
};

function AccelerationVolume(
   acceleration, 
   colliderMeshId, 
   direction, 
   maxSpeed, 
   showCollider, 
   stickToCenterDamping, 
   stickToCenterEnabled, 
   stickToCenterPerpDamping, 
   stickToCenterSpeedFactor): HDK React Component

<AccelerationVolume
  showCollider={true}
  acceleration={200}
  maxSpeed={25}
  direction={[1, 0, 0]}
  stickToCenterDamping={0.5}
  stickToCenterEnabled={false}
  stickToCenterPerpDamping={10}
  stickToCenterSpeedFactor={3}
/>

function Collectible(
   collectFxId, 
   resetFxId, 
   type): HDK React Component

<Collectible type="MANDATORY" z={4} x={3} thumbnailUrl="https://m.media-amazon.com/images/I/710dct68n1L.jpg">
  <Prefab id="cube_01" />
</Collectible>

function PowerUp(abilities, spawnerProps): HDK React Component

<PowerUp abilities={["a_consume_increase_speed"]} spawnerProps={{ spawnInterval: 5 }}>
  <Prefab id="gpl_dynamite_01" />
</PowerUp>

function PointLight(
   color, 
   lightOnSignal, 
   offset, 
   radius, 
   strength): HDK React Component

<PointLight strength={50} color="#ffff00" radius={10} />

function SpotLight(
   color, 
   dir, 
   lightOnSignal, 
   offset, 
   openingAngleDegs, 
   radius, 
   strength): HDK React Component

<SpotLight openingAngleDegs={30} radius={200} strength={50} color="#00aeff">
 <Mesh id="en_p_light_cone_02" material={'t_light_cone_01' as Material} y={2.2} rotX={180} physical={false} />
</SpotLight>

function GLB(
   collider, 
   material, 
   render, 
   src): HDK React Component

<GLB src="https://cdn.hibervr.com/test/Spheres.glb" y={2} z={3}></GLB>

function InfoPanel(
   autoOpenOverlay, 
   body, 
   header, 
   imageID, 
   isOpenInNewTabEnabled, 
   isOpenInOverlayEnabled, 
   isOpenInOverlayOnTouch, 
   isSidebarOverlay, 
   maxShowDistance, 
   minShowDistance, 
   openUrlInNewTab, 
   preBody, 
   showOpenBinding, 
   url): HDK React Component

<InfoPanel
     header="Hiber3D Development Kit"
     body="Check out our documentation!"
     url="https://developer.hiber3d.com/docs"
     openUrlInNewTab={true}>
     <Prefab id="hologram_01_hibert" />
   </InfoPanel>

type HDKComponentArgs: HDKElementArgs & object & TransformProperties;

type HDKElementArgs: MetadataProps & object;

type MetadataProps: object;

function GameplaySettings(
   gameplayMatchSettings, 
   gameplayRequestRespawnSetting, 
   gameplayRules, 
   gameplaySpawnStrategy, 
   id): HDK React Component

function HttpOnSignal(input, url): HDK React Component

function HttpSensor(
   output, 
   pollEnabled, 
   pollInterval, 
   url): HDK React Component

function LatchGate(
   input, 
   output, 
   resetInput): HDK React Component

function MatchStateSensor(
   output, 
   state, 
   turnSignalOffNextTick): HDK React Component

function RaycastSenderSensor(
   collisionGroup, 
   collisionMask, 
   direction, 
   filterTags, 
   maxDistance, 
   output, 
   showRay): HDK React Component

<RaycastSenderSensor output="raycast" showRay collisionMask={PhysicsFilter.All} />

function ResetOnSignal(
   input, 
   resetPlayers, 
   restartLevel): HDK React Component

function RiveUI(
   filename, 
   height, 
   horizontalAlignment, 
   margin, 
   maxHeight, 
   maxWidth, 
   stretch, 
   uiComponent, 
   verticalAlignment, 
   width, 
   zIndex): HDK React Component

<RiveUI id="healthbar" />

function SetMatchStateOnSignal(input, state): HDK React Component

function TaggedSignalSourceSensor(output, sensorTag): HDK React Component

function AndGate(inputs, output): HDK React Component

<ButtonSensor output="myButton1" />
<ButtonSensor output="myButton2" x={2} />
<AndGate output="myOutput" inputs={["myButton1", "myButton2"]} />
<VisibleOnSignal input="myOutput">
  <Prefab id="ancient_urn_01" />
</VisibleOnSignal>

function ButtonSensor(
   cooldownInSeconds, 
   durationInSeconds, 
   materialOff, 
   materialOn, 
   maxDistance, 
   meshId, 
   onPress, 
   onPressAudioId, 
   output, 
   resetInput, 
   text): HDK React Component

<ButtonSensor output="myButton1" />
<VisibleOnSignal input="myButton1">
  <Prefab id="ancient_urn_01" x={2} />
</VisibleOnSignal>

function CapacitorSensor(
   delayInSeconds, 
   input, 
   output): HDK React Component

<ButtonSensor output="myButton1" />
<CapacitorSensor input="myButton1" output="myButton1Delayed" delayInSeconds={2} />
<VisibleOnSignal input="myButton1Delayed">
  <Prefab id="ancient_urn_01" x={2} />
</VisibleOnSignal>

function InvisibleOnSignal(input): HDK React Component

<ButtonSensor output="myButton1" />
<InvisibleOnSignal input="myButton1">
  <Prefab id="ancient_urn_01" x={2} />
</InvisibleOnSignal>

function LogicGate(
   input1, 
   input2, 
   output, 
   type): HDK React Component

<ButtonSensor output="myButton1" />
<ButtonSensor output="myButton2" x={2} />
<LogicGate type="AND" output="myOutput" input1={'myButton1'} input2={'myButton2'} />
<VisibleOnSignal input="myOutput">
  <Prefab id="ancient_urn_01" />
</VisibleOnSignal>

function LookAtSensor(
   maxDistance, 
   mesh, 
   minDistance, 
   output, 
   showMesh): HDK React Component

<LookAtSensor output="mySignal" mesh="box" />
<VisibleOnSignal input="mySignal">
  <Prefab id="ancient_urn_01" x={2} />
</VisibleOnSignal>

function LookAtSphereSensor(
   maxDistance, 
   minDistance, 
   output, 
   showSphere): HDK React Component

<LookAtSphereSensor output="mySignal" />
<VisibleOnSignal input="mySignal">
  <Prefab id="ancient_urn_01" x={2} />
</VisibleOnSignal>

function MaterialOnSignal(
   input, 
   materialOff, 
   materialOn): HDK React Component

<ButtonSensor output="myButton1" />
<MaterialOnSignal input="myButton1" materialOn="palette_01_black" materialOff="palette_01_white">
  <Prefab id="ancient_urn_01" x={2} />
</MaterialOnSignal>

function MultiInputGate(
   inputs, 
   output, 
   renderGate): HDK React Component

function NandGate(inputs, output): HDK React Component

<ButtonSensor output="myButton1" />
<ButtonSensor output="myButton2" x={2} />
<NandGate output="myOutput" inputs={["myButton1", "myButton2"]} />
<VisibleOnSignal input="myOutput">
  <Prefab id="ancient_urn_01" />
</VisibleOnSignal>

function NorGate(inputs, output): HDK React Component

<ButtonSensor output="myButton1" />
<ButtonSensor output="myButton2" x={2} />
<NorGate output="myOutput" inputs={["myButton1", "myButton2"]} />
<VisibleOnSignal input="myOutput">
  <Prefab id="ancient_urn_01" />
</VisibleOnSignal>

function NotGate(input, output): HDK React Component

<ButtonSensor output="myButton1" />
<NotGate output="myOutput" input="myButton1" />
<VisibleOnSignal input="myOutput">
  <Prefab id="ancient_urn_01" />
</VisibleOnSignal>

function OrGate(inputs, output): HDK React Component

<ButtonSensor output="myButton1" />
<ButtonSensor output="myButton2" x={2} />
<OrGate output="myOutput" inputs={["myButton1", "myButton2"]} />
<VisibleOnSignal input="myOutput">
  <Prefab id="ancient_urn_01" />
</VisibleOnSignal>

function ProximitySensor(
   maxDistance, 
   minDistance, 
   output, 
   showMaxDistance): HDK React Component

<HNode x={10}>
  <ProximitySensor output="mySignal" />
  <Prefab id="cube_01" />
</HNode>
<VisibleOnSignal input="mySignal">
  <Prefab id="ancient_urn_01" x={2} />
</VisibleOnSignal>

function ResistorSensor(
   delayInSeconds, 
   input, 
   output): HDK React Component

<ButtonSensor output="myButton1" />
<ResistorSensor input="myButton1" output="myButton1Delayed" delayInSeconds={1} />
<VisibleOnSignal input="myButton1Delayed">
  <Prefab id="ancient_urn_01" x={2} />
</VisibleOnSignal>

function SignalListener(input): HDK React Component

function SpawnPrefabOnSignal(
   id, 
   input, 
   networkSynced): HDK React Component

<ButtonSensor output="myButton1" />
<SpawnPrefabOnSignal input="myButton1" id="balloons_01" />

function VisibleOnSignal(input): HDK React Component

<ButtonSensor output="myButton1" />
<VisibleOnSignal input="myButton1">
  <Prefab id="ancient_urn_01" x={2} />
</VisibleOnSignal>

function XnorGate(inputs, output): HDK React Component

<ButtonSensor output="myButton1" />
<ButtonSensor output="myButton2" x={2} />
<XnorGate output="myOutput" inputs={["myButton1", "myButton2"]} />
<VisibleOnSignal input="myOutput">
  <Prefab id="ancient_urn_01" />
</VisibleOnSignal>

function XorGate(inputs, output): HDK React Component

<ButtonSensor output="myButton1" />
<ButtonSensor output="myButton2" x={2} />
<XorGate output="myOutput" inputs={["myButton1", "myButton2"]} />
<VisibleOnSignal input="myOutput">
  <Prefab id="ancient_urn_01" />
</VisibleOnSignal>