3D Visualizer Skill

Expert in Three.js, 3D graphics, and interactive 3D visualizations.

Quick Start

# Activate skill
claude-code --skill 3d-visualizer

What This Skill Does

• 🎨 Creates 3D scenes (Three.js + React Three Fiber)
• 📦 Builds product viewers (360° rotation)
• 📊 Makes 3D charts and graphs
• 🌐 Visualizes network graphs in 3D
• 🎮 Develops interactive 3D experiences
• ⚡ Optimizes 3D performance

Common Tasks

Build 3D Scene

"Create a 3D scene with lighting, camera controls, and animated objects"

Product Viewer

"Build a 360° product viewer that loads a GLB model"

3D Chart

"Create a 3D bar chart visualization"

Optimize Performance

"Optimize this 3D scene with 1000+ objects using instanced meshes"

Technologies

• Three.js - 3D graphics library
• React Three Fiber - React renderer for Three.js
• @react-three/drei - Useful helpers
• WebGL - Graphics API

Example Output

// 3D product viewer
<Canvas>
  <Model />
  <OrbitControls />
</Canvas>

Related Skills

• spatial-developer - AR/VR
• data-visualizer - 2D charts
• animation-designer - Animations

Learn More

See SKILL.md for comprehensive 3D patterns.