{"id":2548,"date":"2020-06-20T11:38:18","date_gmt":"2020-06-20T11:38:18","guid":{"rendered":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=2548"},"modified":"2020-06-20T11:49:22","modified_gmt":"2020-06-20T11:49:22","slug":"14-aframe-io-resources-for-your-webxr-project","status":"publish","type":"post","link":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/14-aframe-io-resources-for-your-webxr-project\/","title":{"rendered":"14 AFrame.IO Resources For Your WebXR Project"},"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=https%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2F14-aframe-io-resources-for-your-webxr-project%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\/11\/aframe-logo.png\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-2260\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2017\/11\/aframe-logo.png\" alt=\"AFrame Logo\" width=\"512\" height=\"458\" srcset=\"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2017\/11\/aframe-logo.png 512w, https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2017\/11\/aframe-logo-300x268.png 300w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/a><\/p>\n<p>I&#8217;m a big fan of the work of the <a href=\"http:\/\/aframe.io\">AFrame.IO<\/a> community.\u00a0 Thank you to <a href=\"https:\/\/www.mozilla.org\/en-US\/\">Mozilla<\/a>, <a href=\"https:\/\/github.com\/dmarcos\">Diego Marcos<\/a>, <a href=\"https:\/\/github.com\/ngokevin\">Kevin Ngo<\/a>, and <a href=\"https:\/\/github.com\/donmccurdy\">Don McCurdy<\/a> for their influence and effort to build a fun and productive platform for building WebVR experiences.\u00a0 \u00a0In this post, I&#8217;ve collected a few Github repositories and resources to support you in building AFrame experiences.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/6b_9VbQOGCU\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong>Talk Abstract:<\/strong>\u00a0In the next few years, augmented reality and virtual reality will continue to provide innovations in gaming, education, and training. Other applications might include helping you tour your next vacation resort or explore a future architecture design. Thanks to open web standards like WebXR, web developers can leverage their existing skills in JavaScript and HTML to create delightful VR experiences. During this session, we will explore A-Frame.io, an open source project supported by Mozilla enabling you to craft VR experiences using JavaScript and a growing ecosystem of web components.<\/p>\n<p><a href=\"https:\/\/github.com\/ngokevin\/kframe\">https:\/\/github.com\/ngokevin\/kframe<\/a><br \/>\nKevin&#8217;s collection of A-Frame components and scenes.<\/p>\n<p><a href=\"https:\/\/webvr.donmccurdy.com\/\">https:\/\/webvr.donmccurdy.com\/<\/a><br \/>\nAwesome WebXR from Don McCurdy<\/p>\n<p><a href=\"https:\/\/github.com\/feiss\/aframe-environment-component\">https:\/\/github.com\/feiss\/aframe-environment-component<\/a><br \/>\nInfinite background environments for your A-Frame VR scene in just one file.<\/p>\n<p><a href=\"https:\/\/github.com\/aframevr\/aframe-school\">https:\/\/github.com\/aframevr\/aframe-school<\/a><br \/>\nInteractive workshop and lessons for learning A-Frame and WebVR.<\/p>\n<p><a href=\"https:\/\/aframe.io\/aframe-registry\/\">https:\/\/aframe.io\/aframe-registry\/<\/a><br \/>\nOfficial registry of cool AFrame stuff<\/p>\n<p><a href=\"https:\/\/github.com\/donmccurdy\/aframe-physics-system\">https:\/\/github.com\/donmccurdy\/aframe-physics-system<\/a><br \/>\nComponents for A-Frame physics integration, built on CANNON.js.<\/p>\n<p><a href=\"https:\/\/aframe.io\/blog\/webxr-ar-module\/\">Experiment with AR and A-Frame<\/a><br \/>\nAFrame now has support for ARCore.  Paint the real world with your XR content!  Using FireFox Reality for iOS, you can leverage ARKit on your favorite IPad or IPhone.<\/p>\n<p><a href=\"https:\/\/github.com\/michaelprosario\/aframe\">https:\/\/github.com\/michaelprosario\/aframe<\/a><br \/>\nI&#8217;ve collected a small collection of demo apps to explore some of the core ideas of AFrame.<\/p>\n<p><a href=\"https:\/\/github.com\/supermedium\/superframe\/tree\/master\/components\/layout\/\">AFrame Layout Component<\/a><br \/>\nAutomatically positions child entities in 3D space, with several layouts to choose from.<\/p>\n<p><a href=\"https:\/\/github.com\/supermedium\/superframe\/tree\/master\/components\/animation\/\">Animation<\/a><br \/>\nAn animation component for A-Frame using anime.js.  Also check out the animation-timeline component for defining and orchestrating timelines of animations.<\/p>\n<p><a href=\"https:\/\/github.com\/wmurphyrd\/aframe-super-hands-component\">Super Hands<\/a><br \/>\nAll-in-one natural hand controller, pointer, and gaze interaction library for A-Frame.  Seems to work well with Oculus Quest.<\/p>\n<p><a href=\"https:\/\/github.com\/archilogic-com\/aframe-gblock\">A-Frame Component loading Google Poly models from Google Poly<br \/>\n<\/a> Component enables you to quickly load 3D content from Google Poly<\/p>\n<p><a href=\"https:\/\/github.com\/supereggbert\/aframe-htmlembed-component\">aframe-htmlembed-component<\/a><br \/>\nHTML Component for A-Frame VR that allows for interaction with HTML in VR. Demo<\/p>\n<p><a href=\"https:\/\/github.com\/nylki\/aframe-lsystem-component\">https:\/\/github.com\/nylki\/aframe-lsystem-component<\/a><br \/>\nL-System\/LSystem component for A-Frame to draw 3D turtle graphics. Using Lindenmayer as backend.<\/p>\n<p>Thanks to the amazing work from Mozilla, WebXR usability has improved leveraging specialized FireFox browsers<br \/>\n&#8211; <a href=\"https:\/\/mixedreality.mozilla.org\/firefox-reality\/\">FireFox Reality<\/a><br \/>\n&#8211; <a href=\"https:\/\/blog.mozvr.com\/firefox-reality-hololens\/\">FireFox Reality for HoloLens 2<\/a> &#8211; For raw ThreeJs scripts, it works well.  I&#8217;m still doing testing on AFrame scenes.<\/p>\n<p>If you live in Central Florida or Orlando, consider checking out our local chapter of Google developer Group.\u00a0 We enjoy building a fun creative community of developers, sharing ideas, code, and supporting each other in the craft of software.\u00a0 Learn more about our community here:<\/p>\n<p><a href=\"http:\/\/gdgcentralflorida.org\"><strong>GDGCentralFlorida.org<\/strong><\/a><\/p>\n<p><strong>Top Stories on InspiredToEducate.NET<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=1319\">Easy Data Visualization with Google Charts and JavaScript<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=795\">Learn to Build Your Own Conversational Bot using ChatScript<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/aframe-building-webvr-experiences-with-html-and-javascript\/\">AFrame: Building WebVR experiences with HTML and JavaScript<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/sonic-pi-sound-synth-application-for-learning-coding-and-music\/\">Sonic-PI: Sound synth application for learning coding and music<\/a><\/li>\n<li><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/using-android-javascript-and-arduino-to-control-your-robot-makered-javascript-android\/\">Using Android, JavaScript, and Arduino to control your robot.<\/a><\/li>\n<\/ul>\n\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2F14-aframe-io-resources-for-your-webxr-project%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>I&#8217;m a big fan of the work of the AFrame.IO community.\u00a0 Thank you to Mozilla, Diego Marcos, Kevin Ngo, and Don McCurdy for their influence and effort to build a fun and productive platform for building WebVR experiences.\u00a0 \u00a0In this post, I&#8217;ve collected a few Github repositories and resources to [&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,16,23,11,8],"tags":[],"_links":{"self":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/2548"}],"collection":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/comments?post=2548"}],"version-history":[{"count":5,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/2548\/revisions"}],"predecessor-version":[{"id":2553,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/2548\/revisions\/2553"}],"wp:attachment":[{"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/media?parent=2548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/categories?post=2548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/tags?post=2548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}