Hiber3D HDK React Components

npm i @hiber3d/hdk-react-components

yarn add @hiber3d/hdk-react-components

type KeyFrameOptions: object;

type TweenByTimeAnimation: object;

type TweenOptions: object & AnimateOnSignalOptions;

function AsteroidSpinning(
   direction, 
   duration, 
   easing, 
   enabled, 
   loop, 
   playOnSignal, 
   speedMultiplier, 
   startAt): HDK React Component

<AsteroidSpinning speedMultiplier={1} z={5} y={2}>
  <Prefab id="rock_01_t1" />
</AsteroidSpinning>

function Friction(friction): HDK React Component

<Friction>
    <Ground hilly={2} material={'t_ice_01'} y={-1} />
  </Friction>

function Spinning(
   axis, 
   direction, 
   duration, 
   easing, 
   enabled, 
   loop, 
   playOnSignal, 
   speedMultiplier, 
   startAt): HDK React Component

<Spinning duration={8}>
  <Prefab id="cube_01" />
</Spinning>

function Swinging(
   degX, 
   degY, 
   degZ, 
   duration, 
   easing, 
   enabled, 
   initialState, 
   loop, 
   playOnSignal, 
   startAt): HDK React Component

<Swinging degY={50} z={5}>
   <Prefab id="cube_01" />
 </Swinging>

function Tween(keyframes, options): HDK React Component

<Tween
 z={2}
 options={{ duration: 2 }}
 keyframes={[
   { timestamp: 0, y: 0 },
   { timestamp: 1, y: 2 },
 ]}>
   <Prefab id="cube_01" />
</Tween>

<Tween
  z={7}
  options={{ duration: 2, playOnSignal: { input: 'elevator', behavior: 'PLAY_WHILE_SIGNAL_ON' } }}
  keyframes={[
    { timestamp: 0, y: 0 },
    { timestamp: 1, y: 2 },
  ]}
  >
    <Prefab id="cactus_01" />
</Tween>
<ButtonSensor maxDistance={5} y={1} z={2} rotX={-90}  onPress="onPress" output="elevator" />

<Tween
  z={5}
  options={{ duration: 4, loop: 'RESTART' }}
  keyframes={[
    { timestamp: 0.4, scale: 1 },
    { timestamp: 0.5, scaleX: 4, easing: 'EASE_OUT_ELASTIC' },
    { timestamp: 0.6, scale: 1 },
    { timestamp: 0.8, y: 2, scale: 1 },
    { timestamp: 0.7, rotY: 0 },
    { timestamp: 0.8, rotY: 180 },
    { timestamp: 0.87, rotY: 0 },
    { timestamp: 0.9, y: 2 },
    { timestamp: 1, y: 0 },
  ]}>
  <Prefab id="cube_01" />
</Tween>

function TweenByTime(
   animations, 
   duration, 
   endPaddingTime, 
   loop, 
   renderItem, 
   speedMultiplier, 
   startAt): HDK React Component

<TweenByTime
 z={5}
 animations={[
   {
     startTime: 1,
     duration: 0.5,
     toTween: { y: 2 },
   },
   {
     startTime: 2,
     duration: 2,
     toTween: { rotY: -90 },
     easing: 'EASE_OUT_ELASTIC',
   },
   {
     startTime: 4.5,
     duration: 1,
     toTween: { y: 0 },
   },
   {
     startTime: 6,
     duration: 2,
     toTween: { rotY: 0 },
     easing: 'EASE_OUT_ELASTIC',
   },
 ]}
 renderItem={<Prefab id="cactus_01" />}
/>

function Waving(
   enabled, 
   speedMultiplier, 
   wavingRange): HDK React Component

<Waving wavingRange={50}>
    <Prefab id="cube_01" />
  </Waving>

<Line
  numberOfItems={5}
  centered
  delta={[4, 0, 0]}
  renderItem={
    <Waving speedMultiplier={0.25}>
      <RandomRotation>
        <RandomPosition offsetX={0.3} offsetZ={0.3}>
          <Prefab id="palm_tree" />
        </RandomPosition>
      </RandomRotation>
    </Waving>
  }
