Display 3D model in SAP CRM UI Using pure JavaScript

[JerryWang]

In SAP CRM WebClient UI it is possible to review the 3D model of a product with the help of SAP Visual Enterprise Viewer, a program which can be used to display and explore three dimensional (3D) data. The viewer program is installed in local laptop. Once button "Visual Enterprise Viewer" is clicked in Product overview page toolbar, a popup window appears to display the 3D model.

The main goal of this integration in SAP CRM is, to make use of already existing 3D data within a company (normally created by engineering/design department for production) also in sales, service and marketing processes within CRM. One scenario would be to use the product structure stored in the 3D file during service processing either for identification of the faulty part/component or for the selection of possible spare parts.

Technically this is achieved by a reuse WebClient UI component GS_VEVIEWER which calls the local installed SAP Visual Enterprise Viewer via ActiveX - this behavior is encapsulated by tag veviewerIsland below.

For more information about SAP Visual Enterprise Viewer, please refer to SAP help.

This blog will not focus on SAP Visual Enterprise but instead introduce another approach to achieve the same: display 3D model in SAP CRM UI using pure JavaScript. It means for end user, no additional client program installation is needed. And no special settings must be configured in browser either.

I have developed a prototype and this is the demo video in youtube.

( Since this video is made from my internal system, I exclude the upper part of the popup dialog on purpose in order not to divulge the system url. )

When the 3D button is pressed, a popup dialog is displayed just the same as the solution by SAP Visual Enterprise Viewer. And in this case, the football keeps rotation so that you could get a 360 degree on it. Of course the animation effect could not be observed by the static screenshot below, you have to access my youtube video above to experience it.

As I mentioned before, this solution needs only JavaScript programming. The magic lies in three.js, a JavaScript library to manipulate and display 3D data based on WebGL(Web Graphics Library).

Check its official website to see many fancy samples and step-by-step learn how to program by threejs:

Here below are the major steps how my prototype is built:

1. Develop a BSP application in CRM system which could display a 3D football via threejs.

Here below is my BSP application.

Select index.html and choose "test" from context menu, you should see a rotating football in your browser. All the logic is coding in index.htm and you can get its source code from my github.

The other files you see under MIMEs folder are 3D model files for this football prepared by engineering/design department for production mentioned before.

You can also open this url to see the football rotation effect.

You must wait till all those resources files are loaded successfully and then see the result:

The logic in index.htm is to use threejs API to render the 3D football by consuming prepared 3D files in above screenshot.

The rotation animation is implemented by using requestAnimationFrame API supported by most modern browser. My render function will be called by default 60 times per second and during each call I perform a minor X and Y coordinate to form the animation effect.

2. The left part is CRM WebClient UI development.

Enhance the component PRD01OV by adding new component usage of reuse component GSURLPOPUP.

Create a new button in Product overview page toolbar:

Implement event handler to display:

ABAP code to display BSP application via popup:

METHOD EH_DISPLAY_3D.

    DATA(lv_title) = 'Jerry 3D Display POC'. "#EC NOTEXT

    DATA(lv_3d) = 'https://<host>:<port>/sap(bD1lbiZjPTUwNA==)/bc/bsp/sap/z3dfootball/index.htm'.



    DATA(lr_popup) = comp_controller->window_manager->create_popup(  iv_interface_view_name = 'GSURLPOPUP/MainWindow'

                                                   iv_usage_name          = 'GSURLPOPUP'

                                                   iv_title               = conv #( lv_title ) ).



    DATA(lr_cn)  = lr_popup->get_context_node( 'PARAMS' ).

    DATA(lr_obj) = lr_cn->collection_wrapper->get_current( ).



    DATA(ls_params) = VALUE crmt_gsurlpopup_params( url = lv_3d height = '1000' ).



    lr_obj->set_properties( ls_params ).



    lr_popup->set_display_mode( if_bsp_wd_popup=>C_DISPLAY_MODE_PLAIN ).

    "lr_popup->set_display_mode( if_bsp_wd_popup=>C_DISPLAY_MODE_SURROUNDED ).



    lr_popup->set_window_width( 1000 ).

    lr_popup->set_window_height( 1000 ).

    lr_popup->open( ).

ENDMETHOD.

Welcome to try this prototype and your feedback is highly appreciated !