Coffee Code Create – Learn to Build Minecraft in JavaScript // Part 1: Demo & Scene Setup

Do you want to learn how to create a Minecraft game from scratch with JavaScript in this 10-part video series I’m going to show you step by step how you can create a Minecraft clone with procedurally generated worlds Collision detection terraforming and much more but before we dive into the code let’s take

A quick walk through the final product so on the screen right now we have the final product of what we’re going to be working on now in terms of terrain generation which is going to be the first two videos that we work on there’s a whole bunch of different parameters

That we can set here so I have this little UI on the side where we can change all of our terrain parameters so let’s say I set the scale to 100 and the world repopulates so now you can see everything is a bit more spread out the

Hills aren’t quite as close together you can also change that scale to be smaller and you get this very volatile looking Terrain we can change the magnitude of those Hills let’s set our scale back to 40 set a magnitude of 0.5 and we get these very large Hills

And we can set magnitude to .1 that’ll reduce the size of the hills and we can also control the water level so we can set the offset to something higher we can see all the water goes away we set the offset to zero basically a giant ocean biome so all kinds of different

Parameters that we can choose from here we also have a seed parameter which controls the random number generator so if I set this to 10 you can see It’ll generate a completely new random world in the third video we’ll be adding resources to our terrain so you can see

Here I’ve chipped away at the hillside a bit and un covered some Stone and some coal ore so we’re going to be using 3D noise to generate these pockets of resources that live underneath the terrain and we have set settings here on the side we can control the scarcity of

These resources we can control the size and scale of these deposits in each axis independently so lots of parameters we can tune here to get the effects that we want so in the fourth video we’ll focus on capturing mouse and keyboard events to move our character around while in

The fifth video we’ll be building our own Collision detection now if I turn on the Collision detection visualizations you can get a sense of what’s going on here our player is represented in the physical World by this bounding cylinder and we can see some of the blocks that

The player’s interacting with so we break the Collision detection into three separate steps there’s the broad phase the narrow phase and the resolution in the broad phase we get a list of all possible blocks the player could be colliding with and these are represented by these red blocks that are

Highlighted here so as I move closer to these blocks on the edge here you can see that they’re highlighted red so these are the potential candidates that our player could be colliding with we take this list of candidates and then we intersect those blocks with the player’s

Bounding cylinder as I get close to these blocks you can see that it’s representing the actual Collision points of the blocks with the player’s bounding cylinder with these little green spheres here now once we get a list of all these Collision points we pass that to the third phase of the Collision detection

And that resolves the collisions in order of the smallest overlap to the largest in the sixth video we’ll be extending our world generation code to create an infinite World that our player can explore we’re going to be implementing the exact same technique that’s used in the real Minecraft game

Called chunking what we’re basically doing is we’re breaking our world into multiple chunks and we’re loading these chunks as the player gets near them and as the player moves far away from other chunks we’ll be removing those from memory so I’ve disabled the fog and reduce the draw distance a bit so

You can see that as the player moves new chunks are being loaded into view now in video 7 is where the real fund begins because we’ll start to add terraforming We’ll add the capability of removing blocks and we can also add blocks so we’ll be using Ray casting for that to

Determine which block the player is interacting with so if I’m adding blocks we want to highlight the block adjacent to the block we’re pointing in so we can add a block to the side and if we’re removing blocks then we want to highlight the block itself that the

Player is selecting so it can be removed in the eighth video we’re going to focus on making our world generation a bit more interesting so we’ll be adding in water we’ll be adding in clouds and of course trees now I have some additional controls on the side here we can control

How many trees are populated in the landscape so if I increase this frequency to .1 one as our world Pops in here you can see there’s a lot more trees we can also change the minimum and maximum size of the the trunks of the trees I’ll increase the range from 2 to 10

Here so we get some very short trees and some very tall trees and we can also change the canopy size so we can get some much larger tree canopies now this looks a bit ridiculous we basically just made a bunch of bushes but if that’s

What you want to do that’s what you can do and we also have a a control for how dense the canopy is now video 9 will be a bit of a grab bag of new features first of all I’m going to show you how to create this animated pickaxe so when

We’re removing a block it’ll make this cool little animation so we’ll import that model in we’ll hook up the animation not to the mouse click we’re also going to be adding this toolbar at the bottom of the screen so as I press the one two three the number keys

You can see that it’s changing my selection and this controls the active block or if we select our pickaxe that will select that as well so that’ll be a little bit of HTML and CSS to set that up finally and I think most importantly we’re going to be creating a saving and loading

