Minimal React Three Fiber Next js

A minimal starter for React Three Fiber + Next js with single canvas instance for every page to enable seamless page navigation experience.

Demo

Features

• [✓] Fast Refresh works out of the box
• [✓] Automatically inject fiber component in the Canvas
• [✓] Custom Canvas for better performance
• [✓] Customizable Page layout. No fixed Page layout is used
• [✓] Register Three js component in a type-safe way with useCatalogues hooks

Register Three js component

import { Mesh } from "three";

const catalogues = {
  Mesh, //Okay
  SomethingThatIsNotACatalogue, //Error
  // ...
};

const Component3d = () => {
  useCatalogues(catalogues);

  return <mesh>{/* .... */}</mesh>;
};

Add 3d Component into a page

Simply add either useRender or useRenderWithContext hooks inside your component and put it into nextjs page normally.

const NormalComponent = () => {
    useRenderWithContext(
        <>
            <Component3d>
            <OrbitControls>
            <ambientLight>
        </>
    )

    return (
        <h1>
            Welcome!
        </h1>
    )
}

export default NormalComponent

const Page = () => {
  return (
    <>
      <div>Hello World !</div>
      {/* Simply add the component. */}
      <NormalComponent />
    </>
  );
};

export default Page;

Deps

• threejs @react-three/fiber @react-three/drei – For developing 3d model on the web
• @parcel/css – For minifying css bundle
• @vanilla-extract/css @vanilla-extract/sprinkles – For DOM styling
• @yushijinhun/three-minifier-webpack – For minifying three js bundle