{"id":28415,"date":"2022-05-30T12:11:45","date_gmt":"2022-05-30T12:11:45","guid":{"rendered":"http:\/\/build-a-virtual-world-with-user-input"},"modified":"2022-05-30T12:11:45","modified_gmt":"2022-05-30T12:11:45","slug":"build-a-virtual-world-with-user-input","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/","title":{"rendered":"Build a Virtual World with User Input"},"content":{"rendered":"

Working with virtual reality (VR) has typically involved building apps and worlds using tools like Unity and Unreal Engine and headsets. You don\u2019t need to have all of these things if you know some basic HTML and JavaScript. You can build and test your own virtual world directly in the browser without a headset.<\/p>\n

We\u2019re going to build a simple VR app using the A-frame library<\/a>. Any apps you build with this can be developed in the browser and used on any of the popular headsets. This project is going to be different from a lot of other projects because we aren\u2019t going to use a JavaScript framework. This will just be an HTML file and a JavaScript file.<\/p>\n

Make the VR world<\/h2>\n

This little VR world will consist of a few boxes falling from the sky that let you change the material for a robot figure. Let\u2019s start by creating a new folder called virtual-world<\/code>. Inside this folder, add a file called world.html<\/code> and another file called change-materials.js<\/code>. Open the world.html<\/code> file and add the following code.<\/p>\n

<html<\/span>><\/span>\n  <head<\/span>><\/span>\n    <script<\/span> src<\/span>=\"https:\/\/aframe.io\/releases\/1.3.0\/aframe.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\n  <\/head<\/span>><\/span>\n  <body<\/span>><\/span>\n    <a-scene<\/span> background<\/span>=\"color: #7BFAFA\"<\/span>><\/span> <\/a-scene<\/span>><\/span>\n  <\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
This sets up the HTML file to use A-frame and we have a scene in the <body><\/code> to get things started. The way we use A-frame elements is very similar to working with regular HTML elements. They all have attributes we can add to get different behaviors and looks. In <a-scene><\/code>, there\u2019s a background<\/code> attribute that sets the color for the entire scene or world.<\/p>\n
Now we need a way to look around and interact with the world, so we\u2019ll add a camera for the user.<\/p>\n
Add the camera and marker<\/h3>\n
Knowing where you are in a virtual world is the only way you can move around and do things. That\u2019s why the camera placement and having an indicator for where the user is looking are important. Add the following code just above the closing <a-scene><\/code> tag.<\/p>\n
<!-- set the camera for the user --><\/span>\n<a-camera<\/span> look-controls<\/span> id<\/span>=\"world-camera\"<\/span> position<\/span>=\"0 3 0\"<\/span>><\/span>\n  <a-entity<\/span>\n    cursor<\/span>=\"fuse: true; fuseTimeout: 500\"<\/span>\n    position<\/span>=\"0 0 -1\"<\/span>\n    geometry<\/span>=\"primitive: ring; radiusInner: 0.01; radiusOuter: 0.03\"<\/span>\n    material<\/span>=\"color: black; shader: flat\"<\/span>\n    id<\/span>=\"marker\"<\/span>\n  ><\/span><\/a-entity<\/span>><\/span>\n<\/a-camera<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
This tells A-frame that the camera is being used for the look-controls<\/code> that let us do things in the world. It also has a cursor as part of the camera so the user can always see where their focus is. Since we have the scene and the camera in place now, we need to put something in the world. So let\u2019s start with the boxes falling out of the sky.<\/p>\n
Add material selection boxes<\/h3>\n
There are going to be a couple of boxes that let us decide whether the robot should be made out of wood or metal. We\u2019ll use some images we have on Cloudinary as the basis for the materials. Add the following code inside of the <a-scene><\/code> tags.<\/p>\n
<!-- assets for the scene --><\/span>\n<a-assets<\/span>><\/span>\n  <img<\/span>\n    id<\/span>=\"woodTexture\"<\/span>\n    src<\/span>=\"https:\/\/res.cloudinary.com\/milecia\/image\/upload\/v1653756834\/wood_vuxmb7.jpg\"<\/span>\n    crossorigin<\/span>=\"anonymous\"<\/span>\n  \/><\/span>\n  <img<\/span>\n    id<\/span>=\"metalTexture\"<\/span>\n    src<\/span>=\"https:\/\/res.cloudinary.com\/milecia\/image\/upload\/v1653776620\/metal_ehet1g.jpg\"<\/span>\n    crossorigin<\/span>=\"anonymous\"<\/span>\n  \/><\/span>\n<\/a-assets<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Any time you want to add new textures, audio, or even 3D objects to your world, you\u2019ll have to add them as assets at the top of your scene. Here, we have 2 images as part of our assets to define the metal and wood materials for the robot. Now we can create the boxes that show off those materials. Add the following code below the assets.<\/p>\n
<!-- boxes that drop in --><\/span>\n<a-box<\/span>\n  id<\/span>=\"woodBox\"<\/span>\n  position<\/span>=\"-1 6 -3\"<\/span>\n  rotation<\/span>=\"0 45 0\"<\/span>\n  src<\/span>=\"#woodTexture\"<\/span>\n  animation__position<\/span>=\"property: object3D.position.y; to: 1;\"<\/span>\n><\/span><\/a-box<\/span>><\/span>\n<a-box<\/span>\n  id<\/span>=\"metalBox\"<\/span>\n  position<\/span>=\"2 6 -3\"<\/span>\n  src<\/span>=\"#metalTexture\"<\/span>\n  animation__position<\/span>=\"property: object3D.position.y; to: 1;\"<\/span>\n><\/span><\/a-box<\/span>><\/span>\n<a-plane<\/span>\n  position<\/span>=\"0 0 -5\"<\/span>\n  rotation<\/span>=\"-90 0 0\"<\/span>\n  width<\/span>=\"60\"<\/span>\n  height<\/span>=\"60\"<\/span>\n  color<\/span>=\"#7C992B\"<\/span>\n><\/span><\/a-plane<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We\u2019ve just added 2 boxes with src<\/code> attributes that reference the image assets we pulled from Cloudinary. They both have the animation__position<\/code> attribute which is what defines how they fall to the ground. Take note that we\u2019ve created IDs for these boxes because we\u2019ll be adding click events to them.<\/p>\n
Finally, there\u2019s a plane that defines the ground the entire world is based on. Now if you open the world.html<\/code> file in a browser, you should see something like this.<\/p>\n
\"the<\/p>\n
Build the robot<\/h3>\n
We\u2019ve built an environment for things to exist in and we have a way to update textures to wood or metal. Now it\u2019s finally time to build the robot. Below the <a-plane><\/code> tag, add the following code.<\/p>\n
<!-- robot right leg --><\/span>\n<a-box<\/span>\n  class<\/span>=\"robot\"<\/span>\n  position<\/span>=\"2 1.25 -5\"<\/span>\n  height<\/span>=\"2.5\"<\/span>\n  width<\/span>=\"0.75\"<\/span>\n  depth<\/span>=\"0.75\"<\/span>\n  color<\/span>=\"#bcc9b5\"<\/span>\n  shadow<\/span>\n><\/span><\/a-box<\/span>><\/span>\n<!-- robot left leg --><\/span>\n<a-box<\/span>\n  class<\/span>=\"robot\"<\/span>\n  position<\/span>=\"0.25 1.25 -5\"<\/span>\n  height<\/span>=\"2.5\"<\/span>\n  width<\/span>=\"0.75\"<\/span>\n  depth<\/span>=\"0.75\"<\/span>\n  color<\/span>=\"#bcc9b5\"<\/span>\n  shadow<\/span>\n><\/span><\/a-box<\/span>><\/span>\n<!-- robot waist --><\/span>\n<a-box<\/span>\n  class<\/span>=\"robot\"<\/span>\n  position<\/span>=\"1.15 2.5 -5\"<\/span>\n  height<\/span>=\"0.5\"<\/span>\n  width<\/span>=\"2.5\"<\/span>\n  depth<\/span>=\"0.75\"<\/span>\n  color<\/span>=\"#bcc9b5\"<\/span>\n  shadow<\/span>\n><\/span><\/a-box<\/span>><\/span>\n<!-- robot body --><\/span>\n<a-box<\/span>\n  class<\/span>=\"robot\"<\/span>\n  position<\/span>=\"1 3.75 -5\"<\/span>\n  height<\/span>=\"3\"<\/span>\n  width<\/span>=\"1\"<\/span>\n  depth<\/span>=\"1\"<\/span>\n  color<\/span>=\"#bcc9b5\"<\/span>\n  shadow<\/span>\n><\/span><\/a-box<\/span>><\/span>\n<!-- robot head --><\/span>\n<a-box<\/span>\n  class<\/span>=\"robot\"<\/span>\n  position<\/span>=\"1 5.75 -5\"<\/span>\n  height<\/span>=\"1.25\"<\/span>\n  width<\/span>=\"1.75\"<\/span>\n  depth<\/span>=\"1.25\"<\/span>\n  color<\/span>=\"#bcc9b5\"<\/span>\n  shadow<\/span>\n><\/span><\/a-box<\/span>><\/span>\n<!-- base of robot right arm --><\/span>\n<a-cylinder<\/span>\n  class<\/span>=\"robot\"<\/span>\n  position<\/span>=\"2.25 4.25 -5\"<\/span>\n  radius<\/span>=\"0.35\"<\/span>\n  height<\/span>=\"2\"<\/span>\n  color<\/span>=\"#bcc9b5\"<\/span>\n  segments-radial<\/span>=\"6\"<\/span>\n  rotation<\/span>=\"0 0 90\"<\/span>\n><\/span><\/a-cylinder<\/span>><\/span>\n<!-- second part of robot right arm --><\/span>\n<a-cylinder<\/span>\n  class<\/span>=\"robot\"<\/span>\n  position<\/span>=\"3.8 3.75 -5\"<\/span>\n  radius<\/span>=\"0.35\"<\/span>\n  height<\/span>=\"2\"<\/span>\n  color<\/span>=\"#bcc9b5\"<\/span>\n  segments-radial<\/span>=\"6\"<\/span>\n  rotation<\/span>=\"0 0 45\"<\/span>\n><\/span><\/a-cylinder<\/span>><\/span>\n<!-- base of robot left arm --><\/span>\n<a-cylinder<\/span>\n  class<\/span>=\"robot\"<\/span>\n  position<\/span>=\"-0.25 4.25 -5\"<\/span>\n  radius<\/span>=\"0.35\"<\/span>\n  height<\/span>=\"2\"<\/span>\n  color<\/span>=\"#bcc9b5\"<\/span>\n  segments-radial<\/span>=\"6\"<\/span>\n  rotation<\/span>=\"0 0 90\"<\/span>\n><\/span><\/a-cylinder<\/span>><\/span>\n<!-- second part of robot left arm --><\/span>\n<a-cylinder<\/span>\n  class<\/span>=\"robot\"<\/span>\n  position<\/span>=\"-1.8 5 -5\"<\/span>\n  radius<\/span>=\"0.35\"<\/span>\n  height<\/span>=\"2\"<\/span>\n  color<\/span>=\"#bcc9b5\"<\/span>\n  segments-radial<\/span>=\"6\"<\/span>\n  rotation<\/span>=\"0 0 45\"<\/span>\n><\/span><\/a-cylinder<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We\u2019re using a lot of A-frame primitive shapes to make this robot so you can have a lot of fun with this later. You might also consider making a 3D object in Blender<\/a> or you might try some of the free 3D objects here<\/a> or here<\/a>. We\u2019ll keep it pretty basic here with just the built-in A-frame primitives.<\/p>\n
All of the shapes have essentially the same attributes, just changed to handle the positioning of robot parts correctly. Once you have all of the robot code in place, you should see something like this when you refresh the page.<\/p>\n
\"robot<\/p>\n
All that\u2019s left is implementing the functionality to update the robot\u2019s material when one of the boxes is selected.<\/p>\n
Add an A-frame component<\/h3>\n
We\u2019ll update the robot\u2019s material through an A-frame component. Open the change-materials.js<\/code> file and add the following code.<\/p>\n
AFRAME.registerComponent(\"change-materials\"<\/span>, {\n  init<\/span>: ()<\/span> =><\/span> {\n    const<\/span> woodBox = document<\/span>.querySelector(\"#woodBox\"<\/span>);\n    const<\/span> metalBox = document<\/span>.querySelector(\"#metalBox\"<\/span>);\n    const<\/span> robotBody = document<\/span>.querySelectorAll(\".robot\"<\/span>);\n\n    woodBox.addEventListener(\"click\"<\/span>, () => {\n      robotBody.forEach((part<\/span>) =><\/span> {\n        part.setAttribute(\"src\"<\/span>, \"#woodTexture\"<\/span>);\n      });\n    });\n\n    metalBox.addEventListener(\"click\"<\/span>, () => {\n      robotBody.forEach((part<\/span>) =><\/span> {\n        part.setAttribute(\"src\"<\/span>, \"#metalTexture\"<\/span>);\n      });\n    });\n  },\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This creates a new A-frame component called change-materials<\/code> that we can reference on elements in the scene. In the init<\/code> function, we\u2019re getting the elements in the scene based on their IDs and class. This is much like we would do in a regular web app. Next, we add some click event listeners to the metal and wood boxes that will update the src<\/code> for each part of the robot\u2019s body.<\/p>\n
We do need to add references to this change-materials<\/code> component in the HTML file. Add the following import to the <head><\/code> tag.<\/p>\n
<script<\/span> src<\/span>=\"change-materials.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Now we have the A-frame component accessible to the scene. We\u2019ll need to add this as an attribute to the wood and metal boxes. Update those elements like this.<\/p>\n
<a-box<\/span>\n  id<\/span>=\"woodBox\"<\/span>\n  position<\/span>=\"-1 6 -3\"<\/span>\n  rotation<\/span>=\"0 45 0\"<\/span>\n  src<\/span>=\"#woodTexture\"<\/span>\n  animation__position<\/span>=\"property: object3D.position.y; to: 1;\"<\/span>\n  change-materials<\/span>\n><\/span><\/a-box<\/span>><\/span>\n<a-box<\/span>\n  id<\/span>=\"metalBox\"<\/span>\n  position<\/span>=\"2 6 -3\"<\/span>\n  src<\/span>=\"#metalTexture\"<\/span>\n  animation__position<\/span>=\"property: object3D.position.y; to: 1;\"<\/span>\n  change-materials<\/span>\n><\/span><\/a-box<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The only difference is that now these boxes have the change-materials<\/code> attribute. This is how A-frame works with components so now these elements will have the correct event listeners. If you reload the page and move the marker over one of the boxes, your robot should look like one of these.<\/p>\n
\"metal<\/p>\n
\"wood<\/p>\n
That\u2019s all! Now you can add more assets or more user interactions. If you have a VR headset, I\u2019d encourage you to try it out there as well!<\/p>\n
Finished Code<\/h2>\n
You can find the code for this project in the virtual-world<\/code> folder of this repo<\/a> or you can check it out in this Code Sandbox<\/a>.<\/p>\n
<CodeSandBox\ntitle=\u201coptimistic-hellman-5kuetw\u201d\nid=\u201coptimistic-hellman-5kuetw\u201d\n\/><\/p>\n
Conclusion<\/h2>\n
Working with VR takes a number of different skills which is part of the fun of it. From building assets, deciding on textures, and creating a whole experience for users, you can go in a lot of different directions. This is another creative way to practice your JavaScript or test out a new career path.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28416,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,145,370,177,371],"class_list":["post-28415","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-html5","tag-image","tag-javascript","tag-under-review"],"acf":[],"yoast_head":"\nBuild a Virtual World with User Input<\/title>\n<meta name=\"description\" content=\"If you already know JavaScript, building a VR world doesn't mean you need to learn a different language. In this tutorial, we'll build a simple. interactive VR world that users can do things in with A-frame.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a Virtual World with User Input\" \/>\n<meta property=\"og:description\" content=\"If you already know JavaScript, building a VR world doesn't mean you need to learn a different language. In this tutorial, we'll build a simple. interactive VR world that users can do things in with A-frame.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-30T12:11:45+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924567\/Web_Assets\/blog\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Build a Virtual World with User Input\",\"datePublished\":\"2022-05-30T12:11:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924567\/Web_Assets\/blog\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"HTML5\",\"Image\",\"Javascript\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/\",\"name\":\"Build a Virtual World with User Input\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924567\/Web_Assets\/blog\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d.jpg?_i=AA\",\"datePublished\":\"2022-05-30T12:11:45+00:00\",\"description\":\"If you already know JavaScript, building a VR world doesn't mean you need to learn a different language. In this tutorial, we'll build a simple. interactive VR world that users can do things in with A-frame.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924567\/Web_Assets\/blog\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924567\/Web_Assets\/blog\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d.jpg?_i=AA\",\"width\":6000,\"height\":4000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build a Virtual World with User Input\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build a Virtual World with User Input","description":"If you already know JavaScript, building a VR world doesn't mean you need to learn a different language. In this tutorial, we'll build a simple. interactive VR world that users can do things in with A-frame.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/","og_locale":"en_US","og_type":"article","og_title":"Build a Virtual World with User Input","og_description":"If you already know JavaScript, building a VR world doesn't mean you need to learn a different language. In this tutorial, we'll build a simple. interactive VR world that users can do things in with A-frame.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-05-30T12:11:45+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924567\/Web_Assets\/blog\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/"},"author":{"name":"","@id":""},"headline":"Build a Virtual World with User Input","datePublished":"2022-05-30T12:11:45+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924567\/Web_Assets\/blog\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d.jpg?_i=AA","keywords":["Guest Post","HTML5","Image","Javascript","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/","name":"Build a Virtual World with User Input","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924567\/Web_Assets\/blog\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d.jpg?_i=AA","datePublished":"2022-05-30T12:11:45+00:00","description":"If you already know JavaScript, building a VR world doesn't mean you need to learn a different language. In this tutorial, we'll build a simple. interactive VR world that users can do things in with A-frame.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924567\/Web_Assets\/blog\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924567\/Web_Assets\/blog\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d.jpg?_i=AA","width":6000,"height":4000},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-virtual-world-with-user-input\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build a Virtual World with User Input"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924567\/Web_Assets\/blog\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d\/5fb4a10dfc6c7fd1a4d37f18b1cf1f47d9eb114d-6000x4000-1_284160497d.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28415"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28415\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28416"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}