hritikrc/minecraft

All the files for the YouTube 3d Minecraft tutorial series are located here!

Minecraft

All the files for the youtube series, "How to Code Minecraft in Javascript" are located here!

Goal: Build a spinoff of Minecraft in the web, using HTML, CSS and Javascript, from scratch. This project involves some really interesting algorithms and concepts, some of which are listed below.

• Procedural Terrain Generation
• Perlin Noise
• THREE.js
• Infinite Terrain Generation
• Raycasting
• 3D Character Movement
• 3D Collision Detection
• Loading and Saving Files

Info:

• Over 2 year project
• Youtube series of tutorials starting from the very beginning
• Has gained a lot of views and promotion

Steps:

1. You can download the latest code from the series from here.
2. Download the whole repository as a zip or just as a folder.
3. If you download it as a ZIP, you will need to extract it.
4. Then, just open the folder and click on the 3dminecraft.html to open the minecraft program.
5. If you also want to play with textures, you have to run the file as a server. For that, watch part 4 of the youtube series (link below)!

NOTE!

• Make sure to open the minecraft.html file as a server!
• Inlcude the license or credit this project for any commerical use!

If you have any questions, please ask either here, discord or in youtube.

• Find me in youtube at Hritik RC: https://www.youtube.com/c/hritikrc
• Playlist for the minecraft series: https://www.youtube.com/playlist?list=PLEtXCX1lakbhq_01JKJILx90wLfdwrJig
• Discord Server: https://discord.gg/tCEhtAwVvS

Thanks for the support! :)

minecraft's Issues

Fps dropping down

Hello hritik, i used vscode and opened a server, everything is working fine but the fps is 0 and i am not able to move or look around, how can i solve this problem

something rong here

help me i am not sure if this works this is part 5

code:

starts

<title>Minecraft</title> <style type="text/css"> body { margin: 0; }

    #autojumpbutton {
        position: absolute;
        top: 20px;
        left: 20px;
    }
</style>

<script src="three.js"></script> <script src="perlin.js"></script> <script src="PointerLockControls.js"></script> AutoJump: off

