3Dシーンに2Dノードを追加する¶

Viewport 3D ノードを使用して、3Dシーンに2Dノードを追加します。

Viewport 3D ノードを使用する¶

Viewport 3D ノードを作成するには、

Prefabs で、3Dシーンに追加したいコンテンツを持つ2Dプレハブを作成します。
Node Tree または Prefabs で、2Dノードを追加したい3Dノードを Alt を押しながら右クリックし、Viewport 3D を選択します。
Viewport 3D ノードを選択します。Properties で、Prefab Template プロパティを追加し、作成した2Dプレハブに設定します。

Kanzi は最初にプレハブのコンテンツをテクスチャにレンダリングし、その後、アンリットのアルファブレンドテクスチャマテリアルを使用してそのテクスチャを3D平面にレンダリングします。
（オプション） 2Dプレハブのコンテンツをレンダリングするために使用したいマテリアルを設定するには、Properties で：
1. Override Material プロパティを追加し、2Dプレハブのコンテンツをレンダリングするために使用したいテクスチャ付きマテリアルに設定します。マテリアルを使用する (Using materials) とテクスチャ付きマテリアルの作成を参照してください。
2. + Add Binding をクリックし、Binding Editor で設定します:
  - Override Material プロパティで設定したマテリアルのテクスチャプロパティに Property を設定します。
  - Expression へ
    {@./Viewport3D.PrefabTexture}
  Save をクリックします。
  
  この方法で、Kanzi が2Dプレハブのコンテンツをレンダリングするテクスチャにレンダリングするためのオーバーライドマテリアルを設定します。

3Dシーンに2D UIコントロールを追加する¶

この手順では、Viewport 3D ノードを使用して、3Dシーンに2Dカラーピッカーを追加します。

../../_images/preview-viewport-3d-complete.gif

3Dシーンに2D UIコントロールを追加するには:

Prefabs で、3Dシーンに追加したい2Dノードを含む2Dプレハブを作成します。

例えば、スライダー付きのカラーピッカーを作成します。スライダー付きのカラーピッカーを作成するを参照してください。
Node Tree または Prefabs で、2Dノードを追加したい3Dシーンを作成します。

例えば、Factory Content から Car を使用します。

Factory Content アセットを使用するを参照してください。
Node Tree または Prefabs で、2Dノードを追加したい3Dノードの Alt を押しながら右クリックを行い、Viewport 3D を選択します。

例えば、Prefabs > CarScene > RootNode ノード内に Viewport 3D ノードを作成します。
Viewport 3D ノードを選択し、Properties で追加して設定します。
- 3Dシーンに追加したいコンテンツを持つ2Dプレハブに Prefab Template プロパティを設定します。
  
  例えば、Color Picker プレハブを選択します。
  
  Kanzi は最初にプレハブのコンテンツをテクスチャにレンダリングし、その後、そのテクスチャを3D平面にレンダリングします。
- Render Transformation または Layout Transformation を使用して、3D シーン内で 2D プレハブを配置および向きを設定します。
  
  例えば、Render Transformation プロパティを追加して設定します。
  - Rotation X プロパティフィールドを -90 に設定します。
  - Rotation Y プロパティフィールドを90に設定
  - Translation Y プロパティフィールドを0.1に設定します。
  これにより、2Dプレハブが車の下の床のすぐ上に配置されます。
3Dシーン内の2Dコンテンツのサイズを設定するには、Properties で、次を追加して設定します。
- 2D to 3D Projection Scale を、2Dコンテンツを3D空間に投影するために使用したいスケーリングファクターに設定します。
  
  例えば、2Dプレハブの幅が710ピクセルで、2D to 3D Projection Scale プロパティを0.08に設定した場合、そのプレハブの3D空間での幅は56.8ユニットになります。
- （オプション） Layout Width と Layout Height
  
  例えば、プレハブのレイアウトサイズを設定せず、親ノードのサイズに合わせて伸縮する場合、これらのプロパティを設定します。
Kanzi はデフォルトで、アンリットアルファブレンドテクスチャマテリアルを使用して、Viewport 3D ノード内のコンテンツをレンダリングします。

コンテンツをレンダリングするために使用したいマテリアルを設定するには、Properties で：
1. Override Material プロパティを追加し、任意のテクスチャ付きマテリアルに設定します。
  
  例えば、それを VertexPhongTexturedMaterial マテリアルに設定します。このマテリアルはライトを使用します。
  
  ヒント
  
  プロジェクトに VertexPhongTextured マテリアルタイプが含まれていない場合、Library > Materials and Textures Alt を押しながら右クリック Material Types で、VertexPhongTextured を選択します。
2. + Add Binding をクリックし、Binding Editor で設定します:
  - Override Material プロパティで設定したマテリアルのテクスチャプロパティに Property を設定します。
  - Expression へ
    {@./Viewport3D.PrefabTexture}
  Save をクリックします。
  
  この方法で、Kanzi が2Dプレハブのコンテンツをレンダリングするテクスチャにレンダリングするためのオーバーライドマテリアルを設定します。
3. Override Material プロパティで設定したマテリアルのプロパティを調整します。
  
  たとえば、次を追加して設定します:
  - Material > Diffuse Color プロパティ Lightness (L) プロパティフィールドを255に設定
  - Material > Blend Mode から Alpha: Premultiplied へ
シーンの照明をオフにすると、Kanzi はカラーピッカーをより暗い色でレンダリングします。
Viewport 3D ノードがレンダリングする2Dプレハブのプロパティにアクセスするには、バインディングを使用します。

例えば、カラーピッカーのプレハブが選択された色を保持するプロパティを持っている場合、その色で車のモデルのボディを塗るには：
1. 車のボディをレンダリングする3Dノードを選択します。Properties で、バインディングを追加し、次を設定します。
  - Property から Diffuse Color へ
    
    このプロパティは、マテリアルが照らされているときのそのマテリアルの色を設定します。
  - Expression は、カラーピッカーで現在選択されている色を含むプロパティを指します。
    
    たとえば、データ型として四元数を使用する
    {../../Color Picker Viewport/Color Picker/ColorPicker.Color}
  Save をクリックします。
2. 前のステップを Ambient Color プロパティに対して繰り返します。これは、ライトが存在しない場合にマテリアルの色を設定します。
  
  たとえば、バインディング式を次のように設定します:
```
{../../Color Picker Viewport/Color Picker/ColorPicker.Color} * Color4(0.2, 0.2, 0.2, 1)
```
Preview でカラーピッカーを使用して色を選択すると、車の塗装がその色に変わります。