Creating a world

In this tutorial we will create a world from scratch. We will start with an empty world and add some foliage, a building, an avatar and a video wall.

Followed the steps in Installation, and create and empty world by running the following command:

npx create-hdk@latest --empty

Your world should now look like this:

Empty world

Even though the sign in front of you is nice, let's start by removing it. After doing so, your code should look like this:

import { HNode, render } from '@hiber3d/hdk-react';
import { Ground, Spawnpoint } from '@hiber3d/hdk-react-components';
 
const World = () => (
  <HNode>
    <Ground />
    <Spawnpoint />
  </HNode>
);
 
render(<World />, { environment: 'midday_01' });

Your world should now look like this:

Even more empty

Make the ground hilly

First, let's start by adding some variation to the Ground (opens in a new tab). We do this by adding the hilly property to the Ground component and setting it to 1.

<Ground hilly={1} />

Hilly ground

Change material

Let's also change the material of the ground to something a bit more interesting. We do this by adding the material property to the ground component. All materials you can use can be found in the Asset Browser (opens in a new tab) under the category Materials.

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

Sand ground

Adding foliage

Let's add some surrounding foliage to the world. We do this by using the Distribute (opens in a new tab) component. To make the code easier to follow we will create a new component called Foliage and add it to the world.

The Distribute component is good to use when you want to distribute object randomly in a given area. In this case we want to distribute foliages randomly on the ground.

To give the foliage a more organic look, we wrap each bush in a RandomTilt (opens in a new tab) component. This will rotate the prefab a small amount around each axis.

const Foliage: HDKComponent = props => {
  return (
    <Distribute
      {...props}
      gladeRadius={20}
      renderItem={() => {
        const random = useRandom();
 
        return (
          <RandomTilt scale={random.range(1, 5)}>
            <Prefab id={random.fromArray(['bush_01', 'bush_02', 'birch_01_t1'])} />
          </RandomTilt>
        );
      }}
    />
  );
};

Let's add the Foliages component to the world.

<Foliages y={-1.5} />
<Ground hilly={1} material="t_sand_01" />
<Spawnpoint />

Foliages

Adding orbiting asteroids

Since we are not limited by the constraints of the real world, let's add some orbiting asteroids to the world. We do this by using the Distribute (opens in a new tab) component again. This time we will use the outerBoundRadius property to make sure the asteroids are distributed in a circle around the world.

To make the asteroids spin we wrap them in an AsteroidSpinning (opens in a new tab) component. To make the asteroids orbit around the world we wrap them in an Orbiting (opens in a new tab) component.

const OrbitingAsteroids: HDKComponent = props => {
  return (
    <HNode {...props}>
      <Orbiting duration={64}>
        <Distribute
          gladeRadius={40}
          outerBoundRadius={100}
          itemAreaSizeMin={15}
          itemAreaSizeMax={25}
          renderItem={item => {
            const random = useRandom();
 
            return (
              <AsteroidSpinning y={random.range(-10, 10)} scale={random.range(1, 5)}>
                <Prefab id="rock_01_t1" />
              </AsteroidSpinning>
            );
          }}
        />
      </Orbiting>
    </HNode>
  );
};

<Foliages y={-1.5} />
<OrbitingAsteroids y={20} />
<Ground hilly={1} material="t_sand_01" />
<Spawnpoint />

Orbiting Asteroids

Adding a building

Let's add a building to the world. We do this by using the Room (opens in a new tab) component. The Room component is a powerful component that can be used to create a lot of different types of rooms.

Let's wrap the Room component in a component called Building and add it to the world.

const Building: HDKComponent = props => {
  return (
    <Room
      {...props}
      floorThickness={1}
      dim={7}
      roof={false}
      wallThickness={0.5}
      height={10}
      windowWidth={3}
      wallTypes={['WINDOW', 'WINDOW', 'DOOR', 'WINDOW']}></Room>
  );
};

<Building y={0} z={20} />
<Foliages y={-1.5} />
<OrbitingAsteroids y={20} />
<Ground hilly={1} material="t_sand_01" />
<Spawnpoint />

Building

Adding interior

