3D Text Sphere Generator

A simple, interactive 3D text sphere generator built with Next.js and Three.js.

Features

• Add and remove words to display in a 3D sphere
• Adjust sphere radius, font size, and word density
• Customize text and background colors
• Interactive rotation with mouse/touch controls
• Text always faces the camera (no reversed text)
• Evenly distributed text using Fibonacci algorithm

Detailed Installation and Setup

Prerequisites

• Node.js (v18 or newer)
• Bun (recommended) or npm

Step 1: Clone the Repository

git clone https://github.com/yourusername/3d-text-sphere.git
cd 3d-text-sphere

Step 2: Install Dependencies

Using Bun (recommended):

bun install

Using npm:

npm install

Step 3: Run the Development Server

Using Bun:

bun dev

Using npm:

npm run dev

Step 4: Open in Browser

Open http://localhost:3000 in your browser to see the application.

Project Structure

3d-text-sphere/
├── public/                 # Static assets
├── src/
│   ├── app/
│   │   └── page.tsx        # Main application page
│   └── components/
│       └── TextSphere.tsx  # 3D Text Sphere component
├── package.json            # Project dependencies
└── README.md               # Documentation

Using the Component in Your Own Project

1. Copy the TextSphere.tsx file to your project's components directory
2. Install the required dependencies:

bun add three @react-three/fiber @react-three/drei
# or
npm install three @react-three/fiber @react-three/drei

3. Import and use the component:

import { TextSphere } from '@/components/TextSphere';

export default function MyPage() {
  return (
    <div style={{ height: '500px', position: 'relative' }}>
      <TextSphere config={{
        words: ['Next.js', 'React', 'Three.js'],
        radius: 3,
        fontSize: 0.2,
        density: 5,
        color: '#000000',
        backgroundColor: '#ffffff'
      }} />
    </div>
  );
}

Usage

The application provides a simple interface to:

1. Add words individually or in batches (comma-separated)
2. Choose from sample word sets (Tech, Nature, Colors)
3. Adjust the sphere radius, font size, and word density
4. Customize text and background colors

The sphere automatically rotates, and you can also interact with it using your mouse or touch.

Configuration Options

Property	Type	Default	Description
words	string[]	['Next.js', 'React', 'Three.js', 'TypeScript']	Words to display
radius	number	3	Radius of the sphere
fontSize	number	0.2	Size of the text
density	number	5	Word density (1-10)
color	string	'#000000'	Text color
backgroundColor	string	'#ffffff'	Background color

Dependencies

• Next.js - React framework
• React - UI library
• Three.js - 3D library
• React Three Fiber - React renderer for Three.js
• Drei - Useful helpers for React Three Fiber

Troubleshooting

Common Issues

1. Text appears too small or too large

   • Adjust the font size slider to find the right balance
   • For many words, use a smaller font size

2. Performance issues

   • Reduce the density if the animation becomes slow
   • Try using fewer unique words

3. Text overlapping

   • Increase the sphere radius
   • Decrease the font size
   • Reduce the density

License

MIT