Articles, Blog

Easily code a virtual reality web experience with A-Frame (WebVR)

September 23, 2019


Hello this is Benji JS I’m Benji and today I’d like to show you that anyone who can write HTML can create a virtual reality scene using the framework A-Frame. First I’m going to show you A-Frame’s website. It’s a – frame.io, and you can see on here they have some examples. We’re gonna be creating something similar to this so it is a 3d scene using Behind the scenes a frame uses three.js and if you happen to have a mobile device and a Google cardboard headset you can Pull up examples like this on your phone and tap this little button and you’ll be able to explore the world in first-person 3d Okay to get started We are going to find an A-frame CDN which I just did by searching for A-frame CDN on Google. A CDN if you don’t know is a content delivery network which is basically a way to make files available globally at high speed with high availability. Just going to click this result here and Scroll down and here are links to A-frame itself and also a minified version of a frame if you’re not familiar with minified files They have been compressed such that they’ve lost a lot of legibility, but also they can be downloaded more quickly We’re gonna be using just the regular a-frame file because if we do end up needing to debug inside of A-Frame itself It’ll make it a lot easier, so I just have an empty index.html file here I’m gonna create a script tag and set the source to the path that we just copied So what’s awesome about A-Frame as I said before is you can create a VR scene just using HTML tags? The first thing you need is the a scene tag and then inside of that you can Build other shapes like a sphere. I’m gonna back up a little bit and Hey look There’s a sphere, kind of hard to see because it’s a white sphere and a white background, but we can just use HTML attributes to Change the sphere color to whatever we want So I’m just gonna make it black for now or you know you can use hex code Or you can use any sort of styling string that you can use with CSS I think you can use with a frame as well so now here We have a red sphere and as I promised we have created a virtual-reality seen on the web Using only HTML. I know not too exciting As it is I still think it shows that a frame is a really powerful tool Now if you’re a JavaScript developer, and I’m sure most of you, are you’re probably thinking right now Huh I could set those attributes Programmatically, and that’s actually exactly what we’re gonna do next so I’m gonna add another script tag And I’m gonna set it to a local Index.js file which I’m gonna create right now and the first thing. I think I’m gonna do is Set up a little shortcut for Selecting Dom elements the API will look basically like jQuery We’re gonna use document query selector, which is the query selector that’s built into JavaScript and we’re gonna pass it a query string and We’re going to return what that returns so now if we wanted to set the color of that Sphere you can just say dollar sign A-sphere.setattribute Color and let’s say we want to make it blue we do that And hey look it’s blue now no I don’t want to have to adjust the camera every single time that we change a property I’m going to go ahead and set the XY and Z position of the sphere to a value I happen to know that will Center it in our camera view this is X Y Z now obviously just setting the color once programmatically isn’t super exciting so what I think we should do is change the color over time using Programmatic animation the way you do animation in JavaScript is with a built-in function called requestanimationframe Which will accept a callback requestanimationframe? will Fire the callback when the browser’s ready, and it can do that up to 60 times per second So we’re going to create a function here to pass as our callback. We’re just going to call it animate It’s not going to be doing much Animating as of yet, but we’ll get there and then you also want to call requestanimationframe Within your callback so that it keeps firing endlessly and again pass animate into requestanimationframe and then the last thing you need to do is call requestanimationframe and pass in your Animation function no whoops type that wrong, okay? So now it should be setting our sphere to blue 60 times a second Instead of setting into blue 60 times a second though We want to set it to a new color sixty times a second, so I’m going to create a new function called Shift hue it’s going to take an integer that represents a hue as a value from 1 to 360 degrees and It’ll just return that hue plus 1 We’re going to use modulus 360 so that the value never goes over 360 We’re gonna create a state variable for a hue started out at 0 and then every frame we’re gonna create a new hue which is going to be we’re gonna use HSL because that’s Just an intuitive way to build colors for me the first value is the hue Second value is Saturation which I’m going to put it a hundred percent and the last value is lightness which I’m going to put it 50 percent and we’re actually going to Build that string with the return value from shift Q so it’ll start out at zero then the next room It’ll be one the next frame. It’ll be two so on until three sixty at which point it will set itself back to zero The last thing to do here is Set the color well, let’s call this color not hue and we’ll set the color to that color oh We also need to be setting the value of Hugh every frame, so let’s do it this way shift hue hue And then we can pass Hue directly in here Hey check that out now our color is changing over time Another thing we might want to animate is the position so I’m going to go ahead and grab our starting position. I’ll set up a variable to hold our position We will set the position each frame And that shouldn’t change anything Yet, but then We’re gonna change this position to be a string template and We’re going to update the y-value every frame We’re gonna make it 1.5+ Let’s say math.sign and pass in date now Which will give us how many milliseconds have passed since January 1st 1970 or something like that. Let’s see what that does? It’s a little fast, let’s divide what we get back from date. Now by say a thousand and see what that does Yeah, that’s pretty nice and of course. This is a VR Application so we can look all around it if we want we can pull it up in our Google cardboard and see it in 3d It would be nice if we had some sort of a grounding effect to give the sphere some context So let’s add a plane below it, so just gonna add a plane tag here We can get rid of the color. We’re setting on our sphere since we’re setting that programmatically now We can do the same with the position actually we will need to set its rotation We’ll rotate it along the x axis the reason for that is that it’s it starts out standing upright We want it to be flat because it’s gonna be the ground and let’s set it to Black just so we can see it looks like we want to push it back in the Z position Maybe also set the width and height let’s do this first so X Y Z With the 10 Height 10 remember we’re using height because it starts out like this, and we’ve rotated it. Let’s do this And I’m gonna go ahead and set the color of our plane to match that of our sphere Might be fun to spin it around so let’s pull out the rotation And i’m gonna go ahead and capture this value call it variation That way we can reuse it with our rotation, and we’ll make this one 90 times variation let’s see what that does whoa check it out our Platform is rotating I’m just gonna do one more thing One thing that I like to do is go to jiffy.com and just grab some random image I happen to have found one I like for this you can set the texture of Your 3d objects by setting the source to an image if we reload one more time Chris farley is really into this experiment So I’m hoping that after seeing this you’re getting pretty excited about the possibilities Imagining all sorts of really cool stuff you can do with A-frame. I know I have been excited about it myself I’ve actually released kind of a funny little project where anybody can hop onto the meta verse set their texture to a jiff and Run around with other people now once again. I would love any feedback on the video Always happy to hear your thoughts and Let me know if you have any questions in the comments, and I’ll be happy to answer them. Thanks and have a good one.

