[ux_video url=”https://www.youtube.com/watch?v=150IbmoQYoE&feature=youtu.be”]
Tom, who is interested in technology decided to spend 3 days of work experience learning and developing in Formbird. His father is an architect and Tom decided to build an app for dad. Tom’s app provides dad with a management tool to record details of his / building projects.
Tom also decides that the basic data was not enough and wanted to provide for the inclusion of 3d rendering of dads projects. Using a 3rd party library he found, Tom adds that feature to Formbird by creating his own component, that was done on the last day 😉
Watch the video to see how Tom does it.
[download id=”1332″ template=”file”]
Toms JavaScript for his own 3d Rendering Component
function() {
var NotificationService = $injector.get('NotificationService');
if (typeof scope.tplItem.readOnly === 'undefined' || scope.tplItem.readOnly === null) {
scope.readOnly = false;
} else {
scope.readOnly = scope.tplItem.readOnly;
}
if (!(typeof scope.tplItem.enabled === 'undefined' || scope.tplItem.enabled === null)) {
scope.readOnly = !scope.tplItem.enabled;
}
var libPromise = $ocLazyLoad.load({
name: 'xeogl',
files: ['vendor/tom/OBJModel.js', 'vendor/tom/glTFModel.js', 'vendor/tom/STLModel.js']
});
libPromise.then(
function() {
logger.info("****************** load xeogl done ******************* ");
var config = scope.tpl.components[scope.key];
var uploaderName = "modelLocation"
var uploaderName = "fileDetails";
if(typeof config.fileLocation != "undefined" && config.fileLocation){uploaderName = config.fileLocation;}else{NotificationService.printMessage("Wrong Filetype", "warning");}
var canvName = "xeogl-" + scope.fieldName;
var objLink = "/api/getFile/" + scope.doc[uploaderName][0].fileNo + "/" + scope.doc[uploaderName][0].fileName;
var objType = scope.doc[uploaderName][0].fileType;
console.log("Getting file: " + objLink);
console.log(objType);
var scene = new xeogl.Scene({
canvas: canvName
});
if (objType == "OBJ") {
var uploadedObj = new xeogl.OBJModel(scene, {
id: "uploadedObj",
src: objLink
})
console.log("File Type OBJ")
} else if (objType == "STL") {
var uploadedObj = new xeogl.STLModel(scene, {
id: "uploadedObj",
src: objLink
});
console.log("File Type STL")
} else if (objType == "GLTF") {
var uploadedObj = new xeogl.GLTFModel(scene, {
id: "uploadedObj",
src: objLink,
smoothNormals: false,
smoothNormalsAngleThreshold: 90
});
console.log("File Type GLTF")
} else {
NotificationService.printMessage("Wrong Filetype", "warning");
console.log("wrong file type")
}
new xeogl.CameraControl(scene);
});
}
