Skip to Content

3D model not loaded in SAPUI5

Hello Colleagues,

The version of 3D model application in samples of SAPUI5 demo sdk is working.

I tried to dig in deep with Michael Murray training in SAPUI5 3D model development.

I literally failed and wondering how come the code don't work?

i am attaching my source code here.

Index.html

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>


	<script id="sap-ui-bootstrap"
		src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-libs="sap.ui.vk, sap.m"
		data-sap-ui-theme="sap_belize"
		data-sap-ui-bindingSyntax="complex"
		data-sap-ui-resourceroots='{
			"com": "./"
		}'>
	</script>


	<script>


	sap.ui.getCore().attachInit(function(){
		new sap.m.Shell({
			app: new sap.ui.core.ComponentContainer({
				name: "com"
			})
		}).placeAt("content");
	});


	</script>


	</head>


	<body id="content" class="sapUiBody">
	</body>
</html>



component.js

sap.ui.define([
    "sap/ui/core/UIComponent"
], function (UIComponent) {
    "use strict";


    return UIComponent.extend("com.Component", {


        metadata: {
            manifest: "json"
        },


        init: function () {
            // call the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);
        }
    });
});


View.xml

<mvc:View
		controllerName="com.controller.App"
		
	xmlns:m="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:vk="sap.ui.vk"
	xmlns:l="sap.ui.layout"
	xmlns:f="sap.ui.layout.form"
	xmlns:u="sap.ui.unified"
		displayBlock="true">
	<m:App  id="com">
		<m:Page
				title="{i18n>pageTitle}">
			<l:FixFlex class="fixFlexVertical" fixFirst="true">
				<l:fixContent>/>
				<m:Panel expandable = "true" expanded = "false" headerText="Container3d">
					<m:headerToolbar>
						<m:Toolbar>
							<m:Title text="Interacting with 3d content"/>
						</m:Toolbar>
					</m:headerToolbar>
					<m:content>
						<m:VBox class="sapUiTinyMargin">
							<m:Text text="this is a ex"/>
						</m:VBox>
						<f:SimpleForm layout = "ResponsiveGridLayout">
							<f:content>
								<mvc:Title text="clickedNodeInfo"/>
								<m:TextArea id = "txtInfo" width="100%"/>
							</f:content>
						</f:SimpleForm>
					</m:content>
				</m:Panel>
			</l:fixContent>
			<l:flexContent>
				<l:Splitter orientation = "Vertical" height="100%" width="100%">
					<l:DynamicSideContent>
					<l:mainContent>
						<vk:Viewport
					id="viewer"
					width="100%"
					height="50%"
					backgroundColorTop="rgba(255,255,255,1)"
					backgroundColorBottom="rgba(155,155,155,1)"
					contentConnector=""
					viewStateManager="vsmA"/>
					</l:mainContent>
					<l:sideContent>
						<vk:SceneTree
					id="scenetree"
					width="100%"
					height="50%"/>
					</l:sideContent>
				</l:DynamicSideContent>
			</l:Splitter>
		</l:flexContent>
	</l:FixFlex>
	</m:Page>
	<m:dependents>
	<vk:ContentConnector id ="first-connector">
	<vk:contentResources>
	<vk:ContentResource name = "Car" source="https://damals00196.hanatrial.ondemand.com/3dmodels/src/models/sap_car_drive_system_good.vds"/>
	</vk:contentResources>
	<vk:viewStateManagers> 
	<vk:viewStateManagers id = "vsmA"/>
	</vk:viewStateManagers> 
	</vk:ContentConnector>
	</m:dependents>
	
</m:App>
</mvc:View>

Controller code

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"sap/ui/vk/ContentResource",
	"sap/ui/vk/ContentConnector",
	 "sap/ui/vk/dvl/ViewStateManager"
], function (Controller, JSONModel, ContentResource, ContentConnector, ViewStateManager) {
	"use strict";




	return Controller.extend("viewportScenetree.controller.App",{
	    onInit: function() {
	    var firstConnector = this.getView().byId("first-connector");
	    var viewStateManager = this.getView().byId("vsmA");
	    
	    var viewport = this.getView().byId("viewer");
	    
	    //viewport.setSelectionMode(none);
	    viewStateManager.setHighlightColor('rgb(0,255,0');
	    viewport.attachNodesPicked(function(oEvent)
	    {
	        var pickedNode = oEvent.getParameter('picked');
	        sap.m.MessageToast.show(JSON.Stringify(pickedNode)+""+viewport.getSelectionMode());
	        
	        
	    });
	    //viewStateManager.setVisiblityState(pickedNode,False,true)
	    //viewStateManager.setTintColor(pickedNode,false,true)
	        viewStateManager.attachSelectionChanged(function(oEvent){
	            var selectedNodes = oEvent.getParameter("selected");
	            var unselectedNodes = oEvent.getParameter("unselected");
	            sap.m.MessageToast.show("sellected"+selectedNodes+"unselected nodes"+unselectedNodes);
	            
	        });
	    }
	    
	    
	/*	onInit: function() {




			var view = this.getView();
			var oViewport = view.byId("viewer");
			var oViewport1 = view.byId("viewer");
			var viewStateManager = this.getView().byId("vsmA");
			viewStateManager.setHighlightColor('rgb(0,255,0)');
			var sceneTree = view.byId("scenetree");
			//Constructor for a new content resource. procides an object that owns content resouces, tracks changes, loads and destroys
			//content built from the content resource.
			var contentResource = new sap.ui.vk.ContentResource({
				//specifying the resource to load
				source: "models/sap_car_drive_system_good.vds",
				sourceType: "vds",
				sourceId: "abc123"
			});


			//Constructor for a new content connector
			var contentConnector = new ContentConnector("abcd");


			////Manages the visibility and the selection states of nodes in the scene.
			var viewStateManager = new ViewStateManager("vsmA", {
                contentConnector: contentConnector
			});
				var viewStateManager1 = new ViewStateManager("vsmA1", {
                contentConnector: contentConnector
			});
			
			//set content connector and viewStateManager for viewport
			oViewport.setContentConnector(contentConnector);
			oViewport.setViewStateManager(viewStateManager);
			oViewport1.setContentConnector(contentConnector);
			oViewport1.setViewStateManager(viewStateManager1);
			
			//set scene tree content connector and viewStateManager
			sceneTree.setContentConnector(contentConnector);
			sceneTree.setViewStateManager(viewStateManager);
			sceneTree.setViewStateManager(viewStateManager1);
			
			view.addDependent(contentConnector).addDependent(viewStateManager);
			view.addDependent(contentConnector).addDependent(viewStateManager1);


			//Add resource to load to content connector
			contentConnector.addContentResource(contentResource);


		}*/
	});
});

@Michael Murray this code is done as xs app. please find and guide me to get your approach working. thanks a lot.

the error i receive is

Uncaught Error: Cannot add text nodes as direct child of an aggregation. For adding text to an aggregation, a surrounding html tag is needed: />
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

0 Answers