Skip to content

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

License

Notifications You must be signed in to change notification settings

LucaMueller1/minecraft3Dwebapp

Repository files navigation


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
  2. Running the project
  3. Usage
  4. Roadmap
  5. Contributing
  6. License
  7. Contact

About The Project

Product Name Screen Shot

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 screenshotLeaves

World at night showing off beautiful atmosphere through torch lighting screenshotNight

Closer look at dynamic lighting using spot lights screenshotTorch

(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 - lucamueller32@gmail.com

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

(back to top)

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published