HDK React Components

Hiber3D HDK React Components

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-components package contains productivity components for creating Hiber3D worlds with React components. It is typically used together with a React renderer like hdk-react (opens in a new tab)

Installation

Install with NPM:

npm i @hiber3d/hdk-react-components

or with yarn:

yarn add @hiber3d/hdk-react-components

Animations

KeyFrameOptions

type KeyFrameOptions: object;

Represents a Tween animation step defining property changes at a point in time.

Type declaration

NameTypeDescription
easing?EasingTypeStart and end behaviour of the animation step. Default is EASE_IN_OUT_QUAD.
position?Vec3Spatial change relative to original position.
rotation?Vec3Rotational change relative to original orientation.
rotX?numberx-axis rotational change relative to original orientation.
rotY?numbery-axis rotational change relative to original orientation.
rotZ?numberz-axis rotational change relative to original orientation.
scale?Vec3 | numberScaling change relative to original size.
scaleX?numberx-axis scaling change relative to original size.
scaleY?numbery-axis scaling change relative to original size.
scaleZ?numberz-axis scaling change relative to original size.
timestampnumberTime in seconds, relative to the duration of the tween.
x?numberx-axis spatial change relative to original position.
y?numbery-axis spatial change relative to original position.
z?numberz-axis spatial change relative to original position.

TweenByTimeAnimation

type TweenByTimeAnimation: object;

An object representing a single Tween animation frame, primarily used by TweenByTime.

Type declaration

NameTypeDescription
duration?numberThe duration of the animation in seconds.
easing?EasingTypeStart and end behaviour of the animation.
startTime?numberThe time in seconds when the animation should start.
toTween?TransformPropertiesProperties to animate, see TweenByTime for examples.

See


TweenOptions

type TweenOptions: object & AnimateOnSignalOptions;

Configuration for a Tween animation.

Type declaration

NameTypeDescription
duration?numberDuration of the frame, in seconds.
enabled?booleanfalse means the frame will not be considered.
loop?LoopBehaviourWhether to RESTART or REVERSE the animation when it reaches the end. Defaults is REVERSE.
speedMultiplier?numberSpin speed factor. 2 means double the speed.
startAt?numberWhere in the animation to start, expressed as percentage of the duration length.

AsteroidSpinning()

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

Makes children spin around all axes like an asteroid.

Parameters

ParameterTypeDescription
directionnumberSpin direction. 1 for clockwise, -1 for counter-clockwise.
durationnumberDuration of the spin animation, in seconds.
easingEasingTypeStart and end behaviour of the animation.
enabledbooleanfalse means the behaviour will be disabled.
loopLoopBehaviourWhether to RESTART or REVERSE the animation when it reaches the end.
playOnSignalPlayAnimationOnSignalListenerOptionsThe signal to listen to for playing the animation.
speedMultipliernumberSpin speed factor. 2 means double the speed.
startAtnumberWhere in the animation to start, expressed as percentage of the duration length.

Returns

HDK React Component

Example

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

Asteroid spinning

See


Friction()

function Friction(friction): HDK React Component

Change the friction of an object.

Parameters

ParameterTypeDescription
frictionnumberThe friction value to set.

Returns

HDK React Component

Example

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

Spinning()

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

Rotate children around an single axis.

Parameters

ParameterTypeDescription
axisAxisThe axis to spin around, y, z or the default x.
directionnumberSpin direction. 1 for clockwise, -1 for counter-clockwise.
durationnumberDuration of the spin animation, in seconds.
easingEasingTypeStart and end behaviour of the animation.
enabledbooleanfalse means the spinning behaviour is disabled.
loopLoopBehaviourWhether to RESTART or REVERSE the animation when it reaches the end.
playOnSignalPlayAnimationOnSignalListenerOptionsThe signal to listen to for playing the animation.
speedMultipliernumberSpin speed factor. 2 means double the speed.
startAtnumberWhere in the animation to start, expressed as percentage of the duration length.

Returns

HDK React Component

Example

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

Spinning

See


Swinging()

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

Make an object swing around its pivot

Parameters

ParameterTypeDescription
degXnumberThe angle of the swing on the x axis, default is 0.
degYnumberThe angle of the swing on the y axis, default is 0.
degZnumberThe angle of the swing on the z axis, default is 0.
durationnumberThe duration of the swing in seconds, default is 1.
easingEasingTypeThe easing of the swing, default is EASE_IN_OUT_QUAD
enabledbooleanfalse means the animation is the swinging is disabled.
initialStateKeyframeAnimatedStateWhether the animation should start as PLAYING or PAUSED.
loopLoopBehaviourWhether to restart or reverse the animation when it reaches the end.
playOnSignalPlayAnimationOnSignalListenerOptionsThe signal to listen to for playing the animation.
startAtnumberThe start time of the swing, default is random.

