In order to celebrate the recent Blitz.js promotion to formal Beta,
Brandon 🚀 Blitz.js⚡️🔥 BLITZ.JS IS NOW IN BETA!
✅ Rails-like Fullstack Framework
✅ Built on Next.js
✅ Zero-API data layer abstraction eliminates need for REST/GraphQL
🚀 Ready to start building production apps at the speed of ⚡️
🎨 And we just launched our new website!
Blitzjs.com14:39 PM - 17 Feb 2021
What is Blitz.js?
We are intrigued by blitz.js because it offers a compelling, uniquely integrated (Rails-like?) monolithic, full stack solution built using top tier open source components (React, Next.js, Prisma ORM, React Query, Passport.js Auth Strategies,etc.).
What is react-three-fiber?
To put it simply,
r3f a React renderer for THREE.js for the web and react-native. THREE.js has been a gamechanger but we really feel that @0xca0a/@drcmda et al's react-three-fiber [and the 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 et al and his @pmndrs umbrella creation react-three-next. This excellent project introduces a compelling pattern, especially for integrating r3f and next.js.
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
Our goal here was to leverage a "reusable" Canvas ala 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, OrbitControls.
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.
The 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 (i.e. transitions, webpack customization, etc.). Also, there in-progress r3f issue preventing us from sharing a canvas across routes to optimize navigation responsiveness.
Nevertheless, we encourage you to give react-three-blitz a spin!
Run your app in the development mode.
yarn yarn dev
Open http://localhost:3000 with your browser to see the result.
List of delta's from the base Blitz.js generated app
react-three-blitz ├── app/ │ ├── core/ | │ └── components/ │ │ | └── DarkMode.tsx │ │ | └── Logo.tsx │ │ └── layouts/ │ │ └── _canvas.tsx │ │ └── _dom.tsx │ │ └── Layout.tsx │ ├── pages/ │ │ ├── _app.tsx │ │ └── index.tsx │ │ └── hero.tsx │ ├── api/ │ ├── auth/ │ ├── pages/ │ ├── login3d.tsx │ └── signup3d.tsx ├── blitz.config.js ├── tsconfig.json