R3F Starter by Mostafa Nassar

A production-ready Next.js + TypeScript + Tailwind CSS + React-Three-Fiber template for building interactive 3D web experiences.

🚀 Live demo: Demo🚀

---

📋 Features

• Next.js App Router with fully-typed pages and layouts
• TypeScript everywhere, including Three.js loaders
• Tailwind CSS v4 with optional custom @font-face
• React-Three-Fiber scene wrapper (ThreeCanvas)
• 3D “Hello World!” demo using Drei’s <Text3D>, <Float>, <Environment>
• Flexible lighting, controls & stats out of the box

---

🚀 Getting Started

1. Clone & Prepare

git clone https://github.com/DevMostafaNassar/r3f.git
cd r3f

remove the starter’s remote origin so you can point to your own repo:

git remote remove origin

npm install
# or yarn install
# or pnpm install

2. Development

npm run dev

Open http://localhost:3000 to see your 3D scene in action.

3. Production Build & Start

npm run build
npm start

---

🔧 How to Render a Client-Side Scene

Since React-Three-Fiber runs only in the browser, your page must be a Client Component. In your src/app/page.tsx, add "use client" at the very top:

"use client";

import { Hello } from "@/app/components/Hello";
import { ThreeCanvas } from "@/app/components/ThreeCanvas";

export default function Home() {
  return (
    <main className="w-full h-screen">
      <ThreeCanvas>
        <Hello />
      </ThreeCanvas>
    </main>
  );
}

Alternatively, if you’d rather keep page.tsx as a Server Component, extract the scene into its own file and dynamically import it:

// src/app/components/ClientScene.tsx
"use client";
import { ThreeCanvas } from "./ThreeCanvas";
import { Hello } from "./Hello";

export default function ClientScene() {
  return (
    <ThreeCanvas>
      <Hello />
    </ThreeCanvas>
  );
}

import dynamic from "next/dynamic";

const ClientScene = dynamic(() => import("@/app/components/ClientScene"), {
  ssr: false,
});

export default function Home() {
  return (
    <main className="w-full h-screen">
      <ClientScene />
    </main>
  );
}

---

📂 Project Structure

r3f/
├── public/
│   ├── fonts/
│   │   └── helvetiker_regular.typeface.json
│   └── *.svg, icons, etc.
├── src/
│   └── app/
│       ├── components/
│       │   ├── Hello/
│       │   │   └── index.tsx       # 3D text demo
│       │   └── ThreeCanvas/
│       │       └── index.tsx       # Flexible Canvas wrapper
│       ├── globals.css             # Tailwind & custom @font-face
│       ├── layout.tsx
│       └── page.tsx                # Adds "use client" + renders scene
├── tailwind.config.cjs
├── postcss.config.cjs
├── next.config.ts
├── tsconfig.json
├── package.json
└── README.md

---

🔧 Key Components

ThreeCanvas

A wrapper around R3F’s <Canvas> exposing:

• All CanvasProps
• addDefaultLights (boolean)
• directionalLights (array of { position, intensity, castShadow, shadowMapSize })
• controls (false | true | OrbitControlsProps)
• stats (boolean)

Usage:

<ThreeCanvas
  camera={{ position: [0, 5, 10], fov: 60 }}
  controls={{ enableZoom: false }}
  stats
>
  <Hello />
</ThreeCanvas>

Hello

Renders a spinning, floating, hue-cycling 3D text:

• Loads & extrudes a font via <Text3D>
• Applies HDRI lighting with <Environment preset="sunset" />
• Adds gentle bob + rotation with <Float>
• Animates material color each frame

Usage:

<ThreeCanvas>
  <Hello />
</ThreeCanvas>

🛫 Deployment

Deploy to Vercel with one click:

1. Push your repo to GitHub.
2. Import at https://vercel.com/new.

See Next.js Deploy Docs for more.

---

📚 Learn More

• Next.js → https://nextjs.org/docs
• Tailwind CSS → https://tailwindcss.com/docs
• React-Three-Fiber → https://docs.pmnd.rs/react-three-fiber/
• Drei helpers → https://docs.pmnd.rs/drei/
• Three.js → https://threejs.org/docs

Made with 💜 by Mostafa Nassar