Returns

HDK React Component

Example

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

Swinging

See


Tween()

function Tween(keyframes, options): HDK React Component

Animate children by supplying options and array of keyframes defining how properties should change over time.

Parameters

ParameterTypeDescription
keyframesKeyFrameOptions[]Array of KeyFrameOptions defining how child properties should change over time. Note timestamp is relative to the duration of the tween a value of 0 is the start and 1 is the end.
optionsTweenOptionsTweenOptions config object defining settings for animation behaviour.

Returns

HDK React Component

Examples

Basic usage

<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" />

Advanced usage

<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>

Tween

See


TweenByTime()

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

Animate a child component on specific timestamps using Tween animation frames. The animations property should contain an array of TweenByTimeAnimation

Parameters

ParameterTypeDescription
animationsTweenByTimeAnimation[]An array of objects with the properties startTime, duration, easing and toTween.
durationnumberDuration of the animation in seconds. If not provided, the duration will be calculated from the animations.
endPaddingTimenumberThe time in seconds to wait after the last animation has finished before restarting the animation.
loopLoopBehaviourThe behaviour of the animation when it reaches the end. RESTART will restart the animation from the beginning, REVERSE will reverse the animation.
renderItemNode or CallbackA function that returns the child component to animate. The function will be called with an object with the property startAt.
speedMultipliernumberA multiplier for the speed of the animation. 1 is normal speed, 2 is double speed, 0.5 is half speed, etc.
startAtnumberThe time in seconds to start the animation at. This is useful if you want to start the animation at a specific time in the timeline.

Returns

HDK React Component

Example

An object that rotate 90 degrees after 1 second and then move up 2 units after 2 seconds.

<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" />}
/>

TweenByTime

See


Waving()

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

Make an object wave from the base, good for trees amd flowers.

Parameters

ParameterTypeDescription
enabledbooleanfalse means the behaviour will be disabled.
speedMultipliernumberWaving speed factor. 2 means double the speed.
wavingRangenumberThe range of waving.

Returns

HDK React Component

Examples

<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>
  }
/>

See

Gameplay

AbilityCollidable()

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

Create a collider that will give the player an ability when they collide with it.

Parameters

ParameterTypeDescription
durationnumberThe duration of the ability.
effects(EffectMetaData | EffectId)[]The effects to give the player when they collide with the collider.
formColliderFormThe basic shape of the collider. Defaults to mesh.
groupPhysicsFilterThe collision group for the collider. This specifies which group the collider belongs to.
maskPhysicsFilterThe collision mask for the collider. This specifies which other groups the collider will collide with.
meshMeshIdThe id of the mesh to be used as collider.
sensorSensorTypeCollision \SensorTypeRaycastReceiver
showMeshbooleanWhether to show the collider mesh.
showMeshMaterialstringThe material to use when showing the collider mesh. Defaults to glass.
vfxInVolumePrefabIdThe id of the prefab to be spawned when the player enters the collider. Turns the collider into a sensor.

Returns

HDK React Component

Examples

<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}
 />

Layout

StackSegment

type StackSegment: object;

A single segment in a segmented stack.

Type declaration

NameTypeDescription
dimensions?Scale3Dimensions of the stack. If not provided, default is [2, 2, 2]
directionDirectionDirection of the segment, default is UP.
lengthnumberLength of the segment, default is 1.

StairOptions

type StairOptions: object;

Type declaration

NameType
autoRotate?boolean
dim?Vec3
directionDirection
offset?Vec3
renderItem?RenderItemProp<StairSystemItem>
repeatsnumber

StairSystemItem

type StairSystemItem: object;

Represents a callback from the generation of an StairSystem item.

Type declaration

NameTypeDescription
autoRotatebooleantrue means the item was rotated to match the direction of the section.
dimVec3-
directionDirection-
indexnumber-
lastboolean-
namestringName of the target
normalVec3-
positionVec3-
progressnumberProgress within the current section
renderItem?RenderItemProp<StairSystemItem>The callback used to render the item.
repeatIndexnumber-
rotationVec3-
sectionIndexnumber-
sectionStartPositionVec3-

StairSystemOptions

type StairSystemOptions: object;

Type declaration

