SAP 電商云 Spartacus UI 里的 spare part 3D 模型展示，使用的控件來(lái)自 SAP UI5 sap.ui.vk 下的控件。

sap.ui.vk 庫(kù)為應(yīng)用程序中 2D 和 3D 模型的可視化和操作提供了控件。

應(yīng)用程序使用 sap.ui.vk 命名空間。 所有其他命名空間（sap.ui.vk.dvl、sap.ui.vk.threejs、sap.ui.svg）都是特定于特定實(shí)現(xiàn)的，應(yīng)被視為私有 API。

使用傳統(tǒng) DVL 或 ThreeJs 渲染引擎啟用 3D 查看。

3D 渲染引擎的選擇是使用 sap.ui.vk.ContentResource 對(duì)象及其參數(shù) sourceType 完成的。

要使用舊版 DVL 渲染引擎，請(qǐng)將 sourceType 參數(shù)設(shè)置為 vds。

要使用 ThreeJs 渲染引擎，請(qǐng)將 sourceType 參數(shù)設(shè)置為 vds4。

舊版 DVL 渲染引擎已棄用，將在即將發(fā)布的版本中刪除。

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

Native Viewport

Native Viewport 控件 ( sap.ui.vk.NativeViewport ) 為加載到 Viewer 應(yīng)用程序中的 2D 圖像提供渲染畫布。

Native Viewport 控件 (sap.ui.vk.NativeViewport) 使用標(biāo)準(zhǔn) HTML 和 CSS 將瀏覽器本機(jī)支持的圖像文件加載到查看區(qū)域。 標(biāo)準(zhǔn) VIT 平移和縮放手勢(shì)支持增強(qiáng)了加載圖像的查看。

sap.ui.vk.NativeViewport 控件可以占據(jù)全部或部分用戶界面。

Scene Tree

sap.ui.vk.SceneTree 控件呈現(xiàn)給定場(chǎng)景中節(jié)點(diǎn)的分層視圖。

Viewport 控件的主要功能是為所有或部分加載的場(chǎng)景提供渲染表面。 視口可以占據(jù)用戶界面的全部或部分。

View Gallery

sap.ui.vk.ViewGallery 控件替換了 sap.ui.vk.StepNavigation 控件，該控件支持導(dǎo)航和激活包含在單個(gè) 3D 場(chǎng)景中的過程和步驟。 sap.ui.vk.StepNavigation 控件已棄用，因?yàn)樗鼉H與 DVL 渲染引擎一起使用。

Viewer

此控件旨在幫助應(yīng)用程序開發(fā)人員通過連接、配置和呈現(xiàn)基本 Visualization Toolkit 控件作為單個(gè)復(fù)合控件，在其應(yīng)用程序中包含簡(jiǎn)單的 3D 可視化功能。

Viewport 可以連接到 ViewStateManager 對(duì)象以處理場(chǎng)景中節(jié)點(diǎn)的選擇和可見性狀態(tài)。 這意味著當(dāng)在場(chǎng)景中選擇一個(gè)節(jié)點(diǎn)時(shí)，該節(jié)點(diǎn)將被突出顯示。 此外，如果視口連接到場(chǎng)景樹控件，則在視口中選擇節(jié)點(diǎn)將突出顯示場(chǎng)景樹中的關(guān)聯(lián)項(xiàng)。

當(dāng)視口連接到場(chǎng)景樹，或者創(chuàng)建 DrawerToolbar 并啟用顯示/隱藏按鈕時(shí)，可以更改節(jié)點(diǎn)的可見性狀態(tài)。 可以使用場(chǎng)景樹功能或抽屜工具欄按鈕在視口中隱藏或顯示節(jié)點(diǎn)。

動(dòng)態(tài)創(chuàng)建 viewer port 的代碼：

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 效果如下：

總結(jié)

以上是生活随笔為你收集整理的SAP UI5 sap.ui.vk 命名空间内的控件介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。