react-three-fiber

@json-render/react-three-fiber

json-render 用の React Three Fiber レンダラーです。19 種類の組み込み 3D コンポーネントを利用できます。

2 つのエントリーポイント

エントリーポイント	エクスポート	用途
@json-render/react-three-fiber/catalog	threeComponentDefinitions	カタログスキーマ（R3F への依存がなく、サーバーでも安全に使用できます）
@json-render/react-three-fiber	threeComponents, ThreeRenderer, ThreeCanvas, schemas	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";

// 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（便利なラッパー）

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

Canvas の手動設定

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>

利用可能なコンポーネント（19 種類）

プリミティブ（7 種類）

• Box -- 幅、高さ、奥行き、マテリアル
• Sphere -- 半径、widthSegments、heightSegments、マテリアル
• Cylinder -- radiusTop、radiusBottom、高さ、マテリアル
• Cone -- 半径、高さ、マテリアル
• Torus -- 半径、チューブ、マテリアル
• Plane -- 幅、高さ、マテリアル
• Capsule -- 半径、長さ、マテリアル

すべてのプリミティブで共通して使用できる項目は、position、rotation、scale、castShadow、receiveShadow、material です。

ライト（4 種類）

• AmbientLight -- 色、強度
• DirectionalLight -- 位置、色、強度、castShadow
• PointLight -- 位置、色、強度、距離、減衰
• SpotLight -- 位置、色、強度、角度、ペナンブラ

その他（8 種類）

• Group -- 位置・回転・スケールを指定でき、子要素をサポートするコンテナー
• Model -- url プロパティを使って GLTF/GLB を読み込むローダー
• Environment -- HDRI 環境マップ（プリセット、背景、ぼかし、強度）
• Fog -- 線形フォグ（色、near、far）
• GridHelper -- 参照用グリッド（サイズ、分割数、色）
• Text3D -- SDF テキスト（テキスト、フォントサイズ、色、anchorX、anchorY）
• PerspectiveCamera -- カメラ（位置、fov、near、far、makeDefault）
• OrbitControls -- オービットコントロール（enableDamping、enableZoom、autoRotate）

共通スキーマ

カスタム 3D カタログ定義で再利用できる Zod スキーマです。

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 仕様では、標準の 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.0
• three >= 0.160.0
• react ^19.0.0
• zod ^4.0.0