Alternative Options [CodePen/Github.io]

In this session, we’re going to learn how to use codepen.io to host our virtual worlds. And the fun stuff with AR and VR often occurs when you access your application via a smartphone or another device like a VR headset. Let’s explore codepen.io and see how it’s being used. Start by navigating to the CodePen web page and create an account. I already have one created. But once you’ve created yours and logged in, you should see an interface just like this. Now select Create Pen from the left hand side menu. The CodePen page consists of three sections HTML, CSS and JavaScript. As you notice over here we have the HTML tab, CSS tab, and JS tab.

Now, we actually won’t be using CSS in our activities. So we can go ahead and collapse it here. You can write the code straight into Pen, or you can copy across code written in your favourite editor. Here, I’m going to copy across code that I’ve already written. The file, like a normal HTML file, has a header and body section which will transfer into CodePen. Now, CodePen organises the header and body a bit differently. Notice that there is no visible menu to add our header. So we can access the head section in CodePen by clicking the Open HTML Settings button close to the HTML tab. Select the code that’s between the two head tags and copy it.

Now go back to our CodePen web page and paste this code in the head section. Now we can click Save and Close. Now let us copy the actual body to add in the scene. In CodePen the HTML tab is where the body of the page is defined. So let’s copy across everything between the body tags from our HTML file. The moment we start to do this, the scene starts to upload.

If you want to see what the virtual world application looks like in full mode, we can enter the VR mode. And you can actually move around in this as well, as shown here. We can now come out of full mode. Now, this will work most of the time when you’re not using Assets. But if you are using Assets, then these are loaded from a different location. And CodePen doesn’t allow the uploading of these assets unless you get premium. Glitch.me does, as we have discussed in the previous session. Instead we’re going to use GitHub Pages. GitHub Pages has install instructions telling you how to set up your pages, creates a repository, and save your files. I have done this for myself.

And this is my github.io page. I’ve already created a folder called Assets. And within that folder is a file called spacepano.jpg. We can access this image by editing the path as seen here. And this will then display in our github.io. If I want to access this file on CodePen, then I just need to copy the URL address or file path and paste it into my CodePen after the scene, as seen here. If I want to use assets, an AFrame requires that I declare these in advance. So let’s go to the scene section and add all the assets code immediately after the scene background, as shown here.

The moment we do that, we can see that the scene will start updating itself. And we can also view this in full VR mode by clicking on the VR icon in the scene’s right hand corner. So this is how we can use assets copied from your GitHub into your CodePen code, and how you can use github.io pages to serve up assets that you can use in your virtual world. Now to exit the full screen VR mode, right click on the page and select Exit Full Screen. The advantage of this approach is that Pen is accessible from anywhere using its unique URL. You can create an unlimited number of Pens, but you have to be careful to reduce the clutter.

Now you should be able to use codepen.io to create simple AFrame scenes, use github.io to host your assets like images and objects, access those assets to use in your own scenes, and access the pens across other devices too.