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
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. |
rotation ? | Vec3 | Rotational change relative to original orientation. |
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. |
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. |
TweenByTimeAnimation
type TweenByTimeAnimation: object;
An object representing a single Tween animation frame, primarily used by TweenByTime.
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. |
See
- Fundamentals (opens in a new tab) for animation properties.
- Animations (opens in a new tab) for general info about animations.
TweenOptions
type TweenOptions: object & AnimateOnSignalOptions;
Configuration for a Tween animation.
Type declaration
Name | Type | Description |
---|---|---|
duration ? | number | Duration of the frame, in seconds. |
enabled ? | boolean | false means the frame will not be considered. |
loop ? | LoopBehaviour | Whether to RESTART or REVERSE the animation when it reaches the end. Defaults is REVERSE . |
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. |
AsteroidSpinning()
function AsteroidSpinning(
direction,
duration,
easing,
enabled,
loop,
playOnSignal,
speedMultiplier,
startAt): HDK React Component
Makes children spin around all axes like an asteroid.
Parameters
Parameter | 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 | false means the behaviour will be 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
Example
<AsteroidSpinning speedMultiplier={1} z={5} y={2}>
<Prefab id="rock_01_t1" />
</AsteroidSpinning>
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.
Friction()
function Friction(friction): HDK React Component
Change the friction of an object.
Parameters
Parameter | Type | Description |
---|---|---|
friction | number | The 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
Parameter | 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
Example
<Spinning duration={8}>
<Prefab id="cube_01" />
</Spinning>
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.
Swinging()
function Swinging(
degX,
degY,
degZ,
duration,
easing,
enabled,
initialState,
loop,
playOnSignal,
startAt): HDK React Component
Make an object swing around its pivot
Parameters
Parameter | 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
Example
<Swinging degY={50} z={5}>
<Prefab id="cube_01" />
</Swinging>
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.
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
Parameter | Type | Description |
---|---|---|
keyframes | KeyFrameOptions[] | 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. |
options | TweenOptions | TweenOptions 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>
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.
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
Parameter | 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
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" />}
/>
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.
Waving()
function Waving(
enabled,
speedMultiplier,
wavingRange): HDK React Component
Make an object wave from the base, good for trees amd flowers.
Parameters
Parameter | Type | Description |
---|---|---|
enabled | boolean | false means the behaviour will be disabled. |
speedMultiplier | number | Waving speed factor. 2 means double the speed. |
wavingRange | number | The 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
- Fundamentals (opens in a new tab) for basic component placement.
- Animations (opens in a new tab) for general info about animations.
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
Parameter | Type | Description |
---|---|---|
duration | number | The duration of the ability. |
effects | (EffectMetaData | EffectId )[] | The effects to give the player when they collide with the collider. |
form | ColliderForm | The basic shape of the collider. Defaults to mesh . |
group | PhysicsFilter | The collision group for the collider. This specifies which group the collider belongs to. |
mask | PhysicsFilter | The collision mask for the collider. This specifies which other groups the collider will collide with. |
mesh | MeshId | The id of the mesh to be used as collider. |
sensor | SensorTypeCollision \ | SensorTypeRaycastReceiver |
showMesh | boolean | Whether to show the collider mesh. |
showMeshMaterial | string | The material to use when showing the collider mesh. Defaults to glass . |
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
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
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
type StairOptions: object;
Type declaration
Name | Type |
---|---|
autoRotate ? | boolean |
dim ? | Vec3 |
direction | Direction |
offset ? | Vec3 |
renderItem ? | RenderItemProp <StairSystemItem > |
repeats | number |
StairSystemItem
type 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 | - |
StairSystemOptions
type StairSystemOptions: object;
Type declaration
Name | Type |
---|---|
dim ? | Vec3 |
sections | StairOptions [] |
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
Parameter | 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
Example
<SegmentedStack
segments={[
{
length: 2,
direction: 'UP',
},
{
length: 4,
direction: 'RIGHT',
},
]}
z={5}
renderItem={() => <Prefab id="scaffoldingcube_01" />}
/>
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
Parameter | 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>
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
Parameter | 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 . |
keyframeScale | number | - |
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
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>
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.
Avatar()
function Avatar(
animation,
speedMultiplier,
src): HDK React Component
Add a Ready Player Me avatar to your scene.
Parameters
Parameter | 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
Examples
Add a random avatar with a specific animation.
<Avatar animation="an_default_emote_hip_hop_dancing_01" z={5} />
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".
<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
Parameter | 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' |
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} />
See
- Fundamentals (opens in a new tab) for basic component placement.
- Animations (opens in a new tab) for general info about animations.
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
Parameter | Type |
---|---|
group | PhysicsFilter |
mask | PhysicsFilter |
sensor | SensorTypeCollision \ |
showMesh | boolean |
showMeshMaterial | string |
vfxInVolume | PrefabId |
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
- Fundamentals (opens in a new tab) for basic component placement.
- Signals (opens in a new tab) for info about signals.
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
Parameter | Type | Description |
---|---|---|
collision | boolean | Toggle camera colliding with obstructions. Default: true |
distance | number | The distance of the camera in meters. Default: 2 |
distanceIntroDuration | number | The intro duration for the distance effect. Default: 0 |
distanceOutroDuration | number | The outro duration for the distance effect. Default: 0 |
distanceStackRule | "UNSTACKABLE" | "REPLACE_ACROSS_ABILITIES" | The stack rule for the distance effect. Default: 'REPLACE_ACROSS_ABILITIES' |
duration | number | The duration of the ability. Default: 0.1 |
id | MeshId | - |
light | boolean | Whether to show a light. |
lockMovementInPlane | Vec3 | Lock the movement in a plane specified in Vec3. Example: [0, 0, 1] |
material | MaterialId | - |
physical | boolean | - |
pitch | number | The pitch of the camera in degress. Example: -15 |
showMesh | boolean | Whether to show the collider mesh. Default: false |
yaw | number | The 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
Parameter | Type |
---|---|
material | MaterialId |
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
Parameter | 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, defined height of doors and windows, 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
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>
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
Parameter | Type | Description |
---|---|---|
form | ColliderForm | The basic shape of the collider. Defaults to mesh . |
group | PhysicsFilter | The collision group for the collider. This specifies which group the collider belongs to. |
mask | PhysicsFilter | The collision mask for the collider. This specifies which other groups the collider will collide with. |
mesh | MeshId | The id of the mesh to be used as collider. |
sensor | SensorTypeCollision \ | SensorTypeRaycastReceiver |
showMesh | boolean | Whether to show the colliders's mesh for debugging purposes. Defaults to false |
showMeshMaterial | string | The material to use when showing the collider mesh. Defaults to glass . |
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
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
- Fundamentals (opens in a new tab) for basic component placement.
- Signals (opens in a new tab) for info about signals.
Damaging()
function Damaging(
amount,
enabled,
knockbackStrength,
takeDamageFxId): HDK React Component
Deal damage if any children are touched.
Parameters
Parameter | 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
Example
<Damaging amount={50} knockbackStrength={200} >
<Prefab id="alien_grass_01" z={10} />
</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
Parameter | 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. |
numberOfItems | number | If specified, the algorithm will stop after placing this many items. |
outerBoundRadius | number | - |
overrideItemLimit | boolean | false means the algorithm will disregard the max number of placed items. |
radius | number | The radius of the entire distribution area, default is 100. |
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
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" />}
/>
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
Parameter | Type | Description |
---|---|---|
avatarSource | AvatarSource \ | undefined |
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 |
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' }}
/>
DualDisplay()
function DualDisplay(
ratio,
side1,
side2,
thickness): HDK React Component
A two-sided display with a MediaDisplay on each side.
Parameters
Parameter | 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
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
Parameter | 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
Example
<FibonacciSphere z={5} renderItem={<Prefab id="cube_01" scale={0.5} />} />
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
Parameter | 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
Example
<Flapping z={5} scaleX={0.1}>
<Prefab id="cube_01" />
</Flapping>
See
- Fundamentals (opens in a new tab) for basic component placement.
- Animations (opens in a new tab) for general info about animations.
For()
function For(numberOfItems, renderItem): HDK React Component
Renders a set number of items.
Parameters
Parameter | 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
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
Parameter | 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
Examples
Create a temple floor:
<Grid
rows={10}
columns={10}
itemSpacing={4}
renderItem={<Prefab id="en_m_jungle_temple_01_floor" />}
/>
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" />}
/>
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
Parameter | 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
Examples
Basic usage, a grassy flat ground plane.
<Ground />
Insert a hilly grassy ground plane.
<Ground hilly={1} />
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" />
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
Parameter | 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
Example
<Hovering z={5} y={3}>
<Prefab id="donut_01" />
</Hovering>
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.
ImagePanel()
function ImagePanel(
backside,
frame,
ratio,
src): HDK React Component
A flat surface with an optional image and ratio.
Parameters
Parameter | Type | Description |
---|---|---|
backside | boolean | true means adding a backside to the panel. |
frame | boolean \ | Frames |
ratio | number | The x:y ratio of the image, default: 1 (1:1) |
src | string | Url 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} />
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'}
/>
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
Parameter | Type | Description |
---|---|---|
src | string | The 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>
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
Parameter | 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[] |
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
Examples
Basic usage, placing a prefab in a circle:
<InCircle renderItem={() => <Prefab id="cube_01" />} />
Create a spiral of cubes:
<InCircle
items={20}
degrees={720}
faceCenter={true}
renderItem={({ progress }) => <Prefab id="cube_01" y={progress * 20} />}
/>
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} />}
/>
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
Parameter | 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
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
- 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.
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>
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
Parameter | 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
Examples
Basic usage
<Limb z={4} rotX={20}>
<Limb rotX={20} />
</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
Parameter | 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
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
Parameter | 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',
}} />
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
Parameter | 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
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} />
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.
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
Parameter | Type | Description |
---|---|---|
backside | boolean | true means adding a backside to the panel. |
frame | boolean \ | Frames |
ratio | number | The 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
Parameter | 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
Example
<Mesh id="en_p_light_cone_02" material={'t_light_cone_01'