Building Javascript Minecraft in 1 hour - [React & Three.js Tutorial]

In this video i show how to build a minecraft clone in Javascript using React.js, Three.js and React Three Fiber.

EDIT: nanoid as key on every render is a bad practice, instead it should be applied to each cube on creation in the store, see repo for final implementation 😀👇

Finished Code: https://github.com/danba340/minecraft-react Starting point for video: https://github.com/danba340/minecraft-react/tree/dev

Play: https://minecraft-js.vercel.app

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.

Say hi on twitter: https://twitter.com/barelydaniel

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 ... https://www.youtube.com/watch?v=aWQmuTiThTs