/>

function AbilityCollidable(
   duration, 
   effects, 
   form, 
   group, 
   mask, 
   mesh, 
   sensor, 
   showMesh, 
   showMeshMaterial, 
   vfxInVolume): HDK React Component

<AbilityCollidable
  z={6}
  showMesh
  form={ColliderForm.box}
  effects={[
    'e_m_sprint_speed_increase',
    'e_fov_03',
    'e_fx_speed_lines_02',
    'e_fx_rocket_01',
    'e_jump_velocity_01',
  ]}
  duration={10}
/>

<AbilityCollidable
   z={6}
   showMesh
   effects={[
     { attributes: { type: 'CAMERA_DISTANCE', data: { attribute: { value: 5 } } } },
   ]}
   duration={400}
 />

type StackSegment: object;

type StairOptions: object;

type StairSystemItem: object;

type StairSystemOptions: object;

function SegmentedStack(
   dimensions, 
   renderItem, 
   segments): HDK React Component

<SegmentedStack
  segments={[
    {
      length: 2,
      direction: 'UP',
    },
    {
      length: 4,
      direction: 'RIGHT',
    },
  ]}
  z={5}
  renderItem={() => <Prefab id="scaffoldingcube_01" />}
/>

function StairSystem(
   dim, 
   renderItem, 
   sections): HDK React Component

const renderStairPart = (item: StairSystemItem) => {
 const Platform: HDKComponent = props => (
   <HNode {...props}>
     <Prefab id="en_p_grid_platform_01" y={-0.15} scale={0.5} rotY={180} children={props.children} />
   </HNode>
 );
 const Stair: HDKComponent = props => (
   <HNode {...props}>
     <Prefab id="en_p_grid_ramp_01" scale={0.5} y={-0.15} rotY={180} children={props.children} />
   </HNode>
 );
 const isRamp = item.direction.includes('_');
 if (isRamp) {
   return <Stair />;
 } else {
   return <Platform />;
 }
};
 
<StairSystem
 y={1}
 renderItem={renderStairPart}
 sections={[
   {
     repeats: 4,
     direction: 'IN',
   },
   {
     repeats: 3,
     direction: 'UP_IN',
   },
   {
     repeats: 5,
     direction: 'RIGHT',
   },
   {
     repeats: 3,
     direction: 'DOWN_IN',
     offset: [1, -1, 1],
   },
 ]}></StairSystem>

function AnimateAlongPath(
   applyRotation, 
   close, 
   duration, 
   easing, 
   initialState, 
   keyframeScale, 
   loop, 
   numberOfItems, 
   playOnSignal, 
   points, 
   showKeyframes, 
   showPoints, 
   startAt, 
   tension): HDK React Component

<AnimateAlongPath
   close={true}
   easing="EASE_IN_OUT_QUAD"
   numberOfItems={10}
   points={[
     [0, 0, 0],
     [0, 10, 10],
     [5, 5, 5],
   ]}>
   <Prefab id="cube_01" />
 </AnimateAlongPath>

function Avatar(
   animation, 
   speedMultiplier, 
   src): HDK React Component

<Avatar animation="an_default_emote_hip_hop_dancing_01" z={5} />

<Avatar
  src={{id: 'punkHairFemale'}}
  animation="an_default_emote_hip_hop_dancing_01"
  z={5}
/>

<Avatar
 src={{
   url: 'https://models.readyplayer.me/6401fc12ce7f75d51cdb2888.glb',
   skeletonGroupID: 'skg_rpm_male',
 }}
 animation="an_default_emote_hip_hop_dancing_01"
 z={5}
/>

function Bird(
   clockwise, 
   flapAngle, 
   flapSpeed, 
   flySpeed, 
   orbitRadius, 
   orbiting, 
   startAt, 
   type): HDK React Component

<Bird y={5} />

<Bird y={5} orbiting={false} flapSpeed={10} />

function BoxCollider(
   group, 
   mask, 
   sensor, 
   showMesh, 
   showMeshMaterial, 
   vfxInVolume): HDK React Component