NameType
dim?Vec3
sectionsStairOptions[]

SegmentedStack()

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

Joins together a chain of Stacks each in a given direction, all sharing the same renderItem.

Parameters

ParameterTypeDescription
dimensionsScale3-
renderItemNode or CallbackThe item to stack.
segmentsStackSegment[]The StackSegment segments of the stack. If not provided, the default is a single segment of length 1 in the UP direction.

Returns

HDK React Component

Example

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

SegmentedStack

See

Fundamentals (opens in a new tab) for basic component placement.


StairSystem()

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

Creates a system of stairs based on a list of sections, similar to SegmentedStack. Every renderItem will be called with a StairSystemItem as argument.

Parameters

ParameterTypeDescription
dimVec3-
renderItemNode or CallbackRender function for each stair part
sectionsStairOptions[]List of sections

Returns

HDK React Component

Example

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>

StairSystem

See

Fundamentals (opens in a new tab) for tranformation properties.

Other

AnimateAlongPath()

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

Generates a path and render keyframes along it. Great for animating objects along a Path as you can re-use the same points.

Parameters

ParameterTypeDescription
applyRotationbooleanWhether to apply rotation to the items or not.
closebooleanIf the path should be closed or not.
durationnumberDuration of the spin animation, in seconds.
easingEasingTypeStart and end behaviour of the animation.
initialStateKeyframeAnimatedStateWhether the animation should start as PLAYING or PAUSED.
keyframeScalenumber-
loopLoopBehaviourWhether to RESTART or REVERSE the animation when it reaches the end.
numberOfItemsnumberThe number of items to place along the path.
playOnSignalPlayAnimationOnSignalListenerOptionsThe signal to listen to for playing the animation.
pointsVec3[]The points that define the path.
showKeyframesbooleantrue to show keyframes along the path for debugging purposes.
showPointsbooleanShow the points that define the path as arrows.
startAtnumberWhere in the animation to start, expressed as percentage of the duration length.
tensionnumberThe tension of the curve.

Returns

HDK React Component

Example

<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>

AnimateAlongPath

See


Avatar()

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

Add a Ready Player Me avatar to your scene.

Parameters

ParameterTypeDescription
animationAnimationIdThe animation to play. Defaults to an_default_idle.
speedMultipliernumberSpin speed factor. 2 means double the speed.
srcAvatarSourceThe source of the avatar. Can be an URL or an ID from the example avatars.

Returns

HDK React Component

Examples

Add a random avatar with a specific animation.

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

Avatar

Add a specific avatar based on an id with a specific animation.

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

Add a specific avatar based on an URL. To get URL for avatars, go to Ready Player Me (opens in a new tab) Click on My Avatars, and in the three dots menu for the avatar you want, click on "Copy .glb url". Get avatar Url

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

See

Fundamentals (opens in a new tab) for basic component placement.


Bird()

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

Insert a bird with flapping wings into the scene.

Parameters

ParameterTypeDescription
clockwisebooleanfalse makes the bird orbit counter-clockwise.
flapAnglenumberThe angle of the bird's flapping wings, default 20.
flapSpeednumberThe speed multiplier of the flapping, 2 means double the speed.
flySpeednumberThe speed multiplier of the bird's flight, 2 means double the speed.
orbitRadiusnumberThe radius of the bird's orbit, default 10.
orbitingbooleanfalse means that the bird stays still.
startAtnumberWhere in the animation to start, expressed as percentage of the whole animation length.
type'BIRD' \'SEAGULL'

Returns

HDK React Component

Examples

Insert a bird orbiting around the origin.

<Bird y={5} />

Insert a bird hovering in place without orbiting.

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

Hovering bird

See


BoxCollider()

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

Component which represents a box collider. See Collider component for more information.

Parameters

ParameterType
groupPhysicsFilter
maskPhysicsFilter
sensorSensorTypeCollision \
showMeshboolean
showMeshMaterialstring
vfxInVolumePrefabId

Returns

HDK React Component

Example

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

See


CameraCube()

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

Control the player's camera settings within a cubic area

Parameters

