将2D节点添加到3D场景中¶

使用 Viewport 3D 节点将2D节点添加到3D场景中。

使用 Viewport 3D 节点¶

要创建 Viewport 3D 节点：

在 Prefabs 中，创建一个2D预设，其内容您想添加到3D场景中。
在 Node Tree 或 Prefabs 中，按 Alt 并右键单击一个要添加 2D 节点的 3D 节点，并选择 Viewport 3D。
选择 Viewport 3D 节点。在 Properties 中，添加 Prefab Template 属性，并将其设置为您创建的2D预设。

Kanzi 首先将预设的内容渲染到纹理，然后使用无光照的 alpha 混合纹理材质将该纹理渲染到 3D 平面上。
（可选）要设置您想要用于渲染2D预设内容的材质，请在 Properties 中：
1. 添加 Override Material 属性，并将其设置为您要用于渲染2D预设内容的纹理材质。请参阅使用材料和创建纹理材料。
2. 单击 + Add Binding，并在 Binding Editor 中设置：
  - 将 Property 应用于您在 Override Material 属性中设置的材质的纹理属性。
  - Expression 到
    {@./Viewport3D.PrefabTexture}
  单击 Save。
  
  通过这种方式，您可以设置覆盖材质以将纹理渲染到 Kanzi 渲染 2D 预设内容的纹理。

将 2D UI 控件添加到 3D 场景中¶

在此过程中，您使用 Viewport 3D 节点将 2D 颜色选择器添加到 3D 场景中。

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

要将 2D UI 控件添加到 3D 场景中：

在 Prefabs 中，创建一个2D预设，其中包含您要添加到3D场景中的2D节点。

例如，创建一个带有滑块的颜色选择器。请参阅使用滑块创建颜色选择器。
在 Node Tree 或 Prefabs 中，创建一个您想要添加2D节点的3D场景。

例如，使用 Factory Content 中的 Car。

请参阅使用 Factory Content 资产。
在 Node Tree 或 Prefabs 中，按 Alt 并右键单击您要添加 2D 节点的 3D 节点并选择 Viewport 3D。

例如，在 Prefabs > CarScene > RootNode 节点中创建一个 Viewport 3D 节点。
选择 Viewport 3D 节点，并在 Properties 中添加并设置：
- 将 Prefab Template 属性应用到您想要添加到3D场景的2D预设。
  
  例如，选择 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 使用未点亮的 alpha 混合纹理材质在 Viewport 3D 节点中渲染内容。

要设置您想要用于渲染内容的材质，请在 Properties 中：
1. 添加 Override Material 属性并将其设置为任何纹理材质。
  
  例如，将其设置为 VertexPhongTexturedMaterial 材质。该材质使用灯光。
  
  小技巧
  
  如果您的项目不包含 VertexPhongTextured 材质类型，请在 Library > Materials and Textures 按 Alt 并右键单击 Material Types 中，选择 VertexPhongTextured。
2. 单击 + Add Binding，并在 Binding Editor 中设置：
  - 将 Property 应用于您在 Override Material 属性中设置的材质的纹理属性。
  - 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 中，当您使用颜色选择器选择颜色时，汽车的油漆会更改为使用该颜色。