<script type="text/javascript">
    noise.seed(Math.random());
    var scene = new THREE.Scene();
    scene.background = new THREE.Color(0x00ffff);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var loader = new THREE.TextureLoader();
    var materialArray = [
        new THREE.MeshBasicMaterial({
            map: loader.load("textures/side4.png")
        }),
        new THREE.MeshBasicMaterial({
            map: loader.load("textures/side1.png")
        }),
        new THREE.MeshBasicMaterial({
            map: loader.load("textures/top.png")
        }),
        new THREE.MeshBasicMaterial({
            map: loader.load("textures/bottom.png")
        }),
        new THREE.MeshBasicMaterial({
            map: loader.load("textures/side2.png")
        }),
        new THREE.MeshBasicMaterial({
            map: loader.load("textures/side3.png")
        }),
    ]

    function Block(x, y, z) {
        this.x = x;
        this.y = y;
        this.z = z;

        this.display = function() {
            var blockBox = new THREE.BoxBufferGeometry(5, 5, 5);
            // var blockMesh = new THREE.MeshBasicMaterial({
            //color: 0x00ff00
            //});
            var block = new THREE.Mesh(blockBox, materialArray);
            scene.add(block);
            block.position.x = this.x;
            block.position.y = this.y - 5;
            block.position.z = this.z;

            var edges = new THREE.EdgesGeometry(blockBox);
            var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
                color: 000000
            }));
            scene.add(line);
            line.position.x = this.x;
            line.position.y = this.y - 5;
            line.position.z = this.z;

        }
    }

    var autoJump = false;

    function toggleAutoJump() {
        if (autoJump == true) {
            autoJump = false;
            document.getElementById('autojumpbutton').innerHTML = "<h2>AutoJump: off</h2>";

        } else {
            autoJump = true;
            document.getElementById('autojumpbutton').innerHTML = "<h2>AutoJump: on</h2>";
        }
    }

    /* var axesHelper = new THREE.AxesHelper(5);
     scene.add(axesHelper);*/

    var keys = [];
    var canJump = true;
    document.addEventListener("keydown", function(e) {
        keys.push(e.key);
        if (e.key == " " && canJump == true) {
            ySpeed = -1.3;
            canJump = false;
        }
    });
    document.addEventListener("keyup", function(e) {
        var newArr = [];
        for (var i = 0; i < keys.length; i++) {
            if (keys[i] != e.key) {
                newArr.push(keys[i]);
            }
        }
        keys = newArr;
    });

    var controls = new THREE.PointerLockControls(camera, document.body);
    document.body.addEventListener("click", function() {
        controls.lock();
    });
    controls.addEventListener("lock", function() {

    });
    controls.addEventListener("unlock", function() {

    });


    var movingSpeed = 1.5;
    var ySpeed = 0;
    var acc = 0.08;

    function update() {

        if (keys.includes("w")) {
            controls.moveForward(movingSpeed);
            if (autoJump == false) {
                for (var i = 0; i < chunks.length; i++) {
                    for (var j = 0; j < chunks[i].length; j++) {
                        if (camera.position.x <= chunks[i][j].x + 2.5 && camera.position.x >= chunks[i][j].x - 2.5 && camera.position.z <= chunks[i][j].z + 5 && camera.position.z >= chunks[i][j].z) {
                            if (camera.position.y == chunks[i][j].y - 2.5) {
                                controls.moveForward(-1 * movingSpeed);
                            }
                        }

                    }
                }
            }
        }
        if (keys.includes("a")) {
            controls.moveRight(-1 * movingSpeed);
            if (autoJump == false) {
                for (var i = 0; i < chunks.length; i++) {
                    for (var j = 0; j < chunks[i].length; j++) {
                        if (camera.position.x <= chunks[i][j].x + 2.5 && camera.position.x >= chunks[i][j].x - 2.5 && camera.position.z <= chunks[i][j].z + 5 && camera.position.z >= chunks[i][j].z) {
                            if (camera.position.y == chunks[i][j].y - 2.5) {
                                controls.moveRight(movingSpeed);
                            }
                        }

                    }
                }
            }
        }
        if (keys.includes("s")) {
            controls.moveForward(-1 * movingSpeed);
            if (autoJump == false) {
                for (var i = 0; i < chunks.length; i++) {
                    for (var j = 0; j < chunks[i].length; j++) {
                        if (camera.position.x <= chunks[i][j].x + 2.5 && camera.position.x >= chunks[i][j].x - 2.5 && camera.position.z <= chunks[i][j].z + 5 && camera.position.z >= chunks[i][j].z) {
                            if (camera.position.y == chunks[i][j].y - 2.5) {
                                controls.moveForward(movingSpeed);
                            }
                        }

                    }
                }
            }
        }
        if (keys.includes("d")) {
            controls.moveRight(movingSpeed);
            if (autoJump == false) {
                for (var i = 0; i < chunks.length; i++) {
                    for (var j = 0; j < chunks[i].length; j++) {
                        if (camera.position.x <= chunks[i][j].x + 2.5 && camera.position.x >= chunks[i][j].x - 2.5 && camera.position.z <= chunks[i][j].z + 5 && camera.position.z >= chunks[i][j].z) {
                            if (camera.position.y == chunks[i][j].y - 2.5) {
                                controls.moveRight(-1 * movingSpeed);
                            }
                        }
                    }

                }
            }
        }
        camera.position.y = camera.position.y - ySpeed;
        ySpeed = ySpeed + acc;

        for (var i = 0; i < chunks.length; i++) {
            if (camera.position.x <= chunks[i][j].x + 2.5 && camera.position.x >= chunks[i][j].x - 2.5 && camera.position.z <= chunks[i][j].z + 5 && camera.position.z >= chunks[i][j].z) {
                if (camera.position.y <= chunks[i][j].y + 2.5 && camera.position.y >= chunks[i][j].y - 2.5) {
                    camera.position.y = chunks[i][j].y + 2.5;
                    ySpeed = 0;
                    canJump = true;
                    break;
                }
            }

        }
    }

    /*
            var blocks = [];
            var xoff = 0;
            var zoff = 0;
            var inc = 0.1;
            var amplitude = 25;
            for (var x = 0; x < 20; x++) {
                xoff = 0;
                for (var z = 0; z < 20; z++) {
                    var v = Math.round(noise.perlin2(xoff, zoff) * amplitude / 5) * 5;
                    blocks.push(new Block(x * 5, v, z * 5));
                    xoff = xoff + inc;
                }
                zoff = zoff + inc;

            }
            for (var i = 0; i < blocks.length; i++) {
                chunks[i][j].display();
            }
            */

    var chunks = [];
    var xoff = 0;
    var zoff = 0;
    var inc = 0.05;
    var amplitude = 30 + (Math.random() * 70);
    var renderDistance = 3;
    var chunkSize = 10;
    camera.position.x = renderDistance * chunkSize / 2 * 5;
    camera.position.z = renderDistance * chunkSize / 2 * 5;
    camera.position.y = 50;

    for (var i = 0; i < renderDistance; i++) {
        var chunk = [];
        for (j = 0; j < renderDistance; j++) {
            for (var x = i * chunkSize; x < (i * chunkSize) + chunkSize; x++) {
                for (var z = j * chunkSize; z < (j * chunkSize) + chunkSize; z++) {
                    xoff = inc * x;
                    zoff = inc * z;
                    var v = Math.round(noise.perlin2(xoff, zoff) * amplitude / 5) * 5;
                    chunk.push(new Block(x * 5, v, z * 5));


                }
            }
        }

        chunks.push(chunk);

    }
    for (var i = 0; i < chunks.length; i++) {
        for (var j = 0; i < chunks[i].length; j++) { // <-- Error here
            chunks[i][j].display();
        }
    }




    // Resize Window
    window.addEventListener("resize", function() {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
    });

    function render() {
        renderer.render(scene, camera);
    }

    function GameLoop() {
        requestAnimationFrame(GameLoop);
        update();
        render();
    }
    GameLoop();
