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

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


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.

27 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *