skills.rest
prasanna591
prasanna591COMMUNITY
Explore all skills by this author →
GitHub

3d-design

Implements interactive 3D web experiences using Three.js, React Three Fiber, and Spline.

Updated Aug 30, 2026
Search Tags:#webgl#three.js#gltf#spline#react three fiber#scroll animation#3d design
One-click install
npx skills add https://github.com/prasanna591/ProblemSolvingMind --skill 3d-design-prasanna591
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 3d-design
Source: https://github.com/prasanna591/ProblemSolvingMind/tree/main/.opencode/skills/3d-design
Command: npx skills add https://github.com/prasanna591/ProblemSolvingMind --skill 3d-design-prasanna591

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building 3D experiences for the web involves hard choices about tooling, model optimization, scroll integration, and mobile performance, and mistakes lead to slow, broken pages. ## Core Features & Use Cases - 3D Stack Selection: Decision guidance for choosing between Spline, React Three Fiber, vanilla Three.js, and Babylon.js based on project needs. - 3D Model Pipeline: Covers GLB/GLTF format selection, polygon reduction, texture baking, and Draco/WebP compression via gltf-transform. - Scroll-Driven 3D: Patterns for scroll-linked camera movement, model rotation, and reveal effects using ScrollControls and GSAP ScrollTrigger. - Use Case: Build a product configurator page where a compressed GLB model loads with a progress indicator and rotates as the user scrolls, with reduced quality on mobile devices. ## Quick Start Ask the AI to build a scroll-driven 3D product viewer in React Three Fiber using an optimized GLB model with a loading indicator and mobile fallback.

Frequently Asked Questions about 3d-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a 3D model to a React website?▼

Use React Three Fiber with the useGLTF hook from @react-three/drei to load a GLB model inside a Canvas component. Wrap the model in Suspense with a loading fallback, and add OrbitControls for user interaction.

Should I use Spline or React Three Fiber for web 3D?▼

Spline is best for quick prototypes and designer-led workflows with low learning curve. React Three Fiber suits React apps needing complex scenes and high control, while vanilla Three.js gives maximum control outside React.

How do I optimize 3D models for web performance?▼

Export models as GLB, keep polygon counts under 100K, bake textures, then compress with gltf-transform using Draco geometry compression and WebP textures. Aim for file sizes under 5MB.

Does WebGL 3D work well on mobile devices?▼

3D works on mobile but requires testing on real devices, reduced quality settings, and static fallbacks for low-end hardware. Heavy scenes drain battery and can crash, so consider disabling 3D on weak devices.

How do I make 3D scenes respond to page scrolling?▼

Use ScrollControls from @react-three/drei with the useScroll hook to map scroll offset to model rotation or camera position. Alternatively, combine GSAP ScrollTrigger with Three.js to animate camera properties on scroll.

Related Skills

Explore More Design & Creative Skills→
TumeloRamaphosaTumeloRamaphosa

blender-web-pipeline

Export Blender assets to optimized glTF/GLB files for web renderers.

Community
Advanced
Bamboo-ReportsBamboo-Reports
1

Conversion Rate Optimization (CRO)

Analyze marketing and landing pages to identify conversion friction and provide optimization recommendations.

Official
Intermediate
RaheesAhmedRaheesAhmed
66

3d-web-experience

Coordinates WebGL tools to build interactive 3D scenes for web projects.

Community
Advanced
BoneTheDeveloperBoneTheDeveloper

threejs

Create and render interactive 3D scenes in browsers using Three.js.

Community
Advanced