Agent skill · design visual · sickn33
3d-web-experience
Expert in building 3D experiences for the web - Three.js, React
Why this skill is useful
Adds multiple executable scripts and optimization workflows for 3D web experiences that are not commonly found in public documentation.
What it needs
Requires npm installed locally. About 5k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
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, 3D portfolios, 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 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. 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 Spline (Fastest Start) React Three Fiber 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 GLTF Compression Loading in R3F Scroll-Driven 3D 3D that responds to scroll When to use: When integrating 3D with scroll Scroll-Driven 3D R3F + Scroll Controls GSAP + Three.js 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 Per …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/3d-web-experience