React Three Next

Overview:

The Discord Shield is a minimalist starter for NextJS, @react-three/fiber, and Three.js. It allows seamless navigation between pages with dynamic DOM and/or canvas content without reloading or creating a new canvas every time. It offers features such as GLSL imports, reusable canvas components, PWA support, and more.

Features:

• GLSL imports: Allows importing GLSL shaders into the project.
• Canvas is not getting unmounted while navigating between pages: Ensures the canvas remains mounted during page transitions.
• Canvas components usable in any div of the page: Allows the usage of canvas components in any div of the page.
• Based on the App directory architecture: Follows the App directory architecture for organizing files.
• PWA support: Provides support for Progressive Web Apps.

Installation:

To use the Discord Shield starter, follow these steps:

1. Install the create-r3f-app command line tool: yarn global add create-r3f-app
2. Create a new project using the Discord Shield starter: create-r3f-app my-project -t discord-shield
3. Change into the project directory: cd my-project
4. Install the dependencies: yarn install
5. Start the development server: yarn dev

Summary:

The Discord Shield is a lightweight starter for NextJS, @react-three/fiber, and Three.js. It allows seamless navigation between pages with dynamic content and offers various features such as GLSL imports, reusable canvas components, and PWA support. The starter follows an App directory architecture and provides a smooth and efficient development experience.