Futuristic Point Cloud Viewer

A holographic point cloud visualization built with Next.js, TypeScript, and Three.js.

Features

• 🌟 Two interactive 3D hologram models (Torus Knot & Alien Sphere)
• ✨ Custom GLSL shaders for point cloud effects
• 🔄 Smooth transition animations between models
• 🎮 Interactive camera controls with OrbitControls
• 📱 Responsive design

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn or pnpm

Installation

# Navigate to the project directory
cd nextjs-pointcloud

# Install dependencies
npm install

# Run the development server
npm run dev

Open http://localhost:3000 with your browser to see the result.

Project Structure

src/
├── app/
│   ├── globals.css       # Global styles with Tailwind
│   ├── layout.tsx        # Root layout
│   └── page.tsx          # Main page
├── components/
│   ├── PointCloudViewer.tsx  # Main Three.js viewer
│   └── StatusPanel.tsx       # Status display panel
├── shaders/
│   ├── cloudShader.ts    # Point cloud shaders
│   ├── beamShader.ts     # Beam effect shaders
│   └── volumeShader.ts   # Volumetric shaders
├── types/
│   └── hologram.ts       # TypeScript type definitions
└── utils/
    ├── geometryGenerator.ts   # Geometry creation utilities
    └── hologramInstance.ts    # Hologram instance factory

Controls

• Arrow Left/Right: Switch between models
• Mouse Drag: Rotate camera view
• Reset Camera Button: Reset camera to initial position

Technologies

• Next.js 14 - React framework
• TypeScript - Type safety
• Three.js - 3D graphics library
• Tailwind CSS - Styling