React Three Fiber

作者 vercel-labsfc2a696a50a3无许可证18K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库昨天更新

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.

精选仅含说明Software Development
AI 生成的概览

介绍如何使用 @json-render/react-three-fiber 渲染器，从 JSON 规格构建 3D 场景。

功能
本技能说明 @json-render/react-three-fiber 包，这是 json-render 的 React Three Fiber 渲染器，内置 19 个 3D 组件。它讲解两个入口（目录 schema 与 R3F 实现）、目录与注册表的配置方式，以及通过 ThreeCanvas 或手动 Canvas 配合 ThreeRenderer 进行渲染。它还列出可用的基础几何体、灯光和其他组件，并给出共享 Zod schema、材质 schema、扁平 JSON 规格格式以及所需的同级依赖。
适用场景
在使用 @json-render/react-three-fiber、定义 3D 目录，或从 JSON 规格渲染网格、灯光、模型和环境时使用。它也适用于把 Three.js 组件集成到 json-render 目录，或编写自定义 3D 组件定义。
运行要求
仅为说明文档，不附带脚本。所述包需要同级依赖 @react-three/fiber >= 8.0.0、@react-three/drei >= 9.0.0、three >= 0.160.0、react ^19.0.0 和 zod ^4.0.0。

@json-render/react-three-fiber

React Three Fiber renderer for json-render. 19 built-in 3D components.

Two Entry Points

Entry PointExportsUse For
@json-render/react-three-fiber/catalogthreeComponentDefinitionsCatalog schemas (no R3F dependency, safe for server)
@json-render/react-three-fiberthreeComponents, ThreeRenderer, ThreeCanvas, schemasR3F implementations and renderer

Usage Pattern

Pick the 3D components you need from the standard definitions:

typescript
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 definitionsconst catalog = defineCatalog(schema, {  components: {    Box: threeComponentDefinitions.Box,    Sphere: threeComponentDefinitions.Sphere,    AmbientLight: threeComponentDefinitions.AmbientLight,    DirectionalLight: threeComponentDefinitions.DirectionalLight,    OrbitControls: threeComponentDefinitions.OrbitControls,  },  actions: {},});
// Registry: pick matching implementationsconst { registry } = defineRegistry(catalog, {  components: {    Box: threeComponents.Box,    Sphere: threeComponents.Sphere,    AmbientLight: threeComponents.AmbientLight,    DirectionalLight: threeComponents.DirectionalLight,    OrbitControls: threeComponents.OrbitControls,  },});

Rendering

ThreeCanvas (convenience wrapper)

tsx
<ThreeCanvas  spec={spec}  registry={registry}  shadows  camera={{ position: [5, 5, 5], fov: 50 }}  style={{ width: "100%", height: "100vh" }}/>

Manual Canvas setup

tsx
import { Canvas } from "@react-three/fiber";import { ThreeRenderer } from "@json-render/react-three-fiber";
<Canvas shadows>  <ThreeRenderer spec={spec} registry={registry}>    {/* Additional R3F elements */}  </ThreeRenderer></Canvas>

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:

typescript
import { vector3Schema, materialSchema, transformProps, shadowProps } from "@json-render/react-three-fiber";import { z } from "zod";
// Custom 3D componentconst myComponentDef = {  props: z.object({    ...transformProps,    ...shadowProps,    material: materialSchema.nullable(),    myCustomProp: z.string(),  }),  description: "My custom 3D component",};

Material Schema

typescript
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:

json
{  "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

来源与署名

来源：vercel-labs/json-render位于skills/react-three-fiber提交fc2a696

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 vercel-labs/json-render 的技能

Remotion

vercel-labs

精选

Remotion 渲染器，使用 @json-render/remotion 将 JSON 时间线规格转换为视频合成。

Design & Creative18K昨天更新

Zustand

vercel-labs

精选

将 Zustand vanilla store 接入 json-render 的 StateStore 接口的适配器。

Software Development18K昨天更新

Svelte

vercel-labs

精选

将 json-render JSON 规格渲染为 Svelte 5 组件树，涵盖目录、注册表、动作与流式 UI。

Software Development18K昨天更新

Xstate

vercel-labs

精选

XState Store adapter for json-render's StateStore interface. Use when integrating json-render with @xstate/store for state management via @json-render/xstate.

待分类18K昨天更新

Solid

vercel-labs

精选

指导为 json-render 构建 SolidJS 渲染器：目录、注册表、Provider、绑定、动作与响应式。

Software Development18K昨天更新

Vue

vercel-labs

精选

介绍 @json-render/vue 的参考指南，这是一个将 JSON 规格转换为 Vue 组件树的 Vue 3 渲染器。

Software Development18K昨天更新

更多Software Development技能

Playground

anthropics

精选

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

精选

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

精选

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精选

依据从远程来源获取的 Web Interface Guidelines 审查 UI 代码，并以 file:line 形式报告问题。

Software Development32K5周前更新

Vercel React Native Skills

vercel-labs

精选

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。

Software Development32K5周前更新

Vercel React Best Practices

vercel-labs

精选

Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。

Software Development32K5周前更新