3D Web Starter

A beginner-friendly React Three Fiber template for hackathons. Build immersive 3D web experiences with modern React patterns + Thirdweb Auth.

Features

• Basic Scene — Load GLB models with OrbitControls
• Playground — WASD movement with camera follow
• Login Demo — 3D background with ThirdWeb wallet auth
• Documentation — Essential R3F patterns and code examples

Quick Start

pnpm install
pnpm dev

Open http://localhost:3000

ThirdWeb Setup (Optional)

The Login Demo page requires a ThirdWeb client ID:

1. Create a free account at thirdweb.com/dashboard
2. Create a new project to get your Client ID
3. Create .env.local:

NEXT_PUBLIC_THIRDWEB_CLIENT_ID=your_client_id_here

4. Restart the dev server

The Scene and Playground pages work without ThirdWeb.

Project Structure

src/
├── app/
│   ├── page.tsx           # Home
│   ├── scene/             # Basic 3D scene
│   ├── playground/        # WASD movement
│   ├── login/             # 3D + Auth demo
│   └── docs/              # Documentation
├── components/
│   ├── scene/             # Canvas, Model, Ground
│   ├── player/            # PlayerController
│   └── ui/                # BackButton, ControlsHelp
├── providers/             # ThirdWeb
├── lib/                   # Utils, ThirdWeb config
├── hooks/                 # useUser
├── constants/             # Keyboard controls
└── stores/                # Zustand example

Key Patterns

Next.js Config

// next.config.ts
const nextConfig = {
  reactStrictMode: false, // Required for WebGL
};

UI Over 3D Canvas

<div className="absolute z-[10000]">
  {/* UI content */}
</div>

Loading Models

import { useGLTF } from "@react-three/drei";
import { SkeletonUtils } from "three-stdlib";

function Model({ url }) {
  const { scene } = useGLTF(url);
  const clone = useMemo(() => SkeletonUtils.clone(scene), [scene]);
  return <primitive object={clone} />;
}

Chains

Available chains:

• appchain (ID: 466) — Default
• apechain (ID: 33139) — ApeChain mainnet
• apechainTestnet (ID: 33111) — Curtis testnet

Tech Stack

• React Three Fiber — React renderer for Three.js
• Drei — Useful R3F helpers
• Three.js — 3D graphics
• ThirdWeb — Wallet authentication
• Zustand — State management

Resources

• React Three Fiber Docs
• Drei GitHub
• Three.js Docs
• ThirdWeb Connect