Minecraft Viki (video wiki) ➜ https://minecraft.viki.gg
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
source
Thanks for the awesome content
wow this is AMAZING! thank you so much. I love react three fiber content
Loved it – watched it even though I no nothing about React Fiber! Great content as always mate!
Amazing job, thank u for sharing!
Increible es sorprendente lo que puedes hacer hoy en dia usando javascript, eres genial muchas gracias por el aporte, saludos desde Venezuela /
Incredible it is surprising what you can do today using javascript, you are great thank you very much for the contribution, greetings from Venezuela
thanks for sharing! <3
Amazing, congratulations!
Wonderful and enjoyed fully!
Well done, thank you
Wont using Y-axis vecelocity to detect if you're on the ground mean that your program will think you are on the ground at at top of your jump arc?
Brilliant!
It is inspiring, the way you built this and explained it! I am getting inspired to code as well 🙂
What theme are you using in vscode?
Mindboggling doing this in React. Awesome stuff!