</script>

ends

it says: minecraft.html:265 Uncaught TypeError: Cannot read properties of undefined (reading 'display')

line 265

  for (var i = 0; i < chunks.length; i++) {
        for (var j = 0; i < chunks[i].length; j++) { // <-- Error here
            chunks[i][j].display();
        }
    }

Is there a place to download your minecraft world code for each video?

Somewhere between video 9 or ten, my code suddenly doesn't match anymore, and it's off my about 50 lines and I cannot figure it out! Noticed especially in video 10 that maybe some stuff got moved around between videos?

Then on Part 11(Raycasting), it's so different, I tried pulling from the minecraftworld.html file, but that's really different from video 10 too.

Do you happen to have a copy of your world file that's up to date for each video?

Thank you,

• D

The water isn't flowing

The water isn't flowing

noise is undefined

the noise.perlin2 gets an "Uncaught ReferenceError: noise is not defined" error.

heres the code:

`

<script src="three.js"></script>

<script src="perlin.js"></script>
<script>
    var scene = new THREE.Scene();
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight)
    document.body.appendChild(renderer.domElement);
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)

    function Block(x,y,z){
        this.x = x;
        this.y = y;
        this.z = z;

        this.display = function(){
            var blockBox = new THREE.BoxBufferGeometry(25,1,50);
            var blockMesh = new THREE.MeshBasicMaterial({color: 0x00ff00})
            var block = new THREE.Mesh(blockBox, blockMesh);
            scene.add(block);
            block.position.x = this.x;
            block.position.y = this.y;
            block.position.z = this.z;

            var edges = new THREE.EdgesGeometry(blockBox);
            var line  = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color: 0xffffff}))
            scene.add(line);
            line.position.x = this.x;
            line.position.y = this.y;
            line.position.z = this.z;
        }
    }

    var blocks = [];
    var xoff = 0;
    var zoff = 0;
    var inc = 0.1;
    var amplitude = 100;
    for(var x = 0; x < 20; x++) {
        xoff = 0
        for(var z = 0; z < 20; z++) {
            var v = Math.round(noise.perlin2(x, z) * amplitude / 5) * 5
            blocks.push(new Block(x * 5, v, z * 5))
            xoff = xoff + inc;
        }
        zoff = zoff + inc;
    }

    for(var i = 0; i < blocks.length; i++) {
        blocks[i].display();
    }

    function update() {

    }

    window.addEventListener("resize", function() {
        renderer.setSize(window.innerWidth,window.innerHeight);
        camera.aspect = window.innerWidth/window.innerHeight;
        camera.updateProjectionMatrix();
    });

    function render() {
        renderer.render(scene, camera);
    }

    function GameLoop(){
        requestAnimationFrame(GameLoop);
        update();
        render();
    }

    GameLoop();
</script>

`

