Three.js Interactive Demos - Framework Comparison

A monorepo showcasing three implementations of the same Three.js interactive experiences across different JavaScript frameworks, demonstrating architectural patterns, performance characteristics, and framework-specific best practices.

🎯 Project Overview

This project implements three interactive WebGL experiences using Three.js:

1. Task 1: Rotating Cube - Interactive 3D cube with particle system, drag-to-rotate, and click-to-zoom animations
2. Task 2: Wave Shader - Custom GLSL vertex/fragment shaders with animated wave effects and camera orbit
3. Task 3: Line Drawing - Interactive 3D line drawing tool with raycaster-based positioning and midpoint visualization

Each experience is implemented in three different frameworks to compare approaches and demonstrate framework fluency.

🚀 Live Demos

Implementation	Live Demo	Bundle Size
Vanilla JS	View Demo	~537 kB
Vue 3	View Demo	~638 kB
React	View Demo	~786 kB

📁 Repository Structure

threejschallenge-01/
├── vanilla/          # Pure JavaScript implementation
│   ├── task1.js      # Rotating cube with particles
│   ├── task2.js      # Custom shader wave effect
│   └── task3.js      # Interactive line drawing
├── vue/              # Vue 3 Composition API implementation
│   ├── src/
│   │   ├── components/
│   │   ├── composables/
│   │   └── router/
├── react/            # React hooks implementation
│   ├── src/
│   │   ├── components/
│   │   ├── hooks/
│   │   └── App.jsx
└── README.md

🛠 Technologies

Core Libraries

• Three.js (v0.171.0 - v0.180.0) - WebGL 3D rendering
• GSAP (v3.13.0) - Animation library for smooth transitions
• Vite (v6.0.0 - v7.1.7) - Build tool and dev server

Framework-Specific

• Vanilla: ES6 modules, native DOM APIs
• Vue: Vue 3 Composition API, Vue Router, composables pattern
• React: React 19, custom hooks, React Router DOM

🎨 Implementation Approaches

Vanilla JavaScript

• Direct Three.js manipulation with minimal abstraction
• Event-driven architecture
• Multi-page setup with Vite multi-entry configuration
• Manual cleanup and resource management

Vue 3

• Composables pattern for reusable Three.js logic
• Reactive state integration where beneficial
• Automatic cleanup via lifecycle hooks
• Single-page application with Vue Router

React

• Custom hooks for scene lifecycle and interactions
• useCallback memoization for performance
• Proper event listener cleanup in useEffect
• Single-page application with React Router

🚀 Getting Started

Each implementation can be run independently:

# Vanilla JS
cd vanilla
npm install
npm run dev

# Vue 3
cd vue
npm install
npm run dev

# React
cd react
npm install
npm run dev

🎯 Key Features

Task 1: Rotating Cube

• Continuous rotation with GSAP-animated scale, color, and position
• Drag-to-rotate interaction with smoothed rotation
• Random zoom animation on click/tap
• 20 floating particles with HSL rainbow colors
• Gesture detection to distinguish taps from drags

Task 2: Wave Shader

• Custom GLSL vertex shader for wave displacement
• Custom fragment shader for animated color patterns
• Dynamic wave parameters (amplitude, frequency)
• Camera orbit animation around the plane
• Wave burst effect on click with elastic easing

Task 3: Line Drawing

• Raycaster-based 3D position detection from 2D input
• Interactive line drawing with drag interaction
• Midpoint boxes with complementary colors
• Continuous rotation animations on boxes
• Background particle system with opacity pulsing

📊 Technical Highlights

Shared Across All Implementations

• Touch Support: Unified mouse/touch event handling
• Gesture Detection: Distinguishes taps from drags based on duration and movement
• Resource Cleanup: Proper disposal of Three.js geometries, materials, and renderers
• Responsive Design: Window resize handling and adaptive layouts
• Performance: Optimized render loops and animation management

Framework-Specific Patterns

• Vanilla: Page reload script to prevent Three.js module caching
• Vue: Composables for scene lifecycle and interaction logic
• React: Custom hooks with useCallback for stable references

🔧 Development

Build All Implementations

# From project root
npm run build:all

This builds vanilla, vue, and react, then merges them into a single dist/ directory for deployment.

🌐 Deployment

Deployed as a single Netlify site with subdirectory routing:

• Root (/) serves the vanilla implementation
• /vue/ serves the Vue implementation
• /react/ serves the React implementation

All three implementations are built and deployed together using the root-level build script.

📝 Code Quality

• Clean, modular code with files under 200 lines where possible
• Extensive comments for educational purposes
• Consistent patterns across framework versions
• Production-ready optimizations (memoization, cleanup, etc.)

📄 License

This project is created as a technical demonstration for job application purposes.

---

Created: October 2025 Purpose: Framework comparison & Three.js demonstration