Skip to Content

sapui5 3D viewer customization

Hi All,

In this post i will try to explain how to customize 3D viewer, i had got into such situation where i have to do it and while google it i couldn’t find any blog on this, well i had got a requirement to insert a column into tree table loading into 3D viewer and perform some action on it.
here the challenge is not inserting a column to tree table as we do not have context of this table until viewer loads file in it, so what we have to do here is get the context of tree table once viewer loads it, and add the column dynamically.

sapui5 provides sap.ui.vk library in order to load 3D files such as .VDS file so below are the steps we gonna follow.

  1. Implement viewer and load 3D file.
  2. Get the instance of loaded tree table.
  3. Add additional custom column into tree table.
  4. Implement the event triggered on row selection and get the value of item selected.
  5. Attach and fire event for control you addd in additional column (i will explain for combo box).
  1. Implement viewer and load 3D file.

this is very simple, you get is just by implementing vk viewer tag in your xml view.

<mvc:View controllerName="com.sap.visdemo.controller.Detail" xmlns:vk="sap.ui.vk" >


<vk:Viewer id="viewer"   toolbarTitle="{i18n>viewerToolbarTitle}" width="100%" height="85%"></vk:Viewer>

js controller code for loading 3D files.

	var sourceData = {
				localFile: undefined,
				remoteUrl: "<your_service_url_which_returns_3d_file>"
			};
			var model = new JSONModel();
			model.setData(sourceData);
			this.getView().byId("idformviewer").setModel(model, "source");
			model.refresh();

			var view = this.getView().byId("idformviewer");
			sourceData = view.getModel("source").oData;
			var viewer = this.getView().byId("viewer");
			if (sourceData.remoteUrl) {
				this.loadModelIntoViewer(viewer, sourceData.remoteUrl, "vds", sourceData.localFile);
			}

		},

		loadModelIntoViewer: function(viewer, remoteUrl, sourceType, localFile) {
			

			if (viewer.getScene() === null) {
				var source = remoteUrl || localFile;

				if (source) {

					//content of viewer is replaced with new data
					var contentResource = new ContentResource({
						source: source,
						sourceType: sourceType,
						sourceId: "abc"
					});

					//content: chosen path. content added to the view
					viewer.addContentResource(contentResource);
				}
			}
			
		},

 

2. Get the instance of loaded tree table.

in order to get the id instance created dynamically on load of viewer for tree table, you need to inspect the browser where the 3D file loaded, as shown in below screen you need to drill down to the tree <div> element and find it.

3. Add additional custom column into tree table.

now we see that we have tree table id on successfully load of 3D file, using this id we now have to add column in tree table dynamically in order to do that we have to implement an event of Viewer control called sceneLoadingSucceeded as follows.

update your view as below.

<vk:Viewer id="viewer" sceneLoadingSucceeded="sceneLoadingSucceeded"  toolbarTitle="{i18n>viewerToolbarTitle}" width="100%" height="85%"></vk:Viewer>

code for controller.

sceneLoadingSucceeded: function() {
			var otable = sap.ui.getCore().byId('__table0');

			if (otable.getColumns().length === 2) {
				
				otable.addColumn(

					new sap.ui.table.Column({
						label: "Go Fiori",
						template: new sap.m.ComboBox("idcb",{
							items: [new sap.ui.core.ListItem({
								text: ""
							}),new sap.ui.core.ListItem({
								text: "Tile-1"
							}), new sap.ui.core.ListItem({
								text: "Tile-2"
							}), new sap.ui.core.ListItem({
								text: "Tile-3"
							})]
							
						})
					}));

			}


		}

 

4. Implement the event triggered on row selection and get the value of item selected.
    5. Attach and fire event for control you added in additional column (i will explain for combo box).
you must see column getting added to Viewer tree table, now to get the row item selection event and context of your control added in column we have to implement selectionChanged event of viewer and attach and file event for control added in column.

update view as below.

<vk:Viewer id="viewer" selectionChanged="selectionChanged" sceneLoadingSucceeded="sceneLoadingSucceeded"  toolbarTitle="{i18n>viewerToolbarTitle}" width="100%" height="85%"></vk:Viewer>

update controller as below.

selectionChanged: function(oEvent) {

			if (oEvent.getParameter("selected").length > 0) {

				var otable = sap.ui.getCore().byId('__table0');

				var oIndex = otable.getSelectedIndex();
				//var t = otable.getRows()[oIndex];
				var oCB = otable.getRows()[oIndex].getCells()[2];

				oCB.attachSelectionChange(function(oEvent1) {
					var selectedId = otable.getRows()[oIndex].getCells()[0].getProperty("text");
					var selectedItem = oEvent1.getSource().getProperty("value");

				});

				oCB.fireSelectionChange(function(oEvent2) {
					
				});

			
			} else if (oEvent.getParameter("unselected").length > 0) {
				return;
			}

		}

selectionchnaged event will file on tree table item selection and attachSelectionChange & fireSelectionChange will help you to attach and fire event on control (combo box in this case) we added into viewer tree table.

Thanks, Prem

/
20 Comments
You must be Logged on to comment or reply to a post.
  • Hi Prem,

    I'm trying the SAPUI5 3D Viewer control from the SAPUI5 Explored, but the provided sample file fails to load (https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.vk.tutorial.VIT.01/preview).

    It gives an invalid format error message.

    Any ideeas?

    Thanks in advance.

    @bdel

  • I am working on the Developer Guide tutorial for "3D Viewer". I have downloaded the boxTestModel.vds to my desktop. I am trying to upload boxTestModel.vds 3D file but I get the error listed below.  Can you email me a vds file to use.  My email is srassum@gmail.com.

    App opens fine and I see the "Downloading ..." message but then I get the following error

    Failed to build a scene from loaded content resources.

    Message: Invalid typed array length – VIT14 sap.ui.vk.Viewer

    Could not create a scene from the file

  • Hi,

     

    I am trying to load my .vds file into view but it is throwing an error saying "Failed to build a scene from the loaded content resources. code: -6, message: Incorrect format". Please give the solution to my email id raheenafshan1@gmail.com.

     

  • Hi Premnarayan,

    Nice Blog,

    I have one small question,  I am trying to load my .vds file into view in onInit() function  but it is throwing an error saying “Failed to build a scene from the loaded content resources. code: -6, message: Incorrect format”.  But instead of calling in onInit() function, if I use file uploader method same vds file is working fine.

    Regards,

    Raghavendra

  • Hello Premnarayan,

    Excellent blog. Like others, even I am facing the issue while loading the .vds file provided in Samples. Could you please share the .vds file that you used @ akshay.tamhane146@gmail.com , if possible ?

    Thanks in advance.

    Regards,

    Akshay Tamhane

    • /
      • Hi Avinash,

        great Blog. I too have a requirement of loading the same car image mentioned in this comment. It would be really helpful if you could mail me this at venkatesh.hulekal07@gmail.com or tell me the source to get these files.( I do have sap 3D visual Enterprise Viewer installed. I'm not sure what kind of file to input to get a vds file as shown above)

        Thanks In Advance.

  • Thanks for the Blogpost. Even I am facing the issue while loading the .vds file provided in Samples. Could you please share the .vds file that you used to shruthipinnamwar@gmail.com

  • Hi,

    I am trying to run the solution but getting below error.

    Some content resources could not be loaded. - 6580184 - Exception catching is disabled, this exception cannot be caught. Compile with -s DISABLE_EXCEPTION_CATCHING=0 or DISABLE_EXCEPTION_CATCHING=2 to catch. sap.ui.vk.Viewer

     

    Thanks.

    Shakti

    /