react-three-fiber

React Three Fiber 3D renderer for json-render. Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering meshes/lights/models/environments, or integrating Three.js with json-render catalogs.

By vercel-labs · 2,046 installs

npx skills add vercel-labs/json-render --skill react-three-fiber

Source repository · Upstream listing

@json render/react three fiber React Three Fiber renderer for json render. 19 built in 3D components. Two Entry Points Entry Point Exports Use For @json render/react three fiber/catalog threeComponentDefinitions Catalog schemas (no R3F dependency, safe for server) @json render/react three fiber threeComponents , ThreeRenderer , ThreeCanvas , schemas R3F implementations and renderer Usage Pattern Pick the 3D components you need from the standard definitions: Rendering ThreeCanvas (convenience wrapper) Manual Canvas setup Available Components (19) Primitives (7) Box width, height, depth, material Sphere radius, widthSegments, heightSegments, material Cylinder radiusTop, radiusBottom, height, material Cone radius, height, material Torus radius, tube, material Plane width, height, material Capsule radius, length, material All primitives share: position , rotation , scale , castShadow , receiveShadow , material . Lights (4) AmbientLight color, intensity DirectionalLight position, color, intensity, castShadow PointLight position, color, intensity, distance, decay SpotLight position, color, intensity, angle, penumbra Other (8) Group container with position/rotation/scale, supports children Model GLTF/GLB loader via url prop Environment HDRI environment map (preset, background, blur, intensity) Fog linear fog (color, near, far) GridHelper reference grid (size, divisions, color) Text3D SDF text (text, fontSize, color, anchorX, anchorY) PerspectiveCamera camera (position, fov, near, far, makeDefault) OrbitControls orbit controls (enableDamping, enableZoom, autoRotate) Shared Schemas Reusable Zod schemas for custom 3D catalog definitions: Material Schema Spec Format 3D specs use the standard json render flat element format: Dependencies Peer dependencies required: @react three/fiber = 8.0.0 @react three/drei = 9.0.0 three = 0.160.0 react ^19.0.0 zod ^4.0.0