Video details

Minecraft clone in JavaScript


In this video i show how to build a minecraft clone in Javascript using React.js, Three.js and React Three Fiber.
Finished Code: Starting point for video:
React three fiber video mentioned in the intro:
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