React Three Blitz

React Three Blitz is a Blitz.js starter template that merges React Three Fiber 3D capabilities with Blitz's full-stack conventions, giving you a single project where 3D scenes and traditional web UI coexist. Developed as an experiment by c0d3t3k, the template is heavily influenced by react-three-next, a well-known React Three Fiber + Next.js starter, and adapts that approach to the Blitz.js framework.

What is React Three Blitz?

React Three Blitz is a starter/experiment built on the base Blitz.js generated app, adding custom layout components, pages, and a 3D-ready file structure. The template takes a standard Blitz.js project and injects React Three Fiber and Drei (via the pmndrs ecosystem) so you can render WebGL scenes inside your Blitz app. It runs on Blitz.js, which itself builds on Next.js, and requires Node. The output is a full web application with authentication, API routes, and 3D views all in one codebase.

Key Features

• Blitz.js foundation — Uses the default Blitz.js structure with app/, pages/, api/, and auth/ directories, so conventions like routing and authentication work out of the box.
• Dual layout system — The _canvas.tsx and _dom.tsx components separate the Three.js canvas from the DOM overlay, a pattern borrowed from react-three-next that lets you render 2D UI on top of 3D content.
• 3D authentication pages — Includes login3d.tsx and signup3d.tsx, placing login and signup forms inside a Three.js scene instead of a plain HTML page.
• Dark mode toggle — A reusable DarkMode.tsx component is provided in the core components folder.
• Customizable logo — A Logo.tsx component is ready to rebrand.
• Hero page — A dedicated hero.tsx page demonstrates a 3D hero section, complementing the default index.tsx.
• Quick start commands — Setup uses yarn and yarn dev, and the project includes a Gitpod button to launch a cloud environment directly from the repository.
• Community resources — The README links to a dev.to article and a Discord server for discussion (discord.blitzjs.com).

Who is it for?

• Blitz.js developers — Those who want to experiment with React Three Fiber without leaving the Blitz.js ecosystem.
• 3D web developers — People building interactive 3D web experiences (portfolios, product pages) who also need full-stack features like authentication and API routes.
• Starter collectors — Developers evaluating React Three Fiber starters who want to compare a Blitz.js-based approach to the more common Next.js-based react-three-next.

What can you do with it?

• Full-stack 3D applications: Combine Three.js scenes with Blitz.js auth, database, and API routes to build apps that need both 3D visuals and server infrastructure.
• 3D portfolios or landing pages: Use the hero.tsx page and the canvas/dom layout to create an immersive hero section while keeping normal content accessible.
• Learning and prototyping: Study the file tree to see how a Blitz.js app can be extended with React Three Fiber, then fork it to build your own experiment.

How does it work?

The README gives a three-step start: clone the repository, run yarn to install dependencies, then run yarn dev to start the development server. The app is then accessible at localhost:3000. The template's custom components are stored in the app/core/components and app/core/layouts folders, and pages are added under app/pages.