Creating Minecraft as a website using HTML, CSS, JS (Three js) – 3D

What you are seeing right now is minecraft but it is created using html so now you can play minecraft in your web browser let’s see how i created this using html Before that if you are wondering how i created these things using html let me explain html is the most powerful programming language ever known to the man throughout the history There are actual peoples out there who hacked nasa using html just kidding html is not a programming language it is a markup language which used to create websites people’s usually use css and javascript along with html to create fully functional websites But we are going to create minecraft using these things so first we have to find a way to render 3d objects in our web browser and luckily we have 3 3 i mean 3.js it is a javascript library helps to render 3d objects in our web browsers

And we don’t have to render any kind of complex 3d shapes because in our case it’s just a cube so after writing some lines of code we can see our cube in the browser so let’s add some more cubes in a straight line to create a plane And just like that we have our plane what is this And just like that we have our plane so let’s create some terrains terrains can be generated by just changing the y-axis of the cubes randomly and we can just fill the gaps with some new blocks just like that we can generate some terrains and the way we are going to generate

These random values is by using pulling noise pulling noise gives us random smooth value between minus 1 and plus 1. so we can just use this random values to change the y-axis of the cubes so we can generate some randomly generated terrains after implementing pulley noise i just

Added the character controller to our game so now our boy can jump and move around in our randomly generated terrain you can see the terrain is so smooth oh boy it’s like he is in the moon the controls are very simple you can just use wasd keys to move around

And the space board to jump but now our game is looking like a movie from the year 1940 so let’s add some textures Here is how it looks like And now our boy can jump and move around smoothly and also our world is looking more like minecraft not like a movie from the year 1940 and now our boy can walk around wherever he wants well in the small place so let’s add infinite wall generation

This can be done by just removing the blocks which are just far away from the player and place some new blocks before him so this will give us the feel that the world is infinitely long but that’s not as easy as i said And just after five hours of suffering we now have infinite world generation and you can also see that the terrains are randomly generated they are not the same here it is in action You can see that it’s lagging a little bit that’s because we are rendering all the faces of the cubes even which are not visible for the player so it’s just enough to render the faces of the cubes which are just visible for the player this will improve the performance of our

Game a lot after writing some lines of code now it is working perfectly so let’s add some more cubes even rendering more number of cubes the performance is now so good yeah i also added a fog because instead of just showing up this block suddenly from nowhere

It’s better to add some fog because it’s you feel like the blocks are just hidden in the fog Oh man where i am is this the heaven Now our world look more like minecraft i think so now it’s time to add the ability to place and remove blocks In order to do these things first we have to find the block where the player is looking at so we can just add or remove the block this can be done by using raycasting raycasting is an algorithm which will helps us to get the values of the place

Where the player is looking at so we can just use this to get the location of the blocks so here is the result it’s time to add some blocks this can be done by just placing a block in the place where the ray is located

And we have to add the values of the new block to the blocks array now we can place blocks which means i can do something like this So Removing blocks is very simple thing we just have to remove the values of the block from the block sorry Again after five hours of suffering now we can remove blocks [Laughter] It’s more than a week of suffering so let’s sit back and enjoy the beauty of the world our wool looks kind of empty that’s because it’s actually empty so let’s add some other things to our world i just used a random number generator which will place the clouds throughout the world randomly

Do you know a scientifically proven thing that water contains 90 of water so we are definitely adding it And there is a one more thing we have to add oxygen because we need oxygen to live right luckily for that we have trees so i just used another random number generator which will plant trees throughout the world the chance of placing a tree is one in a

Thousand so this will gives us the smooth distributions of the trees and i don’t know why my trees are floating like an spaceship Here is my personal favorite upside down trees what i’m doing with my life Okay now we have all these things working so we don’t have to worry about oxygen and i also added some other blocks so let’s see some gameplay we are definitely going to add inventory lava caves and some of the things but that’s for another video so subscribe to stay connected

And if you are still watching this video i am pretty sure that you enjoyed this video right or maybe not but if you enjoyed then smash that like button if you didn’t then smash that dislike button and if you have any other funny ideas for our next video let me

Just know in the comment section and that’s going to be it for this video thank you very much for watching see you in the next video you