Getting Started

If you have no idea where to start when creating a Janus VR room then you have found the right place.

The image below is a web based 3D space that can be shared, discussed and explored, in real-time with people from across the globe.

This is going to be your first room, and we're going to create it...right now!

I'll need you to do a few things before we can start.

See at the top of this page there's a 'My Rooms' button? Well on that page you'll be able to create your first VR web space to call your own. If you're comfortable navigating tabs in your internet browser then click the following to open the 'My Rooms' page up in a new tab and then come back here to continue getting started.

Did you see it? The big blue button? Go back on that tab for a second and press the big button, and come back, I'll wait here.

Woah! Code n stuff, right? Don't worry about that yet, in fact try not to worry at all because what we're starting with is less than half a dozen lines of pretty self explanitory Janus VR markup.

Let's get three more things done to make your mark in the VR metaverse! - You'll need to go back on that tab and do the following before returning here:

  • Select a category that defines your topic for that room, you'll see the dropdown at the top left of that page,
  • Directly below that you'll need to give it a title (both the title and the topic can be changed at any time in the future)
  • Scroll down to the bottom of the page and click 'save'

 

A new door has appeared in VR Sites and it's yours, there might even be someone in there now!

When you clicked the save button we injected and saved the following code into our database, this code directly relates to the picture of the room above.

<title>my first room!</title>
<FireBoxRoom>
<Assets>
<AssetObject id="moon_obj" src="http://vesta.janusvr.com/assets/moon.obj" tex0="http://vesta.janusvr.com/assets/earth1.jpg" tex_clamp="false"/>
<AssetImage id="bert_img" src="http://vesta.janusvr.com/assets/bert.jpg" />
</Assets>
<Room use_local_asset="room_1pedestal" col="0.5 0.5 0.5" pos="0 0 0" fwd="0 0 -1">
<Object id="moon_obj" pos="0 3 -10" fwd="0 0 1" rotate_axis="0 1 0" rotate_deg_per_sec="3" />
<Image id="bert_img" pos="-9.5 2 -10" fwd="1 0 0" />
</Room>
</FireBoxRoom>

Let's break it down line by line.

We put the FireBoxRoom opening tag.

<FireBoxRoom>

and then we start our collection of assets.

<Assets>

In this line we are including a 3D object which is a sphere (called moon.obj), around that sphere we are wrapping earth1.jpg - we want to add this to our room later on, but we need a name to reference it by, in this case we have decided to call it moon_obj

<AssetObject id="moon_obj" src="http://vesta.janusvr.com/assets/moon.obj" tex0="http://vesta.janusvr.com/assets/earth1.jpg" />

Notice the /> at the end? - that is because we have finished adding this asset, but we have not finished with <FireBoxRoom> nor <Assets> yet.

As well as the moon we are going to include a picture on the wall, we will reference it later by the name of bert_img.

<AssetImage id="bert_img" src="http://vesta.janusvr.com/assets/bert.jpg" />

That's enough assets, so we close the tag

</Assets>
When opening and closing tags make sure you use the same:
<Assets> </assets>
Will not work!
<Assets> </Assets>
Will!

Let's start the actual room! There are a variety of room layouts we can use and for this example we are going to use room_1pedestal (check the manual for other layout names).

  • Next we define the colour, this is done by Red Green Blue values from 0 to 1. Were using 0.5 of each, which is grey.
  • 'Pos' is the position we will be in inside the room when it is created, 0 0 0 is in the middle
  • Finally the direction the room is facing, the last figure -1 is negative Z (facing towards us), don't worry about these values as we'll come back to them later.
<Room use_local_asset="room_1pedestal" col="0.5 0.5 0.5" pos="0 0 0" fwd="0 0 -1">

Phew! That's our Room defined, lets bring in those assets.

First we want to bring in our moon which is an object (the spherical object remember?) - so the tag is

<Object>
and the id is moon_obj.
  • We work with coordinates X Y Z and in this case were positioning the moon at 0 3 -10. To the left or the right = 0, up or down 3 and forward or back -10.
  • As it's a spherical moon we are going to have it spin around! The Y coordinate being up/down is the axis we want it spinning on (like a spinning top).
  • 3 degrees per second is how fast its going to spin.

When using fwd ="1 0 0" we are specifying which way the item is facing on the x y z axis

1 0 0 would mean positive X, -1 0 0 would be negative X

<Object id="moon_obj" pos="0 3 -10" fwd="0 0 1" rotate_axis="0 1 0" rotate_deg_per_sec="3" />

Finally we want to bring in our picture.

After putting in the previously decided id (bert_img) )we are going to position the picture on the left hand wall.

The XYZ coordinates are -9.5 2 -10 - which is -9.5 - this means 9.5 'meters' to our left (if it was 9.5 then it would be to our right). The Y coord is 2 so that's 2 up in the air, and finally -10 which is 10 back from us (us being 0,0,0).

Finally the fwd direction is positive X (so on the left hand side of the wall it is facing out)

<Image id="bert_img" pos="-9.5 2 -10" fwd="1 0 0" />

We're done!

</Room>
</FireBoxRoom>

It is quite a lot to take in if you are unfamiliar with any type of coding, but if you have an understanding of HTML or similar you should easily be able to grasp the basic concept. There is a lot more information in the manual than you see here, so when you're ready check that out too!