 and welcome. I want to start off by with a little disclaimer. This video is not a step-by-step tutorial. It's just going to be me playing around and I'm going to be incorporating creating some stuff in Blender and then using 3JS to create a little environment in the web browser. And it's going to kind of resemble a Doom level, although it is not something you can import into Doom or play in Doom because Doom is not truly a 3D game, blah, blah, blah. It's just for fun and to practice my skills. And again, it's not a step-by-step tutorial. I am going to be using a lot of scripts and shortcuts that I've written for my work process, for my flow, that I hope to talk about more in the future. I hope to talk about all this stuff more in the future, more on Blender, more on 3JS. Obviously, this is Doom month here on Films by Chris. But if you go to my GitLab page, so gitlab.com forward slash middle x1000, there you can search through my projects. One of my projects is my VIM setup, which actually has my VIM configurations and install script, my Tmux configuration, and also a bunch of skeleton files, just basically templates for different scripting languages and stuff that I use, which I'm going to be using a lot of today. I'm also going to be starting off with my 3JS template. This is a basic little 3JS template I created, and it actually even has a script in there called 3JS Git, which we're going to run here in a second. And when you run that, it basically pulls down this project and creates a little starting environment for you. So I am running an Apache server, but you should be able to use pretty much any web server you'd like. This is where it's going to be. It's not there yet. Let's go ahead and go over here to the shell. I'm in my web directory. And again, from my GitLab page, I'm going to type in 3JS Git, and then I'm going to give the name of the project that I want. And I'm just going to call this D for Doom, you know? And it just pulled down basically my template and put it into a folder called D. So now I can go into D. We can list all the files that are here. And if I come back here to my web browser and point it to that directory, I'm going to hit F5. And there we go. We have our basic little, this is the default little template I have in there. It's a cube that every time you refresh the page, it changes color. I'm not spinning the cube. We're actually spinning the camera as you'll see here as we move on. It sets up some basic lighting and a basic background using CSS. So let's go ahead and start working on that. And what we're going to do is we're going to create a Doom-like level that's not going to be playable, although you could theoretically make a game out of this. But the first thing we do, I need graphics and textures and all that stuff. And although Doom itself is free and open source under a GPL license, the game source code, the art and stuff is not. So let's go ahead and use some graphics from FreeDoom, which is a free implementation of Doom. And it's easily installed through your repositories. It's in Debian repositories. And I'm just going to use a program called do. So do text here, which will extract all the information from the FreeDoom to .wad. So I'll get all the level files, all the sprites and floors and wall textures and sounds and whatnot. I'm just going to extract all to this directory. I'm just dumping it all. So now that's all in here with my project. Kind of a messy way to do it, but we're just playing around here. And as you can see, we have a sprites folder. And you would think textures would be in the texture folder, but no, that's actually where some text files that explain how to compile the textures are in. We're actually going to be looking at flats and patches, one of which is your floors and ceilings. And the other one is your walls. I think patches are walls and flats are ceiling. I always get it backwards. Anyway, let's go ahead and open up Blender. Oh, and actually, this is a level I just, I did a test run of this, we're going to make a level that looks something like that. Let's go ahead and start up a new file, delete the default cube. I'm going to hit space bar. I'm going to add in a default plane. And again, I'm going through this quick. This isn't a tutorial. I'm going to rotate x 90 enter to rotate on the 90 degrees on its axis. And I am now going to hit s z to scale it up to twice the height. So that is our little plane there. I am now going to pull out another window here. And I'm going to choose our UV image editor here. And with our plane selected tab and edit mode, you and I am going to do a UV unwrap. Now I'm going to click here on open. And I am going to go into our directory that we just extracted from our doom wad. And I'm going to go into flats. And click here to see that. Yes, these are all the ceilings and floors. We'll get to that in a moment. Let's go to patches, patches, patches, patches. And I'm going to choose a wall texture, something similar ratio to what I just created. So I'm going to grab this brick wall here and click open. So we've now mapped that based on our plane here, but it is not applied if I have 12, you will see it. In fact, everything's black, because our lighting is very good. Let's go to our world tab here, hit ambient occlusion, environment lighting and change the ambient occlusion to multiply. So now we should have a nice white plane that we can see. Now I'm going to go over to materials, say new material. And I'm going to turn the specularity down. Specularity is basically how shiny something is. If you want your wall to be shiny, you can leave that up. I'm putting it down. And now we're going to go to textures and say new texture. And this little drop down choose the image we've already created. Still not there if we hit F12. Oh, it does show up. But it doesn't, it's not going to show up once we create the rest of our walls. We're going to do more with our textures here in a moment. I'm going to hit escape to go back on our view here, seven on the number pad to go to top view and five to get out of perspective mode. So everything here is, there's no perspective to it. It makes it easier for us to line stuff up, tilt here a little bit, A to unselect everything, B to box select. I'm going to select those two vertices on that side, seven go to top view again. And I'm going to hit E to extrude this wall. And I'm going to hit down control to lock us in to give us nice straight walls. So I'm just going to start building a level here E to extrude, E to extrude, E to extrude, E to extrude, E to extrude, do angled wall here, E to extrude, angled wall this way, E to extrude. And I'm just going to go all the way around like this again holding down control to lock us on to the grid. If you want makes things a little bit cleaner and nicer. And I'm going to create a long hallway down this way, long hallway up this way to here. And then you can see we're just going to finish up our wall here. I'm going to be to extrude it down and line it up with our wall right there. There we go. We have our walls. But if I was to reposition my camera so I can see all that here control to zero on the number pad, tab out of edit modes like my camera G and then center wheel click. Clipping is a little off here because our level is kind of big. We're going to hit F 12 and you'll see that our textures are not right. The one wall right here is correct but the rest is all stretched out. So I'm going to hit escape to get out of that select our little walls here and hit tab to go into edit mode. Then control tab faces. I'm going to a to select all and then shift and left click twice on the wall that has the correct texture. The little original wall we created. Now if I hit U I can go down to follow active quads and you can use I think you can choose either length or average length here. I'm just going to choose average length click okay. You can see it map that all out so that they have the correct width but they're all the height of the texture. If I hit F 12 now you can see our wall texture is correct all the way around. This right here is just clipping because of our camera. Our camera settings we're not going to worry about that right now. So we have our walls. Let's go ahead and add a floor. I'm going to leave the ceiling blank. We're just going to add a wall or a floor here. So what I'm going to do is I'm going to now angle it like this just so I can see the bottom all the way across. This is just one way to do it. Control tab go into vertices. A to unselect all. B to box select. I'm going to select all the bottom making sure I have none of the top vertices selected. And I'm just going to hit F. We now have a floor. If I hit F 12 you can see the floor. The texture isn't right but we have a floor there. Let's go ahead and work on the texture for that and there's different ways you can do this. I'm just going to go into top view here and I'm going to go to U and I'm going to say unwrap from view bounds boom. And somewhere here right here because I scrolled over should be able to zoom in on this. We have our wall texture. Let's go ahead and down here. We're going to say open and we're going to go up to flats. Let's go ahead and hit this thumbnail view and choose a ground texture. Let's go ahead and do something like like this. No let's do this one. This one is a very doom looking one. So I have that selected. I'll click open and if I hit F 12 now it's going to be very stretched out because we actually have that one texture stretched across the entire ground. So what I'm going to do is over here in our UV editor with all the vertices selected I'm going to hit oh also we have to another reason it doesn't look right because that's the other texture. But let's go ahead and do that first. So I'm going to come over here and I'm going to go back to materials. I'm going to escape out of our view here and we have the floor selected. So what I'm going to do here is I'm going to say new texture. So I press the plus button there. I'm going to say new. Again I'm going to turn the specularity down. I'm going to now assign that to the floor. We can give it a different color here if we want just so we can see that we've selected the right thing. Now I'm going to go into textures. I'm going to say new. I'm going to select the texture we just imported and I'm going to come down here and under UV I'm going to choose UV map and I'm going to hit F 12. In fact I didn't do that before. We might need to do that with the wall textures because they may not export properly if I didn't do that. I can't remember if I did that yet or not. So now we have the correct floor texture but it's stretched out. Just one of the patterns stretched out over the entire floor. So what I'm going to do is come over here in our UV editor with all the vertices selected I'm going to hit scale and I'm just going to scale this up and the bigger you scale it the smaller the tiles will be on the ground. So now I can hit F 12 here and you can see that we have our tiles all here like so. If I scale it up bigger and hit F 12 they're now smaller. If I scale it down smaller and hit F 12 they're now larger. So you just get to how you want the ground texture to look. I think somewhere in between the two that I keep doing that's good enough. Okay so we've done all that and let's go ahead and escape and let's go to our first material here and I did not select the map here. So it's rendering proper in Blender but I'm pretty sure we have to pick UV map here for it to render properly in our game engine or 3js. So still everything looks good here and now what we can do is tab out of that. I have our little level selected. I'm going to hit file export file export and I'm going to this is just what I always use. You can use there's different ways to export stuff to be imported but I'm going to use the collada I believe is how you say that at the dae file type and I'm going to go into where our little game is set. I'm going to go to models dae. I already have a default scene here that we're going to override and I'm going to say selection only in this particular case. You can do the whole scene that will import the cameras and lightings and stuff but I just want that one object so I'm going to say selected only export. Now of course if we come back to our game here and hit f12 nothing's changed because we haven't imported that. So let's go ahead and I'm going to vim into our main js here from the template I've created. We're going to go down to this cube and we're just going to delete the cube save that if we refresh now you can see the cube is now gone. I'm going to go to the bottom of my file here and I'm going to use again some of my vim shortcuts. I'm going to take three js and hit ctrl x ctrl k and down here I have all my templates for three js and I'm going to choose the dae and it's going to create a function here that we can import or use to import. It tells me how to download the collada file but I actually already have that in the template so I'm going to delete that and now we have to add this to our html so I'm going to take that and I'm going to go into our index html and right here I'm just going to paste and remove those comment lines there save that and then we'll go back into our js our javascript file here and so now all we have to do is call that function and tell it what model to import so I'm going to go into our init function here and somewhere right about here I'll just say load dae and I will say to import from models dae we're going to say scene and I want to get rid of this second dot I'm just leveling up because we're working in a subdirectory but we wanted to look at the main directory now if I come in here it could refresh all this here is our level I'm just I have a rotating camera here it's not a fps camera I set it the way we've created it our walls are one sided so if we were to go back out like this we can go on the outside and see through the outside walls which is nice for what we're particularly working with here so yeah there is our level but we're not going to stop there let's import some sprites go back into our editor here I am going to go to the bottom of our file again I'm going to use some my vim shortcuts and I say 3js control x control k and I have one here that says sprite now I have a sprite function that I can call so let's go back up here and right after we load that level let's go ahead and say load sprite and give it what image we want we're going to say sprites and again these are from freedom and I'm going to pick one that's only loading so many let's see I know that when I was practicing earlier yeah this one here let's go ahead and just choose cyber eight because I think that's one I chose earlier and we're going to have to move him and resize him right now he's going to be placed right in the middle of the level so he'll probably be in that main wall right here that we created so let's go ahead and refresh and yep there he is he's small and in that wall also our camera starts pretty close so let's actually before we go any further let's go to where we create our camera right here and move it out a little bit further we'll say 10 and 10 and now please restart this we're a little bit further back which is nice okay excuse me and um excuse me something in my throat to make things a little bit easier I'm actually going to go back into blender I can remove this in code but I'm just going to take our level here I'm going to grab it and uh on the why move it here oh really got something scratching in my throat there and I'm going to go ahead and export this again just over our last one and I think that that might move our scene a little bit let's see yeah so there we go now we're actually looking more at the center of the scene let's go ahead and scale up this sprite so go back to the code here and when we load the sprite we can actually load that sprite into an object so I'm just going to say sp1 for sprite one and then I'm going to say sprite one dot scale and I'm going to go ahead on the why I believe axes let's scale them up four times the size and let's do the same on the x axes I'm going to save that and refresh and there we go he's a bit bigger and standing right there in the center of our level perfect now if we want to make more of this same guy like let's say we create him so he does move around and he's animating and does whatnot we can easily clone him so what I'm going to do here put some spaces here just to make things a little clearer what I can do is I can say sp2 equals sp1.clone that's a function and then I can take our scene and I can add to it that sp2 great only issue here is they're both going to be in the same exact spot so let's go ahead and take sp2.position.y and we'll move it to 10 let's see where that puts him we should have two sprites oh not y let's move them on the x sure there we go now we have two of them and they are in our level we can also do the same thing that we've already done with creating the sprite here let's go ahead and copy that go ahead and change this we'll change this instead sprite one we will call it three three three and we're going to change its image and let's see oops as I thought there was a here we go boss go ahead boss to be eight that that should be fine but again it will be in the same position right now it's starting off in the very center of our level let's go ahead and move it and we'll say sp3.position.x equals we'll move him so let's move him on the z equals 10 boom and now we should have yep we have this guy here and they're blurry because they're very very low resolution yeah remember the sprites in in original doom were very small computers were not what they are today and there are things you can do to make these look a little bit better but the best thing would be to do is just create higher resolution sprites because we're stretching them out to four times their size so you can see they're very small to begin with but there we go another thing we can do is we can change our our sky because the default here is just basically we have a 3d environment here with a transparent background and it's just showing the web page behind it so if I was to move into our index file here you can see there are background images says that it's a linear gradient from the top to the bottom red to yellow so we can just change this to blue and white and we'll get more of a blue sky looking to our level there so and of course you can also put like a sphere you know a dome for the sky and actually put images of clouds or whatnot anyway this is just you know playing around for a bit and in about 20 minutes with a lot of talking we created this cool little it's not a game because it doesn't do anything but 3d environment with some 2d sprites that can now be sent you know it's you throw up on a web browser you can sense at anybody and anyone with a current browser whether they're on a mobile device or a desktop or lab top you know tablet phones what not they'll be able to view this they'll be able to move around the orbiting camera plugin that we're using here allows us to click to spin I can center click which is the mouse wheel and and move the mouse to zoom in and out or use the scroll wheel to zoom in and out or I can right click and drag to move left and right and do so like that and then I can spin on that little location and if you're on a mobile device a touchscreen device you should be able to do the same things with pinch to zoom to zoom in and out obviously just dragging one finger will spin the camera like so and if you use two fingers I believe is how you move things like so so pinching one finger or two finger will be the different controls on a touchscreen device anyway I do thank you for watching again this is just a view of what you can do with a few simple plugins and some template code in just a matter of minutes I thank you for watching obviously creating a natural game adding physics and animations and collision detection stuff like that takes a bit more work especially with 3js since it's more it's not necessarily geared towards game like something like phaser which is for 2d stuff is definitely geared towards games I wish there are projects out there they're geared towards using 3js to make games I'm not overly excited about any of them although if you know of some that list them below maybe I'll go check them out maybe there's some I don't know about it'd be really nice if someone took 3js and really geared it towards games especially if they just made some templates for first-person shooters third-person shooters side scrollers and then you can just you know make your little modifications like you would with something like phaser if you enjoyed this let me know in the comments below I sure hope you did I hope you're enjoying doom month here at films by chris and as always I hope that you have a great day oh and I should I'm what I'm gonna do now is I'm going to strip out the unnecessary files from this and throw this up on my web server and I'll try to remember put a link in the description of the video so you can go and check this out right now and again if you're on a mobile device pinch to zoom to zoom in and out and two fingers two slide left right forward and back and uh go ahead check it out check out the link in the description of this video and hope that you have a great day