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.