feat: initial draft for nextjs nested layouts

[RenaudRohlinger]

:japanese_castle: React-Three-Next starter

A minimalist starter for NextJS, @react-three/fiber and Threejs.

• TTL ~ 100ms
• First load JS ~ 79kb
• Lighthouse score of 100 (Performance, Accessibility, Best Practices, SEO)

This starter allows you to navigate seamlessly between pages with dynamic dom and/or canvas content without reloading or creating a new canvas every time. 3D components are usable anywhere in the dom. The events, dom, viewport, everything is synchronized!

⚫ Demo :

How to use

Installation

Tailwind is the default style. styled-components (styled) are also available.

yarn create r3f-app next my-app
# yarn create r3f-app <next> my-app <tailwind|styled>? -ts?

or

npx create-r3f-app next my-app

:passport_control: Typescript

For typescript add the parameter -ts or --typescript:

yarn create r3f-app next my-app -ts

or

npx create-r3f-app next my-app -ts

:mount_fuji: Features

• [x] GLSL imports
• [x] Canvas is not getting unmounted while navigating between pages
• [x] Canvas components usable in any div of the page
• [x] Based on the App directory architecture
• [x] PWA Support

:bullettrain_side: Architecture

Thanks to tunnel-rat the starter can portal components between separate renderers. Anything rendered inside the <View/> component of the starter will be rendered in the 3D Context. For better performances it uses gl.scissor to cut the viewport into segments.

<div className='relative'>
   <View orbit className='relative sm:h-48 sm:w-full'>
        <Dog scale={2} />
        // Some 3D components will be rendered here
   </View>
</div>

:control_knobs: Available Scripts

• yarn dev - Next dev
• yarn analyze - Generate bundle-analyzer
• yarn lint - Audit code quality
• yarn build - Next build
• yarn start - Next start

⬛ Stack

• create-r3f-app – Command line tool to simplify the installation.
• threejs – A lightweight, 3D library with a default WebGL renderer.
• @react-three/fiber – A React renderer for Threejs on the web and react-native.
• @react-three/drei - Optional – useful helpers for react-three-fiber
• @react-three/a11y - Optional – Accessibility tools for React Three Fiber
• r3f-perf - Optional – Tool to easily monitor react threejs performances.

How to contribute :

git clone https://github.com/pmndrs/react-three-next
&& cd react-three-next && yarn install

Maintainers :

• twitter 🐈‍⬛ @onirenaud

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-three-next	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 12, 2023 10:52am

[chrism]

With Typescript yarn run dev gives this error message

error - ./src/helpers/components/Three.ts
Error: 
  x Expected '>', got '{'
   ,-[/project/src/helpers/components/Three.ts:3:1]
 3 | import { r3f } from '@/helpers/global'
 4 | 
 5 | export const Three = ({ children, ...rest }) => {
 6 |   return <r3f.In {...rest}>{children}</r3f.In>
   :                  ^
 7 | }
   `----

Caused by:
    Syntax Error

Import trace for requested module:
./src/helpers/components/Three.ts
./app/page.tsx
wait  - compiling /_error (client and server)...

Without Typescript yarn run dev works with a few warnings

• updating to new Metadata API
• default export is deprecated for Zustand
• several useLayoutEffect warnings like this...

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
at In (webpack-internal:///(sc_client)/./node_modules/tunnel-rat/dist/index.cjs.js:19:7)
at Three (webpack-internal:///(sc_client)/./src/helpers/components/Three.js:10:18)
at Lazy
at ScrollAndFocusHandler (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:145:1)
at InnerLayoutRouter (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:186:30)
at RedirectErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:343:9)
at RedirectBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:349:29)
at NotFoundErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:375:9)
at NotFoundBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:381:29)
at LoadingBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:304:32)
at ErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/error-boundary.js:69:26)
at RenderFromTemplateContext (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/render-from-template-context.js:10:34)
at Lazy
at OuterLayoutRouter (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/layout-router.js:21:30)
at Lazy
at div
at Layout (webpack-internal:///(sc_client)/./src/components/dom/Layout.jsx:13:19)
at Lazy
at body
at html
at ReactDevOverlay (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:61:9)
at HotReload (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:22)
at Router (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/app-router.js:45:23)
at ErrorBoundaryHandler (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/error-boundary.js:57:9)
at ErrorBoundary (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/error-boundary.js:69:26)
at AppRouter (webpack-internal:///(sc_client)/./node_modules/next/dist/client/components/app-router.js:23:13)
at Lazy
at Lazy
at ServerComponentWrapper (/project/node_modules/next/dist/server/app-render.js:304:28)
at ServerComponentWrapper (/project/node_modules/next/dist/server/app-render.js:304:28)
at InsertedHTML (/project/node_modules/next/dist/server/app-render.js:1117:33)

[RenaudRohlinger]

Thanks for the feedback.

tunnel-rat PRs should silence the warning: https://github.com/pmndrs/tunnel-rat/pull/17 https://github.com/pmndrs/tunnel-rat/pull/18

Regarding the props error, I can just remove it but we're currently investigating a potentially better implementation so let's wait a bit

[drcmda]

they're in

[chrism]

Just tested the latest version.

With non-TS the useLayoutEffect warning is gone but I'm still getting a warning about zustand.

[DEPRECATED] Default export is deprecated. Instead use `import { create } from 'zustand'`.

With TS there's now a different error.

error - ./src/helpers/components/Three.ts
Error: 
  x Unterminated regexp literal
   ,-[/projectname/src/helpers/components/Three.ts:3:1]
 3 | import { r3f } from '@/helpers/global'
 4 | 
 5 | export const Three = ({ children }) => {
 6 |   return <r3f.In>{children}</r3f.In>
   :                             ^^^^^^^^
 7 | }
   `----

Caused by:
    Syntax Error