VR for fun Part 2
Lee Payne CMgr MBA (Open)
Poly nimbus cloud engineering professional and experienced leader.
Part 1 can be found here and is worth looking over if you are new to this.
Now we have the basics of VR development sorted we can build on it to put together a VR CV which can be used to showcase your skills and be an interactive way to explore your experiences and knowledge, this may make you stand out from the crowd. I decided to start by doing something simple and building out the space I wanted to work with, I drew a quick diagram to help me visual what I was going to build.
The first thing I did was set up the basic space, a floor, sky and exterior walls.
<html>
?<head>
??<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
?</head>
?<body>
???<a-scene>
????<a-assets>
?????<!--Base Assets-->
?????<img id="woodfloor" src="/images/floor.jpg">
?????<img id="wall" src="/images/wall.jpg">
?????<img id="skyimg" src="/images/sky.jpg">????
????</a-assets>
???<a-entity id="architecture" class="home">
????<!--Sky-->
????<a-sky id="sky" src="#skyimg"></a-sky>
?????<!--Floor-->
?????<a-plane id="floor" rotation="-90 90 0" width="50" height="50" src="#woodfloor" repeat="2 2" ></a-plane>
?????<!--Front wall-->
?????<a-plane position="0 5 -25" width="50" height="10" src="#wall" repeat="10 2" material="side: double" ></a-plane>
?????<!--Back wall-->
?????<a-plane position="0 5 25" rotation="0 180 0" width="50" height="10" src="#wall" repeat="10 2" material="side: double" ></a-plane>
?????<!--Left Wall-->
?????<a-plane position="-25 5 0" rotation="0 90 0" width="50" height="10" src="#wall" repeat="10 2" material="side: double" ></a-plane>
?????<!--Right Wall-->
?????<a-plane position="25 5 0" rotation="0 -90 0" width="50" height="10" src="#wall" repeat="10 2" material="side: double" ></a-plane>
?????<!--Ceiling-->
?????<a-plane id = "ceiling" position="0 10 0" scale="1 1 1" width="50" height="50" rotation="90 0 0" material="metalness:1; roughness:0; transparent: true; opacity: .7; shader: standard;?color: #faaf52; side:double;"></a-plane>
There’s quite a bit in there to unpack, lets start with the sky, you can see I am using an image for the sky (in this case mountains), images that are 360 degree in nature (such as this) need to be equirectangular images, this is just a special format for presenting a image onto a 3D space so they look right otherwise you’ll have a stretched or squashed image, you can find these all over the internet so pick your favorite and try it out.
Moving onto the floor you can see I am putting an image onto the <a-plane>, this is a texture map (usually a jpg or png image) which is laid over the plane, you can use any image you want for this, the rotation is to make it a “floor” the height and width tell it how big I want it to be and the repeat is how often the image should be repeated over this area, you need to experiment with your images to determine what the correct numbers are for yours, in my case I have an image of a wooden floor I found while doing a google image search.
The walls are set to be on the outer edges of the floor area and have a brick effect image placed on them, the tag material="side: double" ?makes sure that whatever you put on one side is replicated to the other automatically, if you want the same thing on both sides of a plane this prevents you having to build a second one manually facing the other way.
Finally the ceiling is a semi-transparent plane which is used to give a glass style effect so you can see the sky outside but still give the impression of a roof being present.
You’ll notice that as part of the entity tag I have set a class, this isn’t of much use at the moment but will come into play later on once we start scripting, the class is used to control groups of elements together.
You should have a scene which looks something like this
Which is found here
Next we need to build the interior walls, this is very similar to the exterior ones except we need to set their placement in the correct space to allow for openings.
????<!--Interior wall to Skills-->
????<a-plane position="-10 5 15" rotation="0 180 0" src="#wall" width="15" height="10" repeat="10 2" material="side: double"></a-plane>
????<a-plane position="10 5 15" rotation="0 180 0" src="#wall" width="15" height="10" repeat="10 2" material="side: double"></a-plane>
????<!--Interior wall to Interests-->
????<a-plane position="-15 5 -10" rotation="0 90 0" width="15" height="10" src="#wall" repeat="10 2" material="side: double"></a-plane>
????<a-plane position="-15 5 10" rotation="0 90 0" src="#wall" width="15" height="10" repeat="10 2" material="side: double"></a-plane>
????<!--Interior wall to Career-->
????<a-plane position="15 5 -10" rotation="0 270 0" width="15" height="10" src="#wall" repeat="10 2" material="side: double"></a-plane>
????<a-plane position="15 5 10" rotation="0 270 0" src="#wall" width="15" height="10" repeat="10 2" material="side: double"></a-plane>
????<!--Interest/qualifications-->
????<a-plane position="-23.5 5 -15" width="3" height="10" src="#wall" repeat="1 2" material="side: double"></a-plane>
?????<a-plane position="-15 5 -23.5" width="3" rotation="0 90 0" height="10" src="#wall" repeat="1 2" material="side: double"></a-plane>
?????<!--Interest/skills-->
????<a-plane?position="-23.5 5 15" width="3" height="10" src="#wall" repeat="1 2" material="side: double"></a-plane>
领英推荐
????<a-plane?position="-15 5 23" rotation="0 90 0"?width="4" height="10" src="#wall" repeat="1 2" material="side: double"></a-plane>
????<!--qalification/career-->
????<a-plane?position="23.5 5 -15" width="3" height="10" src="#wall" repeat="1 2" material="side: double"></a-plane>
????<a-plane position="15 5 -23.5" rotation="0 90 0" width="3" height="10" src="#wall" repeat="1 2" material="side: double"></a-plane>
????<!--career/skills-->
????<a-plane position="23.5 5 15" width="3" height="10" src="#wall" repeat="1 2" material="side: double"></a-plane>
????<a-plane position="15 5 23" rotation="0 90 0"?width="4" height="10" src="#wall" repeat="1 2" material="side: double"></a-plane>
This gives you the interior walls and your openings into each one from the corners, it should look like this for the “rooms” (qualifications, links etc..)
Also like this for the corner rooms leading to the hallways.
After I built this I thought it looked a little odd with the openings at the top of each wall so I decided instead of putting another wall there to fill it in I would have some form of sign instead to show you what was in each room which would be more useful.
I added the following to build the signage around the room, each sign tells you what's on the other side of the doorway you are looking at to make navigation easier.
<a-plane position="0 8 -15" width="5" height="4" color="#191817" text="value:Qualifications;align:center;width:12"></a-plane>
???????<a-plane position="0 8 -15" width="5" height="4" color="#191817" rotation="0 180 0" text="value:Main Room;align:center;width:12"></a-plane>
????????????????????????????????<a-plane position="0 8 15" rotation="0 180 0" width="5" height="4" color="#191817" text="value:Skills;align:center;width:12"></a-plane>
???????<a-plane position="0 8 15" width="5" height="4" color="#191817" text="value:Main Room;align:center;width:12"></a-plane>
????????????????????????????????<a-plane position="-15 8 0" rotation="0 90 0" width="5" height="4" color="#191817" text="value:Interests;align:center;width:12"></a-plane>
???????<a-plane position="-15 8 0" rotation="0 270 0" width="5" height="4" color="#191817" text="value:Main Room;align:center;width:12"></a-plane>
????????????????????????????????<a-plane position="15 8 0" rotation="0 270 0" width="5" height="4" color="#191817" text="value:Career;align:center;width:12"></a-plane>
???????<a-plane position="15 8 0"?width="5" height="4" color="#191817" rotation="0 90 0" text="value:Main Room;align:center;width:12"></a-plane>
????????????????????????????????<a-plane position="-19.768 8 15" rotation="0 180 0" width="4.5" height="4" color="#191817" text="value:Skills;align:center;width:12"></a-plane>
???????<a-plane position="-19.768 8 15" rotation="0 0 0" width="4.5" height="4" color="#191817" text="value:Interests;align:center;width:12"></a-plane>
???????
???????<a-plane position="-19.768 8 -15" rotation="0 0 0" width="4.5" height="4" color="#191817" text="value:Qualifications;align:center;width:12"></a-plane>
???????<a-plane position="-19.768 8 -15" rotation="0 180 0" width="4.5" height="4" color="#191817" text="value:Interests;align:center;width:12"></a-plane>
???????
???????<a-plane position="-14.768 8 -19.69" rotation="0 -90 0" width="4.5" height="4" color="#191817" text="value:Qualifications;align:center;width:12"></a-plane>
???????<a-plane position="-14.768 8 -19.69" rotation="0 90 0" width="4.5" height="4" color="#191817" text="value:Interests;align:center;width:12"></a-plane>
???????<a-plane position="14.768 8 -19.69" rotation="0 -90 0" width="4.5" height="4" color="#191817" text="value:Career;align:center;width:12"></a-plane>
???????<a-plane position="14.768 8 -19.69" rotation="0 90 0" width="4.5" height="4" color="#191817" text="value:Qualifications;align:center;width:12"></a-plane>
???????<a-plane position="19.768 8 15" rotation="0 180 0" width="4.5" height="4" color="#191817" text="value:Skills;align:center;width:12"></a-plane>
???????<a-plane position="19.768 8 15" rotation="0 0 0" width="4.5" height="4" color="#191817" text="value:Career;align:center;width:12"></a-plane>
???????
???????<a-plane position="19.768 8 -15" rotation="0 0 0" width="4.5" height="4" color="#191817" text="value:Qualifications;align:center;width:12"></a-plane>
???????<a-plane position="19.768 8 -15" rotation="0 -180 0" width="4.5" height="4" color="#191817" text="value:Career;align:center;width:12"></a-plane>
???????
???????<a-plane position="15 8 19.233" rotation="0 90 0" width="3.5" height="4" color="#191817" text="value:Skills;align:center;width:12"></a-plane>
???????<a-plane position="15 8 19.233" rotation="0 -90 0" width="3.5" height="4" color="#191817" text="value:Career;align:center;width:12"></a-plane>
??????
???????<a-plane position="-15 8 19.233" rotation="0 90 0" width="3.5" height="4" color="#191817" text="value:Interests;align:center;width:12"></a-plane>
???????<a-plane position="-15 8 19.233" rotation="0 -90 0" width="3.5" height="4" color="#191817" text="value:Skills;align:center;width:12"></a-plane>
Your room should now look like this from the main room
Then from inside the rooms
Then from the corner rooms
We’ve built quite a lot this time and you can experiment with placing walls, signs etc.. and changing the images used for the textures to customize your room. This room is available here
An final important thing to note is that you don’t have to work through trial and error trying to place the items, you can use the inspector to examine your elements and move them however you want, to load it press ctrl, alt, I together this will load the inspector window which looks like this
Once this is loaded you can click on each element and it will show you the attributes you can change
You can then change the position, rotation or scale as well as different material options to make it look however you want, you can then copy this information into your code to update the state, if you double click on an entityit will take you to it which is useful if it’s currently hidden behind another object or if you haven’t set an ID tag and don’t know which one it is.