Functionality now I’ve built this little structure here and let’s say I put a lot of work into this I want to be able to save this off and come back to this world later that’s what we’d expect of any modern game right so I can actually

Hit F1 and you can see in the bottom left corner it has saved the game so it’s actually saving the state of the game into local storage so any modifications the player has made are then saved into local storage in the browser now I went ahead and reloaded

The browser and you can see that our Stone structure is gone but if I hit F2 you can see that it now reloads the game and after some searching I have found the stone structure that we built and you can see it is exactly as we left

It and we can keep continue adding on to it now the 10th and the final video is actually going to be a user special so you guys are going to get to decide what that final video will be so when I wrap up the ninth video I’ll put a poll out

On my community channel so you guys can go and leave comments there and you can tell me exactly what you want to see in that 10th video what new features I should be adding in all right so that’s a really quick overview of everything that we’re going to be working on in

This tutorial series I’m super excited to embark on this journey with all of you so without further Ado let’s get coding now we’re going to be using 3js to build our Minecraft game and 3js is a 3D Graphics library for JavaScript that wraps webgl makes it a bit easier to use

I’m on the website right now which is 3js org and there’s a bunch of examples here I’m not going to dive into everything that 3GS can do here much bigger video than what you want to cover but there’s some very cool things you can do here’s some basic animations you

Can look at yeah I just highly recommend going here checking it out and seeing the capabilities of 3js all right so I have my visual studio code instance open here the first thing that we need to do is we need to create our application now there’s a standard

Procedure that you can follow for this so if you go to 3js org and go to their installation section you can see exactly how you go about setting up a project so we’re going to be doing this option one here we’re going to be installing with

Npm and a build tool and that build tool will be V this will take all of our dependencies bundle them together and generate the resultant HTML and JavaScript if you go back to visual studio code we can create our app by going npn create beat at latest and this will take us

Through um sort of a a step-by-step question a so we just call this minecraft. JS and expand this up a bit here I’m going to be using vanilla JavaScript for this project and just JavaScript you can see it’s created a folder with our application here so

Let’s go and open that now before we do anything we need to install the npm packages so let’s do npmi that will install a node modules folder here with all of our base packages listed in package.json So let’s go ahead and just see if we can get the sample application working so we can run that or run that application using the script here Dev I’m going to do npm run Dev and you can see that it is now running our application at this address

Here now if I navigate to this address here you can see that we actually get an error here unable to connect and this is an issue on Macintosh um if you’re on Windows I’m not sure if you have this problem or not um but there’s a very easy fix for this

So the host name for my machine is actually not Local Host it’s something else I like to just avoid using the host name entirely and just use the local host address which is always 127.0.0.1 so all we need to do here is to set the host in our Dev script to1 127.0.0.1

And now when I navigate to that address you can see we have the V sample app here so if I click this button it’ll increment the count everything’s working we know that our V application is set up now we’re ready to add the 3Gs dependency let’s go back to our code

We’ll stop this here and before we go ahead and add that 3GS dependency let’s do um a little housekeeping here the first thing I’m going to do is create a new file file called V.C config.js and I’m going to paste this little snippet of code in here so what this is

Doing is enabling Source Maps so when we’re getting any errors in the browser and we’re looking at it in the console we can see the file in line where that error is occurring without the source Maps you don’t get that information so first things first we always add this in

The next thing that we need to do is to clean up all the files associated with that sample app so I’m going to go ahead and clean out all the unneeded CR so I went ahead and deleted the counter file and the SVG and I went in our main.js file

Cleaned all that out and cleared all of the styles to no styling I like to keep all of my scripts in a folder called scripts so I’m going to create that folder and I’m going to move our main script into there now in our index.html

File um we need to link to our Styles as well as update the path to our our main.js file here so we’ll just update that that’s now pointing to their correct location and I’m also going to add a link to our stylesheet I went ahead and added a link

To our stylesheet and I also changed our application to the title to minecraft. JS so now if we go ahead and run that Dev command again and you can see that we just have a a blank white canvas here and our page title is minecraft.

JS with all of that out of the way we’re now ready to install our 3js dependency let’s go ahead and do that we do npm install save three and if you can into our package.json you can now see that we have our 3GS dependency added here using

The latest version so let’s go ahead and set up just a very basic scene with a rotating CU so first we need need to import our 3js library and we do that with this line here and then we’re going to set up the renderer let’s create a new constant for

Renderer and that’ll be a webg renderer and we’ll just do few setup things here we’re going to set the pixel ratio to the pixel ratio of our device that just makes sure everything is scaled appropriately then we’re going to set the sides of the renderer to the inner width oops the inner

