/design

Transform your web application into an immersive 3D experience. Build interactive 3D scenes, animations, and visualizations using Three.js and WebGL shaders with responsive design principles.

Syntax

/design:3d [description of 3D experience]

How It Works

The /design:3d command orchestrates a specialized workflow for 3D design:

1. Concept & Planning

  • Invokes ui-ux-designer agent to understand requirements
  • Defines 3D scene architecture and interaction model
  • Plans performance budget and optimization strategy
  • Identifies required assets (models, textures, shaders)

2. Three.js Setup

  • Configures Three.js scene, camera, and renderer
  • Sets up responsive canvas sizing
  • Implements WebGL context management
  • Adds performance monitoring

3. 3D Asset Creation

  • Creates or configures 3D geometries
  • Designs material systems (PBR, custom shaders)
  • Implements lighting schemes (ambient, directional, point lights)
  • Loads external models (GLTF, FBX, OBJ)

4. Interaction Design

  • Implements orbit controls and camera movement
  • Adds raycasting for object selection
  • Creates hover and click interactions
  • Designs touch gesture support for mobile

5. Animation & Effects

  • Creates animation loops and timelines
  • Implements particle systems
  • Adds post-processing effects (bloom, depth of field)
  • Designs shader effects (displacement, noise, distortion)

6. Performance Optimization

  • Implements LOD (Level of Detail) systems
  • Optimizes draw calls and geometry batching
  • Adds frustum culling and occlusion
  • Configures texture compression and mipmapping

7. Responsive Integration

  • Ensures 3D scene scales across devices
  • Implements mobile performance optimizations
  • Adds progressive enhancement fallbacks
  • Tests across different GPU capabilities

Examples

Interactive Product Showcase

/design:3d [create 3D product viewer for sneakers with 360° rotation, material variants, and AR preview button]

What happens:

1. Scene Architecture
   - Three.js scene with PBR lighting
   - Turntable rotation system
   - Material switcher UI
   - WebXR integration for AR

2. Implementation
   ✓ Scene setup with HDR environment lighting
   ✓ GLTF sneaker model loader
   ✓ Orbit controls with momentum
   ✓ Material variants (leather, mesh, suede)
   ✓ Annotation hotspots for features
   ✓ AR Quick Look for iOS
   ✓ WebXR for Android AR

3. Interactions
   - Drag to rotate (with inertia)
   - Pinch to zoom
   - Tap hotspots for details
   - Material swatch selection
   - "View in AR" button

4. Performance
   - 60 FPS on mobile (tested)
   - Lazy loading for textures
   - Compressed GLTF with Draco
   - Progressive JPEG textures

Generated Files:
✓ src/components/ProductViewer3D.tsx
✓ src/shaders/pbr.vert
✓ src/shaders/pbr.frag
✓ src/utils/three-setup.ts
✓ public/models/sneaker.glb

Immersive Landing Page Hero

/design:3d [abstract 3D particle galaxy hero section that responds to mouse movement with smooth camera parallax]

What happens:

1. Visual Design
   - 10,000 particle system
   - Gradient color scheme (purple → blue)
   - Depth-based fog effect
   - Smooth camera parallax

2. Implementation
   ✓ Custom particle shader with size attenuation
   ✓ Mouse-tracking camera movement (smoothed)
   ✓ Galaxy spiral formation algorithm
   ✓ Color gradient mapped to particle position
   ✓ Exponential fog for depth perception
   ✓ Responsive canvas resizing

3. Animation
   - Particle rotation (slow, subtle)
   - Individual particle drift noise
   - Camera follow mouse (0.1 damping)
   - Scroll-based opacity fade

4. Optimization
   - BufferGeometry for particles
   - Single draw call
   - 60 FPS on mid-range devices
   - Reduced particle count on mobile

Generated Files:
✓ src/components/Hero3D.tsx
✓ src/shaders/particles.vert
✓ src/shaders/particles.frag
✓ src/utils/galaxy-generator.ts

Interactive Data Visualization

/design:3d [3D bar chart showing sales data across regions with interactive tooltips and smooth camera animations between views]

What happens:

1. Data Architecture
   - Parse sales data JSON
   - Map data to 3D coordinates
   - Calculate optimal camera positions
   - Design color mapping strategy

2. Implementation
   ✓ Dynamic 3D bar generation from data
   ✓ Interactive raycasting for tooltips
   ✓ Animated camera transitions (GSAP)
   ✓ Color gradient by value
   ✓ Grid plane with labels
   ✓ Legend UI overlay

3. Interactions
   - Hover: highlight bar + show tooltip
   - Click: zoom to region view
   - Filter buttons: animate data transitions
   - Reset camera button

4. Animations
   - Bars grow from zero on load
   - Smooth camera tweens (easing)
   - Data transition morphing
   - Hover state elevation

Generated Files:
✓ src/components/DataViz3D.tsx
✓ src/utils/data-to-geometry.ts
✓ src/components/CameraControls.tsx
✓ src/styles/data-viz-ui.css

When to Use /design

✅ Use /design
for:

  • Product Showcases: Interactive 3D viewers for e-commerce
  • Hero Sections: Immersive landing page experiences
  • Data Visualization: 3D charts and graphs
  • Games & Experiences: Interactive web-based games
  • Configurators: Customizable 3D products
  • AR Previews: WebXR-enabled product previews
  • Architectural Walkthroughs: Building/space visualization
  • Creative Portfolios: Unique 3D portfolio presentations

