React Three Fiber Loaders
Skill 확인됨React Three Fiber asset loading - useGLTF, useLoader, Suspense patterns, preloading. Use when loading 3D models, textures, HDR environments, or managing loading states.
This skill offers detailed code examples and best practices for loading 3D models, textures, and environments within React Three Fiber applications. It covers hooks like `useGLTF` and `useLoader`, demonstrates `Suspense` patterns for managing loading states, and includes tips on preloading and performance.
Documentation
- info:Configuration & parameter referenceWhile the examples demonstrate various parameters for loaders and hooks, explicit default values for all configurations are not fully documented within the SKILL.md, though many are standard Three.js or R3F behaviors.
Maintenance
- warning:Commit recencyThere are no commits on the default branch (pushedAt: n/a), indicating the project is likely unmaintained or the commit history is unavailable.
Versioning
- warning:Release ManagementThere is no manifest version, no GitHub release tags, and no CHANGELOG.md. Install instructions reference 'HEAD' (implied by URL), making version pinning impossible.
Practical Utility
- info:Edge casesWhile the SKILL.md provides good examples and mentions error handling, specific failure modes and recovery steps for edge cases in asset loading are not extensively documented.
설치
npx skills add enzed/r3f-skillsVercel skills CLI(skills.sh)를 npx로 실행합니다. 로컬에 Node.js와 skills 호환 에이전트(Claude Code, Cursor, Codex 등) 중 하나 이상이 설치되어 있어야 합니다. 저장소가 agentskills.io 형식을 따른다고 가정합니다.
유사한 확장
React Three Fiber Interaction
98React Three Fiber interaction - pointer events, controls, gestures, selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.
React Three Fiber Geometry
90React Three Fiber geometry - built-in shapes, BufferGeometry, instancing with Drei. Use when creating 3D shapes, custom meshes, point clouds, lines, or optimizing with instanced rendering.
React Three Fiber Textures
85React Three Fiber textures - useTexture, texture loading, environment maps, texture configuration. Use when loading images, working with PBR texture sets, cubemaps, HDR environments, or optimizing texture usage.
Next.js Server Component Navigation Pattern
98Guide for implementing navigation in Next.js Server Components using Link component and redirect() function. Covers the difference between server and client navigation methods. Use when adding links, redirects, or navigation logic in server components without converting them to client components unnecessarily.
Next.js Server vs. Client Components
98Guide for choosing between Server Components and Client Components in Next.js App Router. CRITICAL for useSearchParams (requires Suspense + 'use client'), navigation (Link, redirect, useRouter), cookies/headers access, and 'use client' directive. Activates when prompt mentions useSearchParams, Suspense, navigation, routing, Link component, redirect, pathname, searchParams, cookies, headers, async components, or 'use client'. Essential for avoiding mixing server/client APIs.
3D Graphics with Three.js
983D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build, animate, render 3D scenes/models. Keywords: Three.js, WebGL, WebGPU, 3D graphics, scene, camera, geometry, material, light, animation, GLTF, FBX, OrbitControls, PBR, shadow mapping, post-processing, bloom, SSAO, shader, instancing, LOD, WebXR, VR, AR, product configurator, data visualization, architectural walkthrough, interactive 3D, canvas. Use when: creating 3D visualizations, building WebGL/WebGPU apps, loading 3D models, adding animations, implementing VR/XR, creating interactive graphics, building product configurators.