Width and the inner height of our window finally we need to take the output of our renderer that render Target and we need to attach it to the Dom we’ll do document.body pench child then we’ll get the Dom element associated with our renderer the next thing that we need to

Do is to set up our camera so let’s create a new constant for the camera this is going to be a perspective camera so there’s a few parameters for this the first one is the field of view we’ll pick 75 degrees for that that’s the

Value that I kind of like to work with and then the aspect ratio is the inner width of our window divided by the inner height and finally we need to set the near and the bar plane so the the default values for this are 0.1 and 2000

So we’re just going to stick with those default values let’s go ahead and set the starting position for our camera the camera. position. set and that will be just 2 two two two in the x axis two in the Y and two in the Z and then we want

Our camera to be looking at the origin let’s close the console here we don’t need that right now now let’s go ahead and create that basic scene so we need to create a new scene object and then we need something to actually render in our scene so we’re

Going to do just a cube a little green Cube and we’re going to spin that Cube over time so our cube is represented by a mesh and a mesh is a combination of geometry and a material so geometry is kind of the the structure of the thing that’s all the vertices all the

Triangles the material tells the renderer how to actually draw that geometry so what color it should be should there be you know transparency things like that so there’s some built-in geometry with 3js we can use the Box geometry here we’ll just use the default values which

Creates a 1x one by one Cube and then we’ll create a a new mesh basic material and let’s give this a color of green so we’ll finally create our Cube here this will be a new mesh and the mesh takes in a geometry and a material so we’ll just pass in the

Geometry and the material here finally we need to add that Cube to our scene so we’ll do scene. add and then we’ll pass in that Cube the final thing that we need is our render Loop and we’ll just create a function here called animate and in our animate function

First thing that we need to do is request the next animation frame so this happens asynchronously doesn’t really matter where we put it we can throw it right here and then we’re going to update the rotation of our cube in each render frame so the cube. rotation dox plus equal

0.01 and then we’ll do the same for the Y now finally we need to actually render our scene each frame so for the render we’ll call the render method and this takes in our scene that we want to render and the camera that we want to render it with so from what perspective

Do we want to render that scene then finally to kick off our render Loop we just call animate at the bottom of our main file here now we need to go ahead and run our application so let’s go ahead and bring up the terminal and I’ll do npm run

De now I already have my window up over here and there we have our spinning green Cube so there we have it Minecraft we have our cube right there just kidding so obviously we need a bit more work here the first thing we need to do

Is remove this white border so let’s go ahead to our CSS Styles here and for our body we’ll just set the margin to zero now the nice thing about vit when we’re doing that run Dev command anytime we make any changes to our files it’s going to go and re-update rebuild the

Application and so when I go over here you can see that everything is already updated another thing that we need to do is to handle resizing of the window so let’s if I open up the comp right here you can see that our scene isn’t really resizing so let’s go ahead and fix

That we’ll go back into our main file then at the bottom here after animate let’s create a event listener so anytime our window is resized we want to go ahead and update our camera and update our renderer to tell it about the new window size so we’ll need to update the aspect ratio

Of our camera first and as before this is the inner width and the inner height of our window divide the height into the width and then when we update any parameter on our camera we need to call update projection Matrix and finally we need to set the

New size of our render Target that’ll be the inner width and inner height of our window as well all right there we go so now if I go ahead and bring up the console you can see let’s see let’s move this over to the right

Here you can see as I move this our scene is resizing now let’s add a bit of interactivity here we want to be able to kind of move our Cube around and manipulate it right now if I drag my mouse just doesn’t really do anything the Cube’s rotating on its own

Now there’s a built-in 3GS add-on that we can use called orbit controls so this allows the camera you know kind of as it as the name implies we can use the mouse to orbit around the cube by dragging our Mouse around it also handles Zoom it handles rotation it handles panning so

It’s a really nice thing to just add in your project right away so the first thing that we need to do is to import orbit controls at the top of our file and that is actually going to be imported from the 3js add-ons that’s three add-ons controls orbit controls.

JS then right after our camera let’s define our controls and this will be new orbit Controls and the Constructor for this we need to pass in the camera as well as the the Dom element of our renderer so before we go and look at everything let’s just turn off the rotation of the cube so it’s not quite so confusing so if you go look at our scene

Now you can see our Cube it stopped rotating but now I can drag the mouse around you can see that the cube is rotating I can zoom in I can zoom out use a right Mouse button to pan around so that’s really nice this will help us

