@hiber3d/hdk-react-components

Type Aliases

Functions

Animations

AsteroidSpinning

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

Makes children spin around all axes like an asteroid.

Parameters

Name	Type	Description
`direction`	`number`	Spin direction. `1` for clockwise, `-1` for counter-clockwise.
`duration`	`number`	Duration of the spin animation, in seconds.
`easing`	`EasingType`	Start and end behaviour of the animation.
`enabled`	`boolean`	-
`loop`	`LoopBehaviour`	Whether to `RESTART` or `REVERSE` the animation when it reaches the end.
`playOnSignal`	`PlayAnimationOnSignalListenerOptions`	The signal to listen to for playing the animation.
`speedMultiplier`	`number`	Spin speed factor. `2` means double the speed.
`startAt`	`number`	Where in the animation to start, expressed as percentage of the duration length.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Animations (opens in a new tab) for general info about animations.
Signals (opens in a new tab) for info about signals.

Example

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

Asteroid spinning

Spinning

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

Rotate children around an single axis.

Parameters

Name	Type	Description
`axis`	`Axis`	The axis to spin around, `y`, `z` or the default `x`.
`direction`	`number`	Spin direction. `1` for clockwise, `-1` for counter-clockwise.
`duration`	`number`	Duration of the spin animation, in seconds.
`easing`	`EasingType`	Start and end behaviour of the animation.
`enabled`	`boolean`	`false` means the spinning behaviour is disabled.
`loop`	`LoopBehaviour`	Whether to `RESTART` or `REVERSE` the animation when it reaches the end.
`playOnSignal`	`PlayAnimationOnSignalListenerOptions`	The signal to listen to for playing the animation.
`speedMultiplier`	`number`	Spin speed factor. `2` means double the speed.
`startAt`	`number`	Where in the animation to start, expressed as percentage of the duration length.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Animations (opens in a new tab) for general info about animations.
Signals (opens in a new tab) for info about signals.

Example

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

Spinning

Swinging

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

Make an object swing around its pivot

Parameters

Name	Type	Description
`degX`	`number`	The angle of the swing on the x axis, default is `0`.
`degY`	`number`	The angle of the swing on the y axis, default is `0`.
`degZ`	`number`	The angle of the swing on the z axis, default is `0`.
`duration`	`number`	The duration of the swing in seconds, default is `1`.
`easing`	`EasingType`	The easing of the swing, default is `EASE_IN_OUT_QUAD`
`enabled`	`boolean`	`false` means the animation is the swinging is disabled.
`initialState`	`KeyframeAnimatedState`	Whether the animation should start as `PLAYING` or `PAUSED`.
`loop`	`LoopBehaviour`	Whether to restart or reverse the animation when it reaches the end.
`playOnSignal`	`PlayAnimationOnSignalListenerOptions`	The signal to listen to for playing the animation.
`startAt`	`number`	The start time of the swing, default is random.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Animations (opens in a new tab) for general info about animations.
Signals (opens in a new tab) for info about signals.

Example

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

Swinging

Tween

Tween(keyframes, options): HDK React Component

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

Parameters

Name	Type	Description
`keyframes`	`KeyFrameOptions[]`	Array of KeyFrameOptions defining how child properties should change over time.
`options`	`TweenOptions`	TweenOptions config object defining settings for animation behaviour.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for tranformation properties.
Animations (opens in a new tab) for general info about animations.
Signals (opens in a new tab) for info about signals.

Example

Basic usage

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

Example

Advanced usage

