Minecraft 3D WebRender

Web rendering a Minecraft world using Three.js including dynamic lighting, a sky dome, transparent leaves and character animation (work in progress).
Demo »

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Running the project
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact

About The Project

Played around with Three.js and decided to try and load a Minecraft world in GLTF format. Turned out it's not as easy as thought (especially since I am pretty new to Blender and such). If you wanna see how everything works, have a look down below.

(back to top)

Built With

• Three.js for the 3D web rendering
• My library three-tween-path to create configurable movement paths (e.g. for a character walking animation)
• My library three-creative-controls to mirror the Minecraft creative-mode control behaviour
• Mineways to export a Minecraft world as .obj files
• Blender to create a binary glTF (.glb) file from the generated .obj
• Draco 3D for glTF compression
• Vite as frontend dev tool

(back to top)

Running the project

Follow these steps to run the project locally:

1. Install NPM dependencies

   npm install

2. Start in development mode:

   npm run dev

Follow these steps to build the project:

1. Build project and preview with vite:

   npm run build
   npm run serve

2. Deploy static files using a webserver like NGINX

(back to top)

Usage

Once the project is running locally, navigate to localhost:3000 in your browser. Give the project a few seconds to load (depends on your machine) and expore the world!

(back to top)

Screenshots

Transparent textures allowing for light and shadows to pass through

World at night showing off beautiful atmosphere through torch lighting

Closer look at dynamic lighting using spot lights

(back to top)

Roadmap

• Export Minecraft World as 3D models
• Create one glTF file containing all the models the world is composed of
• Create skydome
• Mimic Minecraft controls in creative mode
• Add basic pause menu
• Create a Minecraft character with player skin as 3D model
• Make player model follow a walking path
• Include player animations (walking, idling)
  • Fix feet animations
• Import texture animations (water, lava, leaves, portal)
• Improve performance

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Luca Mueller - [email protected]

Project Link: https://github.com/LucaMueller1/minecraft3Dwebapp

(back to top)