<BoxCollider showMesh={true} z={3} sensor={{ type: 'COLLISION', output: 'showMe' }} />
<VisibleOnSignal input="showMe">
  <Prefab id="alien_grass_01" scale={0.8} z={7} />
</VisibleOnSignal>

function CameraCube(
   collision, 
   distance, 
   distanceIntroDuration, 
   distanceOutroDuration, 
   distanceStackRule, 
   duration, 
   id, 
   light, 
   lockMovementInPlane, 
   material, 
   physical, 
   pitch, 
   showMesh, 
   yaw): HDK React Component

<CameraCube yaw={90} x={0} z={0} scale={500} y={-250} duration={15} />

function Checkpoint(material): HDK React Component

<Checkpoint z={5} />

function CircularStructure(
   bottomScale, 
   dim, 
   doorWidth, 
   glassInWindow, 
   itemScaleAdjustment, 
   material, 
   numberOfSegments, 
   offset, 
   prefabId, 
   radius, 
   tilt, 
   topScale, 
   vertical, 
   wallOpening, 
   wallThickness, 
   windowWidth): HDK React Component

<CircularStructure
 radius={10}
 numberOfSegments={50}
 dim={6}
 itemScaleAdjustment={1.3}
 tilt={-10}
 glassInWindow={true}
 wallOpening={[
   { progress: 0.1, type: 'window', widthInPercent: 0.2 },
   { progress: 0.7, type: 'window', widthInPercent: 0.2 },
   {
     progress: 0.5,
     type: 'door',
     widthInPercent: 0.05,
   },
 ]}></CircularStructure>

function Collider(
   form, 
   group, 
   mask, 
   mesh, 
   sensor, 
   showMesh, 
   showMeshMaterial, 
   vfxInVolume): HDK React Component

<Animation
  z={5}
  animation={{
    y: [0, 2],
    duration: 1,
    initialState: 'PAUSED',
    playOnSignal: { input: 'startAnimation', behavior: 'PLAY_UNTIL_HALF_WHEN_ON_REVERSE_WHEN_OFF' },
  }}>
  <Prefab id="cupcake_01" />
</Animation>
<Collider
  y={1}
  z={-2}
  form={ColliderForm.box}
  showMesh={true}
  sensor={{ type: 'COLLISION', output: 'startAnimation' }}
/>

function Damaging(
   amount, 
   enabled, 
   knockbackStrength, 
   takeDamageFxId): HDK React Component

<Damaging amount={50} knockbackStrength={200} >
  <Prefab id="alien_grass_01" z={10} />
</Damaging>

function Distribute(
   feather, 
   gapFrequency, 
   gapSizeMax, 
   gapSizeMin, 
   gladeRadius, 
   glades, 
   itemAreaSizeMax, 
   itemAreaSizeMin, 
   numberOfItems, 
   outerBoundRadius, 
   overrideItemLimit, 
   radius, 
   renderGap, 
   renderItem, 
   showGapArea, 
   showItemArea): HDK React Component

<Distribute
 gladeRadius={20}
 renderItem={item => {
   const random = useRandom();
 
   return (
     <Prefab
       id={random.fromArray(['bush_01', 'bush_02'])}
       rotY={random.range(0, 360)}
       rotX={random.range(-10, 10)}
       rotZ={random.range(-10, 10)}
       scale={random.range(1, 5)}
     />
    );
 }}
/>

<Distribute renderItem={<Prefab id="cube_01" />} />

<Distribute
gladeRadius={0}
glades={[
  { x: 30, z: 10, radius: 10 },
  { x: -30, z: -10, radius: 20 },
]}
itemAreaSizeMin={4}
itemAreaSizeMax={4}
gapFrequency={0}
gapSizeMin={7}
gapSizeMax={12}
renderItem={<Prefab scale={2} id="cube_01" />}
/>

function DJBooth(
   avatarSource, 
   djScale, 
   horizontalSegments, 
   podiumMaterial, 
   verticalSegments, 
   videoEmissiveStrength, 
   videoRatio, 
   videoSrc): HDK React Component

