3D要素

3D要素は、インポートされた3Dモデル、基本的な幾何学的プリミティブ、2D形状からの押し出し形状、3Dテキスト、およびブール演算の結果を含む、プロジェクト内の三次元オブジェクトを表します。

3D要素は、基本要素およびビュー要素から共通のフィールドを共有し、さらに3D特有のプロパティを導入します。

基本フィールド

3D変換フィールド

標準の2D変換プロパティ（x、y、回転、scaleX、scaleY）に加えて、3D要素は三次元の位置決めと回転のための追加の変換プロパティをサポートします：

幾何学的タイプ

geometryTypeフィールドは、基本的な3D幾何学のタイプを指定します。利用可能なタイプは、カテゴリによって整理されます（nodeTypeが"geometry"または"primitive"の場合にcategoryフィールドを介して指定）：

注：nodeType: "primitive"は"geometry"のエイリアスです。どちらもサポートされ、同様に動作します。

基本形状（category: "basic"）：

• cube - 六面体
• sphere - 球形の幾何学
• cylinder - 円柱形の幾何学
• cone - 円錐形の幾何学
• torus - ドーナツ型の幾何学
• capsule - カプセル型の幾何学
• disc - 平らな円形ディスク

多面体（category: "polyhedron"）：

• pyramid - 四面体のピラミッド
• octahedron - 八面体の多面体
• icosahedron - 二十面体の多面体
• dodecahedron - 十二面体の多面体
• hexPrism - 六面体のプリズム
• triangle - 三角形のプリズム

パラメトリックノードタイプ

パラメトリックノード（nodeType: "parametric"）は、手続き的に幾何学を生成します：

押し出し（category: "extrusion"）：

• Z軸に沿って深さとベベルを持つ2D形状を押し出します

旋盤（category: "lathe"）：

• 2Dプロファイルを軸の周りに回転させて円筒形のオブジェクトを作成します

スイープ（category: "sweep"）：

• 3Dパスに沿って2Dプロファイルをスイープして、管状またはレールベースの形状を作成します

曲線ノードタイプ

曲線ノード（nodeType: "curve"）は、3D曲線とパスを作成します：

ヘリックス（category: "helix"）：

• 半径とピッチを設定可能な螺旋曲線

トーラスノット（category: "torusKnot"）：

• トーラス表面上の数学的ノット曲線

カスタム（category: "custom"）：

• ユーザー定義の曲線パス

トポロジーノードタイプ

トポロジー操作（ブール、配列、ミラー、複合）はエディタ内で実行され、標準の幾何学出力を生成します。これらの操作は編集時に適用され、レンダリングAPIで特別な処理を必要としません。

形状の押し出し

3D要素は2D形状を押し出すことで作成できます。エディタで2D形状要素を3Dに変換すると、以下の追加フィールドを持つ新しいtype: "3D"要素が生成されます：

3Dテキスト

3D要素は、深さとベベルを持つ三次元テキストも表現できます：

材料とテクスチャ

3D要素は、包括的なテクスチャサポートを持つPBR（物理ベースのレンダリング）材料システムを使用します：

materialオブジェクトには以下が含まれます：

physicalMaterialData - PBR材料プロパティ：

• color（文字列） - 基本色の16進形式、デフォルト：'#818cf8'
• roughness（数値） - 表面の粗さ、0-1、デフォルト：0.4
• metalness（数値） - 金属的特性、0-1、デフォルト：0.0
• opacity（数値） - 材料の不透明度、0-1、デフォルト：1.0
• transmission（数値） - ガラスのような材料の光透過率、0-1、デフォルト：0.0
• ior（数値） - 屈折率、通常1.0-2.5、デフォルト：1.5
• clearcoat（数値） - クリアコーティング層の強度、0-1、デフォルト：0.0
• clearcoatRoughness（数値） - クリアコートの粗さ、0-1、デフォルト：0.0
• sheen（数値） - 布のような光沢効果、0-1、デフォルト：0.0
• sheenRoughness（数値） - 光沢の粗さ、0-1、デフォルト：0.0
• sheenColor（文字列） - 光沢の色合い
• thickness（数値） - 透過のための材料の厚さ

materialXPath（文字列） - オプションのMaterialXプリセットパス：

• 例：'StandardSurface/standard_surface_gold.mtlx'、'StandardSurface/standard_surface_brass_tiled.mtlx'
• 読み込まれると、プリセット値でphysicalMaterialDataを上書きします

テクスチャマップ - 材料オブジェクトにはテクスチャマップのURLが含まれる場合があります：

