Generate interactive 3D avatars from a single photo using AI. Choose between cursor-tracking rotation or full 3D model export.

• Two Generation Modes:
  • Cursor Tracking - Generate a grid of head rotation frames for mouse-follow effect
  • 3D Model - Generate an actual GLB 3D model you can use in Blender, Unity, etc.
• Pixar-Style Preprocessing - Photos are transformed into stylized 3D characters
• Custom Style Prompts - Add accessories, change styles (cyberpunk, cartoon villain, etc.)
• Export Options - Download GLB files, HTML embeds, individual frames, or React components

Inspired by Wes Bos's Eye Ballz project, which creates interactive eye-tracking avatars. This project extends the concept with AI-powered stylization and true 3D model generation.

1. Upload a photo with a face
2. The app preprocesses your photo using google/nano-banana-pro to create a Pixar-style 3D character
3. Based on your selected mode:
   • Cursor Tracking: Generates a grid of images at different head angles using fofr/expression-editor
   • 3D Model: Generates a GLB model using firtoz/trellis
4. Preview and export your creation

• Node.js 18+
• Replicate API token

# Clone the repo
git clone https://github.com/0xGF/avatar-3d.git
cd avatar-3d
# Install dependencies
pnpm install
# Copy environment variables
cp .env.example .env.local
# Add your Replicate API token to .env.local
# REPLICATE_API_TOKEN=r8_xxxxx
# Run the dev server
pnpm dev

Open http://localhost:3000 in your browser.

• Horizontal/Vertical Steps: Number of images in each direction (5x5 = 25 frames)
• Higher step counts = smoother rotation but more API calls

• Texture Size: Resolution of the model texture (512-2048px)
• Mesh Quality: Detail level of the 3D mesh (50-100%)

• Preprocessing: ~0ドル.01 per image
• Cursor Tracking: ~0ドル.01 per frame (5x5 grid ≈ 0ドル.25)
• 3D Model: ~0ドル.05-0.10 per generation

• Next.js - React framework
• Three.js - 3D model rendering
• Replicate - AI model hosting
  • google/nano-banana-pro - Pixar-style transformation
  • fofr/expression-editor - Head rotation frames
  • firtoz/trellis - Image to 3D model
• Tailwind CSS - Styling
• shadcn/ui - UI components

Star History Chart

MIT