three-component

What problem does it solve?

This Skill provides a ready-to-use blueprint for creating new 3D components in a React Three Fiber project, accelerating the development of modular visual elements for the Kardashev Network visualization.

Core Features & Use Cases

• Template-driven 3D component: A TypeScript React component template with props like intensity, color, position, and scale that can be reused across scenes.
• Scene integration examples: Illustrates how to plug the component into a SunScene-like canvas with a data-driven animation loop.
• Use Case: Extend the 3D visualization by adding a new component (e.g., a glow orb or particle group) controlled by irradiance (ghi) and cloudCover as in the provided templates.

Quick Start

Create a new file under src/components/three/ named ComponentName.tsx implementing the component template, then import and render it within SunScene with appropriate props.