--- id: daily-react-three-fiber name: "react-three-fiber" url: https://skills.yangsir.net/skill/daily-react-three-fiber author: vercel-labs domain: ai-frontend-engineering tags: ["threejs", "react", "graphics", "visualization", "frontend"] install_count: 2300 rating: 4.30 (20 reviews) github: https://github.com/vercel-labs/json-render --- # react-three-fiber > React Three Fiber 渲染器，提供 19 个内置 3D 组件，支持服务端渲染的 schema 定义 **Stats**: 2,300 installs · 4.3/5 (20 reviews) ## Before / After 对比 ### 3D 组件开发效率 **Before**: 从零开始用 Three.js 构建 3D 场景，需要编写大量样板代码，一个简单的 3D 组件需要 2-3 小时，光照、材质、相机设置都需要手动配置 **After**: 直接使用预置的 19 个 3D 组件，通过 JSON schema 定义场景，10 分钟完成复杂 3D 可视化，支持声明式配置和服务端渲染 | Metric | Before | After | Change | |---|---|---|---| | 开发时间 | 150分钟 | 10分钟 | -93% | ## Readme # react-three-fiber # @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: ``` import { defineCatalog } from "@json-render/core"; import { schema } from "@json-render/react/schema"; import { threeComponentDefinitions } from "@json-render/react-three-fiber/catalog"; import { defineRegistry } from "@json-render/react"; import { threeComponents, ThreeCanvas } from "@json-render/react-three-fiber"; // Catalog: pick definitions const catalog = defineCatalog(schema, { components: { Box: threeComponentDefinitions.Box, Sphere: threeComponentDefinitions.Sphere, AmbientLight: threeComponentDefinitions.AmbientLight, DirectionalLight: threeComponentDefinitions.DirectionalLight, OrbitControls: threeComponentDefinitions.OrbitControls, }, actions: {}, }); // Registry: pick matching implementations const { registry } = defineRegistry(catalog, { components: { Box: threeComponents.Box, Sphere: threeComponents.Sphere, AmbientLight: threeComponents.AmbientLight, DirectionalLight: threeComponents.DirectionalLight, OrbitControls: threeComponents.OrbitControls, }, }); ``` ## Rendering ### ThreeCanvas (convenience wrapper) ``` ``` ### Manual Canvas setup ``` import { Canvas } from "@react-three/fiber"; import { ThreeRenderer } from "@json-render/react-three-fiber"; {/* Additional R3F elements */} ``` ## 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: ``` import { vector3Schema, materialSchema, transformProps, shadowProps } from "@json-render/react-three-fiber"; import { z } from "zod"; // Custom 3D component const myComponentDef = { props: z.object({ ...transformProps, ...shadowProps, material: materialSchema.nullable(), myCustomProp: z.string(), }), description: "My custom 3D component", }; ``` ## Material Schema ``` materialSchema = z.object({ color: z.string().nullable(), // default "#ffffff" metalness: z.number().nullable(), // default 0 roughness: z.number().nullable(), // default 1 emissive: z.string().nullable(), // default "#000000" emissiveIntensity: z.number().nullable(), // default 1 opacity: z.number().nullable(), // default 1 transparent: z.boolean().nullable(), // default false wireframe: z.boolean().nullable(), // default false }); ``` ## Spec Format 3D specs use the standard json-render flat element format: ``` { "root": "scene", "elements": { "scene": { "type": "Group", "props": { "position": [0, 0, 0] }, "children": ["light", "box"] }, "light": { "type": "AmbientLight", "props": { "intensity": 0.5 }, "children": [] }, "box": { "type": "Box", "props": { "position": [0, 0.5, 0], "material": { "color": "#4488ff", "metalness": 0.3, "roughness": 0.7 } }, "children": [] } } } ``` ## 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 Weekly Installs491Repository[vercel-labs/json-render](https://github.com/vercel-labs/json-render)GitHub Stars14.3KFirst SeenMar 12, 2026Security Audits[Gen Agent Trust HubPass](/vercel-labs/json-render/react-three-fiber/security/agent-trust-hub)[SocketPass](/vercel-labs/json-render/react-three-fiber/security/socket)[SnykPass](/vercel-labs/json-render/react-three-fiber/security/snyk)Installed oncodex449cursor408gemini-cli407github-copilot406cline398opencode395 --- *Source: https://skills.yangsir.net/skill/daily-react-three-fiber* *Markdown mirror: https://skills.yangsir.net/api/skill/daily-react-three-fiber/markdown*