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 a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

0 Answers

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.