As as we start designing out our Minecraft world so right now our cube is kind of flat it’s not very interesting there’s no shading or anything like that so let’s go ahead and add some lights to our scene so below our scene setup code here going to create a new function called setup

Lights and we’ll add a few different lights here going to add some directional lights as well as an ambient light I went ahead and created a few lights here if you’d like to pause the video and uh copy this code to down you can go ahead and do that right now so

I’ve added two directional lights this is basically like a sun the light comes in from a certain direction doesn’t matter how far the object is away from that light it’s going to get the same intensity of light on it I’ve also added some ambient light so anything that

Isn’t hit by directional light we’ll still get a little bit of light that kind of M mimics the diffused light that we see in the real world the last thing we need to do our second to last thing is we need to call setup lights here we’ll call that right before we start

Animating if I say second to last because if we go and look at our Cube now looks the same nothing’s really changed this is because we’re using a basic material so the basic material by default has no shading so we can fix this by changing it to a Lambert

Material so this is a type of shaded material and this just happens to be the most performant one offered by 3js so now if we go ahead and look at our Cube you can see we have some nice shading here as I rotate this around it’s a bit

Clear to see where the edges and the corners of the cube are so now we have some nice lighting we can actually see what’s going on with our world so well technically we have the smallest game of Minecraft on our screen right now things would be a bit more interesting if we

Had more cubes on the screen so let’s go on ahead and create a whole floor of Cubes So Below setup lights let’s create a new function called setup world and we’ll pass in a size parameter to control the width and the height of the world and we’ll just do a doubly nested

For Loop here so we’re going to iterate over the X and the Z axes let’s go ahead and take the code we have up here we’re creating these cubes and let’s add it in down here now when we create a new Cube we want to go ahead and take the position

Of that Cube and set it to x0 and z and then add that Cube to the scene now we need to go ahead and call our setup World function we’ll do that here and we’ll just do a 32 by 32 world so now if we go and look you can

See we have a much larger World here so it’s creating that 32x 32 array of blocks and laying them out in the XC plane so this is the beginnings of our Minecraft world you know eventually this is going to be some cool terrain with trees and water on it but this is where

We’re starting with I’m going to go ahead and update our camera to be a bit more zoomed out here when we initially load the scene to make things a bit easier let’s do -16 or let’s say -32 16- 32 then instead of changing the camera look at we need to change the orbit

Controls so the target set that to the middle of our world then anytime we make changes to the controls we need to call controls update that’s a bit better now when we load everything we can see that our world is centered on where the camera is

Looking at so things are a bit dark right now let’s go ahead and set the sky color so all we need to do is to go to our renderer and do set clear color and we’ll change that to kind of a lighter shade of blue that’ll be 80 a0 a0

There we get kind of a nice sky blue color so to wrap up this video let’s go ahead and refactor our world code into a new file I’m going to create a new file under scripts called world.jpg dependency then we’re going to create a world class and this is going to contain

All of the logic for generating our world so I went ahead and set up a very basic class here so our world is actually extending from the three. group object so a group is really just a collection of objects within our scene our world is just an abstraction really

Of all of the different blocks and that’s what group really is for I’ve added a Constructor here where we’re passing in the size of our world if no sizes ped then we’ll default the 32x 32 blocks always need to call super when we’re extending from a super class and

Then we’re just setting the size of our world as a Class Property here let’s create a function called generate and then I’m going to take our world generation code let’s just cut that out from our main file and paste that here so just making some slight tweaks you need need to now

Reference the size on this and instead of adding to the C we’re actually adding the Cubes To The World itself and let’s be a bit more clear here these are actually blocks not cubes blocks kind of the the Minecraft terminology and we also need to bring over the geometry and material for our

Blocks so I’m going to grab those and we will just paste those outside the class here as constants all right so that’s all we need to do to refactor our world gener ation code let’s go back to main and let’s create our world here so vs code automatically imported our world

Module and then let’s go ahead and call world. generate right here and add our world to the C and then finally we need to go and remove our old setup function here and there we should have the exact same scene that we had before all we’ve

Done is just refactor the code and this will make it a lot easier to stay more organized as the project evolves so I think that’s enough for this video we got our V application set up we got 3js dependency added to that we created a very basic World here so

We’re one step closer to creating our Minecraft clone and JavaScript hope this has been a helpful tutorial for you and a second video will be coming out soon we’ll get more into the world generation how I’m going to create that terrain so if you want to be

Notified when that new video comes out please hit the Subscribe button below and like this video it’s been helpful for you so until next time take care everyone thanks for watching