react-three-fiber by vercel-labs/json-render
npx skills add https://github.com/vercel-labs/json-render --skill react-three-fiber用于 json-render 的 React Three Fiber 渲染器。包含 19 个内置 3D 组件。
| 入口点 | 导出内容 | 用途 |
|---|---|---|
@json-render/react-three-fiber/catalog | threeComponentDefinitions | 目录模式(无 R3F 依赖,服务器端安全) |
@json-render/react-three-fiber | threeComponents, ThreeRenderer, ThreeCanvas, schemas |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| R3F 实现和渲染器 |
从标准定义中选取你需要的 3D 组件:
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";
// 目录:选取定义
const catalog = defineCatalog(schema, {
components: {
Box: threeComponentDefinitions.Box,
Sphere: threeComponentDefinitions.Sphere,
AmbientLight: threeComponentDefinitions.AmbientLight,
DirectionalLight: threeComponentDefinitions.DirectionalLight,
OrbitControls: threeComponentDefinitions.OrbitControls,
},
actions: {},
});
// 注册表:选取匹配的实现
const { registry } = defineRegistry(catalog, {
components: {
Box: threeComponents.Box,
Sphere: threeComponents.Sphere,
AmbientLight: threeComponents.AmbientLight,
DirectionalLight: threeComponents.DirectionalLight,
OrbitControls: threeComponents.OrbitControls,
},
});
<ThreeCanvas
spec={spec}
registry={registry}
shadows
camera={{ position: [5, 5, 5], fov: 50 }}
style={{ width: "100%", height: "100vh" }}
/>
import { Canvas } from "@react-three/fiber";
import { ThreeRenderer } from "@json-render/react-three-fiber";
<Canvas shadows>
<ThreeRenderer spec={spec} registry={registry}>
{/* 额外的 R3F 元素 */}
</ThreeRenderer>
</Canvas>
Box -- 宽度,高度,深度,材质Sphere -- 半径,宽度分段,高度分段,材质Cylinder -- 顶部半径,底部半径,高度,材质Cone -- 半径,高度,材质Torus -- 半径,管径,材质Plane -- 宽度,高度,材质Capsule -- 半径,长度,材质所有基本几何体共享:position, rotation, scale, castShadow, receiveShadow, material.
AmbientLight -- 颜色,强度DirectionalLight -- 位置,颜色,强度,投射阴影PointLight -- 位置,颜色,强度,距离,衰减SpotLight -- 位置,颜色,强度,角度,半影Group -- 带有位置/旋转/缩放的容器,支持子元素Model -- 通过 url 属性加载 GLTF/GLB 模型Environment -- HDRI 环境贴图(预设,背景,模糊,强度)Fog -- 线性雾(颜色,近端,远端)GridHelper -- 参考网格(大小,分段,颜色)Text3D -- SDF 文本(文本,字体大小,颜色,锚点X,锚点Y)PerspectiveCamera -- 相机(位置,视野,近平面,远平面,设为默认)OrbitControls -- 轨道控制器(启用阻尼,启用缩放,自动旋转)用于自定义 3D 目录定义的可复用 Zod 模式:
import { vector3Schema, materialSchema, transformProps, shadowProps } from "@json-render/react-three-fiber";
import { z } from "zod";
// 自定义 3D 组件
const myComponentDef = {
props: z.object({
...transformProps,
...shadowProps,
material: materialSchema.nullable(),
myCustomProp: z.string(),
}),
description: "我的自定义 3D 组件",
};
materialSchema = z.object({
color: z.string().nullable(), // 默认 "#ffffff"
metalness: z.number().nullable(), // 默认 0
roughness: z.number().nullable(), // 默认 1
emissive: z.string().nullable(), // 默认 "#000000"
emissiveIntensity: z.number().nullable(), // 默认 1
opacity: z.number().nullable(), // 默认 1
transparent: z.boolean().nullable(), // 默认 false
wireframe: z.boolean().nullable(), // 默认 false
});
3D 规范使用标准的 json-render 扁平元素格式:
{
"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": []
}
}
}
需要以下对等依赖项:
@react-three/fiber >= 8.0.0@react-three/drei >= 9.0.0three >= 0.160.0react ^19.0.0zod ^4.0.0每周安装量
161
代码仓库
GitHub 星标数
13.3K
首次出现
13 天前
安全审计
已安装于
codex159
cursor158
gemini-cli157
kimi-cli157
github-copilot157
amp157
React Three Fiber renderer for json-render. 19 built-in 3D components.
| 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 |
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,
},
});
<ThreeCanvas
spec={spec}
registry={registry}
shadows
camera={{ position: [5, 5, 5], fov: 50 }}
style={{ width: "100%", height: "100vh" }}
/>
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>
Box -- width, height, depth, materialSphere -- radius, widthSegments, heightSegments, materialCylinder -- radiusTop, radiusBottom, height, materialCone -- radius, height, materialTorus -- radius, tube, materialPlane -- width, height, materialCapsule -- radius, length, materialAll primitives share: position, rotation, scale, castShadow, receiveShadow, material.
AmbientLight -- color, intensityDirectionalLight -- position, color, intensity, castShadowPointLight -- position, color, intensity, distance, decaySpotLight -- position, color, intensity, angle, penumbraGroup -- container with position/rotation/scale, supports childrenModel -- GLTF/GLB loader via url propEnvironment -- 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)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",
};
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
});
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": []
}
}
}
Peer dependencies required:
@react-three/fiber >= 8.0.0@react-three/drei >= 9.0.0three >= 0.160.0react ^19.0.0zod ^4.0.0Weekly Installs
161
Repository
GitHub Stars
13.3K
First Seen
13 days ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex159
cursor158
gemini-cli157
kimi-cli157
github-copilot157
amp157
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
113,700 周安装