{"id":28405,"date":"2022-03-23T22:03:06","date_gmt":"2022-03-23T22:03:06","guid":{"rendered":"http:\/\/Creating-a-VR-App-with-Redwood"},"modified":"2025-05-23T11:02:05","modified_gmt":"2025-05-23T18:02:05","slug":"creating-a-vr-app-with-redwood","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-vr-app-with-redwood\/","title":{"rendered":"Creating a Virtual Reality App"},"content":{"rendered":"

VR has grown over the past few years as the number of compatible devices increase. There are a ton of uses for it, both practical and for entertainment. If you know JavaScript, you can even start making your own VR apps right in the browser.<\/p>\n

In this tutorial, we\u2019re going to make a quick search and find game. There will be a few objects hidden around the world and the player will have to find them all to win. We\u2019ll be using Redwood and A-frame to handle all of our VR and user experience needs.<\/p>\n

Building the VR world<\/h2>\n

We\u2019ll start by making a new Redwood app. In a terminal, run the following command.<\/p>\n

yarn create redwood-app vr-in-redwood<\/code><\/p>\n

This bootstraps a new Redwood app with a lot of folders and files that have been auto-generated. We\u2019re going to start on the front-end so that we jump into the VR part. All of our front-end code is in the web<\/code> directory.<\/p>\n

We\u2019re going to a new page called World<\/code> and it will point to the root of the app. To create this page, we\u2019ll run this command.<\/p>\n

Setting up the world<\/h3>\n

yarn rw g page world \/<\/code><\/p>\n

After this finishes, go to the web > src > pages<\/code> directory and you\u2019ll see a WorldPage<\/code> folder. It has the code for the home page and it has a few other files to help with testing. If you take a look at Routes.js<\/code>, you\u2019ll also notice the new routes have automatically added.<\/p>\n

We need to add Aframe to the project because this is the library we\u2019re going to use to make our VR world. Import this library in the index.html<\/code> file with the following line at the end of the <head><\/code> element.<\/p>\n

<script<\/span> src<\/span>=\"https:\/\/aframe.io\/releases\/1.0.4\/aframe.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Updating the component<\/h3>\n
Using this import, we have access to the different Aframe components available in the library. We can start building our new world in the WorldPage<\/code> component. Open that file and add the following code.<\/p>\n
You can delete the import and the current contents of the return statement inside of the WorldPage<\/code> component. We won\u2019t be using any of the template code.<\/em><\/p>\n
const<\/span> WorldPage = ()<\/span> =><\/span> {\n  return<\/span> (\n    <a-scene<\/span>><\/span>\n      <a-assets<\/span>><\/span>\n        <img<\/span>\n          id<\/span>=\"room\"<\/span>\n          crossorigin<\/span>=\"anonymous\"<\/span>\n          src<\/span>=\"https:\/\/res.cloudinary.com\/milecia\/image\/upload\/room-360_nag5ns.jpg\"<\/span>\n        \/><\/span>\n      <\/a-assets<\/span>><\/span>\n      <a-sky<\/span> id<\/span>=\"image-360\"<\/span> radius<\/span>=\"10\"<\/span> src<\/span>=\"#room\"<\/span>><\/span><\/a-sky<\/span>><\/span>\n      <a-camera<\/span> look-controls-enabled<\/span>={true}<\/span>><\/span><\/a-camera<\/span>><\/span>\n    <\/a-scene<\/span>><\/span><\/span>\n  )\n}\n\nexport<\/span> default<\/span> WorldPage\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is what your WorldPage<\/code> component should look like now. We\u2019re using a few of the Aframe components.<\/p>\n