<DJBooth
  videoSrc="https://cdn.hibervr.com/video/Cubes_Loop.mp4"
  z={8}
  avatarSource={{ url: 'https://models.readyplayer.me/64898d94c91663ff97458041.glb' }}
/>

function DualDisplay(
   ratio, 
   side1, 
   side2, 
   thickness): HDK React Component

<DualDisplay
  side1={{
    header: 'Bullet',
    link: 'https://open.spotify.com/track/1h2z5KcMffP46AeSePfwWM?si=a79df0439e8c4a44',
    src: `https://cdn.hibervr.com/external/music_mv/iconic/Bullet-Spotify.jpg`,
  }}
  side2={{
    header: 'Don`t Go',
    link: 'https://open.spotify.com/track/1snIrUbEtlTiqBkA8exVXR?si=3828a58c31c54282',
    src: `https://cdn.hibervr.com/external/music_mv/iconic/Don't-Go-Spotify.jpg`,
  }}
 />

function FibonacciSphere(
   count, 
   radius, 
   renderItem): HDK React Component

<FibonacciSphere z={5} renderItem={<Prefab id="cube_01" scale={0.5} />} />

function Flapping(
   angle, 
   axis, 
   duration, 
   enabled, 
   loop, 
   playOnSignal, 
   speedMultiplier, 
   startAt): HDK React Component

<Flapping  z={5} scaleX={0.1}>
  <Prefab id="cube_01" />
</Flapping>

function For(numberOfItems, renderItem): HDK React Component

<For
   numberOfItems={5}
   renderItem={({ index, progress }) => <Prefab id="sphere_01" y={index * 1 * progress} scale={1 + progress} />}
 />

function GlassCube(): HDK React Component

<GlassCube scale={2} z={3} />

function Grid(
   centered, 
   columns, 
   itemSpacing, 
   renderItem, 
   rows): HDK React Component

<Grid
 rows={10}
 columns={10}
 itemSpacing={4}
 renderItem={<Prefab id="en_m_jungle_temple_01_floor" />}
/>

<Grid
 rows={5}
 columns={5}
 itemSpacing={10}
 z={10}
 scale={2}
 renderItem={<Prefab id="en_m_jungle_temple_pillar_01" />}
/>

function Ground(
   hilly, 
   invisibleHeight, 
   invisibleWalls, 
   material, 
   overlap, 
   randomRotation, 
   repeatX, 
   repeatZ, 
   version, 
   water, 
   waterOffset): HDK React Component

<Ground />

<Ground hilly={1} />

<Ground hilly={1} water={true} material="t_sand_01" />

<Ground hilly={0.5} material="t_sand_01" />
<Ground hilly={10} y={45} rotZ={180} material="t_rock_01" version="plane_terrain_01" />

function Hovering(
   driftOff, 
   driftOffDuration, 
   duration, 
   enabled, 
   initialState, 
   loop, 
   magnitude, 
   offset, 
   playOnSignal, 
   speedMultiplier, 
   startAt): HDK React Component

<Hovering z={5} y={3}>
 <Prefab id="donut_01" />
</Hovering>

function ImagePanel(
   backside, 
   frame, 
   ratio, 
   src): HDK React Component

<ImagePanel src="https://cdn.hibervr.com/demo/img/Lunch.jpg" ratio={1000 / 750} z={5} />

<ImagePanel
 src="https://cdn.hibervr.com/demo/img/Lunch.jpg"
 ratio={1000 / 750}
 scale={4}
 z={5}
 y={1}
 backside={true}
 frame={'stone'}
/>

function ImageTexture(src): HDK React Component

<ImageTexture src="https://cdn.hibervr.com/demo/img/Lunch.jpg">
  <Prefab id="cube_01" />
</ImageTexture>

function InCircle(
   degrees, 
   ellipse, 
   faceCenter, 
   items, 
   radius, 
   renderItem, 
   showCircle): HDK React Component

<InCircle renderItem={() => <Prefab id="cube_01" />} />

<InCircle
  items={20}
  degrees={720}
  faceCenter={true}
  renderItem={({ progress }) => <Prefab id="cube_01" y={progress * 20} />}