Lets add some interior to the building. We do this by adding sofa and floor lamp Prefabs (opens in a new tab) as children to the Room component. Remember that the position of this Prefab is relative to its parent, the Room component.

const Building: HDKComponent = props => {
  return (
    <Room
      {...props}
      floorThickness={1}
      dim={7}
      roof={false}
      wallThickness={0.5}
      height={10}
      windowWidth={3}
      wallTypes={['WINDOW', 'WINDOW', 'DOOR', 'WINDOW']}>
      <Prefab id="sofa_01_t2" rotY={180} scale={2} />
      <Prefab id="floor_lamp_01" rotY={210} x={4} y={0.1} scale={2} />
    </Room>
  );
};

Interior

Let's add an Avatar to the sofa.

<Prefab id="sofa_01_t2" rotY={180} scale={2}>
  <Avatar animation="an_default_emote_sitting_idle_02" y={0.16} z={0.12} rotY={20} />
</Prefab>

Add a video

Now let's add a video to the world! We do this by using the VideoPanel (opens in a new tab) component. Add it as a child to the Room component.

<VideoPanel src={'https://cdn.hibervr.com/video/Hiber3D.mp4'} y={7} z={-8.5} scale={5} rotY={180}></VideoPanel>

Video Wall

Change the environment

Finally let's change the environment to a sunset environment. We do this by passing the environment property to the render function. More environments can be found in the Asset Browser (opens in a new tab).

render(<World />, { environment: 'sunrise_01' });

sunrise-end

And we're done. Your final code should look something like this.

import { HDKComponent, HNode, Prefab, render, useRandom } from '@hiber3d/hdk-react';
import {
  AsteroidSpinning,
  Avatar,
  Distribute,
  Ground,
  Orbiting,
  RandomTilt,
  Room,
  Spawnpoint,
  VideoPanel,
} from '@hiber3d/hdk-react-components';
 
const Foliage: HDKComponent = props => {
  return (
    <Distribute
      {...props}
      gladeRadius={20}
      renderItem={item => {
        const random = useRandom();
 
        return (
          <RandomTilt scale={random.range(1, 5)}>
            <Prefab id={random.fromArray(['bush_01', 'bush_02', 'birch_01_t1'])} />
          </RandomTilt>
        );
      }}
    />
  );
};
 
const OrbitingAsteroids: HDKComponent = props => {
  return (
    <HNode {...props}>
      <Orbiting duration={64}>
        <Distribute
          gladeRadius={40}
          outerBoundRadius={100}
          itemAreaSizeMin={15}
          itemAreaSizeMax={25}
          renderItem={item => {
            const random = useRandom();
 
            return (
              <AsteroidSpinning y={random.range(-10, 10)} scale={random.range(1, 5)}>
                <Prefab id={random.fromArray(['rock_01_t1'])} />
              </AsteroidSpinning>
            );
          }}
        />
      </Orbiting>
    </HNode>
  );
};
 
const Building: HDKComponent = props => {
  return (
    <Room
      {...props}
      floorThickness={1}
      dim={7}
      roof={false}
      wallThickness={0.5}
      height={10}
      windowWidth={3}
      wallTypes={['WINDOW', 'WINDOW', 'DOOR', 'WINDOW']}>
      <Prefab id="sofa_01_t2" rotY={180} scale={2}>
        <Avatar animation="an_default_emote_sitting_idle_02" y={0.16} z={0.12} rotY={20} />
      </Prefab>
      <Prefab id="floor_lamp_01" rotY={210} x={4} y={0.1} scale={2} />
      <VideoPanel src={'https://cdn.hibervr.com/video/Hiber3D.mp4'} y={7} z={-8.5} scale={5} rotY={180}></VideoPanel>
    </Room>
  );
};
 
const World = () => (
  <HNode>
    <Foliage y={-1.5} />
    <OrbitingAsteroids y={20} />
    <Building y={0} z={20} />
    <Spawnpoint />
    <Ground hilly={1} material="t_sand_01" />
  </HNode>
);
 
render(<World />, { environment: 'sunrise_01' });

Now let's publish your creation to HiberWorld: Publishing

2. Fundamentals 4. Publishing