@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";

// カタログ: 定義を選択
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 (便利ラッパー)

<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}>
    {/* 追加の R3F 要素 */}
  </ThreeRenderer>
</Canvas>

利用可能なコンポーネント (19)

プリミティブ (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

すべてのプリミティブが共有: position, rotation, scale, castShadow, receiveShadow, material。

ライト (4)

• AmbientLight -- color, intensity
• DirectionalLight -- position, color, intensity, castShadow
• PointLight -- position, color, intensity, distance, decay
• SpotLight -- position, color, intensity, angle, penumbra

その他 (8)

• Group -- position/rotation/scale を持つコンテナ、子要素をサポート
• Model -- url プロパティ経由の GLTF/GLB ローダー
• Environment -- HDRI 環境マップ (preset, background, blur, intensity)
• Fog -- 線形フォグ (color, near, far)
• GridHelper -- リファレンスグリッド (size, divisions, color)
• Text3D -- SDF テキスト (text, fontSize, color, anchorX, anchorY)
• PerspectiveCamera -- カメラ (position, 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";

// カスタム 3D コンポーネント
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(),         // デフォルト "#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.0
• three >= 0.160.0
• react ^19.0.0
• zod ^4.0.0