SAP 電商雲 Spartacus UI 裡的 spare part 3D 模型展示，使用的控制元件來自 SAP UI5 sap.ui.vk 下的控制元件。

![](https://img-blog.csdnimg.cn/img_convert/03405c7e1ddde031c284c48676990c90.png)

sap.ui.vk 庫為應用程式中 2D 和 3D 模型的視覺化和操作提供了控制元件。

應用程式使用 sap.ui.vk 名稱空間。 所有其他名稱空間（sap.ui.vk.dvl、sap.ui.vk.threejs、sap.ui.svg）都是特定於特定實現的，應被視為私有 API。

使用傳統 DVL 或 ThreeJs 渲染引擎啟用 3D 檢視。

3D 渲染引擎的選擇是使用 sap.ui.vk.ContentResource 物件及其引數 sourceType 完成的。

要使用舊版 DVL 渲染引擎，請將 sourceType 引數設定為 vds。

要使用 ThreeJs 渲染引擎，請將 sourceType 引數設定為 vds4。

舊版 DVL 渲染引擎已棄用，將在即將釋出的版本中刪除。

許多新功能不適用於舊版 DVL 渲染引擎。 例如，抽屜工具欄中可用的大多數工具僅適用於 ThreeJs 渲染。

# Native Viewport

Native Viewport 控制元件 ( sap.ui.vk.NativeViewport ) 為載入到 Viewer 應用程式中的 2D 影像提供渲染畫布。

Native Viewport 控制元件 (sap.ui.vk.NativeViewport) 使用標準 HTML 和 CSS 將瀏覽器本機支援的影像檔案載入到檢視區域。 標準 VIT 平移和縮放手勢支援增強了載入影像的檢視。

sap.ui.vk.NativeViewport 控制元件可以佔據全部或部分使用者介面。

# Scene Tree

sap.ui.vk.SceneTree 控制元件呈現給定場景中節點的分層檢視。

Viewport 控制元件的主要功能是為所有或部分載入的場景提供渲染表面。 視口可以佔據使用者介面的全部或部分。

# View Gallery

sap.ui.vk.ViewGallery 控制元件替換了 sap.ui.vk.StepNavigation 控制元件，該控制元件支援導航和啟用包含在單個 3D 場景中的過程和步驟。 sap.ui.vk.StepNavigation 控制元件已棄用，因為它僅與 DVL 渲染引擎一起使用。

# Viewer

此控制元件旨在幫助應用程式開發人員透過連線、配置和呈現基本 Visualization Toolkit 控制元件作為單個複合控制元件，在其應用程式中包含簡單的 3D 視覺化功能。

Viewport 可以連線到 ViewStateManager 物件以處理場景中節點的選擇和可見性狀態。 這意味著當在場景中選擇一個節點時，該節點將被突出顯示。 此外，如果視口連線到場景樹控制元件，則在視口中選擇節點將突出顯示場景樹中的關聯項。

當視口連線到場景樹，或者建立 DrawerToolbar 並啟用顯示/隱藏按鈕時，可以更改節點的可見性狀態。 可以使用場景樹功能或抽屜工具欄按鈕在視口中隱藏或顯示節點。

動態建立 viewer port 的程式碼：

```typescript
private addViewport(): Observable<void> {
    return new Observable((subscriber) => {
      sap.ui.require(
        [
          'sap/ui/vk/ViewManager',
          'sap/ui/vk/Viewport',
          'sap/ui/vk/ViewStateManager',
          'sap/ui/vk/AnimationPlayer',
          'sap/ui/vk/ContentConnector',
          'sap/ui/vk/DrawerToolbar',
        ],
        (
          sap_ui_vk_ViewManager: any,
          sap_ui_vk_Viewport: any,
          sap_ui_vk_ViewStateManager: any,
          sap_ui_vk_AnimationPlayer: any,
          sap_ui_vk_ContentConnector: any,
          sap_ui_vk_DrawerToolbar: any
        ) => {
          const core: Core = this.getCore();
          const uiArea: UIArea = core.getUIArea(this.elementRef.nativeElement);
          if (uiArea) {
            const oldViewport = uiArea.getContent()[0] as Viewport;
            this.destroyViewportAssociations(oldViewport);
            uiArea.destroyContent();
          }

this.viewport = new sap_ui_vk_Viewport({ visible: false });
          this.viewport.placeAt(this.elementRef.nativeElement);

this.contentConnector = new sap_ui_vk_ContentConnector();
          this.contentConnector.attachContentChangesStarted(
            this.onContentChangesStarted,
            this
          );
          this.contentConnector.attachContentChangesFinished(
            this.onContentChangesFinished,
            this
          );
          this.contentConnector.attachContentLoadingFinished(
            this.onContentLoadingFinished,
            this
          );

this.viewStateManager = new sap_ui_vk_ViewStateManager({
            contentConnector: this.contentConnector,
          });

this.viewport.setContentConnector(this.contentConnector);
          this.viewport.setViewStateManager(this.viewStateManager);

this.animationPlayer = new sap_ui_vk_AnimationPlayer();
          this.animationPlayer.setViewStateManager(this.viewStateManager);

this.animationPlayer.attachViewActivated(this.onViewActivated, this);
          this.animationPlayer.attachTimeChanged(this.onTimeChanged, this);

this.viewManager = new sap_ui_vk_ViewManager({
            contentConnector: this.contentConnector,
            animationPlayer: this.animationPlayer,
          });

this.viewStateManager.setViewManager(this.viewManager);
          this.viewStateManager.attachSelectionChanged(
            this.onSelectionChanged,
            this
          );
          this.viewStateManager.attachOutliningChanged(
            this.onOutliningChanged,
            this
          );

this.drawerToolbar = new sap_ui_vk_DrawerToolbar({
            viewport: this.viewport,
            visible: false,
          });

this.viewport.addDependent(this.drawerToolbar);
          subscriber.next();
          subscriber.complete();
        }
      );
    });
  }
```

最終生成的 view port 效果如下：
![](https://img-blog.csdnimg.cn/img_convert/33d0e84f2f6d0f21a7d158f50e469199.png)</void>

SAP UI5 sap.ui.vk 名稱空間內的控制元件介紹

相關文章