{"id":2244,"date":"2017-08-19T11:44:11","date_gmt":"2017-08-19T11:44:11","guid":{"rendered":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=2244"},"modified":"2017-08-19T11:44:11","modified_gmt":"2017-08-19T11:44:11","slug":"aframe-building-webvr-experiences-with-html-and-javascript","status":"publish","type":"post","link":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/aframe-building-webvr-experiences-with-html-and-javascript\/","title":{"rendered":"AFrame: Building WebVR experiences with HTML and JavaScript"},"content":{"rendered":"\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Faframe-building-webvr-experiences-with-html-and-javascript%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n<p><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2017\/08\/aframeWorld.png\"><img loading=\"lazy\" class=\"alignnone wp-image-2245 size-large\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2017\/08\/aframeWorld-1024x576.png\" alt=\"Sample AFrame experience\" width=\"608\" height=\"342\" srcset=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2017\/08\/aframeWorld-1024x576.png 1024w, http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2017\/08\/aframeWorld-300x169.png 300w, http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2017\/08\/aframeWorld-768x432.png 768w, http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2017\/08\/aframeWorld.png 1366w\" sizes=\"(max-width: 608px) 100vw, 608px\" \/><\/a><\/p>\n<p>Hey, makers and web developers! Looking for a fun weekend coding challenge? In this post, I wanted to introduce you to a simple tool called A-Frame for building VR experiences using HTML and JavaScript. \u00a0Originally sponsored by the <a href=\"https:\/\/www.mozilla.org\/en-US\/foundation\/\">Mozilla foundation<\/a>, A-frame enables you to quickly build WebVR scenes, panoramas, games, or data visualizations. \u00a0With very basic HTML skills, you can build delightful VR experiences. \u00a0I believe you&#8217;ll find the declarative or tag based coding style very approachable. \u00a0For advanced developers, you can drop to the JavaScript and <a href=\"https:\/\/threejs.org\/\">ThreeJS<\/a> abstraction layers to customize the experiences in more detail.<\/p>\n<p>Don&#8217;t have an expensive VR rig? No problem! \u00a0AFrame supports platforms as simple as desktops, mobile phones or Google Cardboard. \u00a0I find it impressive that the AFrame platform supports advanced rigs like Vive and Rift. \u00a0 \u00a0I&#8217;m looking forward to seeing support for Microsoft Mixed Reality too.<\/p>\n<p>Here&#8217;s a quick <a href=\"https:\/\/glitch.com\/~aframe\">&#8220;hello world&#8221; experience for you\u00a0to test drive<\/a>.<\/p>\n<p>Projects Built with AFrame<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p dir=\"ltr\" lang=\"en\">A quick WIP preview of my house configurator, created using <a href=\"https:\/\/twitter.com\/aframevr\">@aframevr<\/a>.<a href=\"https:\/\/twitter.com\/hashtag\/webvr?src=hash\">#webvr<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/archviz?src=hash\">#archviz<\/a> <a href=\"https:\/\/t.co\/CAFfXuuzTT\">pic.twitter.com\/CAFfXuuzTT<\/a><\/p>\n<p>\u2014 Mark Lane (@Convert3D) <a href=\"https:\/\/twitter.com\/Convert3D\/status\/881715947114975233\">July 3, 2017<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p dir=\"ltr\" lang=\"en\">Augmented Reality in 10 Lines of HTML<\/p>\n<p>Here is the video that goes with this post: <a href=\"https:\/\/t.co\/NA5QYUCKSP\">https:\/\/t.co\/NA5QYUCKSP<\/a><\/p>\n<p>This seems super approachable ? <a href=\"https:\/\/t.co\/XSbLvwcmLz\">pic.twitter.com\/XSbLvwcmLz<\/a><\/p>\n<p>\u2014 The Practical Dev (@ThePracticalDev) <a href=\"https:\/\/twitter.com\/ThePracticalDev\/status\/851535164102418432\">April 10, 2017<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p dir=\"ltr\" lang=\"en\">Get off the struggle bus ?, enter the <a href=\"https:\/\/twitter.com\/aframevr\">@aframevr<\/a> School ?! Interactive lessons for learning <a href=\"https:\/\/twitter.com\/hashtag\/webvr?src=hash\">#webvr<\/a>. For all ages! <a href=\"https:\/\/t.co\/ui3swhj984\">https:\/\/t.co\/ui3swhj984<\/a> <a href=\"https:\/\/t.co\/yx564kEdhV\">pic.twitter.com\/yx564kEdhV<\/a><\/p>\n<p>\u2014 A-Frame (@aframevr) <a href=\"https:\/\/twitter.com\/aframevr\/status\/847503373565739008\">March 30, 2017<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p><strong>How can you get started with AFrame today?<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/aframe.io\/docs\/0.6.0\/introduction\/\">Install instructions from Aframe.io<\/a><\/li>\n<li><a href=\"https:\/\/aframe.io\/docs\/0.6.0\/introduction\/html-and-primitives.html\">Documentation for basic shapes<\/a><\/li>\n<li><a href=\"https:\/\/aframe.io\/docs\/0.6.0\/guides\/building-a-basic-scene.html\">Let&#8217;s make a scene!<\/a><\/li>\n<\/ul>\n<p>Make sure to check out the impressive community of plugins on the <a href=\"https:\/\/aframe.io\/aframe-registry\/\">AFrame registry<\/a><\/p>\n<p>If you&#8217;re in the Florida area, I would like to invite you to the DevFest Florida 2017. \u00a0All the Google developer groups in Florida have combined forces to throw an awesome developer party and learning conference. \u00a0 Join us for a great weekend of networking, learning, and hacking! Learn more at <a href=\"https:\/\/devfestflorida.org\/\">https:\/\/devfestflorida.org\/<\/a>.<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"en\">\n<p dir=\"ltr\" lang=\"en\">Learn how to build <a href=\"https:\/\/twitter.com\/hashtag\/WebVR?src=hash\">#WebVR<\/a> experience with <a href=\"https:\/\/twitter.com\/aframevr\">@aframevr<\/a> and <a href=\"https:\/\/twitter.com\/michaelrosario\">@michaelrosario<\/a> at <a href=\"https:\/\/twitter.com\/hashtag\/DevFestFL?src=hash\">#DevFestFL<\/a>. Get your discounted ticket: <a href=\"https:\/\/t.co\/edN3dc6Kvw\">https:\/\/t.co\/edN3dc6Kvw<\/a> <a href=\"https:\/\/t.co\/lSTNafbFnK\">pic.twitter.com\/lSTNafbFnK<\/a><\/p>\n<p>\u2014 ?DevFest Florida (@DevFestFlorida) <a href=\"https:\/\/twitter.com\/DevFestFlorida\/status\/896871200512659456\">August 13, 2017<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Faframe-building-webvr-experiences-with-html-and-javascript%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n","protected":false},"excerpt":{"rendered":"<p>Hey, makers and web developers! Looking for a fun weekend coding challenge? In this post, I wanted to introduce you to a simple tool called A-Frame for building VR experiences using HTML and JavaScript. \u00a0Originally sponsored by the Mozilla foundation, A-frame enables you to quickly build WebVR scenes, panoramas, games, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,24,15,16,11,8],"tags":[],"_links":{"self":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/2244"}],"collection":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/comments?post=2244"}],"version-history":[{"count":1,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/2244\/revisions"}],"predecessor-version":[{"id":2246,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/2244\/revisions\/2246"}],"wp:attachment":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/media?parent=2244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/categories?post=2244"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/tags?post=2244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}