Mystic Marsh

A 3D Experience using React Three Fiber
Explore the repo »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
3. Usage
4. Roadmap

About The Project

This is a sandbox to experiment with a variety of 3D features for the web.

The project includes experiments with:

• Procedural landscape generation with efficient mesh instancing.
• Realistic water using tranmissive materials and surface displacement.
• Responsive 3D design that adapts the camera for mobile devices.
• Wind animations using algorithmic techniques.
• Pathfinding techniques to simulate swimming fish.
• And more to come!

Screenshots

(back to top)

Built With

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Installation

1. Clone the repo

   git clone https://github.com/jhillgithub/mystic-marsh.git

2. Install NPM packages

   npm install

3. Start the application

   npm run dev

(back to top)

User Controls

There are a few controls that are hidden by default but can be enabled in the code. Leva has a hidden flag that can be removed in order to turn on a control panel for the clouds and water. There is also a stats component that can be enabled to see frames per second.

(back to top)

Roadmap

• Add AI to the fish
• Create a path following system for the fish
• Create a procedural tree generator
  • Replash tree leaves with instanced meshes to reduce size

See the open issues for a full list of proposed features (and known issues).

(back to top)