 Okay, good morning and welcome to this week's edition of Encompass Live. I am your host, Krista Porter, here at the Nebraska Library Commission. Encompass Live is the commission's weekly webinar series where we cover a variety of topics that may be of interest to libraries. The show is usually, I'll say, broadcast live on Wednesday mornings at 10 a.m. central time. But if you're unable to join us on Wednesdays, that's fine. We do record the show as we are this morning and then post it to the archives on our website. And I'll show you at the end of today's show where you will find those archives. I say usually because today we are actually doing this live on Monday, December 23rd. This was normally our show would be on Wednesday, as I said. But this year, Wednesday happens to fall on the Christmas Day holiday. The Nebraska Library Commission, for those of you that might not be aware, is the state agency for libraries in Nebraska. So the state of Nebraska is closed on Wednesday, of course, for the holiday. So we couldn't broadcast then. And then we worked, and then so we bumped it back to Tuesday, no problem. And then last week we were told we were getting an additional holiday. The state workers, we are giving the same holidays as federal workers. And it was announced that the federal workers would have also Tuesday off as a holiday. So the show got bumped back to Monday. So we're here on a Monday this morning. Everyone's very confused, but we're here to do the show, no problem. For those of you who watch this on recording, none of this matters. Because you're watching it whenever it works for you. It's true. We do a mixture of things here on M Compass Lives, book reviews, interviews, mini-training sessions, demos of services and products. We bring in librarians from across the state and across the country to show off cool things they're doing. We do presentations here from Nebraska Library Commission staff as well for things that we are doing locally, services and products we're providing. Or just things that we want to share. And that's what we have today is actually, this is our monthly show, our new special monthly episodes that we do now of pretty sweet tech with Amanda Sweet. Our technology innovation librarian here at the Nebraska Library Commission. So once a month, usually the last Wednesday of the month, although this month it got switched around because of holidays and things, things happen. But at least once a month, coming in to definitely talk about something techy related. So if you are a tech type person looking for a pretty sweet techs coming up, that would be your thing to do definitely. It's not only those days, we do other shows that could potentially be that. But she'll always be there, she'll always be there, she'll always be there. She'll always be coming on once a month to talk about these kind of things. So today's show is being recorded. If you have any questions, comments, thoughts throughout the show, type into the questions section of the GoToWebinar interface. I'm monitoring that here on my laptop. And we can answer any questions, comments you have. And today, we're going to, as the title of the session says, watch me build a virtual world using A-Frame. I have no idea what that means. I know virtual worlds that I do know. I play in them in games and things like I've done second life and whatnot. But as far as A-Frame, I know as it looks like on that picture there, it's a house. Yeah. So I'm just going to hand over to you and Maddy to explain to us what the heck we're doing today. What's this going to be? I think it's going to be fun. It's shining. It is. Yeah. And it's very pink. Is it pink? It's like a pinkish reddish. Yeah. It's kind of hard to tell. We'll go magenta. Sure. I can go with that. Yeah. All right. So A-Frame, what's up with that? So A-Frame, if you've ever used like a virtual reality headset, this is one way that you can build that world. I was just said, we were just doing that. Well, I didn't yesterday. We had a gaming afternoon and night evening at a friend's house. And they had that. Nice. Yeah. And I've used them before too at events, library events actually. Because this is the kind of thing that some libraries are promoting, sharing, getting some of this equipment for people to come in and use either just to learn things. But I don't know about creating their own stuff. That's happening yet. Oh, but it will. It will, yeah. So basically, you've probably already heard a bit about virtual reality before. But just in case you haven't, it's the one where you can put on the headset and it blocks out the rest of the world. And then you're fully immersed into your own virtual world. And this A-Frame is, it's kind of cool, because you don't actually have to have a headset to be able to experience a 360 world. You can also embed it just on the web. So this is all HTML based. So you can actually, they make it really easy to just insert it into a regular web page. And it shows up just as like a little viewer. And then you can take your mouse and click and move around. So I'm going to interact with whatever's been created. Oh, did we ever change the battery in this mouse? I don't know. It's just a little jumpy. OK. Failed to see better if you look on the screen here too. So I clicked on Get Started here. And I'm going to go to this showcase here to give you an idea of what other people have made using this. So I'm going to click Open Soundboxing WebVR. And you can see you can move and navigate around. And you can go full 360 here. And the funny thing is they did a whole bunch of surveys of people that interact with these environments online. And they found out most people only navigate about 180 degrees. But it goes all the way. Yeah. And that's when you see a lot of these developers, they start to get lazy because they know. Nobody's going to look behind them. So a lot of the content is in that first 180 degrees. And it's easier to render that way. And it doesn't slow down your computer as much. So why develop a bunch of content for stuff that only half the population is going to spin around and look at? And these are basically just little labels that pop up. And they make it super easy to put these into A-frame because it's just one line of code and then some text. And then you line it up together. So now I'm going to pop out of this showcase. And I'm going to go into, oh, this is a fun one, too. I'm just going to click on this for fun. It's with your hands. And this is just like an additional tool that was created. And it's just kind of a fun one to look at. So I'm going to go into the A-frame main page. And to get started with actually building this stuff, you want to go to the Get Started button. So now on this left-hand side, when you want to actually take a quick sift through the introduction about how all this stuff works. So this explains that it is HTML-based. And if you've built websites and stuff before, the HTML will probably look pretty familiar. The head looks familiar, and the body tags look familiar. And then this little script source, this is pulling all the information that the computer needs to know to get A-frame up and running. So to insert this into your main page, this is mainly all you need. You pop that into your header and you're golden. And now this is where it gets different, the scene section. All of the action will happen in a scene. Makes sense. Yeah, like a movie or a TV show, OK? And the scene will always wind up in your body tags, just like your P tags, header tags, and everything like that in a regular web page. Main content of whatever your page is about, yeah. And then so this is just to get stuff to show up on your screen. And so this would actually look like I'm going to go into Glitch here. So there's a whole bunch of different coding environments that you could use for this because it is just HTML. But the one that they recommend is something called Glitch because it is really user friendly. And it's also, they make it really easy to share projects with multiple different people. And so we're going to go into the show here. And this is what it actually looks like on the screen. So you see, they built just this little thing. Some basic shapes. But you can navigate the whole way around. So right now we have a blank slate. So what we're going to do right now is start building little platform images so that you have another one of these located over here and then over here. But this next one is going to be just a half up here. So it's going to be almost like a Super Mario Brothers kind of thing. You know how Mario has to run along and then he jumps across on little platforms. So that's sort of the environment that we're going to go for here. So we're going to get the circle of one platform, then the cylinder on the next one, and the box on the next one. And we're going to change the colors of all of these so that they mesh in together with our background. And we're about to give it kind of a shiny background. Cool. So now we're going to go into this is a shared. This is what we're going to be going for here. So this is going to be our new background here. So the background, this particular background is a real picture of a real place. So someone actually took a 360 video. This is actually in some city I can't remember the name of in New Jersey. And here's our scene. Here's this. Right here. Well, we're inserting into it. So now we're going to go up into our code section and I'll show you how I did this. So I'm going to go to View Source. And then I'm going to click this Remix to Edit button in the upper right hand corner. And if you don't click this Remix to Edit button, none of your changes are going to show up and nothing is actually going to take effect. So got it. And now to get to our actual source, we're going to click on this index page. And the index page is kind of like that main home page, just like you would for regular website. So now this is what our actual code looks like. So remember we had the box, the sphere, the cylinder. And we have that wide plane section there. The floor and the ground. So this is how all that stuff shows up. So these are different entities that would show up in there. And A-frame already pre-formatted a whole bunch of different common shapes for us. And then they just use it and modify for whatever you're doing. Which is kind of handy here. So if you go down here into A-frame's kind of documentation thing, you have, and then we'll scroll all the way down here to our primitives. And this is what A-frames are done for us. There we go, all the basic shapes that you can just use. Curved images, ring, sky. They even have a little tourist, that little loop thing, just handy for you. Cool. And so they just, they made this about as user-friendly as you can possibly get. So look for the kind of thing you want to make and use it from there. And you can also even, so I'm going to grab a cone here. And so you can type this out manually or you can just copy and paste it. And the copy and paste route is what I'm going to go with now because typos. Yeah, that's so much easier. Yeah, definitely. So I'm just going to go back into our index here. I have a tendency to like forget one of the little carrot things and it just breaks and I was like, oh, that's not right at all. So now what I want is to get this cone. So we're going to go into, our goal is to get the cone on top of the cylinder and we're going to make like a little mini house thing. Yeah, okay, makes sense. So I'm going to go into show, but I'm going to show it next to the code here. And then we're going to just hide this here. So we have a little extra space on your, depending on the size of your monitor, this could be like the width, it could be a lot easier to see everything. We're working on the pretty standard size here. Yeah. So now we can kind of see, and I'm going to take out this, the text here, because we don't really need it. Hello world, yeah. That was actually something that I added later. So this was a show that you can do, yeah. Pretty much. So we'll pop out that. So now our hello world automatically disappears. And now we're going to go into our cylinder and we have a cone in here, but it's not showing up. And it's because of this. Can you see this position thing here? Yes. This shows where in the grid, it's going to show up on our X, Y, and Z axes. So that's what we want to add here, because right now our cone is just floating in some random place. And we don't even know where it, we might be able to find where it is, and it might even have popped in like. Oh, is that it right below us? Yeah, that's it. We're standing at home. All right. So now we're going to go back into where our regular shapes are, and we're going to change the location of this cone. And we're going to match it to the location of our cylinder, so that it matches up. So I'm going to go into our cylinder and I'm just going to copy and paste that position. And there is no position thing on the cone when you first put it in. It just just all puts it like on top of you or where you are, I guess, basically. Yeah. Until you tell it where to go. And that's kind of like their default basic, and then you're just supposed to customize it. Sure. So now you see we have a giant mass of cone. It's got a skirt. And it just ate our cylinder. That's okay. Everything can be modified though. Yeah. So now we can make changes to this positioning and we can find out how that's going to impact it. So we do this one, we'll change it to a 1.2. So now we know that that first one shifts it over to the side. So we don't want that. And then we'll do the 0.75. We'll turn that into a one. Nope. It totally buried it. And but is it doing what we want here? I just want to see if it moved it up at all. And it looks like it actually did someone. Yeah. You don't see the yellow anymore. So now we're going to go to three. So now we have floating cone. There's a lot of playing around with it. Let's just figure out which fits best. Yeah. And that's why it'll help to jot down the original size. Oh, so you know where you started from? Yeah. Yeah. So that looks better. Yeah. It almost looks like a mushroom. We should just make a mushroom. I'm actually going to keep this and we're going to turn it into a mushroom. So we're going to make this red. So that's the thing too. I was wondering about the colors. Oh yeah. Because I noticed when this, when we brought in the cone, it said color equals tomato. But some of the other ones use the the hex code for color. So whichever way you can actually type in, because that's one of the things I have annoyance with, with doing websites and stuff is, what is the damn code for this one? And you know, I bring up the, here's the color wheel. I'll just click on things so it looks like the right one. But it's hard to know. And then it pops in the right code. But you can actually just type in words of what color you think you want it to be. And so this shade of red, it might not be exactly what you're going for. Right. And then you would still have to do some modifying potentially if you wanted a particular. But so we have our, so our cylinder is this color. So let's grab this color. Copy. So now let's say that we want a color that really meshes with that one. So this is a color scheme generator and it's coolers.co. So we'll start the generator. It's free. And I heart this website. I use it all the time. And now I don't want to watch a tutorial. So now here are those hex colors that are down here. So now we're going to just edit it. And I'm just copy and pasted in and now we have that yellow. So now I'm going to hit this lock button that's going to lock this color into place. Hit the space bar key. And now it generates colors that are within the color palette that matches the lock. So it's things that will be compatible and not clashing with that color. Oh, nice. And then we can just grab whatever color. So if you're not a graphic designer who knows these kind of things from like extensive training and education. Cause I would be like, well, I like these colors but I don't know if they look good together. This will, don't tell our graphic designers that we can just, that we don't need them anymore. But this will tell you the kind of things that might match. It's kind of cool. And I think this one looks pretty decent. So let's just try this one. Cause I know what I like, but I don't know if it works sometimes. Yeah, right. And then like, if you, if you change the background color that's behind both of these and it changes the look of it. But then, so then you can grab your yellow and then lock in your background color and then it'll mesh up with everything. Things that match with both of those. Yeah. So now if we lock in this one, we can change our circle shape or... Ooh, one of the things, really purple. Oh, it's kind of a... So you just keep heating the space where it'll change and give you different colors so you can see different potential combinations. And like the really light shades are great for text colors on a dark background. Sure. So I think I already copy and pasted this, but I'll do it again. So I'm gonna copy this, then we'll go back into our main code. And now I wanna change the color of our cone. And instead of just being the generic red, we'll grab that hex color and it's showing it. So you notice how I put in the color, but it's not appearing right now. No. The reason is we need that hash. Oh, right, yeah. So now with the hash, it knows it's looking for a color and it pops in there. Nice. So now we wanna actually move this into a different area. So now we're going to grab our cylinder and grab our cone. And these are going to be staying on this one platform. So cylinder, cone, plane. Those are all going to stay. And we're going to grab the box. The blue box there, yep. So we're just gonna cut that. And we're still in the same scene. We're just gonna go into a different area here. So now I'm going to paste that and we wanna shift its location. So now we're gonna move this over. So remember, we wanted it to be up higher and over. So now let's try, let's find out which way this is gonna be moving. So now this one is gonna be shifting right. And we want it way right. So we're gonna do six. And let's see where our box landed. Oh, there it is out there. So now let's shift it on over this way. And let's see which way this will go. It always recenters you to the original location. There we go. So now we're gonna pop it up. Honestly, that's not my favorite feature. So now maybe we want it to be a little closer. So let's try. So now we want a little platform under here. So it's not just floating in the sky. Pretty much. So now we're gonna grab our plane here. And we can just duplicate that. Yes, we're not gonna cut, we're gonna just copy and move it. So now we're gonna copy it and this is going to show up as another plane that's right over the one we already have. And then we're gonna change our positioning so that it shows up where we want it to be. Because it's easier to do this than to re-type out the whole thing from scratch. All right, so now we're gonna change our position. Four, two, zero. So now we should be a little closer to where our box is. Oh, it's because I did a four, four, zero. Not four, two, zero, not bad. All right, so now we're still not there. So let's find out where it landed. There's our original one. Did it go on the ground? Okay, so now we wanna find out what went wrong here. Because this is in the same exact position as our box over here. So it should either be splicing it in half in the middle here, but it should be in this general region. So let's find out if I grab the N tag here. Yeah, it looks like it, I think. And then I grab the full plane here. And, well, the rotation is different. Does that matter? See, and that shouldn't make a huge difference on this one because it should still be in that same area, but just in a weird, we can try it. Zero and within height. Our color is the contrasting, so it should be okay. It's within our scene, so that should be okay. Let's try it in a different, I'm gonna try it in the original position, but I'm gonna move it up a little. So they're like, yeah. So here is, and I just rotated it, so I'm gonna rotate it back. Right, so there it is now, this way, yeah. So it is there. Yeah, you can see it over there, okay. But now we wanna find out why this isn't shifting where we want it to go. So let's do it one step at a time. Yeah. So let's see if it moved. Yeah, there it is. And then let's do two, and let's see if it moved. Oops. Okay, so that middle one is what's making it disappear. So this must be shooting it completely off the plane here. So let's do point five, point. I think I see it back there. Okay, so we're getting closer. As you get it closer over there, it looks like it's flattening out. I wonder if we're looking at it edge on, and it's there, but we can't see it. And it might, yeah, I think you might be right. Because here you can see it's like this, and as you keep going farther that way, it goes more and more. See, there it is just there. Yeah. I think it was there. You can see it. Yeah, yeah. See? Don't know where we can figure these things out. So let's do our original two again. So it changed the angle, and it still doesn't, because we should be able to change the angle and see it. And see it from different, yeah. If we're dead on, let's try. Is this something you tried to do before, and it did it, or is this just something? It did do it, yeah. And when I did it the first time, it actually bisected it right in the middle. And then I just shimmied it down a little bit. And now, not so much. So let's try it at zero, and see if we can flip it. So this is a software that you installed. This is just something you do on a website, right? You don't have to have something special installed for it. No, you can just do this on a website. Does it matter which browser you're using, potentially? I usually go through Mozilla or Chrome. And this was actually designed originally by Mozilla, so I just go through Mozilla. But I've used it on Chrome, and it's worked. I never use IE for anything. No. Only things that we're required to, pretty much. The stages. Hmm. But, so I'm not gonna worry about this too much right now because we have other ground to cover. Yeah. Something to play around with and see how you can do this. Yeah. So I'm just gonna... But it's interesting to see how things can move around, how you can change things. And it's not really something you can break, which I know a lot of people will be concerned about. Yeah. What if I destroy my world or something? Just do it, put it back. Undo something, delete something and try a different way. And you can always, if it goes way haywire, you can just delete this whole line and then copy and paste again. Start over again, yeah. It's all just code, yeah. Pretty much. And how is this gonna annoy me? Okay, so we have kind of the general idea of how to add new things into this world. So how do I get that sky in there? The background? Yeah. So this sky, it's actually just a JPEG, which is kind of surprising. So we go back into our developer code here and now I'm going to go down to this A sky. And then just another primitive... A background color or 360 image, juicy. So aquarictangular is kind of the result of when you take that 360 footage. So I'm gonna open up the website where that image came from and it's gonna be a little trippy. So this is something that I see it says that it uses a background color or so you would have to already have taken a 360 picture or have one that you can access to use in this, yeah. I do like to how it explained at the top. And this kind of gave me a good visual that a sky program has a background or a sky is a large sphere with a color or texture map. So it's kind of think of yourself sitting inside of a snow globe or something. So that kind of gets it in my head if that's what I'm thinking about is what would be around me is, yeah. So another way that you can make this virtual world is by using a program called Unity. And Unity is like the next level up of building this kind of virtual reality stuff. And in that one, you pull in that image but then when you first pull it in and you test it out and like that virtual reality headset all you see is darkness because there's another step in that program where you have to invert it. Which is also super trippy. Yeah, I can see that would be. So they made a whole bunch of these available online and it's actually in a flicker. Cool. So we're looking for the echo rectangular images and not all of these are actually available to download. Some of them are just cool. So the one that I used here, I grabbed it last week. That's not it. The ones that have been uploaded. Yeah, well, I bet they were. Next page. If you go up to the top, you should be... View all photos. Oh, this is overview, yeah. Okay. And you see how these are really trippy. Until you bring them into where you can actually see. Yeah. Because the way that a 360 camera works is that it takes a whole bunch of separate mini images and the software stitches them together. So on a flat, it doesn't look right. Yeah. And here's the one I grabbed. So here is our holiday backdrop. And you can see the whole 360. Cool. Then I just downloaded this. I grabbed the large version of it and we're gonna save it. Okay. So then to get it to work in Glitch, it's a little different than if you were to get it to work in a real website. Because the code that I have right here is like the cheaters developers' way of doing it. It's not the actual technical way you're supposed to do it. It was just... It worked. Yeah. It was quick and it worked for just a developers thing. For demo, yeah. So the way I did that was to go into our code here. So we're gonna go open up this little file menu thing and we wanna load this into our assets. So here I already loaded it and basically all I did was go to upload an asset. I found the file and hit upload. So to get that link, we go into, we click it open and then I copied. So whenever you load something into Glitch, Glitch stores it locally on their server and then they will build a URL that goes directly to that image as long as you're using that project. So I copied that link and then I went into my code and I just pasted it in here. So you can see that our full code here says a sky, which is our primitive name. SRC is the source where you want, where it's stored and there's that link where it came from and then we close our tag. And that's it. If you wanna know the real way you're supposed to do it. So the real way is within this scene, you're supposed to add assets. So assets are any images, OBJ files, OBJs are like 3D models that you can load. And so we're gonna go into our asset manager up here and asset management system. So these are the different assets you can have and you can also pull in a JPEG or a PNG that is just like floating there. So sometimes if you wanna label over something or if you want just kind of like an arrow or a descriptor, you just grab an image of it and it'll pop in there. It'll be 2D, but that's sometimes all you need. Sometimes you want that in the virtual world to just label things, yeah. And you can also embed videos in here, which is kinda cool. But you should actually, so the way I cheated and did it was to send it over to a link that's through a third party website. When you're developing your actual site, you should download it and store it locally so that you have control over what's happening with that. Because if the servers and glitch went down for whatever reason or if you are no longer have access to the project or if glitch decides to not glitch anymore, then you don't have to worry about backing up all of your stuff. Yeah, you wouldn't have it anymore, yeah. And so this is the way it would look. You would have your assets up top and then you would have your full scene, all of your primitives down here. And then they would be separated out so that the, then you would, in the code you would link together what that object is supposed to be looking for in the assets. So the example would be this little entity down here. This is kind of the baseline of a primitive. But we're telling, we're creating this entity on our own instead of using one of the pre-made ones like the box or the plane or something like that. Right, you're doing all from scratch for yourself, yeah. And I'll highlight this whole thing so it's easier to read on here. So we are telling this to pull from the Kentucky Derby. This is the ID here. So then we're matching the Kentucky Derby ID up here. So this entity is going to display a video. Yep, and before, yep. And then down here we've got, I'm gonna guess this is probably a horse. Yeah. But then we've got the horse up here and this is our, so OBJ is like a, it's the file format for a 3D model. So if you want to grab a 3D model, you have Tinkercad. So Tinkercad is what they use for like 3D printing, 3D design. These are all these pre-made models that people put together just for other people to tinker with. And I would still look at the different copyright laws on this. Most of them are under this. Look for what they've got. Is there, yeah, what they allow you to do with it, yeah. So this one's a share like, but it is non-commercial. So don't sell it. Don't use it to sell anything, yeah. But if you're just learning how to use this stuff in the library and you're, it's never gonna go anywhere, like go to any, it's not gonna be commercial. Then, cool, go to town. But, so we just download this, save file, Santa Claus. And we go back into our, so we're gonna pop Santa Claus into our scene because why not? Cool, he'll go with that. Yeah. So now we need our A-Asset section so that we can pop this into our code. And now Glitch will automatically add in the NTAG for you, which is also kind of handy because I also always forget to do that. I downloaded a new editor called Sublime just because it does that and it highlights the matching tags. So that you know you've got them both, yeah. So I can click on this one and it auto highlights it just like this Glitch does. So now we've got our assets and now we're going to be grabbing these two here. Got me, and I'm just gonna paste this in here and now we're gonna customize it so that it's not a horse. It's going to be Santa, and Santa. So now I'm going to go into my downloads folder and I'll see what landed in here because some of them will only give you an OBJ but you actually do want an OBJ and that MTL. MTL, the other one, yeah. Material. But this, when you pull it with this STL file is not what we want. We want one that has an OBJ and that MTL but I haven't tried it with an STL yet so let's try it. It's worth a shot. So I give the disclaimer that this might not work. But we're gonna do it anyway. So I'm gonna grab this entity because we need to link these together. I grabbed the wrong one. Entity, Calpe, and we'll pop this down. I'll just put it over by the original section. So now this mix in, we don't need. This mix in, all it does is change the scale of the object and we don't really need to do that. You see it says giant there, that sounds nice. That would not be a good idea. So now I labeled our OBJ, the ID is santa-obj. So that's what we want here. Santa and I'll do this anyway just because we might still need it later. But right now, this is still isn't pointing to anything because this would actually be a file that's stored locally on here. We're using our own computer, yeah. So we need to pull Santa into our assets, grab that link and put the link in here. So I'm gonna open up this file manager here. We'll go to assets and we're going to upload an asset. Oh, I forgot I already put these in here. Well, I'm doing it anyway. So if this doesn't work, we'll just use the ones I put in there before. Santa. There is Santa. And I'm gonna grab this one. So now I'm gonna click open Santa. We're gonna grab our link, click out of that, go back into our index file. We're gonna go back into Santa for the OBJ. And then I'm going to grab that link and pop it in. And now this, it's still searching for this. But this doesn't exist. So we're going to cut this and then it's no longer pointing to anything. So we're just gonna go down here and get rid of the material for Santa because the file doesn't exist. And vote. So now Santa probably isn't going to pop up anywhere good because we didn't tell it where to go. It could be flying anywhere. All right. So let's put it over by the cylinder. And we'll see if Santa shows up here. And I positioned it right where the cone is. So Santa might also be inside the cone. Hiding in the area. So let's move negative two. Is it behind here is the question. Now you're also doing this with that different one too. You said the STL would do with that. And it might too. The YM. And, cause normally I use an OBJ file for this. So let's try that OBJ. I'm sure you have that in there in the, when you're looking to, let me grab the link for this one. And it might be that too. So now we're going to grab this and we're going to change our link to the actual OBJ file. Get rid of this, put that in. And our ID is still the same just because the ID name doesn't matter. So now Santa and a sleigh are up here. That is up there that you just see in the very. Yeah. Well that's appropriate, he's flying sure. Right. So let's pull this down a little bit. So we're shifting them. Oh, we're going to cross our crusher mushroom. Actually I thought that would look kind of cool in VR just to have Santa just floating out there too. Then you have like hidden Santa. Surprise, yeah. Search for the Santa. Let's try that. Oh, yeah, you can see that it's the edge of the, he's a wonky, yeah. This would also look, because he's also rotated. Oh yeah, okay, so there's the reindeer. Yep, needs to be rotated. So yeah, some tweaking needs to be done. And it's huge. I also paused my tweaking because I looked at a clock. Yes, it's getting close to the end of the hour. Yeah. And I mean, we also might have a Maverick Santa that just likes to fly at the edge. Taking a hard turn. Right. And also Rudolph is about to run into our box. Not just not recommended. Although I mean, there's no real gravity there. I was going to say gravity does not have to apply. Pop it in, yeah, in VR. You might just kick the box. And you can also animate stuff. So you can actually program it so that. So that they could be like running or something. Well, that would be like a, so if you. Moving like they were. You can make it so that it shifts position and you can simulate movement. But you also have to add more animation to the actual object itself if you want the legs to move. So you would actually need to shift it between two different objects. So that one has the legs up and one legs down and legs up and legs down. It's like doing this, how you do like animation. Yes, that much. Sure, sure. And so Blender is a good program. If you want to try to do the more complex 3D modeling. And if you want to do more of the animation side of things. Tinkercad is a good one. If you want to just play around with making drag and drop designs. So then if you go to this create new design here, you can actually make your own cylinder and cone. So you can make your own house in here without having to position it in. So create the object here and then put it into your work for world. Yeah. And this one is not, that's what I was going to ask you is there any way to do it? Cause a lot of times people like the click and drag type thing can be so much easier. But I think it's good to know. Cause once you do that, it does have to do with numbers in there, the XYZ and everything. That once you have this built and you put it in it, if it's not exactly where you want, you're going to have to know, well, this is how I have to move it around. Yeah. Once I'm in a frame, yeah. And there's also, so as you dive, as you dig deeper into a frame, you'll find there's also a different ways to position stuff. And there's different ways to animate things. Okay, there's a lot to learn in there. Yeah. That you can play with. Now, one question about this, how, cause we are having to do libraries here, how could libraries use this like on their websites or in a program or something? Oh, you could actually take a 360 image of your library or a section of the library. And then it just takes that one line of code to pop it into the 3D world. And, okay. And then there's instructions in there for how to port it over to your website, which is, that's not too bad, cause it's all HTML. So it's like doing, here's a 3D tour of the library. Yeah. And then, but then you could insert things into that that are not actually in the library. Yeah. And that'd be cool for like a scavenger hunt type thing. You know, the library creates this and now go into this virtual world here and find where we've put things that maybe aren't actually in the library, find the fake stuff or have the kids do it as you create the original world and have them as a program. We're gonna start, you know, cause this is the thing we're talking about a lot of libraries and schools are just talking about or just in the news, kids should need to learn code or could learn, should be learning something to do with some sort of different coding. And there's so many different programs and things that you can do. This might be something that some of the kids might latch onto. Yeah. So it could be a program of, we've created the world of the library. Now use some of these to put your own objects in and to play around what should be there. And you can also build a virtual Alice in Wonderland. Oh wow. Which is kind of fun. Oh, it's sure based things on any books they read. Yeah, absolutely. Yeah. And like Tinker Cat opens the door to about a million and one different things. Cause just because you can't use it commercially, you can use it for education. Oh yeah. That's exactly what it's for. Yeah, it's perfect. And since so many libraries and school libraries have been working on web development stuff and teaching all the classes about that, this is an awesome lead in because it uses all those same basics. Yeah. So if you know the basics of HTML and how websites work, you know how this works. This is the same thing, yeah. It was all very familiar to me who I'm updating websites every other day. Yeah. Yeah. So it's not something that's too scary, but it depends on where you're at in it. But as you can see everything there, right? I like to this, and like what I'm doing websites do, the code next to what it's doing on the screen at the same time. So you can make that connection with, oh, this made that happen. And now I've got to make this. I do it that way all the time. Yeah. Cause I don't always remember or I can't always visualize when I put this here, what's it gonna actually do? Right, yeah. Yeah. And then it's kind of, it's just getting familiar with navigating that virtual world. And then, so if you have the actual headset on, if you wanna add animations, you also have to add a cursor. And the cursor will kind of show more or less, it'll direct the computer as to where you're looking. So in a real headset, it'll track eye gaze based on like the little sensor parameters that say that tell it which direction you're turning. When you're moving your head, yeah. But when you're navigating this web world, there's a little, you have to position a cursor. You're just using the mouse to move it around, yeah. So when you add a cursor into the world, it'll show up as just a little circle. And it'll show up floating some random place in there. So then you have to position the default position of that cursor. And then you have to click and move the world until the cursor is hovering over this ball. And then you can do kind of, if you know JavaScript, it'll be kind of like the on click. So it'll say when you click this, it'll move over here. Or when you click this, it'll turn blue. Or when you click this, it'll turn into a square. And but the clicking, naturally intuitively, you just wanna take your mouse and click. It's what your habit is, yeah. And that's honestly, that's what I did the first time I did it too. I was like, oh, on click. And click. And no, click, you know. It's not there yet. And, but it's that cursor. So you have to add the cursor and then shift it so the cursor is looking at what you want it to look at. And then that triggers it. Which is not exactly intuitive for that one. Yeah. But it's designed for a headset. Right, you're thinking about it, you gotta think about it in a different way. Yeah, that's all, yeah. And this is also glitch, is also designed to work with cardboard. Oh, right, sure. And you can also port it into other headsets. So you don't have to go out and buy all the huge expensive VR equipment. That's what, it seems like that are great for getting started. Yeah. Yeah. Or just keep it on the web, because that's a story too. Yeah, yeah. I've seen these coming out lots more where you can, you know, virtual tours of places or interact with this here and this way, yeah. It'd be the part of beginnings of, you know, getting into video game design. That's the same thing, yeah. Oh, and Udemy and Udacity, they have, they basically have a series of courses that'll show you how to build virtual worlds both in A-frame or in Unity. So Unity is what they use for a lot of the game development stuff, both 2D and 3D. And Unity is, it has a touch more of that drag and drop feel to it. But it also has a lot of the, you can use Unity with Vuforia, and that will be kind of like the easier entry or point into it. And then you can also launch into C-Sharp, which is another way to have more control over the animations. And Unity is also more what they use in the workforce too. So if there are high school students or there are adults that want to try to learn this kind of stuff for the workforce, that might be a good kind of lead into it. So A-frame will get them used to how the 3D world works and build off of skills that are pre-existing. And then you shift over into Unity. Everything builds on something else, yeah. All right, but I'm way over my time. Yeah, well, a little bit over, that's okay. Anything else you need to, you showed everything we talked about, you're gonna show it today that I can see from the description. And more or less, you mainly just wanna sift through here, start with the basic scene, and then this will show you kind of a walkthrough of how to adjust and tweak everything. And Glitch itself also has a series of tutorials designed for A-frame. And that'll give you five step-by-step tutorials for how to tweak and adjust and learn how to animate and learn how to add textures so you can turn your cube into a Mario brick. And that's gonna be the one that, yeah. And so just kind of a, well, there's only so much we could cover in one little overview session. But it gets you started, definitely. Yeah. And you're not thinking about it, if you think about how this could be used in your library, either for your own library purposes or for your programs. Yeah. And also building a mini library game is just good times. Yeah. All right. All right. Well, thank you very much. And at the end of this, when I saw the description of this one, I was like, okay, build a virtual world. That's, I wanna know about that because I don't have a clue. Yeah. All right. So let's go to our Encompass Live. You should type Encompass Live since you got the keyboard there. Just hit enter. There we go. So if you, whatever your search engine of choice is, Encompass Live so far is the only thing called that on the internet. Nobody else can use our name. This is our website on the commission's page. So today's show, as I said, has been recorded. These are our upcoming shows, but right underneath here is the link to our archives. And this is just the most recent one at the top of the page. So this is the show from last week where we have a link to the recording. And this one did have a presentation. This week's show, we'll have a link to the recording. And then within the description, there are links to A-Frame, Glitch, but actually the coolers for the colors are all in there for you to access. So this is where that will be. By the end of the day today, I should have this recording up as long as YouTube and GoToWeb in our cooperate with me. And I will email everyone who logged in today or registered for today's show. We also pushed out things onto our Facebook page and Twitter and all the social media mailing lists. We do have a, so while we're here, this is the archives. You see we have a search feature here where you can search our entire archives or just the most recent 12 months if you want something very current and up to date. That is because this is the full archives of Encompass Live. We started the show in January, 2009. So we're 10 years more in and all of our archives are here. All of our recordings are here. So do pay attention when you are doing a search or looking for anything here. Everything's got a date when it was originally broadcast. So some things may be old, outdated, websites might be, links might be broken. Some services and products might have changed or not even exist anymore over 10 years time. So, but we are librarians. We archive things for historical purposes. So it will always be there as long as we can, but if you are searching here for a particular topic, like I said, search the whole thing or if you want to just have up to date info, change to the most recent 12 months before you run your search and you'll get those. We do have a Facebook page for Encompass Live. So if you do like to use Facebook, keep an eye on us over there. We send updates. Here's a reminder to log in today's show. One of our recordings are available. No, I don't want to log in right now. Thank you. When our recordings have been posted, we put them on here. Here's a recording of the last week's announcing. So if you do like to use Facebook two, three times a week, not a huge, not a lot coming from us in there, but do give us a like over there. Okay, so that will be for today's show. Next week's show is on the Summer Reading Program and you will notice here we have another reminder about this one. Once again, next week there is a holiday on Wednesday. It is New Year's Day, another state holiday for us here. So we did booklet next week's to Tuesday. I don't think there'll be any change for next week, so we don't usually get any extra days off for that coming filtering down to us. So ideally next Tuesday, December 31st, same time, 10 a.m. Sally Snyder, our coordinator of children's and young adult library services, we're talking about books for the upcoming Summer Reading Program for next year, which is Imagine Your Story, Myths and Fairy Tales. Things is the topic, yeah. You see there's a little, kids reading with a little frog over there. Frog prince. You've not built a virtual world for myths and fairy tales. Absolutely, use this week's show with next week's and you'll have an awesome Summer Reading Program next year. Oh, I should have done it after. So do sign up for that one and any of our other shows we have scheduled here, we say of January and February, we'll be filling up. We'll see what you have for a topic for January. Keep your eyes open. If you're into tech things, pretty sweet tech. We have them on the calendar and as Amanda comes up with her specific topics, then things get updated on their socials. So please do sign up and join us for any of our upcoming shows. And if you have any questions about today's show and anything, reach out to Amanda or contact and post on our website. She can chat with you about things if you need some more tips and tricks while you're trying to use A-Frame or any of these things. Sweet. All right, other than that, thank you very much for joining us and we'll see you another time on Encompass Live. Bye-bye.