Blitz.js + React Three Fiber == React Three Blitz?!
Tags: blitzjs, nextjs, r3f, react
Published: 2021-02-24 17:36:22

# Blitz.js + React Three Fiber ==> React Three Blitz?

In order to celebrate the recent [Blitz.js promotion to formal Beta](https://twitter.com/flybayer/status/1362048912476016642), 

{% twitter 1362048912476016642%}

we thought it might be fun to see how it integrates with one of our favorite frameworks, [React Three Fiber](https://github.com/pmndrs/react-three-fiber). Introducing **[react-three-blitz](https://github.com/c0d3t3k/react-three-blitz)**!

## What is [Blitz.js](https://blitzjs.com/)? 
If you haven't seen it yet, you owe it to yourself to checkout one of [Brandon Bayer](https://twitter.com/flybayer)'s (the founder and chief evangelist of Blitz.js) very thorough [video introductions](https://youtu.be/UHyx8MtCVVk). 

{% youtube UHyx8MtCVVk %}

We are intrigued by **blitz.js** because it offers a compelling, uniquely integrated ([Rails-like](https://rubyonrails.org/)?) monolithic, full stack solution built using top tier open source components (React, [Next.js](https://nextjs.org/), [Prisma ORM](https://www.prisma.io/), [React Query](https://react-query.tanstack.com/), [Passport.js](http://www.passportjs.org/) [Auth Strategies](http://www.passportjs.org/packages/),etc.). 

## What is [react-three-fiber](https://github.com/pmndrs/react-three-fiber)? 
To put it simply, `r3f` a [React renderer](https://reactjs.org/docs/codebase-overview.html#renderers) for [THREE.js](https://threejs.org/) for the web and [react-native](https://reactnative.dev/). **THREE.js** has been a gamechanger but we really feel that [@0xca0a](https://twitter.com/0xca0a)/[@drcmda](https://github.com/drcmda) [et al](https://github.com/pmndrs/react-three-fiber/graphs/contributors)'s **react-three-fiber** [and the [Drei](https://github.com/pmndrs/drei) utilites!] takes it to the next level by wrapping THREE.js primitives, etc. to keep all of our 3D web dev concise and performant.

A lot of credit for this integration idea goes to [@onireanud](https://twitter.com/onirenaud) [et al](https://github.com/pmndrs/react-three-next/graphs/contributors) and his [@pmndrs](https://github.com/pmndrs) umbrella creation [react-three-next](https://github.com/pmndrs/react-three-next). This excellent project introduces a compelling pattern, especially for integrating r3f and **next.js**.

Specifically, `react-three-next` uses a unified layout model containing a THREE.js/r3f canvas and a react DOM container overlaid on top of each other. A rendering filter is used to seperate HTML and r3f components and render them in the appropriate container.

Below is a quick rundown of changes we added/changed to get our 3D adventure started:

### Fix/Circumvent SSR using [next-transpile-modules](https://github.com/c0d3t3k/react-three-blitz/blob/master/blitz.config.js)
**Three.js**, **[Drei](https://github.com/pmndrs/drei)** etc. don't play well with [SSR](https://en.wikipedia.org/wiki/Server-side_scripting) so we needed a way to pre-transpile these libraries.
[![blitz.config.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v9vxi6b3frkqcb9qk9u7.png)](https://github.com/c0d3t3k/react-three-blitz/blob/master/blitz.config.js)

### [Reusable Canvas](https://github.com/c0d3t3k/react-three-blitz/blob/master/app/core/layouts/_canvas.tsx)
Our goal here was to leverage a "reusable" Canvas ala [react-three-next](https://github.com/pmndrs/react-three-next). All "3D" elements (hero, logo, etc. in our case) would render as children of this element. We also included some configurable niceties like [r3f-perf](https://github.com/RenaudRohlinger/r3f-perf), [OrbitControls](https://threejs.org/docs/#examples/en/controls/OrbitControls).
[![app/core/layouts/_canvas.tsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivnzc7x3khrko03knu47.png)](https://github.com/c0d3t3k/react-three-blitz/blob/master/app/core/layouts/_canvas.tsx)

### [DOM/HTML Component Container](https://github.com/c0d3t3k/react-three-blitz/blob/master/app/core/layouts/_dom.tsx)
Also similarly to **react-three-next** we used a wrapper for all non 3D or plain "dom" elements.
[![app/core/layouts/_dom.tsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44lymgn774c5ewkpuvdl.png)](https://github.com/c0d3t3k/react-three-blitz/blob/master/app/core/layouts/_dom.tsx)

### [SplitApp](https://github.com/c0d3t3k/react-three-blitz/blob/master/app/core/layouts/Layout.tsx#L29)
Then, we use this component either aggregate the 3D and non-3D components, if 3D components are present. Or, just output a standard non-canvas component wrapper.k
[![app/core/layouts/Layout.tsx#L29](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1z1jwdr72mhawg92iv3.png)](https://github.com/c0d3t3k/react-three-blitz/blob/master/app/core/layouts/Layout.tsx#L29)

### [Layout](https://github.com/c0d3t3k/react-three-blitz/blob/master/app/core/layouts/Layout.tsx)
As described earlier, this component is used to create separate arrays of r3f and HTML based on the presence of a "key". Using these arrays we determine whether or not to display the Canvas.
[![app/core/layouts/Layout.tsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxc6yaxvow4ik5ul48pp.png)](https://github.com/c0d3t3k/react-three-blitz/blob/master/app/core/layouts/Layout.tsx)

### [Index](https://github.com/c0d3t3k/react-three-blitz/blob/master/app/pages/index.tsx)
Finally, we import our 3D component and disable SSR. Then, we use the **Layout** component from above and mark each **3D** with a *key* (i.e. 'r3f', etc.) to let the render know we will be presenting a **r3f** component.
[![app/pages/index.tsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh3mkxe8qcvyn1iwvyxa.png)](https://github.com/c0d3t3k/react-three-blitz/blob/master/app/pages/index.tsx)

The [react-three-blitz](https://github.com/c0d3t3k/react-three-blitz) starter is definitely a work-in-progress. In fact, we don't have all the coolness ported yet from [react-three-next](https://github.com/pmndrs/react-three-next#mount_fuji-features) (i.e. transitions, webpack customization, etc.). Also, there in-progress [r3f issue](https://github.com/pmndrs/react-three-fiber/issues/1004) preventing us from sharing a canvas across routes to optimize navigation responsiveness.

{% github https://github.com/pmndrs/react-three-fiber/issues/1004 %}

Nevertheless, we encourage you to give [react-three-blitz](https://github.com/c0d3t3k/react-three-blitz) a spin!

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/c0d3t3k/react-three-blitz)

-c0d3t3k


{% github c0d3t3k/react-three-blitz %}