3d Visualizer

This one gets you up and running with Three.js and React Three Fiber for interactive 3D web experiences. The examples cover the practical stuff: basic scenes with lighting and materials, animated objects using useFrame, loading GLB models for product viewers, and 3D data visualizations like bar charts and network graphs. There's also a product configurator example that shows how to wire up interactive color changes. The instanced mesh patterns are good to see since rendering thousands of particles is where most people hit performance walls. If you're building anything that needs to display data spatially or create interactive product demos, the code here is clear enough to adapt without digging through Three.js docs for hours.

skills.sh installs: 670
GitHub stars: 39
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add daffy0208/ai-dev-standards --skill 3d-visualizer --agent claude-code

Installs into .claude/skills of the current project.

Files

3D Visualizer Skill

I help you create 3D visualizations, interactive 3D graphics, and immersive web experiences using Three.js.

What I Do

3D Graphics:

3D models and scenes
Materials and lighting
Animations and interactions
Camera controls

3D Data Visualization:

3D charts and graphs
Network visualizations
Geospatial data
Scientific visualization

Interactive 3D:

Product viewers (360°)
Configurators
Interactive demos
3D games

Three.js with React Three Fiber

npm install three @react-three/fiber @react-three/drei

Basic 3D Scene

// components/Scene3D.tsx
'use client'
import { Canvas } from '@react-three/fiber'
import { OrbitControls, Box, Sphere } from '@react-three/drei'

export function Scene3D() {
  return (
    <Canvas camera={{ position: [5, 5, 5], fov: 50 }}>
      {/* Lighting */}
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />

      {/* 3D Objects */}
      <Box position={[-2, 0, 0]} args={[1, 1, 1]}>
        <meshStandardMaterial color="hotpink" />
      </Box>

SKILL.md on GitHub