• colorMap - 基本色/拡散テクスチャ
• normalMap - 表面の詳細用の法線マップ
• roughnessMap - 粗さテクスチャ
• metalnessMap - 金属感テクスチャ
• aoMap - 環境遮蔽マップ
• emissiveMap - 発光/グローのテクスチャ

テクスチャマップは、最適なパフォーマンスのためにTSL（Three.js Shading Language）関数を使用して適用されます。

glTFモデルとアニメーション

nodeType: "model"またはnodeType: "import"を持つ3D要素は、インポートされた3Dモデルを表します：

注：nodeType: "import"は"model"のエイリアスです。どちらもサポートされ、同様に動作します。

• source.urlを使用して、リモートglTF/glb/FBXファイルのURLを指定します
• エンジンはsourceIdを使用してモデルを取得し、キャッシュします
• モデルにアニメーションが含まれている場合は、animation.currentIndexを使用して再生するアニメーションを選択します
• アニメーションプロパティ：currentIndex（数値）、speed（数値、デフォルト1.0）、loop（ブール、デフォルトtrue）
• モデルはDRACO圧縮をサポートし、ファイルサイズを小さくします
• sizeParamsにはモデルの寸法のためのwidth、height、depthが含まれます

例

基本的なキューブ

 
{
  "id": "3d-cube-001",
  "type": "3D",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": 540,
  "y": 540,
  "z": 0,
  "width": 200,
  "height": 200,
  "anchorX": 100,
  "anchorY": 100,
  "rotation": 0,
  "rotationX": 30,
  "rotationY": 45,
  "scaleX": 1,
  "scaleY": 1,
  "scaleZ": 1,
  "alpha": 1,
  "ext": "geometry",
  "nodeType": "geometry",
  "category": "basic",
  "geometryType": "cube",
  "material": {
    "physicalMaterialData": {
      "color": "#4A90E2",
      "roughness": 0.4,
      "metalness": 0.0
    }
  }
}

押し出し形状

 
{
  "id": "3d-extrusion-001",
  "type": "3D",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": 540,
  "y": 540,
  "z": 0,
  "width": 300,
  "height": 300,
  "anchorX": 150,
  "anchorY": 150,
  "rotation": 0,
  "rotationX": 0,
  "rotationY": 0,
  "scaleX": 1,
  "scaleY": 1,
  "scaleZ": 1,
  "alpha": 1,
  "ext": "parametric",
  "nodeType": "parametric",
  "category": "extrusion",
  "shapeSizeX": 300,
  "shapeSizeY": 300,
  "shapeExtrusion": 100,
  "material": {
    "physicalMaterialData": {
      "color": "#FF6B6B",
      "roughness": 0.3,
      "metalness": 0.1
    }
  },
  "extrusionSource": {
    "shapeType": "SHAPE_STAR",
    "starPoints": 5,
    "starInnerRadius": 0.4
  }
}

アニメーション付きのglTFモデル

 
{
  "id": "3d-model-001",
  "type": "3D",
  "start": 0,
  "duration": 10,
  "trackIndex": 0,
  "x": 540,
  "y": 540,
  "z": -200,
  "width": 400,
  "height": 400,
  "anchorX": 200,
  "anchorY": 200,
  "rotation": 0,
  "rotationX": 0,
  "rotationY": 0,
  "scaleX": 1,
  "scaleY": 1,
  "scaleZ": 1,
  "alpha": 1,
  "ext": "glb",
  "nodeType": "model",
  "sourceId": "cached-model-123",
  "source": {
    "url": "https://example.com/models/animated_character.glb"
  },
  "animation": {
    "currentIndex": 0,
    "speed": 1.0,
    "loop": true
  },
  "sizeParams": {
    "width": 2,
    "height": 2,
    "depth": 2
  },
  "originalWidth": 2,
  "originalHeight": 2,
  "originalDepth": 2
}

注意事項

• 3D要素は、既存の2Dレンダリングパイプラインと完全に統合されています。2D要素と3D要素を同じプロジェクト内で混在させることができます。
• カメラはピクセル単位のパースペクティブ投影を使用し、z=0のときに1ワールドユニットが1ピクセルに等しいことを保証します。
• 3D変換の場合、座標系は標準の3D慣習に従います：X（右）、Y（上）、Z（視聴者に向かって）。
• 材料とテクスチャのプロパティは通常、エディタによって設定されます。手動でJSONを書く場合は、利用可能な材料についてMaterialXプリセットのドキュメントを参照してください。
• エディタは、3Dシーン内でLight3DおよびParticle3D要素も生成する場合があります。これらはエディタ生成のものであり、手動で構築する必要はありません。