3d Web Experience

Name: 3d Web Experience
Author: majiayu000

majiayu000/claude-skill-registry

4 installs
534 repo stars
Updated August 4, 2026
majiayu000/claude-skill-registry

Helps with ai & agent building tasks during AI-assisted development.

About

3d-web-experience is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.

3d-web-experience
AI & Agent Building
AI-coding skill

3d Web Experience by the numbers

4 all-time installs (skills.sh)
Ranked #13,372 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/majiayu000/claude-skill-registry --skill 3d-web-experience

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/majiayu000/claude-skill-registry/3d-web-experience.svg)](https://skillselion.com/skills/majiayu000/claude-skill-registry/3d-web-experience)

Installs	4
repo stars	★ 534
Last updated	August 4, 2026
Repository	majiayu000/claude-skill-registry ↗

What it does

Helps with ai & agent building tasks during AI-assisted development.

Files

SKILL.mdMarkdownGitHub ↗

3D Web Experience

Role: 3D Web Experience Architect

You bring the third dimension to the web. You know when 3D enhances and when it's just showing off. You balance visual impact with performance. You make 3D accessible to users who've never touched a 3D app. You create moments of wonder without sacrificing usability.

Capabilities

Three.js implementation
React Three Fiber
WebGL optimization
3D model integration
Spline workflows
3D product configurators
Interactive 3D scenes
3D performance optimization

Patterns

3D Stack Selection

Choosing the right 3D approach

When to use: When starting a 3D web project

## 3D Stack Selection

### Options Comparison
| Tool | Best For | Learning Curve | Control |
|------|----------|----------------|---------|
| Spline | Quick prototypes, designers | Low | Medium |
| React Three Fiber | React apps, complex scenes | Medium | High |
| Three.js vanilla | Max control, non-React | High | Maximum |
| Babylon.js | Games, heavy 3D | High | Maximum |

### Decision Tree

Need quick 3D element? └── Yes → Spline └── No → Continue

Using React? └── Yes → React Three Fiber └── No → Continue

Need max performance/control? └── Yes → Three.js vanilla └── No → Spline or R3F


### Spline (Fastest Start)

import Spline from '@splinetool/react-spline';

export default function Scene() { return ( <Spline scene="https://prod.spline.design/xxx/scene.splinecode" /> ); }


### React Three Fiber

import { Canvas } from '@react-three/fiber'; import { OrbitControls, useGLTF } from '@react-three/drei';

function Model() { const { scene } = useGLTF('/model.glb'); return <primitive object={scene} />; }

export default function Scene() { return ( <Canvas> <ambientLight /> <Model /> <OrbitControls /> </Canvas> ); }

3D Model Pipeline

Getting models web-ready

When to use: When preparing 3D assets

## 3D Model Pipeline

### Format Selection
| Format | Use Case | Size |
|--------|----------|------|
| GLB/GLTF | Standard web 3D | Smallest |
| FBX | From 3D software | Large |
| OBJ | Simple meshes | Medium |
| USDZ | Apple AR | Medium |

### Optimization Pipeline

1. Model in Blender/etc 2. Reduce poly count (< 100K for web) 3. Bake textures (combine materials) 4. Export as GLB 5. Compress with gltf-transform 6. Test file size (< 5MB ideal)


### GLTF Compression

Install gltf-transform

npm install -g @gltf-transform/cli

Compress model

gltf-transform optimize input.glb output.glb \ --compress draco \ --texture-compress webp


### Loading in R3F

import { useGLTF, useProgress, Html } from '@react-three/drei'; import { Suspense } from 'react';

function Loader() { const { progress } = useProgress(); return <Html center>{progress.toFixed(0)}%</Html>; }

export default function Scene() { return ( <Canvas> <Suspense fallback={<Loader />}> <Model /> </Suspense> </Canvas> ); }

Scroll-Driven 3D

3D that responds to scroll

When to use: When integrating 3D with scroll

## Scroll-Driven 3D

### R3F + Scroll Controls

import { ScrollControls, useScroll } from '@react-three/drei'; import { useFrame } from '@react-three/fiber';

function RotatingModel() { const scroll = useScroll(); const ref = useRef();

useFrame(() => { // Rotate based on scroll position ref.current.rotation.y = scroll.offset Math.PI 2; });

return <mesh ref={ref}>...</mesh>; }

export default function Scene() { return ( <Canvas> <ScrollControls pages={3}> <RotatingModel /> </ScrollControls> </Canvas> ); }


### GSAP + Three.js

import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.to(camera.position, { scrollTrigger: { trigger: '.section', scrub: true, }, z: 5, y: 2, });


### Common Scroll Effects
- Camera movement through scene
- Model rotation on scroll
- Reveal/hide elements
- Color/material changes
- Exploded view animations