/>

<InCircle items={[0, 0.25, 0.4, 0.9]} renderItem={() => <Prefab id="cube_01" />} />

<InCircle
 ellipse={2.5}
 items={20}
 faceCenter={true}
 renderItem={({ progress }) => <Prefab id="cube_01" scaleY={Math.sin(progress * Math.PI) * 5 + 1} />}
/>

function InteractiveMediaAsset(
   asset, 
   attenuationModel, 
   autoOpenOverlay, 
   body, 
   emissiveStrength, 
   header, 
   id, 
   isOpenInNewTabEnabled, 
   isOpenInOverlayEnabled, 
   isOpenInOverlayOnTouch, 
   isSidebarOverlay, 
   maxAttenuationDist, 
   maxDistance, 
   maxShowDistance, 
   minAttenuationDist, 
   minDistance, 
   minShowDistance, 
   musicSrc, 
   playSpeed, 
   playUntilFinishedIfNotLooping, 
   preBody, 
   rollOffFactor, 
   shouldLoop, 
   solo, 
   soundFadeDistance, 
   soundMinDistance, 
   soundType, 
   startPlayingDist, 
   url, 
   videoUrl, 
   volume): HDK React Component

const IMABox: HDKComponent = ({ engineProps }) => (
  <Apply props={{ engineProps }}>
    <Prefab id="cube_01" />
  </Apply>
);
const imaBox = <IMABox />;
 <InteractiveMediaAsset
   header="My Header"
   preBody="My PreBody"
   body="My Body"
   url="https://hiber3d.com/"
   asset={imaBox}
   isOpenInNewTabEnabled={false}
   isOpenInOverlayEnabled={true}
   isOpenInOverlayOnTouch={false}
 />

function Invisible(): HDK React Component

<Invisible>
 <Prefab id="cube_01" />
</Invisible>

function Limb(
   baseItem, 
   height, 
   joinType, 
   material, 
   middleItem, 
   middleItemScaleOffsetX, 
   middleItemScaleOffsetZ, 
   tipItem): HDK React Component

<Limb z={4} rotX={20}>
  <Limb rotX={20} />
</Limb>

<Limb z={4} rotX={20}>
  <Limb rotX={30} joinType="Spherical" rotY={40}>
    <Limb rotY={40} rotX={30} joinType="Spherical" tipItem={<LimbSphericalTip />} />
  </Limb>
</Limb>

<Limb
  z={4}
  baseItem={<Prefab id="hiberpunk_blocks_a4_01" />}
  middleItem={<Prefab id="hiberpunk_blocks_f2_01" />}
  tipItem={<Prefab id="hiberpunk_blocks_i1_01" scale={0.25} scaleX={0.5} scaleZ={0.5} />}></Limb>

function Line(
   centered, 
   delta, 
   numberOfItems, 
   renderAfter, 
   renderItem): HDK React Component

<Line
       numberOfItems={5}
       centered
       delta={[4, 0, 0]}
       renderItem={<Prefab id="en_m_jungle_temple_01_floor" y={-1} />}
     />
 * ```
 
***
 
### MannequinStand()
 
```ts
function MannequinStand(
   attenuationModel, 
   autoOpenOverlay, 
   avatar, 
   body, 
   emissiveStrength, 
   header, 
   id, 
   isOpenInNewTabEnabled, 
   isOpenInOverlayEnabled, 
   isOpenInOverlayOnTouch, 
   isSidebarOverlay, 
   mannequinScale, 
   maxAttenuationDist, 
   maxDistance, 
   maxShowDistance, 
   minAttenuationDist, 
   minDistance, 
   minShowDistance, 
   musicSrc, 
   playSpeed, 
   playUntilFinishedIfNotLooping, 
   podiumMaterial, 
   preBody, 
   rollOffFactor, 
   shouldLoop, 
   solo, 
   soundFadeDistance, 
   soundMinDistance, 
   soundType, 
   spin, 
   spinStartAt, 
   startPlayingDist, 
   url, 
   videoUrl, 
   volume): HDK React Component