SAP电商云SpartacusUI中的备件3D模型展示，使用的控件来自SAPUI5sap.ui.vk下的控件。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渲染。本机视口本机视口控件(sap.ui.vk.NativeViewport)为加载到查看器应用程序中的2D图像提供渲染画布。本机视口控件(sap.ui.vk.NativeViewport)使用标准HTML和CSS将浏览器本机支持的图像文件加载到查看区域中。标准VIT平移和缩放手势支持增强了对加载图像的查看。sap.ui.vk.NativeViewport控件可以占据全部或部分用户界面。SceneTreesap.ui.vk.SceneTree控件呈现给定场景中节点的分层视图。Viewport控件的主要功能是为所有或部分加载的场景提供渲染表面。视口可以占据全部或部分用户界面。查看图库sap.ui.vk.ViewGallery控件取代了sap.ui.vk.StepNavigation控件，它支持导航和激活单个3D场景中包含的过程和步骤。sap.ui.vk.StepNavigation控件已弃用，因为它仅适用于DVL渲染引擎。查看器此控件旨在帮助应用程序开发人员通过将基本可视化工具包控件连接、配置和呈现为单个复合控件，从而在其应用程序中包含简单的3D可视化功能。视口可以连接到ViewStateManager对象以处理场景中节点的选择和可见性状态。这意味着当在场景中选择一个节点时，该节点将被突出显示。此外，如果视口连接到场景树控件，则在视口中选择一个节点将突出显示场景树中的关联项。当视口连接到场景树时，或者创建DrawerToolbar并启用显示/隐藏按钮时，可以更改节点的可见性状态。可以使用场景树功能或抽屉工具栏按钮在视口中隐藏或显示节点。动态创建查看器端口的代码：privateaddViewport():Observable{returnnewObservable((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:任何,sap_ui_vk_ViewStateManager:任何,sap_ui_vk_AnimationPlayer:任何,sap_ui_vk_ContentConnector:任何,sap_ui_vk_DrawerToolbar:任何)=>{constcore:Core=this.getCore();constuiArea:UIArea=core.getUIArea.(n.element)Ref;if(uiArea){constoldViewport=uiArea.getContent()[0]asViewport;this.destroyViewportAssociations(oldViewport);uiArea.destroyContent();}this.viewport=newsap_ui_vk_Viewport({visible:false});this.viewport.placeAt(this.elementRef.nativeElement);this.contentConnector=newsap_ui_vk_ContentConnector();this.contentConnector.attachContentChangesStarted(this.onContentChangesStarted,this);this.contentConnector.attachContentChangesFinished(this.onContentChangesFinished,this);this.contentConnector.attachContentLoadingFinished(this.onContentLoadingFinished,this);this.viewStateManager=newsap_ui_vk_ViewStateManager({contentConnector:this.contentConnector,});this.viewport.setContentConnector(this.contentConnector);this.viewport.setViewStateManager(this.viewStateManager);this.animationPlayer=newsap_ui_vk_AnimationPlayer();this.animationPlayer.setViewStateManager(这个.viewStateManager);this.animationPlayer.attachViewActivated(this.onViewActivated,this);this.animationPlayer.attachTimeChanged(this.onTimeChanged,this);this.viewManager=newsap_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=newsap_ui_vk_DrawerToolbar({viewport:this.viewport,visible:false,});this.viewport.addDependent(this.drawerToolbar);订阅者.next();订户.complete();});});}最终生成的视口效果如下：
