3D Interactive Gallery 🌌

A modern, smooth, and interactive 3D gallery built with Three.js, GSAP, and WebGL shaders. Features scrollable grid, hover effects, zoom, and parallax for a premium gallery experience.

---

🌟 Features

• 3D mesh deformation for realistic image depth
• Smooth scroll with parallax effect
• Hover effects with zoom, RGB shift & subtle animation
• Touch & mouse drag support
• Responsive design
• GPU-accelerated with vertex & fragment shaders

---

🛠 Tech Stack

---

💻 Installation

1. Clone the repo:

git clone https://github.com/yourusername/3d-interactive-gallery.git
cd 3d-interactive-gallery

2. Install dependencies:

npm install

3. Run development server:

npm run dev

4. Open your browser: http://localhost:5173

Example Code Snippet

import { ShaderMaterial, TextureLoader } from 'three';
import vert from './shaders/gallery.vert.glsl';
import frag from './shaders/gallery.frag.glsl';

const texture = new TextureLoader().load('public/images/1.jpg');

const material = new ShaderMaterial({
  vertexShader: vert,
  fragmentShader: frag,
  uniforms: {
    uTexture: { value: texture },
    uAlpha: { value: 1 },
    uParallax: { value: new THREE.Vector2(0, 0) },
    uZoom: { value: 0.85 },
    uPlaneSizes: { value: [1, 1] },
    uImageSizes: { value: [texture.image.width, texture.image.height] },
    uHover: { value: 0 },
  },
  transparent: true
});

🎨 Customization

• Hover Strength: Adjust uZoom and uHover in the fragment shader to control zoom and hover intensity.
• Parallax Strength: Adjust uStrength in the vertex shader to control 3D parallax effect.
• Add Images: Place your images in public/images and add corresponding HTML elements with the class gallery-grid-figure.

---

🌐 Live Demo

View Demo Here

---

⚡ Performance Tips

• Reduce PlaneGeometry segments for better performance.
• Compress images to speed up loading.
• Optional: Disable RGB hover effect on low-end devices for smoother performance.

---

📜 License

MIT License — Free to use, modify, and distribute.

---

👨‍💻 Created By

Arun Kumar Bind
Full Stack Web Developer | Frontend & WebGL Enthusiast

• Portfolio
• GitHub
• LinkedIn
• Email: developerarunwork@gmail.com
• Phone: +91 9129939972

Made with ❤️ using Three.js, GSAP, WebGL, and JavaScript