<Tween
  z={5}
  options={{ duration: 4, loopBehaviour: '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

TweenByTime

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

Name	Type	Description
`animations`	`TweenByTimeAnimation[]`	An array of objects with the properties startTime, duration, easing and toTween.
`duration`	`number`	Duration of the animation in seconds. If not provided, the duration will be calculated from the animations.
`endPaddingTime`	`number`	The time in seconds to wait after the last animation has finished before restarting the animation.
`loop`	`LoopBehaviour`	The behaviour of the animation when it reaches the end. RESTART will restart the animation from the beginning, REVERSE will reverse the animation.
`renderItem`	`Node or Callback`	A function that returns the child component to animate. The function will be called with an object with the property startAt.
`speedMultiplier`	`number`	A multiplier for the speed of the animation. 1 is normal speed, 2 is double speed, 0.5 is half speed, etc.
`startAt`	`number`	The 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

See

Fundamentals (opens in a new tab) for basic component placement.
Animations (opens in a new tab) for general info about animations.
Signals (opens in a new tab) for info about signals.

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

Waving

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

Make an object wave from the base.

Parameters

Name	Type	Description
`enabled`	`boolean`	If `false`, disable the component.
`speedMultiplier`	`number`	Waving speed factor. `2` means double the speed.
`wavingRange`	`number`	The range of waving.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Animations (opens in a new tab) for general info about animations.

Other

KeyFrameOptions

KeyFrameOptions: Object

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

Type declaration

Name	Type	Description
`easing?`	`EasingType`	Start and end behaviour of the animation step. Default is `EASE_IN_OUT_QUAD`.
`position?`	`Vec3`	Spatial change relative to original position.
`rotX?`	`number`	x-axis rotational change relative to original orientation.
`rotY?`	`number`	y-axis rotational change relative to original orientation.
`rotZ?`	`number`	z-axis rotational change relative to original orientation.
`rotation?`	`Vec3`	Rotational change relative to original orientation.
`scale?`	`Vec3` \| `number`	Scaling change relative to original size.
`scaleX?`	`number`	x-axis scaling change relative to original size.
`scaleY?`	`number`	y-axis scaling change relative to original size.
`scaleZ?`	`number`	z-axis scaling change relative to original size.
`timestamp`	`number`	Time in seconds, relative to the duration of the tween.
`x?`	`number`	x-axis spatial change relative to original position.
`y?`	`number`	y-axis spatial change relative to original position.
`z?`	`number`	z-axis spatial change relative to original position.

StackSegment

StackSegment: Object

A single segment in a segmented stack.

Type declaration

Name	Type	Description
`dimensions?`	`Scale3`	Dimensions of the stack. If not provided, default is `[2, 2, 2]`
`direction`	`Direction`	Direction of the segment, default is `UP`.
`length`	`number`	Length of the segment, default is 1.

StairOptions

StairOptions: Object

Type declaration

Name	Type
`autoRotate?`	`boolean`
`dim?`	`Vec3`
`direction`	`Direction`
`offset?`	`Vec3`
`renderItem?`	`RenderItemProp`<`StairSystemItem`>
`repeats`	`number`

StairSystemItem

StairSystemItem: Object

Represents a callback from the generation of an StairSystem item.

Type declaration

Name	Type	Description
`autoRotate`	`boolean`	`true` means the item was rotated to match the direction of the section.
`dim`	`Vec3`	-
`direction`	`Direction`	-
`index`	`number`	-
`last`	`boolean`	-
`name`	`string`	Name of the target
`normal`	`Vec3`	-
`position`	`Vec3`	-
`progress`	`number`	Progress within the current section
`renderItem?`	`RenderItemProp`<`StairSystemItem`>	The callback used to render the item.
`repeatIndex`	`number`	-
`rotation`	`Vec3`	-
`sectionIndex`	`number`	-
`sectionStartPosition`	`Vec3`	-

TweenByTimeAnimation

TweenByTimeAnimation: Object

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

See

Fundamentals (opens in a new tab) for animation properties.
Animations (opens in a new tab) for general info about animations.

Type declaration

Name	Type	Description
`duration?`	`number`	The duration of the animation in seconds.
`easing?`	`EasingType`	Start and end behaviour of the animation.
`startTime?`	`number`	The time in seconds when the animation should start.
`toTween?`	`TransformProperties`	Properties to animate, see TweenByTime for examples.

TweenOptions

TweenOptions: { duration?: number ; enabled?: boolean ; loop?: LoopBehaviour ; speedMultiplier?: number ; startAt?: number } & AnimateOnSignalOptions

Configuration for a Tween animation.

AnimateAlongPath

AnimateAlongPath(applyRotation, close, duration, easing, initialState, 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

Name	Type	Description
`applyRotation`	`boolean`	Whether to apply rotation to the items or not.
`close`	`boolean`	If the path should be closed or not.
`duration`	`number`	Duration of the spin animation, in seconds.
`easing`	`EasingType`	Start and end behaviour of the animation.
`initialState`	`KeyframeAnimatedState`	Whether the animation should start as `PLAYING` or `PAUSED`.
`loop`	`LoopBehaviour`	Whether to `RESTART` or `REVERSE` the animation when it reaches the end.
`numberOfItems`	`number`	The number of items to place along the path.
`playOnSignal`	`PlayAnimationOnSignalListenerOptions`	The signal to listen to for playing the animation.
`points`	`Vec3[]`	The points that define the path.
`showKeyframes`	`boolean`	`true` to show keyframes along the path for debugging purposes.
`showPoints`	`boolean`	Show the points that define the path as arrows.
`startAt`	`number`	Where in the animation to start, expressed as percentage of the duration length.
`tension`	`number`	The tension of the curve.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Animations (opens in a new tab) for general info about animations.
Signals (opens in a new tab) for info about signals.

Example

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

AnimateAlongPath

Avatar

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

Add a Ready Player Me avatar to your scene.

Parameters

Name	Type	Description
`animation`	`AnimationId`	The animation to play. Defaults to `an_default_idle`.
`speedMultiplier`	`number`	Spin speed factor. `2` means double the speed.
`src`	`AvatarSource`	The source of the avatar. Can be an URL or an ID from the example avatars.

Returns

HDK React Component

See

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

Example

Add a random avatar with a specific animation.

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

Example

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

Example

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

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

Bird

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

Insert a bird with flapping wings into the scene.

Parameters

Name	Type	Description
`clockwise`	`boolean`	`false` makes the bird orbit counter-clockwise.
`flapAngle`	`number`	The angle of the bird's flapping wings, default `20`.
`flapSpeed`	`number`	The speed multiplier of the flapping, `2` means double the speed.
`flySpeed`	`number`	The speed multiplier of the bird's flight, `2` means double the speed.
`orbitRadius`	`number`	The radius of the bird's orbit, default `10`.
`orbiting`	`boolean`	`false` means that the bird stays still.
`startAt`	`number`	Where in the animation to start, expressed as percentage of the whole animation length.
`type`	`'BIRD' \| 'SEAGULL'`	Change the type of bird, defaults to `BIRD`.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Animations (opens in a new tab) for general info about animations.

Example

Insert a bird orbiting around the origin.

<Bird y={5} />

Example

Insert a bird hovering in place without orbiting.

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

Hovering bird

Checkpoint

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

Name	Type
`material`	`MaterialId`

Returns

HDK React Component

See

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

Example

<Checkpoint y={5} />

CircularStructure

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

Name	Type	Description
`bottomScale`	`number`	Scale of the bottom of Slice3, default 0.1
`dim`	`Vec3`	Height or depth of the structure, default 3
`doorWidth`	`number`	Width of the door, default 1
`glassInWindow`	`boolean`	If true, the window will have glass, default true
`itemScaleAdjustment`	`number`	Scale adjustment of segments making up the structure. Could be used to close or open cap between segments, default 1.1
`material`	`MaterialId`	Material of the structure, default palette_01_white
`numberOfSegments`	`number`	Number of segments, default 6
`offset`	`Vec3`	Offset of the structure when in vertical mode, default 0
`prefabId`	`PrefabId`	Prefab of the structure, default cube_01
`radius`	`number`	Radius of the circle, default 10
`tilt`	`number`	Tilt of the structure, default 0
`topScale`	`number`	Scale of the top of Slice3, default 0.333
`vertical`	`boolean`	If true, the structure will be vertical, default false
`wallOpening`	`WallOpening[]`	Array of wall openings, default []
`wallThickness`	`number`	Thickness of the wall, default 0.5
`windowWidth`	`number`	Width of the window, default 1

Returns

HDK React Component

See

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

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

Collider

Collider(form, mesh, showMesh, 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

Name	Type	Description
`form`	`ColliderForm`	-
`mesh`	`MeshId`	The id of the mesh to be used as collider.
`showMesh`	`boolean`	Whether to show the colliders's mesh for debugging purposes. Defaults to false
`vfxInVolume`	`PrefabId`	The id of the prefab to be spawned when the player enters the collider. Turns the collider into a sensor.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Signals (opens in a new tab) for info about signals.

Example

<Collider mesh="en_p_light_cone_02" />

DJBooth

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

A DJ Booth with a video screen and speakers

Parameters

Name	Type	Description
`avatarSource`	`AvatarSource \| undefined`	Avatar source
`djScale`	`number`	Scale of the avatar
`horizontalSegments`	`number`	Number of horizontal segments
`podiumMaterial`	`MaterialId`	Material of the podium
`verticalSegments`	`number`	Number of vertical segments
`videoEmissiveStrength`	`number`	Emissive strength of the video
`videoRatio`	`number`	Ratio of the video
`videoSrc`	`string \| undefined`	Video source

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

Damaging

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

Deal damage if any children are touched.

Parameters

Name	Type	Description
`amount`	`number`	Amount of damage dealt, 0-100.
`enabled`	`boolean`	`false` means the avatar will not be dealt damage.
`knockbackStrength`	`number`	How 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.
`takeDamageFxId`	`PrefabId`	The effect to play when the avatar is dealt damage. optional.

Returns

HDK React Component

See

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

Example

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

Damaging

Distribute

Distribute(feather, gapFrequency, gapSizeMax, gapSizeMin, gladeRadius, glades, itemAreaSizeMax, itemAreaSizeMin, outerBoundRadius, overrideItemLimit, 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, et c.

Parameters

Name	Type	Description
`feather`	`number`	-
`gapFrequency`	`number`	The frequency of gaps, default is `0.3`.
`gapSizeMax`	`number`	The maximum radius of a gap, default is `10`.
`gapSizeMin`	`number`	The minimum radius of a gap, default is `4`.
`gladeRadius`	`number`	Space left open in the middle, default is `10`.
`glades`	`GladeType[]`	An array of glades, default is `[{ x: 0, z: 0, radius: 0 }]`.
`itemAreaSizeMax`	`number`	The maximum radius of an occupied space, default is 10.
`itemAreaSizeMin`	`number`	The minimum radius of an occupied space, default is 5.
`outerBoundRadius`	`number`	The radius of the entire distribution area, default is 100.
`overrideItemLimit`	`boolean`	`false` means the algorithm will disregard the max number of placed items.
`renderGap`	`RenderItemProp`<`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
`renderItem`	`Node or Callback`	The item to render in the occupied spaces. Can be either a react component or a method that returns a react component.
`showGapArea`	`boolean`	`true` means a debug marker will be shown in all gap areas.
`showItemArea`	`boolean`	`true` means a debug marker will be shown in all item areas.

Returns

HDK React Component

See

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

Example

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

Example

Boxes placed randomly

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

Example

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

DualDisplay

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

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

Parameters

Name	Type	Description
`ratio`	`number`	The ratio of the width to the height of the display. Defaults to `0.75`.
`side1`	`MediaDisplayOptions`	The media display options for the first side.
`side2`	`MediaDisplayOptions`	The media display options for the second side.
`thickness`	`number`	The thickness of the display. Defaults to `0.2`.

Returns

HDK React Component

See

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

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

FibonacciSphere

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

Creates a sphere of items using the fibonacci sequence.

Parameters

Name	Type	Description
`count`	`number`	The number of items to render. Default is `50`.
`radius`	`number`	The radius of the sphere. Default is `5`.
`renderItem`	`Node or Callback`	The 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

See

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

Example

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

FibonacciSphere

Flapping

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

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

Parameters

Name	Type	Description
`angle`	`number`	The angle of the flapping, default is `10` degrees.
`axis`	`Axis`	The axis of the flapping, default is `x`.
`duration`	`number`	The duration of the flapping, default is `1` second.
`enabled`	`boolean`	-
`loop`	`LoopBehaviour`	Whether to restart or reverse the animation when it reaches the end.
`playOnSignal`	`PlayAnimationOnSignalListenerOptions`	The signal to listen to for playing the animation.
`speedMultiplier`	`number`	Spin speed factor. 2 means double the speed.
`startAt`	`number`	The starting position within the flapping animation, default is `0`.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Animations (opens in a new tab) for general info about animations.

Example

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

Flapping

For

For(numberOfItems, renderItem): HDK React Component

Renders a set number of items.

Parameters

Name	Type	Description
`numberOfItems`	`number`	The number of items to render.
`renderItem`	`Node or Callback`	The item to render. Can be a ReactNode or a function that returns a ReactNode.

Returns

HDK React Component

See

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

Example

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

GlassCube

GlassCube(): HDK React Component

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

Returns

HDK React Component

See

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

Example

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

Grid

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

Renders components in a grid layout

Parameters

Name	Type	Description
`centered`	`boolean`	-
`columns`	`number`	The number of columns in the grid, default is `5`.
`itemSpacing`	`number`	The spacing between each item in the grid, default is `4`.
`renderItem`	`Node or Callback`	The item to render. Can be a ReactNode or a function that takes the index of the item and returns a ReactNode.
`rows`	`number`	The number of rows in the grid, default is `5`.

Returns

HDK React Component

See

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

Example

Create a temple floor:

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

Grid

Example

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

Ground

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

Insert a ground plane into the scene.

Parameters

Name	Type	Description
`hilly`	`number`	The hilliness of the ground plane. `0` is flat, `10` is very hilly, default is 0.
`invisibleHeight`	`number`	The height of the invisible walls, default is `200`.
`invisibleWalls`	`boolean`	`true` adds invisible walls around the ground plane. This is useful for preventing the player from falling off the ground plane.
`material`	`MaterialId`	The material to use for the ground plane, default is `t_grass_01`.
`overlap`	`number`	The amount of overlap between tiles. default is `0`.
`randomRotation`	`boolean`	`true` 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.
`repeatX`	`number`	The number of times to repeat the ground plane in the X direction, default is `4`.
`repeatZ`	`number`	The number of times to repeat the ground plane in the Z direction, default is `4`.
`version`	`GroundVersions`	The version of the ground plane, default is `terrain_plane_01`.
`water`	`boolean`	`true` adds water to the ground plane.
`waterOffset`	`number`	The offset of the water plane from the ground plane, default is `0`.

Returns

HDK React Component

A ground plane

See

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

Example

Basic usage, a grassy flat ground plane.

<Ground />

Ground-flat

Example

Insert a hilly grassy ground plane.

<Ground hilly={1} />

Ground-hilly

Example

Insert a hilly sandy ground plane with water.

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

Example

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

Hovering

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

Name	Type	Description
`driftOff`	`boolean`	`false` makes the object stay in place facing the same direction rather than drift off.
`driftOffDuration`	`number`	The duration of the drift off effect, default is `128`.
`duration`	`number`	Duration of the hovering animation, in seconds.
`enabled`	`boolean`	-
`initialState`	`KeyframeAnimatedState`	Whether the animation should start as `PLAYING` or `PAUSED`.
`loop`	`LoopBehaviour`	Whether to restart or reverse the animation when it reaches the end.
`magnitude`	`number`	The magnitude of the hovering effect, default is `1`.
`offset`	`Vec3`	Offset for hovering effect, default is `[0, -1, 0]`
`playOnSignal`	`PlayAnimationOnSignalListenerOptions`	The signal to listen to for playing the animation.
`speedMultiplier`	`number`	The speed of the hovering effect, default is 1.
`startAt`	`number`	Where in the animation to start, expressed as percentage of the duration length.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Animations (opens in a new tab) for general info about animations.
Signals (opens in a new tab) for info about signals.

Example

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

Hovering

ImagePanel

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

A flat surface with an optional image and ratio.

Parameters

Name	Type	Description
`backside`	`boolean`	`true` means adding a backside to the panel.
`frame`	`boolean \| Frames`	Type of frame, `simple`, `stone` or `modern` - `true` means random frame.
`ratio`	`number`	The x:y ratio of the image, default: `1` (1:1)
`src`	`string`	Url pointing to an image

Returns

HDK React Component

See

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

Example

Simple image panel

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

ImagePanel

Example

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

ImageTexture

ImageTexture(src): HDK React Component

Applies an image as a texture to all children.

Parameters

Name	Type	Description
`src`	`string`	The source url of the texture to apply to all children.

Returns

HDK React Component

See

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

Example

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

ImageTexture

InCircle

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

Renders items in a circle.

Parameters

Name	Type	Description
`degrees`	`number`	The degrees of the circle to render. Defaults to `360`.
`ellipse`	`number`	The ellipse of the circle to render. Defaults to `1`.
`faceCenter`	`boolean`	`true` means the children will be rotatted to face the center of the circle.
`items`	`number \| number[]`	The number of items to render in the circle. If an array is passed with values between 0 and 1, the items will be placed at the corresponding progress of the circle.
`radius`	`number`	The radius of the circle.
`renderItem`	`Node or Callback`	A function that returns a ReactNode. The function will be called for each item in the circle.
`showCircle`	`boolean`	´true´ will add a circle mesh to show the radius.

Returns

HDK React Component

See

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

Example

Basic usage, placing a prefab in a circle:

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

InCircle

Example

Create a spiral of cubes:

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

InCircle spiral.jpg

Example

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

Example

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

InteractiveMediaAsset

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

Name	Type	Description
`asset`	`Node`	The asset to turn into an interactive media asset.
`attenuationModel`	`common.AudioAttenuationModel`	The way sound changes as you move around. `NO_ATTENUATION`, `INVERSE_DISTANCE`, `EXPONENTIAL_DISTANCE` or the default `LINEAR_DISTANCE`
`autoOpenOverlay`	`boolean`	-
`body`	`types.str80`	The body of the info panel, max 80 characters.
`emissiveStrength`	`number`	How much the video glows in the dark.
`header`	`types.str80`	The header of the info panel.
`id`	`types.AudioID`	-
`isOpenInNewTabEnabled`	`boolean`	`true` if interacting withthe info panel should open the url in a new tab.
`isOpenInOverlayEnabled`	`boolean`	`true` if opening the url should be in an overlay, if applicable.
`isOpenInOverlayOnTouch`	`boolean`	`true` if the overlay should be available on touch.
`isSidebarOverlay`	`boolean`	-
`maxAttenuationDist`	`number`	The maximum distance the sound can be heard, defaults to `20`.
`maxDistance`	`number`	The maximum distance at which the sensor will activate its output signal. Defaults to `1000`
`maxShowDistance`	`number`	The max distance at which the info panel should be shown.
`minAttenuationDist`	`number`	The minimum distance the sound can be heard, defaults to `5`.
`minDistance`	`number`	The minimum distance at which the sensor will activate its output signal. Defaults to `0`
`minShowDistance`	`number`	The min distance at which the info panel should be shown.
`musicSrc`	`AudioSource`	The source of the music, either an id or an external url.
`playSpeed`	`number`	-
`playUntilFinishedIfNotLooping`	`boolean`	`true` will play the sound until it is finished, unless it is looping.
`preBody`	`types.str80`	The ingress of the info panel, max 80 characters.
`rollOffFactor`	`number`	How fast the sound tapers away.
`shouldLoop`	`boolean`	`true` will loop the music.
`solo`	`boolean`	`true` means all other sound will mute when this plays.
`soundFadeDistance`	`number`	Distance at which the sound of the video starts to fade in addition to the min distance. Defaults to `1`.
`soundMinDistance`	`number`	Minimum distance at which the sound of the video can be heard. Defaults to `10`.
`soundType`	`common.SoundType`	-
`startPlayingDist`	`number`	-
`url`	`string`	The target url for interacting with the panel.
`videoUrl`	`string`	The video url to show.
`volume`	`number`	The volume of the sound, defaults to `2`.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Sound (opens in a new tab) for sound options.
Video (opens in a new tab) for video options.
Signals (opens in a new tab) for info about signals.

Example

<InteractiveMediaAsset
  header="My Header"
  preBody="My PreBody"
  body="My Body"
  url="https://hiber3d.com/"
  asset={<Prefab id="cube_01" />}
  z={5}
/>

Invisible

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

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

Name	Type	Description
`baseItem`	`ReactNode`	The base of the limb, can be a Prefab or a Limb component
`height`	`number`	The height of the limb
`joinType`	`LimbJoinTypes`	The type of joint to use, can be 'Cylindrical', 'Spherical' or 'Cubical'
`material`	`MaterialId`	The material of the limb
`middleItem`	`ReactNode`	The middle of the limb, can be set to any Prefab
`middleItemScaleOffsetX`	`number`	The scale on x axis of the middle item, can be used to make the middle item smaller or bigger
`middleItemScaleOffsetZ`	`number`	The scale on z axis of the middle item, can be used to make the middle item smaller or bigger
`tipItem`	`ReactNode`	The tip of the limb, can be a Prefab or a Limb component

Returns

HDK React Component

A Limb component

Example

Basic usage

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

Limb

Example

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>

Example

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

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

Creates a line of nodes.

Parameters

Name	Type	Description
`centered`	`boolean`	Whether the line should be centered around the origin, default is false.
`delta`	`Vec3`	The difference in position between each item in the line.
`numberOfItems`	`number`	The number of rows in the line.
`renderAfter`	`Node or Callback`	Items to render as children of the Line.
`renderItem`	`Node or Callback`	The 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

MannequinStand

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

Name	Type	Description
`attenuationModel`	`common.AudioAttenuationModel`	-
`autoOpenOverlay`	`boolean`	-
`avatar`	`AvatarProps`	The avatar to display on the mannequin stand.
`body`	`types.str80`	The body text to display on the mannequin stand.
`emissiveStrength`	`number`	-
`header`	`types.str80`	The header text to display on the mannequin stand.
`id`	`types.AudioID`	-
`isOpenInNewTabEnabled`	`boolean`	-
`isOpenInOverlayEnabled`	`boolean`	-
`isOpenInOverlayOnTouch`	`boolean`	-
`isSidebarOverlay`	`boolean`	-
`mannequinScale`	`number`	The scale of the mannequin stand.
`maxAttenuationDist`	`number`	-
`maxDistance`	`number`	-
`maxShowDistance`	`number`	-
`minAttenuationDist`	`number`	-
`minDistance`	`number`	-
`minShowDistance`	`number`	-
`musicSrc`	`AudioSource`	-
`playSpeed`	`number`	-
`playUntilFinishedIfNotLooping`	`boolean`	-
`podiumMaterial`	`MaterialId`	The material to use for the podium, default is palette_01_grey.
`preBody`	`types.str80`	The pre-body text to display on the mannequin stand.
`rollOffFactor`	`number`	-
`shouldLoop`	`boolean`	-
`solo`	`boolean`	-
`soundFadeDistance`	`number`	-
`soundMinDistance`	`number`	-
`soundType`	`common.SoundType`	-
`spin`	`boolean`	Whether to spin the avatar or not.
`spinStartAt`	`number`	where to start the spin animation. Value between 0 and 1, default is 0.
`startPlayingDist`	`number`	-
`url`	`string`	The URL to open when the mannequin stand is clicked.
`videoUrl`	`string`	-
`volume`	`number`	-

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

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

Name	Type	Description
`animationSkeleton`	`"skg_default"` \| `"skg_rpm_male"` \| `"skg_rpm_female"`	-
`autoOpenOverlay`	`boolean`	-
`body`	`types.str80`	The body of the media
`emissiveStrength`	`number`	The emissive strength of the media, default: 1
`emote`	`SkinnedAnimation`	-
`header`	`types.str80`	The header of the media
`isOpenInNewTabEnabled`	`boolean`	-
`isOpenInOverlayEnabled`	`boolean`	-
`isOpenInOverlayOnTouch`	`boolean`	-
`isSidebarOverlay`	`boolean`	-
`link`	`string`	The link of the media
`maxShowDistance`	`number`	-
`minShowDistance`	`number`	-
`muted`	`boolean`	-
`preBody`	`types.str80`	The preBody of the media
`ratio`	`number`	The ratio of the media, default: 1
`soundFadeDistance`	`number`	-
`soundMinDistance`	`number`	-
`src`	`string`	The url of the media
`url`	`string`	-

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Sound (opens in a new tab) for sound options.
Video (opens in a new tab) for video options.

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

MediaPanel

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

Name	Type	Description
`backside`	`boolean`	`true` means adding a backside to the panel.
`frame`	`boolean \| Frames`	The frame of the image, values: `simple`, `stone` or `modern` - `true` means random frame.
`ratio`	`number`	The x:y ratio of the image, default: `1` (1:1)

Returns

HDK React Component

See

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

Example

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

Mesh

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

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

Parameters

Name	Type	Description
`id`	`MeshId`	The id of the mesh.
`material`	`MaterialId`	The material of the mesh.
`physical`	`boolean`	`true` means the mesh should have a collider.

Returns

HDK React Component

See

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

Example

<Mesh id="en_p_light_cone_02" material={'t_light_cone_01' as MaterialId} y={10} rotX={180} physical={false} />

Moving

Moving(duration, enabled, loop, playOnSignal, speedMultiplier, startAt, toX, toY, toZ): HDK React Component

Basic animations component for moving an object to a specific position.

Parameters

Name	Type
`duration`	`number`
`enabled`	`boolean`
`loop`	`LoopBehaviour`
`playOnSignal`	`PlayAnimationOnSignalListenerOptions`
`speedMultiplier`	`number`
`startAt`	`number`
`toX`	`number`
`toY`	`number`
`toZ`	`number`

Returns

HDK React Component

Example

<Moving toY={4}>
  <Prefab id="cube_01" />
</Moving>

Params

toY The Y position to move to, defaults to 2.

Params

toX The X position to move to, defaults undefined.

Params

toZ The Z position to move to, defaults undefined.

Params

duration The duration of the animation, defaults to 2.

Params

easing The easing of the animation, defaults to 'EASE_OUT_ELASTIC'.

Params

startTime The start time of the animation, defaults to 0.

Params

loopBehaviour The loop behaviour of the animation, defaults to 'REVERSE'.

NoiseGrid

NoiseGrid(amplitude, columns, itemSpacing, noiseAlgorithm, noiseScale, renderItem, rows): HDK React Component

Creates a grid of nodes using a noise algorithm to determine the y position of each item.

Parameters

Name	Type	Description
`amplitude`	`number`	The amplitude of the noise, default is `4`.
`columns`	`number`	The number of columns in the grid, default is `10`.
`itemSpacing`	`number`	The spacing between each item in the grid, default is `2`.
`noiseAlgorithm`	`NoiseAlgorithm`	The noise algorithm to use. `Worley`, `Organic`, `ValueNoise` or the default `Perlin`.
`noiseScale`	`number`	The scale of the noise, default is `10`.
`renderItem`	`Node or Callback`	The item to render. Can be a ReactNode or a function that takes the index of the item and returns a ReactNode.
`rows`	`number`	The number of rows in the grid, default is `10`.

Returns

HDK React Component

See

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

Example

<NoiseGrid
   noiseAlgorithm="Perlin"
   noiseScale={7}
   amplitude={5}
   itemSpacing={1.2}
   rows={25}
   columns={25}
   scale={2}
   y={-8}
   renderItem={<Prefab id="rounded_cube_02" scale={1.0} material="t_grass_03" />}
 />

NoiseGrid

OmnipresentSound

OmnipresentSound(looping, playOnSignal, src, volume): HDK React Component

Add a omnipresent sound source. This adds a point of sound with the same volume in the entire world.

Parameters

Name	Type	Description
`looping`	`boolean`	Whether the sound should loop, defaults to `false`.
`playOnSignal`	`SignalListenerReference & PlayAudioOnSignalSoloProps`	Use a signal to toggle playing the sound.
`src`	`AudioSource`	The source of the sound, either an id or an external url.
`volume`	`number`	The volume of the sound, defaults to `2`.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Sound (opens in a new tab) for sound options.
Signals (opens in a new tab) for info about signals.

Example

<OmnipresentSound src={{ id: "a_am_rainforest_01" }} />

OneOf

OneOf(index, list): HDK React Component

Renders one prefab from a list.

Parameters

Name	Type	Description
`index`	`number`	Index of the list to render.
`list`	`PrefabId[]`	List of prefabs to choose from.

Returns

HDK React Component

See

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

Orbiting

Orbiting(axis, direction, duration, enabled, initialState, loop, playOnSignal, radius, startAt): HDK React Component

Makes a child node orbit around an axis. Good for planets.

Parameters

Name	Type	Description
`axis`	`Axis`	The axis to orbit around, default `y`.
`direction`	`number`	The direction of the orbit. `1` for clockwise, `-1` for counter-clockwise, default -1.
`duration`	`number`	The duration of the orbit in seconds, default `4`.
`enabled`	`boolean`	`false` means the orbiting behaviour is disabled.
`initialState`	`KeyframeAnimatedState`	Whether the animation should start as `PLAYING` or `PAUSED`.
`loop`	`LoopBehaviour`	Whether to `RESTART` or `REVERSE` the animation when it reaches the end.
`playOnSignal`	`PlayAnimationOnSignalListenerOptions`	The signal to listen to for playing the animation.
`radius`	`number`	The radius of the orbit in meters, default `10`.
`startAt`	`number`	The starting position of the orbit animation. `0` for start, `1` for end, default 0.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Animations (opens in a new tab) for general info about animations.
Signals (opens in a new tab) for info about signals.

Example

<Orbiting>
  <Prefab id="sphere_01" />
</Orbiting>

Orbiting

Path

Path(applyRotation, close, numberOfItems, points, renderItem, showPoints, tension): HDK React Component

Path component, places items along a path defined by points.

Parameters

Name	Type	Description
`applyRotation`	`boolean`	Whether to apply rotation to the items or not.
`close`	`boolean`	If the path should be closed or not.
`numberOfItems`	`number`	The number of items to place along the path.
`points`	`Vec3[]`	The points that define the path.
`renderItem`	`Node or Callback`	A function that returns a React node to render at each step passing a StepProps object with information about the current step including `progress`, `index`, `position`, `rotation`.
`showPoints`	`boolean`	Show the points that define the path as arrows.
`tension`	`number`	The tension of the curve.

Returns

HDK React Component

See

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

Example

<Path
  points={[
    [0, 0, 0],
    [30, 0, 0],
    [20, 20, 40],
    [30, 0, 80],
  ]}
  numberOfItems={50}
  renderItem={() => (
    <>
      <Prefab id="cube_01" />
      <Prefab id="gpl_booster_plate_01" y={3} rotY={-180} />
    </>
  )}
/>

Path

PointSound

PointSound(looping, playOnSignal, radius, src, volume): HDK React Component

Adds a point sound source. A point sound is a helper for addAudio where radius is use to define the size of the audio source. The audio will get stronger the closer you get to the source. radius in meters, approximately.

Parameters

Name	Type	Description
`looping`	`boolean`	Whether the sound should loop, defaults to `false`.
`playOnSignal`	`SignalListenerReference & PlayAudioOnSignalSoloProps`	Use a signal to toggle playing the sound, defaults to `undefined`.
`radius`	`number`	How far away the sound should be heard, defaults to `10`.
`src`	`AudioSource`	The source of the sound, either an id or an external url.
`volume`	`number`	The volume of the sound, defaults to `2`.

Returns

HDK React Component

See

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

Example

<PointSound src={{ url: "https://cdn.hibervr.com/sound/music/cheesy_disco.mp3" }} radius={3} />

Portal

Portal(lockedInfoPanel, radius, worldId): HDK React Component

A portal to another world on HiberWorld.

Parameters

Name	Type	Description
`lockedInfoPanel`	`InfoPanelOptions`	The info panel to show when the portal is locked. Defaults to undefined.
`radius`	`number`	The radius of the portal. Defaults to 1.
`worldId`	`string`	The id of the world to portal to. This can be extracted from the URL of the world.

Returns

HDK React Component

See

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

Example

<Portal worldId="4ic3uL830" z={5} />

Portal

Ramp

Ramp(gap, numberOfItems, renderItem): HDK React Component

Makes a ramp out of a prefab. Good for stairs.

Parameters

Name	Type	Description
`gap`	`number`	The gap between each step in meters, default `2`.
`numberOfItems`	`number`	The numberOfItems of the ramp in steps, default `2`.
`renderItem`	`Node or Callback`	A function that returns a React node to render for each step.

Returns

HDK React Component

See

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

Example

<Ramp numberOfItems={5} z={5} renderItem={() => <Prefab id="stair_01" rotY={180} />}></Ramp>

Ramp

Example

<Ramp
 numberOfItems={5}
 z={5}
 renderItem={index => (
   <HNode rotY={180}>
     <Prefab id="stair_01" scaleX={3} />
     <Prefab id="wedge_45" rotY={180} rotZ={180} scaleX={3} />
     <Prefab id="cylinder_01" scaleX={0.5} scaleZ={0.5} scaleY={index} rotZ={180} />
   </HNode>
 )}></Ramp>

Ramp2

RandomPosition

RandomPosition(enabled, offsetX, offsetY, offsetZ): HDK React Component

Randomly moves the children of the node. Good for vegetation.

Parameters

Name	Type	Description
`enabled`	`boolean`	-
`offsetX`	`number`	Maximum x offset
`offsetY`	`number`	Maximum y offset
`offsetZ`	`number`	Maximum z offset

Returns

HDK React Component

See

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

Example

<RandomPosition>
  <Prefab id="palm_tree" />
</RandomPosition>

Example

<Grid
  rows={5}
  columns={5}
  itemSpacing={4}
  renderItem={
    <RandomPosition z={5}>
      <Prefab id="cube_01" />
    </RandomPosition>
  }
/>

RandomPosition

RandomPositionInASquare

RandomPositionInASquare(dimension, numberOfItems, renderItem): HDK React Component

This component will render a fixed number of items in a square area. The items will be placed randomly in the square.

Parameters

Name	Type	Description
`dimension`	`number`	The dimension of the square
`numberOfItems`	`number`	The number of items to render
`renderItem`	`Node or Callback`	The item to render

Returns

HDK React Component

Example

<RandomPositionInASquare numberOfItems={10} dimension={10} renderItem={<Prefab id="cube_01" />} />

RandomRotation

RandomRotation(enabled, rangeX, rangeY, rangeZ): HDK React Component

Randomly rotates the children of this node using a random value between the given ranges. Default value for rangeY is 180, so the children will be rotated between -180 and 180 degrees on the Y axis. Default value for rangeX and rangeZ is 0, so the children will not be rotated on the X and Z axis.

Parameters

Name	Type	Description
`enabled`	`boolean`	-
`rangeX`	`number`	Maximum rotation around the X axis, default is `0`.
`rangeY`	`number`	Maximum rotation around the Y axis, default is `180`.
`rangeZ`	`number`	Maximum rotation around the Z axis, default is `0`.

Returns

HDK React Component

See

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

Example

<RandomRotation>
  <Prefab id="palm_tree" />
</RandomRotation>

RandomScale

RandomScale(enabled, range, rangeX, rangeY, rangeZ): HDK React Component

Randomly scale the children of the node. Good for vegetation.

Parameters

Name	Type	Description
`enabled`	`boolean`	-
`range`	`number[]`	range for scale on all axis
`rangeX`	`number[]`	range for scale on x axis
`rangeY`	`number[]`	range for scale on y axis
`rangeZ`	`number[]`	range for scale on z axis

Returns

HDK React Component

See

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

Example

<RandomScale>
  <Prefab id="palm_tree" />
</RandomScale>

RandomTilt

RandomTilt(enabled, magnitude): HDK React Component

Randomly tilts the children of this node. Good for vegetation.

Parameters

Name	Type	Description
`enabled`	`boolean`	-
`magnitude`	`number`	The magnitude of the tilt, default is `0.1`.

Returns

HDK React Component

See

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

Example

<RandomTilt magnitude={0.1}>
  <Prefab id="palm_tree" />
</RandomTilt>

Example

Creating a palm tree forest:

<Distribute
   renderItem={item => {
     const random = useRandom();
 
     return (
       <RandomTilt magnitude={0.1}  scale={random.range(1, 3)}>
         <Prefab id="palm_tree" />
       </RandomTilt>
     );
   }}
 />

Palm tree forest

Room

Room(dim, doorHeight, doorWidth, floor, floorMaterial, floorPrefab, floorThickness, height, roof, wallMaterial, wallPrefab, wallThickness, wallTypes, windowHeight, windowUp, windowWidth): HDK React Component

Room creates rooms with walls, floor and roof. Walls can be with doors or windows. They can also be plain or empty.

Parameters

Name	Type	Description
`dim`	`Vec3`	Width and depth of the room, default is `5`
`doorHeight`	`number`	Height of the doors, default is `2.5`
`doorWidth`	`number`	Width of the doors, default is `1.5`
`floor`	`boolean`	If the room should have a floor, default is `true`
`floorMaterial`	`MaterialId`	Material to use for the floor, default is `palette_02_silver`
`floorPrefab`	`PrefabId`	Prefab to use for the floor, default is `cube_01`
`floorThickness`	`number`	Thickness of the floor, default is `0.2`
`height`	`number`	Height of the room, default is `5`
`roof`	`boolean`	If the room should have a roof, default is `true`
`wallMaterial`	`MaterialId`	Material to use for the walls, default is `palette_01_white`. Single colored material is recommended.
`wallPrefab`	`PrefabId`	Prefab to use for the walls, default is `cube_01`
`wallThickness`	`number`	Thickness of the walls, default is `0.1`
`wallTypes`	`WallTypes[]`	Array of north, east, south and west wall types, `PLAIN`, `DOOR`, `WINDOW` or 'NONE'. default is `['DOOR', 'WINDOW', 'DOOR', 'PLAIN']`
`windowHeight`	`number`	Height of the windows, default is `2.5`
`windowUp`	`number`	Height of the windows from the floor, default is `0.5`
`windowWidth`	`number`	Width of the windows, default is `1.5`

Returns

HDK React Component

See

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

Example

<Room wallTypes={['DOOR', 'PLAIN', 'DOOR', 'WINDOW']}></Room>

Room

Example

<Room
 y={0.5}
 height={15}
 doorWidth={3}
 doorHeight={5}
 windowWidth={3}
 windowHeight={5}
 windowUp={1.5}
 wallThickness={1.5}
 roof={false}
 dim={10}
 wallTypes={['DOOR', 'WINDOW', 'DOOR', 'WINDOW']}></Room>

RotateInSteps

RotateInSteps(axis, clockwise, enabled, renderItem, rotDuration, rotEasing, speedMultiplier, startAt, steps, waitDuration): HDK React Component

RotateInSteps is a component that rotates its children in steps.

Parameters

Name	Type	Description
`axis`	`Axis`	Axis to rotate around.
`clockwise`	`boolean`	Whether to rotate clockwise or counter-clockwise.
`enabled`	`boolean`	-
`renderItem`	`Node or Callback`	The item to rotate.
`rotDuration`	`number`	Duration of each rotation step.
`rotEasing`	`EasingType`	Easing type to use for each rotation step.
`speedMultiplier`	`number`	Speed multiplier for each rotation step.
`startAt`	`number`	Where in the animation to start, expressed as percentage of the duration length.
`steps`	`number`	Number of steps to rotate.
`waitDuration`	`number`	Duration to wait between each rotation step.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Animations (opens in a new tab) for general info about animations.

Example

<RotateInSteps z={4} renderItem={<Prefab id="en_p_jaguar_head_01_t2" />}></RotateInSteps>

RotateInSteps

SegmentedStack

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

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

Parameters

Name	Type	Description
`dimensions`	`Scale3`	-
`renderItem`	`Node or Callback`	The item to stack.
`segments`	`StackSegment[]`	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

See

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

Example

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

SegmentedStack

SkyScraper

SkyScraper(bottom, middle, theme, top): HDK React Component

Creates a themed skyscraper with random style.

Parameters

Name	Type	Description
`bottom`	`0 \| 1 \| 2`	Bottom part variant id.
`middle`	`Array<0 \| 1 \| 2 \| 3 \| 4>`	Array of middle part variant ids.
`theme`	`SkyScraperTheme`	The theme of the skyscraper, `cyan` or the default `purple`.
`top`	`0 \| 1 \| 2`	Top part variant id.

Returns

HDK React Component

See

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

Example

Create a random skyscraper using default settings.

<SkyScraper z={50}></SkyScraper>

SkyScraper

Example

Create a random city with skyscrapers. Change the Random seed to get a different city.

<Random seed={42}>
  <Distribute
    outerBoundRadius={120}
    gladeRadius={10}
    itemAreaSizeMin={35}
    itemAreaSizeMax={45}
    gapFrequency={0}
    renderItem={<SkyScraper />}
  />
</Random>

City

Example

Create a city with skyscrapers where they all have the same ground floor.

<Distribute
 outerBoundRadius={120}
 gladeRadius={10}
 itemAreaSizeMin={35}
 itemAreaSizeMax={45}
 gapFrequency={0}
 renderItem={<SkyScraper bottom={2}/>}
/>

SkySphere

SkySphere(physical, src): HDK React Component

Component to display 360 panorama image on a sphere.

Parameters

Name	Type	Description
`physical`	`boolean`	if true, the sphere will be physical and can be collided with.
`src`	`string`	URL of the image to display.

Returns

HDK React Component

Example

<SkySphere src="https://cdn.hibervr.com/images/skypheres/futuristic-cyberpunk-cityscape.jpg" />

Slice3

Slice3(bottomPrefab, bottomScale, material, topPrefab, topScale): HDK React Component

Creates a plane with an opening in the middle. Good for walls and windows.

Parameters

Name	Type	Description
`bottomPrefab`	`PrefabId`	The prefab of the bottom part of the plane.
`bottomScale`	`number`	The scale of the bottom part of the plane.
`material`	`MaterialId`	The material of the plane.
`topPrefab`	`PrefabId`	The prefab of the top part of the plane.
`topScale`	`number`	The scale of the top part of the plane.

Returns

HDK React Component

See

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

Example

<Slice3 scaleY={2} bottomScale={0.2} topScale={0.2}></Slice3>

Slice3

SoundCell

SoundCell(looping, playOnSignal, radius, src, volume): HDK React Component

Add a sound cell where the sound is being played with the same volume within the radius. Good for rooms or forests where you want sound playing but not outside of it.

Parameters

Name	Type	Description
`looping`	`boolean`	`false` means the sound will only play once, otherwise it will repeat.
`playOnSignal`	`SignalListenerReference & PlayAudioOnSignalSoloProps`	Use a signal to toggle playing the sound, defaults to `undefined`.
`radius`	`number`	How far away the sound should be heard, in approximate meters. Defaults to `10`.
`src`	`AudioSource`	The source of the sound, either an id or an external url.
`volume`	`number`	The volume of the sound, defaults to `2`.

Returns

HDK React Component

See

Fundamentals (opens in a new tab) for basic component placement.
Sound (opens in a new tab) for sound options.
Signals (opens in a new tab) for info about signals.

Example

<SoundCell id="a_am_birds_and_insects_01" radius={3} />

Spawnpoint

Spawnpoint(show, spawnInSeatWithinDistance): HDK React Component

Defines a place where the player will spawn when entering the world. If you place more than one of these, one will be chosen randomly. In game, the Spawnpoint is invisible. Press R to respawn.

Parameters

Name	Type	Description
`show`	`boolean`	if true, the spawpoint will be visible. This can be used to debug spawn point placement.
`spawnInSeatWithinDistance`	`number`	-

Returns

HDK React Component

See

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

Example

A simple spawnpoint, five meters up in the air. The spawnpoint is shown both in preview and play.

<Spawnpoint y={5} show />

SpiralStair

SpiralStair(depthStep, material, organicnessPosition, organicnessWaist, prefab, radius, steepness, steps, tension, tilt, waistValue, widthStep): HDK React Component

Create a spiral stair Children will be placed at the top of the stair The noise algorithm is using random values from the seed, so wrapping the SpiralStair in a Random component will give you a new stair

Parameters

Name	Type	Description
`depthStep`	`number`	depth of each step, default 0.75
`material`	`MaterialId`	material id, default palette_01_white
`organicnessPosition`	`number`	organicness of the position, Using noise to offset the position of each step, default 0
`organicnessWaist`	`number`	organicness of the waist, Using noise to offset the width of each step, default 0
`prefab`	`PrefabId`	prefab id, default rounded_cube_02
`radius`	`number`	radius of the spiral, default 5
`steepness`	`number`	steepness of each step, default 1
`steps`	`number`	number of steps, default 50
`tension`	`number`	offset on the z axis of each step, default 1
`tilt`	`number`	How much the stair should lean outwards, default 0
`waistValue`	`number`	If the stair should be wider in the middle, default 0
`widthStep`	`number`	width of each step, default 1.5

Returns

HDK React Component

Example

Basic usage, placing a prefab in a spiral stair with a lamp at the top:

<SpiralStair>
  <Prefab id="floor_lamp_01" scale={1} />
</SpiralStair>

Example

Small spiral stair starting from the top:

const height = 10;
<SpiralStair
  y={height}
  rotX={180}
  rotY={180}
  radius={1}
  steps={height * 6.9}
  steepness={0.22}
  tension={4}
  widthStep={1}
  depthStep={0.6}
  material="palette_01_black"
  prefab="cube_01"
/>

Example

Or go crazy with the parameters:

<SpiralStair
  steps={100}
  tilt={2}
  steepness={2}
  tension={0.7}
  waistValue={2}
  organicnessPosition={1}
  organicnessWaist={1}>
  <Prefab id="floor_lamp_01" scale={1} />
</SpiralStair>

Stack

Stack(dimensions, direction, numberOfItems, renderAfter, renderItem): HDK React Component

Stacks items in a given direction. The items are rendered using the renderItem prop.

Parameters

Name	Type	Description
`dimensions`	`Scale3`	The dimensions of the stack. If not provided, default is `[2, 2, 2]`
`direction`	`number`	The direction of the stack, default is `UP`.
`numberOfItems`	`number`	The number of items to stack.
`renderAfter`	`Node or Callback`	Items to render as children of the stack.
`renderItem`	`Node or Callback`	The 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

See

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

Example

<Stack z={5} renderItem={<Prefab id="cube_01" />}></Stack>

Stack

StairSystem

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

Name	Type	Description
`dim`	`Vec3`	-
`renderItem`	`Node or Callback`	Render function for each stair part
`sections`	`StairOptions[]`	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

VideoDome

VideoDome(double, material, physical, src): HDK React Component

Component to display 360 panorama video on a dome.

Parameters

Name	Type	Description
`double`	`boolean`	`true` will add an extra dome below to create a full sphere.
`material`	`MaterialId`	The material of the dome.
`physical`	`boolean`	Whether the dome should have a collider.
`src`	`string`	The source of the video.

Returns

HDK React Component

See

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

Example

Basic usage

 <VideoDome src="https://cdn.hibervr.com/video/360/underwater.mp4" />

360 Video Dome

More example videos to try out: banquet.mp4 digital-highway.mp4 disco.mp4 underwater.mp4

Example

Live DJ

<VideoDome src="https://cdn.hibervr.com/video/360/dj-live.mp4">
  <SoundCell src={{ id: "a_m_iconic_bullet_01" }} radius={8} />
</VideoDome>

Example

Some kind of a disco

<Hovering z={10} y={12} rotX={-45} offset={[0, -4, 0]}>
 <VideoDome
   double={true}
   material="t_metal_grid_01"
   src="https://cdn.hibervr.com/video/360/disco.mp4"
 />
</Hovering>

VideoPanel

VideoPanel(backside, emissiveStrength, frame, muted, ratio, soundFadeDistance, soundMinDistance, src): HDK React Component

A flat surface displaying a video.

Parameters

Name	Type	Description
`backside`	`boolean`	`true` means a backside is added to the panel.
`emissiveStrength`	`number`	How much the video glows in the dark.
`frame`	`boolean \| Frames`	Type of frame, `simple`, `stone` or `modern` - `true` means random frame.
`muted`	`boolean`	`true` mutes sound in the video.
`ratio`	`number`	The aspect ratio of the video. Defaults to `1` (1:1)
`soundFadeDistance`	`number`	Distance at which the sound of the video starts to fade in addition to the min distance. Defaults to `1`.
`soundMinDistance`	`number`	Minimum distance at which the sound of the video can be heard. Defaults to `10`.
`src`	`string`	The url of the video to display.

Returns

HDK React Component

See

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

Example

<VideoPanel
  y={1}
  z={5}
  src={'https://cdn.hibervr.com/video/brand.mp4'}
  emissiveStrength={1}
  ratio={16 / 9}
  scale={2}
/>

Other sample videos to try out: bike.mp4 Cubes_Waves.mp4 Kaleidoscope.mp4 Tunnel_Loop.mp4 Cubes_Loop.mp4

VideoPanel

VideoTexture

VideoTexture(emissiveStrength, muted, soundFadeDistance, soundMinDistance, src): HDK React Component

Apply a video texture to an item and its children.

Parameters

Name	Type	Description
`emissiveStrength`	`number`	How much the video glows in the dark.
`muted`	`boolean`	`true` mutes sound in the video.
`soundFadeDistance`	`number`	Distance at which the sound of the video starts to fade in addition to the min distance. Defaults to `1`.
`soundMinDistance`	`number`	Minimum distance at which the sound of the video can be heard. Defaults to `10`.
`src`	`string`	The url of the video to display.

Returns

HDK React Component

See

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

Example

Basic usage:

<VideoTexture src={'https://cdn.hibervr.com/video/brand.mp4'}>
  <Prefab id="cube_01" />
</VideoTexture>

Example

Go crazy with it:

<VideoTexture src="https://cdn.hibervr.com/video/Cubes_Loop.mp4" emissiveStrength={2}>
  <Avatar
    src={{
      url: 'https://models.readyplayer.me/6401fc12ce7f75d51cdb2888.glb',
      skeletonGroupID: 'skg_rpm_male',
    }}
    animation="an_default_emote_shuffledance"
    speedMultiplier={0.5}
    z={1}
    scale={5}
    rotY={180}
  />
</VideoTexture>

VideoTexture

Visibility

Visibility(visible): HDK React Component

Sets visibility on all children.

Parameters

Name	Type	Description
`visible`	`'never' \| 'playOnly' \| 'createOnly' \| 'always'`	define when the object should be visible. 'never' will still allow for collider to be retained.

Returns

HDK React Component

Example

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

Invisible

Wall

Wall(doorHeight, doorWidth, height, id, material, thickness, type, width, windowHeight, windowUp, windowWidth): HDK React Component

Creates a wall. Used in the Room component.

Parameters

Name	Type	Description
`doorHeight`	`number`	The height of the door. Defaults to `2`.
`doorWidth`	`number`	The width of the door. Defaults to `1`.
`height`	`number`	The height of the wall. Defaults to `3`.
`id`	`PrefabId`	The prefab ID to use for the wall. Defaults to `cube_01`.
`material`	`MaterialId`	The material ID to use for the wall. Defaults to `palette_01_white`.
`thickness`	`number`	The thickness of the wall. Defaults to `0.2`.
`type`	`WallTypes`	The type of wall to create. Defaults to `PLAIN`. Can be `PLAIN`, `DOOR`, `WINDOW`, or `NONE`.
`width`	`number`	The width of the wall. Defaults to `3`.
`windowHeight`	`number`	The height of the window. Defaults to `2`.
`windowUp`	`number`	The height of the window from the bottom of the wall. Defaults to `0.6`.
`windowWidth`	`number`	The width of the window. Defaults to `1`.

Returns

HDK React Component

See

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

Example

<Wall type="DOOR" />

Wall

Wheels

Wheels(axisLength, axisMaterial, axisRadius, spinDirection, spinDuration, wheelCount, wheelDepth, wheelElement, wheelMaterial, wheelRadius): HDK React Component

A component that renders a pair of wheels with an axis.

Parameters

Name	Type	Description
`axisLength`	`number`	The length of the axis.
`axisMaterial`	`MaterialId`	The material of the axis.
`axisRadius`	`number`	The radius of the axis.
`spinDirection`	`number`	The direction of the spinning animation.
`spinDuration`	`number`	The duration of the spinning animation.
`wheelCount`	`number`	The number of wheels to render.
`wheelDepth`	`number`	The depth of the wheel.
`wheelElement`	`ReactElement`	The element to use for the wheel.
`wheelMaterial`	`MaterialId \| undefined`	The material of the wheel.
`wheelRadius`	`number`	The radius of the wheel.

Returns

HDK React Component

Example

Basic usage
<Wheels>
  <Prefab id="cube_01"></Prefab>
</Wheels>

Example

Creating an orbiting car to relax in

<Orbiting radius={10} duration={orbitTimeFromWheelRotation(10, 1, 4)}>
  <HNode rotY={90}>
    <Wheels wheelRadius={1} spinDuration={4} wheelDepth={3}>
      <Prefab x={-0.75} rotY={-90} id="bed_02"></Prefab>
    </Wheels>
    <Wheels x={-1.5} wheelRadius={1} spinDuration={4} wheelDepth={3}></Wheels>
  </HNode>
</Orbiting>

ZombieHand

ZombieHand(damagingAmount, forearmPrefabId, handPrefabId, randomRotation, swingBackAndForthAngle, waveAngle): HDK React Component

Component that renders a zombie hand using TweenByTime. Good example of building gameplay components.

Parameters

Name	Type	Description
`damagingAmount`	`number`	Amount of damage to inflict.
`forearmPrefabId`	`PrefabId`	PrefabId of the forearm.
`handPrefabId`	`PrefabId`	PrefabId of the hand.
`randomRotation`	`boolean`	Whether to use random rotation.
`swingBackAndForthAngle`	`number`	Angle of the swing back and forth.
`waveAngle`	`number`	Angle of the wave.

Returns

HDK React Component

See

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

Example

<ZombieHand />

ZombieTube

ZombieTube(numberOfRings): HDK React Component

A tube of zombie hands.

Parameters

Name	Type	Description
`numberOfRings`	`number`	Number of rings of hands to render.

Returns

HDK React Component

See

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

Example

<ZombieTube numberOfRings={4}>

ZombieTube

Introduction Introduction

@hiber3d/hdk-react-components

Table of contents

Type Aliases

Functions

Animations

AsteroidSpinning

Parameters

Returns

Spinning

Parameters

Returns

Swinging

Parameters

Returns

Tween

Parameters

Returns

TweenByTime

Parameters

Returns

Waving

Parameters

Returns

Other

KeyFrameOptions

Type declaration

StackSegment

Type declaration

StairOptions

Type declaration

StairSystemItem

Type declaration

TweenByTimeAnimation

Type declaration

TweenOptions

AnimateAlongPath

Parameters

Returns

Avatar

Parameters

Returns

Bird

Parameters

Returns

Checkpoint

Parameters

Returns

CircularStructure

Parameters

Returns

Collider

Parameters

Returns

DJBooth

Parameters

Returns

Damaging

Parameters

Returns

Distribute

Parameters

Returns

DualDisplay

Parameters

Returns

FibonacciSphere

Parameters

Returns

Flapping

Parameters

Returns

For

Parameters

Returns

GlassCube

Returns

Grid

Parameters

Returns

Ground