26 Comments

  • Reply Sarang S September 16, 2017 at 4:07 pm

    First Comment

  • Reply Luke S. September 16, 2017 at 4:11 pm

    Second Comment

  • Reply Srujan Mhase September 16, 2017 at 4:46 pm

    This is gold👌👍

  • Reply Emmanuel Ogba September 16, 2017 at 5:34 pm

    Familiar with Aframe but didn't know you could make a sphere change color automatically, pretty cool.

  • Reply fredy mendez September 16, 2017 at 6:12 pm

    a-frame link is wrong.

  • Reply Aqib Shah September 17, 2017 at 7:45 am

    Big props for using native JS instead of including the jQuery library! Lol.

  • Reply Хангелды Илебаев September 17, 2017 at 12:45 pm

    Cool thing !

  • Reply Mohamed Fizerali September 18, 2017 at 12:55 pm

    i using Windows, i used notepad for html, when i run in mozilla or chrome it shows nothing. in address tab it shiw the directory name,filename.html. it shows only blank, pls help fixing this issues

  • Reply Hassan Abudu September 25, 2017 at 6:56 pm

    Killer video! I learned an incredible amount. I have one question for you – is there any particular reason you're using arrow notation to define functions like "shiftHue"? Is this now a JavaScript "design pattern"?

  • Reply Rico Robinson September 26, 2017 at 6:54 am

    This is awesome, I was waiting for an easy, intuïtive way to add VR to the web.
    Know any way to make it interactive? With gaze or something?

  • Reply Fer Martin September 27, 2017 at 8:49 am

    Really good intro, thank you!!

  • Reply ID3301 October 12, 2017 at 1:44 am

    $ = (queryString) => document.querySelector(queryString)
    Is pure gold thanks for this 😀

  • Reply ID3301 October 12, 2017 at 1:46 am

    I would get ill from your app when i use it with VR glasses, for sure… xD

  • Reply Elly Potamianos Illustrations January 3, 2018 at 12:50 pm

    I'm literate with computers, but I have not studied HTML. As an artist, I find this spectacular to animate designs on your own. Bringing a Surrealistic composition to life would be a dream of mine. I will look into your A-Frame when I have some time. My search that brings me to your video at this time is to find a way to post an HTML virtual exhibit to an HTML widget. It begins with "object" but requires "iframe." Without changing the HTML code, I know that there is an HTML code sentence that one can implement prior to such an "object" HTML code, but I don't know it. It seems not too many people in IT at the website I'm trying to post know either. It would help tremendously if you knew.

  • Reply Caleb Prenger April 6, 2018 at 3:29 am

    What does math.sin do?

  • Reply arber2.0 May 6, 2018 at 4:31 am

    Can you import WebVR projects to be viewed in a native VR app? I can't find any info on this

  • Reply Malorie C June 15, 2018 at 10:59 am

    This is so cool! Thanks for sharing!

  • Reply Nipho Twala August 10, 2018 at 7:26 am

    Ok, This was awesome!

  • Reply Hussain Salih September 28, 2018 at 3:19 am

    Good

  • Reply Dóndevivir Tecnologías para el Negocio Inmobiliario October 3, 2018 at 4:03 pm

    Great work. Do you know how to use a IP camera (wifi camera) with webVR javascript and HTML5 (A-Frame, Three.js) .?. I'm looking for code examples to use an external camera for smartphone.

  • Reply inpace1 October 16, 2018 at 5:37 am

    Thanks a lot ! 🙂

  • Reply Ankit Tiwari February 3, 2019 at 8:01 am

    Hey,buddy thanks for the tutorial but the ball and plane is not appearing on my computer screen.

  • Reply Null Void February 9, 2019 at 11:08 pm

    Thanks!

  • Reply Jeffrey McFarland April 13, 2019 at 5:48 pm

    Great videos both in terms of content and presenter presentation!. I'll be sharing with the group WebXR at: https://webxr.groups.io/g/main

  • Reply chad palmer July 24, 2019 at 1:26 am

    Im a beginner, that texture did broaded horizons.

  • Reply 한솔 August 20, 2019 at 8:01 am

    thank you teacher

  • Leave a Reply