Video details

Minecraft clone in JavaScript

JavaScript
01.11.2021
English

In this video i show how to build a minecraft clone in Javascript using React.js, Three.js and React Three Fiber.
Play: https://minecraft-js.vercel.app
Finished Code: https://github.com/danba340/minecraft-react Starting point for video: https://github.com/danba340/minecraft-react/tree/dev
React three fiber video mentioned in the intro: https://www.youtube.com/watch?v=FGG0EeMNUl0
The game supports five Minecraft block types: Dirt, Grass, Wood, Log and Glass. You can move around using the mouse and WASD, You can click and Alt+click to add and remove blocks. The tutorial includes many React concepts such as
useState, useEffect, useRef and custom Hooks for State management and Keyboard input. Zustand is used for the state management.
Timestamps: 0:00 Intro 0:45 Starting point 3:05 State setup 9:45 Cube component 12:50 Texturising the Cube 15:37 Keyboard input Hook 25:18 Moving the player 34:10 Looking around 38:26 Cube hover state 42:10 Rendering Cubes from State 46:23 Making glass transparent 47:18 Adding/Removing Cubes 54:33 Saving the World 56:00 Jumping 58:23 Adding IDs to Cubes 58:52 Lets Minecraft 59:28 Outro