ParameterTypeDescription
collisionbooleanToggle camera colliding with obstructions. Default: true
distancenumberThe distance of the camera in meters. Default: 2
distanceIntroDurationnumberThe intro duration for the distance effect. Default: 0
distanceOutroDurationnumberThe outro duration for the distance effect. Default: 0
distanceStackRule"UNSTACKABLE" | "REPLACE_ACROSS_ABILITIES"The stack rule for the distance effect. Default: 'REPLACE_ACROSS_ABILITIES'
durationnumberThe duration of the ability. Default: 0.1
idMeshId-
lightbooleanWhether to show a light.
lockMovementInPlaneVec3Lock the movement in a plane specified in Vec3. Example: [0, 0, 1]
materialMaterialId-
physicalboolean-
pitchnumberThe pitch of the camera in degress. Example: -15
showMeshbooleanWhether to show the collider mesh. Default: false
yawnumberThe yaw of the camera in degrees. Example: 40

Returns

HDK React Component

Example

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

Checkpoint()

function Checkpoint(material): HDK React Component

Creates a checkpoint. If the player reaches this point and then dies the player will respawn at this point.

Parameters

ParameterType
materialMaterialId

Returns

HDK React Component

Example

<Checkpoint z={5} />

See

Fundamentals (opens in a new tab) for basic component placement.


CircularStructure()

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

Create circular structure using Slice3 component, good for creating round buildings, tunnels, etc.

Parameters

ParameterTypeDescription
bottomScalenumberScale of the bottom of Slice3, default 0.1
dimVec3Height or depth of the structure, default 3
doorWidthnumberWidth of the door, default 1
glassInWindowbooleanIf true, the window will have glass, default true
itemScaleAdjustmentnumberScale adjustment of segments making up the structure. Could be used to close or open cap between segments, default 1.1
materialMaterialIdMaterial of the structure, default palette_01_white
numberOfSegmentsnumberNumber of segments, default 6
offsetVec3Offset of the structure when in vertical mode, default 0
prefabIdPrefabIdPrefab of the structure, default cube_01
radiusnumberRadius of the circle, default 10
tiltnumberTilt of the structure, default 0
topScalenumberScale of the top of Slice3, defined height of doors and windows, default 0.333,
verticalbooleanIf true, the structure will be vertical, default false
wallOpeningWallOpening[]Array of wall openings, default []
wallThicknessnumberThickness of the wall, default 0.5
windowWidthnumberWidth of the window, default 1

Returns

HDK React Component

Example

<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>

CircularStructure

See

Fundamentals (opens in a new tab) for basic component placement.


Collider()

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

Component which represents a collider. This can be used to add invisible ground, walls, death zones or proximity/look at sensors.

Parameters

ParameterTypeDescription
formColliderFormThe basic shape of the collider. Defaults to mesh.
groupPhysicsFilterThe collision group for the collider. This specifies which group the collider belongs to.
maskPhysicsFilterThe collision mask for the collider. This specifies which other groups the collider will collide with.
meshMeshIdThe id of the mesh to be used as collider.
sensorSensorTypeCollision \SensorTypeRaycastReceiver
showMeshbooleanWhether to show the colliders's mesh for debugging purposes. Defaults to false
showMeshMaterialstringThe material to use when showing the collider mesh. Defaults to glass.
vfxInVolumePrefabIdThe id of the prefab to be spawned when the player enters the collider. Turns the collider into a sensor.

Returns

HDK React Component

Example

<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' }}
/>

See


Damaging()

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

Deal damage if any children are touched.

Parameters

ParameterTypeDescription
amountnumberAmount of damage dealt, 0-100.
enabledbooleanfalse means the avatar will not be dealt damage.
knockbackStrengthnumberHow much the player is thrown away when dealt damage. Typically around 100-250 and up. 0 means the player is stuck in a damage loop with no means to escape.
takeDamageFxIdPrefabIdThe effect to play when the avatar is dealt damage. optional.

Returns

HDK React Component

Example

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

Damaging

See

Fundamentals (opens in a new tab) for basic component placement.


Distribute()

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

Distribute spaces and gaps within a circle, optionally leaving a blank space in the middle. Good for generating forests, cities, ponds, etc.

Parameters

ParameterTypeDescription
feathernumber-
gapFrequencynumberThe frequency of gaps, default is 0.3.
gapSizeMaxnumberThe maximum radius of a gap, default is 10.
gapSizeMinnumberThe minimum radius of a gap, default is 4.
gladeRadiusnumberSpace left open in the middle, default is 10.
gladesGladeType[]An array of glades, default is [{ x: 0, z: 0, radius: 0 }].
itemAreaSizeMaxnumberThe maximum radius of an occupied space, default is 10.
itemAreaSizeMinnumberThe minimum radius of an occupied space, default is 5.
numberOfItemsnumberIf specified, the algorithm will stop after placing this many items.
outerBoundRadiusnumber-
overrideItemLimitbooleanfalse means the algorithm will disregard the max number of placed items.
radiusnumberThe radius of the entire distribution area, default is 100.
renderGapRenderItemProp<DistributedItem>The gap to render in the gaps between items. Can be either a react component or a method that returns a react component. Default is to render nothing
renderItemNode or CallbackThe item to render in the occupied spaces. Can be either a react component or a method that returns a react component.
showGapAreabooleantrue means a debug marker will be shown in all gap areas.
showItemAreabooleantrue means a debug marker will be shown in all item areas.

