R3F Fundamentals

What it does

This skill provides foundational knowledge and tools for working with React Three Fiber (r3f), a popular library for building 3D scenes in React. It enables AI agents to understand, generate, and manipulate r3f code, facilitating the creation of interactive 3D experiences within web applications. The skill focuses on core concepts like scene setup, object instantiation, camera control, and basic material application.

When to use it

• Generating simple 3D scenes: When you need an AI agent to create a basic 3D environment with objects and lighting.
• Debugging r3f code: To assist in identifying and correcting errors within existing React Three Fiber projects.
• Understanding r3f concepts: For explaining the functionality of specific r3f components or techniques.
• Creating interactive elements: When you want to add user interaction, such as object manipulation or camera movement, to a 3D scene.

Key capabilities

• Scene setup and initialization
• Object instantiation (e.g., Mesh, Sphere, Box)
• Camera control and positioning
• Basic material application
• Understanding of r3f components and hooks

Example prompts

• "Create a simple React Three Fiber scene with a rotating cube."
• "Explain how to add ambient lighting in r3f."
• "Debug this r3f code: [paste code snippet]"

Tips & gotchas

This skill assumes some basic familiarity with React. While it covers fundamentals, deeper understanding of 3D concepts (like vertices and normals) will enhance the agent's ability to generate more complex scenes.