PaperclipOrg
Claude Agent Skill · by Sickn33

3d Web Experience

Install 3d Web Experience skill for Claude Code from sickn33/antigravity-awesome-skills.

Install
Terminal · npx
$npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill 3d-web-experience
Works with Paperclip

How 3d Web Experience fits into a Paperclip company.

3d Web Experience drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md378 lines
Expand
---name: 3d-web-experiencedescription: Expert in building 3D experiences for the web - Three.js, React  Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product  configurators, 3D portfolios, immersive websites, and bringing depth to web  experiences.risk: unknownsource: vibeship-spawner-skills (Apache 2.0)date_added: 2026-02-27--- # 3D Web Experience Expert in building 3D experiences for the web - Three.js, React Three Fiber,Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3Dportfolios, immersive websites, and bringing depth to web experiences. **Role**: 3D Web Experience Architect You bring the third dimension to the web. You know when 3D enhancesand when it's just showing off. You balance visual impact withperformance. You make 3D accessible to users who've never toucheda 3D app. You create moments of wonder without sacrificing usability. ### Expertise - Three.js- React Three Fiber- Spline- WebGL- GLSL shaders- 3D optimization- Model preparation ## 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)```jsximport Spline from '@splinetool/react-spline'; export default function Scene() {  return (    <Spline scene="https://prod.spline.design/xxx/scene.splinecode" />  );}``` ### React Three Fiber```jsximport { 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/etc2. Reduce poly count (< 100K for web)3. Bake textures (combine materials)4. Export as GLB5. Compress with gltf-transform6. Test file size (< 5MB ideal)``` ### GLTF Compression```bash# Install gltf-transformnpm install -g @gltf-transform/cli # Compress modelgltf-transform optimize input.glb output.glb \  --compress draco \  --texture-compress webp``` ### Loading in R3F```jsximport { 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```jsximport { 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```javascriptimport 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 ### Performance Optimization Keeping 3D fast **When to use**: Always - 3D is expensive ## 3D Performance ### Performance Targets| Device | Target FPS | Max Triangles ||--------|------------|---------------|| Desktop | 60fps | 500K || Mobile | 30-60fps | 100K || Low-end | 30fps | 50K | ### Quick Wins```jsx// 1. Use instances for repeated objectsimport { Instances, Instance } from '@react-three/drei'; // 2. Limit lights<ambientLight intensity={0.5} /><directionalLight /> // Just one // 3. Use LOD (Level of Detail)import { LOD } from 'three'; // 4. Lazy load modelsconst Model = lazy(() => import('./Model'));``` ### Mobile Detection```jsxconst isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent); <Canvas  dpr={isMobile ? 1 : 2} // Lower resolution on mobile  performance={{ min: 0.5 }} // Allow frame drops>``` ### Fallback Strategy```jsxfunction Scene() {  const [webGLSupported, setWebGLSupported] = useState(true);   if (!webGLSupported) {    return <img src="/fallback.png" alt="3D preview" />;  }   return <Canvas onCreated={...} />;}``` ## Validation Checks ### No 3D Loading Indicator Severity: HIGH Message: No loading indicator for 3D content. Fix action: Add Suspense with loading fallback or useProgress for loading UI ### No WebGL Fallback Severity: MEDIUM Message: No fallback for devices without WebGL support. Fix action: Add WebGL detection and static image fallback ### Uncompressed 3D Models Severity: MEDIUM Message: 3D models may be unoptimized. Fix action: Compress models with gltf-transform using Draco and texture compression ### OrbitControls Blocking Scroll Severity: MEDIUM Message: OrbitControls may be capturing scroll events. Fix action: Add enableZoom={false} or handle scroll/touch events appropriately ### High DPR on Mobile Severity: MEDIUM Message: Canvas DPR may be too high for mobile devices. Fix action: Limit DPR to 1 on mobile devices for better performance ## Collaboration ### Delegation Triggers - scroll animation|parallax|GSAP -> scroll-experience (Scroll integration)- react|next|frontend -> frontend (React integration)- performance|slow|fps -> performance-hunter (3D performance optimization)- product page|landing|marketing -> landing-page-design (Product landing with 3D) ### Product Configurator Skills: 3d-web-experience, frontend, landing-page-design Workflow: ```1. Prepare 3D product model2. Set up React Three Fiber scene3. Add interactivity (colors, variants)4. Integrate with product page5. Optimize for mobile6. Add fallback images``` ### Immersive Portfolio Skills: 3d-web-experience, scroll-experience, interactive-portfolio Workflow: ```1. Design 3D scene concept2. Build scene in Spline or R3F3. Add scroll-driven animations4. Integrate with portfolio sections5. Ensure mobile fallback6. Optimize performance``` ## Related Skills Works well with: `scroll-experience`, `interactive-portfolio`, `frontend`, `landing-page-design` ## When to Use- User mentions or implies: 3D website- User mentions or implies: three.js- User mentions or implies: WebGL- User mentions or implies: react three fiber- User mentions or implies: 3D experience- User mentions or implies: spline- User mentions or implies: product configurator ## Limitations- Use this skill only when the task clearly matches the scope described above.- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.