Returns

HDK React Component

Examples

Bushes placed randomly

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

Boxes placed randomly

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

Having multiple glades

<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" />}
/>

Distribute

See

Fundamentals (opens in a new tab) for basic component placement.


DJBooth()

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

A DJ Booth with a video screen and speakers

Parameters

ParameterTypeDescription
avatarSourceAvatarSource \undefined
djScalenumberScale of the avatar
horizontalSegmentsnumberNumber of horizontal segments
podiumMaterialMaterialIdMaterial of the podium
verticalSegmentsnumberNumber of vertical segments
videoEmissiveStrengthnumberEmissive strength of the video
videoRationumberRatio of the video
videoSrcstring \undefined

Returns

HDK React Component

Example

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

DJ Booth


DualDisplay()

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

A two-sided display with a MediaDisplay on each side.

Parameters

ParameterTypeDescription
rationumberThe ratio of the width to the height of the display. Defaults to 0.75.
side1MediaDisplayOptionsThe media display options for the first side.
side2MediaDisplayOptionsThe media display options for the second side.
thicknessnumberThe thickness of the display. Defaults to 0.2.

Returns

HDK React Component

Example

<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`,
  }}
 />

See

Fundamentals (opens in a new tab) for basic component placement.


FibonacciSphere()

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

Creates a sphere of items using the fibonacci sequence.

Parameters

ParameterTypeDescription
countnumberThe number of items to render. Default is 50.
radiusnumberThe radius of the sphere. Default is 5.
renderItemNode or CallbackThe item to render. Can be a ReactNode or a function that takes the index of the item and returns a ReactNode.

Returns

HDK React Component

Example

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

FibonacciSphere

See

Fundamentals (opens in a new tab) for basic component placement.


Flapping()

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

Makes a child node flap around an axis. Good for wings.

Parameters

ParameterTypeDescription
anglenumberThe angle of the flapping, default is 10 degrees.
axisAxisThe axis of the flapping, default is x.
durationnumberThe duration of the flapping, default is 1 second.
enabledboolean-
loopLoopBehaviourWhether to restart or reverse the animation when it reaches the end.
playOnSignalPlayAnimationOnSignalListenerOptionsThe signal to listen to for playing the animation.
speedMultipliernumberSpin speed factor. 2 means double the speed.
startAtnumberThe starting position within the flapping animation, default is 0.

Returns

HDK React Component

Example

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

Flapping

See


For()

function For(numberOfItems, renderItem): HDK React Component

Renders a set number of items.

Parameters

ParameterTypeDescription
numberOfItemsnumberThe number of items to render.
renderItemNode or CallbackThe item to render. Can be a ReactNode or a function that returns a ReactNode.

Returns

HDK React Component

Example

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

See

Fundamentals (opens in a new tab) for basic component placement.


GlassCube()

function GlassCube(): HDK React Component

Renders a semi-transparent cube that doesn't cast shadows. Good for windows or aquariums.

Returns

HDK React Component

Example

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

See

Fundamentals (opens in a new tab) for basic component placement.


Grid()

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

Renders components in a grid layout

Parameters

ParameterTypeDescription
centeredboolean-
columnsnumberThe number of columns in the grid, default is 5.
itemSpacingnumberThe spacing between each item in the grid, default is 4.
renderItemNode or CallbackThe item to render. Can be a ReactNode or a function that takes the index of the item and returns a ReactNode.
rowsnumberThe number of rows in the grid, default is 5.

Returns

HDK React Component

Examples

Create a temple floor:

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

Grid

Create a grid of pillars:

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

Grid-pillars

See

Fundamentals (opens in a new tab) for basic component placement.


Ground()

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

Insert a ground plane into the scene.

Parameters

ParameterTypeDescription
hillynumberThe hilliness of the ground plane. 0 is flat, 10 is very hilly, default is 0.
invisibleHeightnumberThe height of the invisible walls, default is 200.
invisibleWallsbooleantrue adds invisible walls around the ground plane. This is useful for preventing the player from falling off the ground plane.
materialMaterialIdThe material to use for the ground plane, default is t_grass_01.
overlapnumberThe amount of overlap between tiles. default is 0.
randomRotationbooleantrue adds random rotation by 90 degrees to the each ground tile. This is useful for creating more natural looking ground. But is preferable set to false on tiling textures.
repeatXnumberThe number of times to repeat the ground plane in the X direction, default is 4.
repeatZnumberThe number of times to repeat the ground plane in the Z direction, default is 4.
versionGroundVersionsThe version of the ground plane, default is terrain_plane_01.
waterbooleantrue adds water to the ground plane.
waterOffsetnumberThe offset of the water plane from the ground plane, default is 0.

Returns

HDK React Component

A ground plane

Examples

Basic usage, a grassy flat ground plane.

<Ground />

Ground-flat

Insert a hilly grassy ground plane.

<Ground hilly={1} />

Ground-hilly

Insert a hilly sandy ground plane with water.

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

A cave with a sandy ground plane.

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

Ground-cave

See

Fundamentals (opens in a new tab) for basic component placement.


Hovering()

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

A component that makes its children hover in the air. Good for spaceships, balloons, and water creatures. Since the origo of an object might be at the bottom center, you can use the offset prop to adjust the object to make it hover from the center, default is [0, -1, 0]. If your objects default size is bigger that a standard cube, you might want to offset it more.

Parameters

ParameterTypeDescription
driftOffbooleanfalse makes the object stay in place facing the same direction rather than drift off.
driftOffDurationnumberThe duration of the drift off effect, default is 128.
durationnumberDuration of the hovering animation, in seconds.
enabledboolean-
initialStateKeyframeAnimatedStateWhether the animation should start as PLAYING or PAUSED.
loopLoopBehaviourWhether to restart or reverse the animation when it reaches the end.
magnitudenumberThe magnitude of the hovering effect, default is 1.
offsetVec3Offset for hovering effect, default is [0, -1, 0]
playOnSignalPlayAnimationOnSignalListenerOptionsThe signal to listen to for playing the animation.
speedMultipliernumberThe speed of the hovering effect, default is 1.
startAtnumberWhere in the animation to start, expressed as percentage of the duration length.

Returns

HDK React Component

Example

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

Hovering

See


ImagePanel()

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

A flat surface with an optional image and ratio.

Parameters

ParameterTypeDescription
backsidebooleantrue means adding a backside to the panel.
frameboolean \Frames
rationumberThe x:y ratio of the image, default: 1 (1:1)
srcstringUrl pointing to an image

Returns

HDK React Component

Examples

Simple image panel

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

ImagePanel

Image panel with frame, backside and scale.

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

ImagePanel framed

See

Fundamentals (opens in a new tab) for basic component placement.


ImageTexture()

function ImageTexture(src): HDK React Component

Applies an image as a texture to all children.

Parameters

ParameterTypeDescription
srcstringThe source url of the texture to apply to all children.

Returns

HDK React Component

Example

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

ImageTexture

See

Fundamentals (opens in a new tab) for basic component placement.


InCircle()

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

Renders items in a circle.

Parameters

ParameterTypeDescription
degreesnumberThe degrees of the circle to render. Defaults to 360.
ellipsenumberThe ellipse of the circle to render. Defaults to 1.
faceCenterbooleantrue means the children will be rotatted to face the center of the circle.
itemsnumber \number[]
radiusnumberThe radius of the circle.
renderItemNode or CallbackA function that returns a ReactNode. The function will be called for each item in the circle.
showCircleboolean´true´ will add a circle mesh to show the radius.

Returns

HDK React Component

Examples

Basic usage, placing a prefab in a circle:

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

InCircle

Create a spiral of cubes:

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

InCircle spiral.jpg

Pass an array with values between 0 and 1 to place items at the corresponding progress of the circle, 0 equals to 12 o'clock:

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

Create an ellipse of cubes with a sine wave controlling scaleY.

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

InCircle spiral.jpg

See

Fundamentals (opens in a new tab) for basic component placement.


InteractiveMediaAsset()

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

Turn any object into an interactive media asset. This component is used by MediaDisplay which is the recommended way to display media assets.

Parameters

ParameterTypeDescription
assetNodeThe asset to turn into an interactive media asset.
attenuationModelcommon.AudioAttenuationModelThe way sound changes as you move around. NO_ATTENUATION, INVERSE_DISTANCE, EXPONENTIAL_DISTANCE or the default LINEAR_DISTANCE
autoOpenOverlayboolean-
bodytypes.str80The body of the info panel, max 80 characters.
emissiveStrengthnumberHow much the video glows in the dark.
headertypes.str80The header of the info panel.
idtypes.AudioID-
isOpenInNewTabEnabledbooleantrue if interacting withthe info panel should open the url in a new tab.
isOpenInOverlayEnabledbooleantrue if opening the url should be in an overlay, if applicable.
isOpenInOverlayOnTouchbooleantrue if the overlay should be available on touch.
isSidebarOverlayboolean-
maxAttenuationDistnumberThe maximum distance the sound can be heard, defaults to 20.
maxDistancenumberThe maximum distance at which the sensor will activate its output signal. Defaults to 1000
maxShowDistancenumberThe max distance at which the info panel should be shown.
minAttenuationDistnumberThe minimum distance the sound can be heard, defaults to 5.
minDistancenumberThe minimum distance at which the sensor will activate its output signal. Defaults to 0
minShowDistancenumberThe min distance at which the info panel should be shown.
musicSrcAudioSourceThe source of the music, either an id or an external url.
playSpeednumber-
playUntilFinishedIfNotLoopingbooleantrue will play the sound until it is finished, unless it is looping.
preBodytypes.str80The ingress of the info panel, max 80 characters.
rollOffFactornumberHow fast the sound tapers away.
shouldLoopbooleantrue will loop the music.
solobooleantrue means all other sound will mute when this plays.
soundFadeDistancenumberDistance at which the sound of the video starts to fade in addition to the min distance. Defaults to 1.
soundMinDistancenumberMinimum distance at which the sound of the video can be heard. Defaults to 10.
soundTypecommon.SoundType-
startPlayingDistnumber-
urlstringThe target url for interacting with the panel.
videoUrlstringThe video url to show.
volumenumberThe volume of the sound, defaults to 2.

Returns

HDK React Component

Example

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}
 />

See


Invisible()

function Invisible(): HDK React Component

Invisible is a component that makes its children invisible. Good for invisible walls.

Returns

HDK React Component

Example

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

Invisible


Limb()

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

A Limb is a component that can be used to create a limb for a robot, hands, legs, arms, etc. It is composed of 3 parts, a tip, a middle and a base. All parts can be customized with the props tipItem, middleItem and baseItem. Join types can be specified with the prop joinType, but can be overridden by the tipItem and ba TipItem can be set by tipItem prop or by children, if both are set, children will be used as children of Limb and tipItem will be used as tipItem Limbs can be joint together with each other to create more complex structures like fingers, arms, legs, etc. Limbs can be branched of to more then one limb, creating a tree like structure.

Parameters

ParameterTypeDescription
baseItemReactNodeThe base of the limb, can be a Prefab or a Limb component
heightnumberThe height of the limb
joinTypeLimbJoinTypesThe type of joint to use, can be 'Cylindrical', 'Spherical' or 'Cubical'
materialMaterialIdThe material of the limb
middleItemReactNodeThe middle of the limb, can be set to any Prefab
middleItemScaleOffsetXnumberThe scale on x axis of the middle item, can be used to make the middle item smaller or bigger
middleItemScaleOffsetZnumberThe scale on z axis of the middle item, can be used to make the middle item smaller or bigger
tipItemReactNodeThe tip of the limb, can be a Prefab or a Limb component

Returns

HDK React Component

A Limb component

Examples

Basic usage

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

Limb

Limbs joined with a spherical joint and with a spherical tip.

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

Replace all parts of the limb with custom Prefabs

<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>

Line()

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

Creates a line of nodes.

Parameters

ParameterTypeDescription
centeredbooleanWhether the line should be centered around the origin, default is false.
deltaVec3The difference in position between each item in the line.
numberOfItemsnumberThe number of rows in the line.
renderAfterNode or CallbackItems to render as children of the Line.
renderItemNode or CallbackThe item to render. Can be a ReactNode or a function that takes the index of the item and returns a ReactNode.

Returns

HDK React Component

Example

<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

Add a mannequin stand to your scene. Good for displaying outfits for sale.

Parameters

ParameterTypeDescription
attenuationModelcommon.AudioAttenuationModel-
autoOpenOverlayboolean-
avatarAvatarPropsThe avatar to display on the mannequin stand.
bodytypes.str80The body text to display on the mannequin stand.
emissiveStrengthnumber-
headertypes.str80The header text to display on the mannequin stand.
idtypes.AudioID-
isOpenInNewTabEnabledboolean-
isOpenInOverlayEnabledboolean-
isOpenInOverlayOnTouchboolean-
isSidebarOverlayboolean-
mannequinScalenumberThe scale of the mannequin stand.
maxAttenuationDistnumber-
maxDistancenumber-
maxShowDistancenumber-
minAttenuationDistnumber-
minDistancenumber-
minShowDistancenumber-
musicSrcAudioSource-
playSpeednumber-
playUntilFinishedIfNotLoopingboolean-
podiumMaterialMaterialIdThe material to use for the podium, default is palette_01_grey.
preBodytypes.str80The pre-body text to display on the mannequin stand.
rollOffFactornumber-
shouldLoopboolean-
soloboolean-
soundFadeDistancenumber-
soundMinDistancenumber-
soundTypecommon.SoundType-
spinbooleanWhether to spin the avatar or not.
spinStartAtnumberwhere to start the spin animation. Value between 0 and 1, default is 0.
startPlayingDistnumber-
urlstringThe URL to open when the mannequin stand is clicked.
videoUrlstring-
volumenumber-

Returns

HDK React Component

Example

<MannequinStand
 header="Hello HDK!"
 preBody="This is a simple example"
 body="of the HDK"
 url="https://hiberworld.com"
 z={10}
 mannequinScale={3}
 avatar={{
   src: {
     url: 'https://models.readyplayer.me/6405e7285167081fc2edd798.glb',
     skeletonGroupID: 'skg_rpm_female',
   },
   animation: 'an_default_emote_listening_to_music_01',
 }} />

MannequinStand


MediaDisplay()

function MediaDisplay(
   animationSkeleton, 
   autoOpenOverlay, 
   body, 
   emissiveStrength, 
   emote, 
   header, 
   isOpenInNewTabEnabled, 
   isOpenInOverlayEnabled, 
   isOpenInOverlayOnTouch, 
   isSidebarOverlay, 
   link, 
   maxShowDistance, 
   minShowDistance, 
   muted, 
   preBody, 
   ratio, 
   soundFadeDistance, 
   soundMinDistance, 
   src, 
   url): HDK React Component

A media display for images, videos or avatars that detects the type of media and displays it accordingly.

Parameters

ParameterTypeDescription
animationSkeleton"skg_default" | "skg_rpm_male" | "skg_rpm_female"-
autoOpenOverlayboolean-
bodytypes.str80The body of the media
emissiveStrengthnumberThe emissive strength of the media, default: 1
emoteSkinnedAnimation-
headertypes.str80The header of the media
isOpenInNewTabEnabledboolean-
isOpenInOverlayEnabledboolean-
isOpenInOverlayOnTouchboolean-
isSidebarOverlayboolean-
linkstringThe link of the media
maxShowDistancenumber-
minShowDistancenumber-
mutedboolean-
preBodytypes.str80The preBody of the media
rationumberThe ratio of the media, default: 1
soundFadeDistancenumber-
soundMinDistancenumber-
srcstringThe url of the media
urlstring-

Returns

HDK React Component

Example

const mediaInfo = {
 src: 'https://cdn.hibervr.com/external/music_mv/iconic/Bullet-Spotify.jpg',
 ratio: 1,
 header: 'Listen on Spotify',
 preBody: 'ICONÏC - Bullet',
 link: 'https://open.spotify.com/track/1h2z5KcMffP46AeSePfwWM?si=a79df0439e8c4a44',
};
 
<MediaDisplay z={5} {...mediaInfo} />

MediaDisplay

See


MediaPanel()

function MediaPanel(
   backside, 
   frame, 
   ratio): HDK React Component

A flat surface that can be used to apply an image or video, ratio and frame. The media settings are applied through the engineProps API.

Parameters

ParameterTypeDescription
backsidebooleantrue means adding a backside to the panel.
frameboolean \Frames
rationumberThe x:y ratio of the image, default: 1 (1:1)

Returns

HDK React Component

Example

<MediaPanel ratio={16/9} frame="modern" backside />

See

Fundamentals (opens in a new tab) for basic component placement.


Mesh()

function Mesh(
   id, 
   material, 
   physical): HDK React Component

Component to display a mesh. Good for turning off the collider of a mesh.

Parameters

ParameterTypeDescription
idMeshIdThe id of the mesh.
materialMaterialIdThe material of the mesh.
physicalbooleantrue means the mesh should have a collider.

Returns

HDK React Component

Example

<Mesh id="en_p_light_cone_02" material={'t_light_cone_01'