React Three Fiber — 3D-сцены из JSON-конфига

★ 8.1 · media-processing

3D-рендеринг через React Three Fiber — это скилл для Claude Code, который преобразует JSON-спецификации в трёхмерные сцены через библиотеку React Three Fiber, используя каталог из 19 встроенных компонентов. Берут, когда нужно собрать 3D-сцену из конфига без написания JSX вручную, когда хочется декларативно описать меши, освещение и камеру через JSON и встроить результат в React-приложение, или когда требуется быстро прототипировать WebGL-визуализацию с орбитальным управлением и тенями. Внутри — 7 примитивов (Box, Sphere, Cylinder, Cone, Torus, Plane, Capsule), 4 типа источников света, загрузчик GLTF/GLB-моделей, HDRI-окружение, туман, Text3D, OrbitControls и PerspectiveCamera. Спецификация пишется в flat-формате json-render; рендеринг происходит через ThreeCanvas (готовая обёртка) или ThreeRenderer внутри своего Canvas. Стек: TypeScript, Zod-схемы для валидации пропсов, peer-зависимости — @react-three/fiber ≥ 8, @react-three/drei ≥ 9, three ≥ 0.160, React 19, Zod 4. Два точки входа: catalog-энтрипойнт безопасен для сервера (без R3F), основной — только для клиента. Направление — генерация 3D-графики из данных, а не обработка или сжатие медиа. Подойдёт для React-проектов с WebGL; не подходит, когда нужен рендеринг вне браузера или без React.