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

★ 8.1 · media-processing

3D Rendering via React Three Fiber is a Claude Code skill that converts JSON specifications into three-dimensional scenes using React Three Fiber, with a catalog of 19 built-in components. Reach for it when you want to build a 3D scene from a config file without writing JSX by hand, when you need to declaratively describe meshes, lights, and cameras in JSON and embed the result in a React app, or when you're prototyping a WebGL visualization with orbit controls and shadows quickly. Inside you get 7 geometry primitives (Box, Sphere, Cylinder, Cone, Torus, Plane, Capsule), 4 light types, a GLTF/GLB model loader, HDRI environment maps, fog, Text3D, OrbitControls, and PerspectiveCamera. Scenes are described in the json-render flat element format and rendered via ThreeCanvas (a convenience wrapper) or ThreeRenderer inside a custom Canvas. The stack is TypeScript with Zod schemas for prop validation; peer dependencies are @react-three/fiber ≥ 8, @react-three/drei ≥ 9, three ≥ 0.160, React 19, and Zod 4. Two entry points: the catalog entry point is server-safe (no R3F dependency), the main entry point is client-only. The direction is generating 3D graphics from data, not processing or compressing media. Works well for React projects targeting WebGL; not suitable for server-side or non-React rendering pipelines.