explainx.ainewsletter3.01k
Productivity

3d-web-experience▌

davila7/claude-code-templates · updated Apr 8, 2026

$npx skills add https://github.com/davila7/claude-code-templates --skill 3d-web-experience
summary

Expert 3D web implementation with Three.js, React Three Fiber, Spline, and WebGL optimization.

  • ›Supports multiple 3D frameworks with decision guidance: Spline for rapid prototypes, React Three Fiber for React apps, Three.js vanilla for maximum control
  • ›Covers full 3D asset pipeline including model optimization, GLB/GLTF compression with Draco, poly count reduction, and web-ready file size targets under 5MB
  • ›Enables scroll-driven 3D interactions using ScrollControls and GSAP integration
skill.md

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)
```jsx
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

```python
## 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
```bash
# 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

```python
## Scroll-Driven 3D

### R3F + Scroll Controls
```jsx
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

## Anti-Patterns

### ❌ 3D For 3D's Sake

**Why bad**: Slows down the site.
Confuses users.
Battery drain on mobile.
Doesn't help conversion.

**Instead**: 3D should serve a purpose.
Product visualization = good.
Random floating shapes = probably not.
Ask: would an image work?

### ❌ Desktop-Only 3D

**Why bad**: Most traffic is mobile.
Kills battery.
Crashes on low-end devices.
Frustrated users.

**Instead**: Test on real mobile devices.
Reduce quality on mobile.
Provide static fallback.
Consider disabling 3D on low-end.

### ❌ No Loading State

**Why bad**: Users think it's broken.
High bounce rate.
3D takes time to load.
Bad first impression.

**Instead**: Loading progress indicator.
Skeleton/placeholder.
Load 3D after page is interactive.
Optimize model size.

## Related Skills

Works well with: `scroll-experience`, `interactive-portfolio`, `frontend`, `landing-page-design`
general reviews

Ratings

4.5★★★★★63 reviews
  • ★★★★★Min Shah· Dec 28, 2024

    I recommend 3d-web-experience for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.

  • ★★★★★Hana Flores· Dec 24, 2024

    Solid pick for teams standardizing on skills: 3d-web-experience is focused, and the summary matches what you get after install.

  • ★★★★★Hana Sanchez· Dec 24, 2024

    Registry listing for 3d-web-experience matched our evaluation — installs cleanly and behaves as described in the markdown.

  • ★★★★★Min Sharma· Dec 20, 2024

    3d-web-experience has been reliable in day-to-day use. Documentation quality is above average for community skills.

  • ★★★★★Shikha Mishra· Dec 8, 2024

    3d-web-experience fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.

  • ★★★★★Ira Lopez· Dec 8, 2024

    3d-web-experience reduced setup friction for our internal harness; good balance of opinion and flexibility.

  • ★★★★★Hana Patel· Dec 4, 2024

    We added 3d-web-experience from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.

  • ★★★★★Yash Thakker· Nov 27, 2024

    3d-web-experience is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.

  • ★★★★★Hana Tandon· Nov 23, 2024

    Keeps context tight: 3d-web-experience is the kind of skill you can hand to a new teammate without a long onboarding doc.

  • ★★★★★Xiao Jackson· Nov 19, 2024

    Solid pick for teams standardizing on skills: 3d-web-experience is focused, and the summary matches what you get after install.

showing 1-10 of 63

1 / 7