❌ Don’t use /design
for:

  • Simple UI Elements: Use regular HTML/CSS instead
  • Static Images: Use 2D design tools
  • Heavy Applications: Consider native apps for complex 3D
  • Low-End Devices Only: Ensure broad device support requirements

Best Practices

Provide Clear Requirements

✅ Good:

/design:3d [create rotating 3D globe showing customer locations with animated connection lines]
/design:3d [abstract geometric shapes that morph on scroll with pastel colors]
/design:3d [car configurator with color, wheel, and interior customization]

❌ Vague:

/design:3d [make it look cool]
/design:3d [add some 3D stuff]
/design:3d [3D thing]

Performance First

Always consider performance:

  • Mobile Devices: Test on mid-range phones
  • Frame Rate: Target 60 FPS, acceptable 30 FPS on mobile
  • Loading: Show loading states, lazy load assets
  • Fallbacks: Provide 2D alternatives for unsupported devices

Accessibility Considerations

3D experiences should be accessible:

  • Provide keyboard navigation alternatives
  • Add screen reader descriptions
  • Include skip links for main content
  • Ensure color contrast in UI overlays
  • Support reduced motion preferences

Technical Specifications

Three.js Stack

// Typical setup generated
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true
});

Shader Examples

Custom Particle Shader:

// Vertex Shader
attribute float size;
attribute vec3 customColor;

varying vec3 vColor;

void main() {
  vColor = customColor;
  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
  gl_PointSize = size * (300.0 / -mvPosition.z);
  gl_Position = projectionMatrix * mvPosition;
}

// Fragment Shader
varying vec3 vColor;

void main() {
  float r = distance(gl_PointCoord, vec2(0.5));
  if (r > 0.5) discard;
  gl_FragColor = vec4(vColor, 1.0 - r * 2.0);
}

Performance Optimization Patterns

// Instanced Geometry for repeated objects
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const mesh = new THREE.InstancedMesh(geometry, material, 1000);

// LOD for distant objects
const lod = new THREE.LOD();
lod.addLevel(meshHighDetail, 0);
lod.addLevel(meshMediumDetail, 50);
lod.addLevel(meshLowDetail, 100);
scene.add(lod);

// Frustum culling (automatic)
mesh.frustumCulled = true;

Advanced Features

WebXR Integration

/design:3d [product viewer with AR support for placing furniture in room using WebXR]

Generates:

  • WebXR session management
  • AR hit testing for surface detection
  • Lighting estimation
  • iOS AR Quick Look fallback
  • Android Scene Viewer support

Post-Processing Effects

/design:3d [sci-fi dashboard with bloom, chromatic aberration, and scan lines]

Generates:

  • EffectComposer setup
  • Bloom pass configuration
  • Custom shader passes
  • Performance-optimized pipeline

Physics Integration

/design:3d [3D physics-based marble maze game with touch controls]

Generates:

  • Cannon.js integration
  • Physics world setup
  • Collision detection
  • Touch control mapping

Generated Artifacts

After /design:3d completes:

Component Files

src/components/
├── Scene3D.tsx              # Main 3D scene component
├── Controls3D.tsx           # Camera controls wrapper
└── LoadingScreen3D.tsx      # Asset loading UI

Shader Files

src/shaders/
├── vertex.vert              # Vertex shader
├── fragment.frag            # Fragment shader
└── particles.glsl           # Particle shaders

Utility Files

src/utils/
├── three-setup.ts           # Scene initialization
├── loaders.ts               # Asset loaders
├── animations.ts            # Animation helpers
└── responsive-3d.ts         # Responsive handlers

Asset Files

public/
├── models/                  # 3D models (GLTF, FBX)
├── textures/               # Texture maps
└── hdri/                   # Environment maps

Troubleshooting

Performance Issues

Problem: Frame rate drops below 30 FPS

Solution:

# Optimize existing 3D scene
/fix:fast [3D scene performance - reduce draw calls and optimize geometries]

# Common fixes applied:
✓ Merge geometries
✓ Use instanced meshes
✓ Reduce particle count
✓ Lower shadow map resolution
✓ Disable shadows on mobile
✓ Implement LOD system

Loading Times

Problem: 3D scene takes too long to load

Solution:

// Generated optimization
- Compressed GLTF with Draco
- Progressive texture loading
- Show loading screen with progress
- Lazy load non-critical assets
- Use texture atlases

Mobile Compatibility

Problem: 3D scene not working on mobile devices

Solution:

# Add mobile support
/fix:ui [3D scene] - optimize for mobile with reduced quality and touch controls

# Automatically adds:
✓ Device capability detection
✓ Reduced particle count on mobile
✓ Lower texture resolution
✓ Touch gesture controls
✓ Disable expensive effects

Award-Winning Examples

Apple Product Pages

  • Smooth scroll-based animations
  • High-quality PBR materials
  • Seamless mobile experience
  • WebGL performance optimization

Awwwards Winners

  • bruno-simon.com (3D portfolio)
  • Active Theory projects
  • Locomotive Scroll + Three.js
  • Creative particle systems

Three.js Examples

Next Steps

  • /design
     - High-fidelity 2D design
  • /design
     - Quick prototypes
  • /fix
     - Fix 3D visual issues
  • /test - Performance testing

Key Takeaway: /design:3d creates production-ready 3D web experiences with Three.js, complete with interactions, animations, and performance optimizations across all devices. Think beyond flat design - create immersive experiences that captivate users.