Pressing 'Q' Places multiple blocks

After video 12 the game is sooo fast. I tried changing the movement speed down a bit which helped. But still, when tapping 'q' even just for a split second, it places 3-7 blocks. It's like it thinks I'm pressing 'q' longer than I am. Any ideas?

part 4 command prompt issue

my issue is that when i type

cd monkeychef/OneDrive/Desktop/minestuff

into my command prompt, it says

The system cannot find the path specified.

full file name:

file:///C:/Users/monkeychef/OneDrive/Desktop/minestuff/minecraft.html

Hello HritikRC. I published a 3d minecraft clone on unity and another proyect. I will give their links:

Hello HritikRC. I published a 3d minecraft clone on unity and another proyect. I will give their links:
https://drfrank33333.itch.io/

Black Screen

I'm wondering if there is something wrong with your code and or if their is something wrong with your textures, because i coded it up thanks to your help for a school project. but it gives me a black screen, an update would be nice to figure this out. Thanks so much!

there are errors

is my code correct

var chunks = [];
var xoff = 0;
var zoff = 0;
var inc = 0.05;
var amplitude = 30 + (Math.random() * 70);
var renderDistance = 3;
var chunkSize = 10;
camera.position.x = renderDistance * chunkSize / 2 * 5;
camera.position.z = renderDistance * chunkSize / 2 * 5;
camera.position.y = 50;

for (var i = 0; i < renderDistance; i++) {
var chunk = [];
for (j = 0; j < renderDistance; j++) {
for (var x = i * chunkSize; x < (i * chunkSize) + chunkSize; x++) {
for (var z = j * chunkSize; z < (j * chunkSize) + chunkSize; z++) {
xoff = inc * x;
zoff = inc * z;
var v = Math.round(noise.perlin2(xoff, zoff) * amplitude / 5) * 5;
chunk.push(new Block(x * 5, v, z * 5));

        }
    }
}

chunks.push(chunk);

}
for (var i = 0; i < chunks.length; i++) {
for (var j = 0; j < chunks[i].length; j++) { // <-- Error here
chunks[i][j].display();
}
}

my localhost cannot load the project please help thank you i am subbbed btw

Hey I tried following your Minecraft tut but I kept not seeing anything

The screen was all black and I revised my code and everything should have been working but the screen just kept showing nothing but black. I then just cloned your repo to see something, anything, and the background is this bright blue and all the blocks are completely black. Something's clearly gone wrong I think. I'm using Mac and have tried running it on 3 different browsers and all have the same issues. Here's what what I'm talking about looks like:
https://youtu.be/vued5GQmgt4

Do you have any idea what's going on? Your tutorial looked like the best resource on this so I'm sad it doesn't work for me