Myujth

I am working on an Angular 7 project where using three-full node module, I am trying to load a FBX Model but while loading a model it gives the following type error:

TypeError: child.material.clone is not a function at Three.es.js:60764
at Mesh.traverse (Three.es.js:3918)
at Group.traverse (Three.es.js:3924)
at FBXTreeParser.setupMorphMaterials (Three.es.js:60742)
at FBXTreeParser.parseScene (Three.es.js:60174)
at FBXTreeParser.parse (Three.es.js:59479)
at FBXLoader.parse (Three.es.js:59452)
at Object.onLoad (Three.es.js:59398)
at XMLHttpRequest. (Three.es.js:21917)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask
(zone.js:421)

I am using [1]: https://github.com/Itee/three-full I have included the required inflate.min.js to the project.
Below is the code snippet from visualizer.component.ts file:

 import Component, OnInit, Renderer2, ElementRef, ViewChild, HostListener from '@angular/core';
 import * as THREE from "three-full";
 import tdModel from './tdmodel.model';
 import VizService from './viz.service';

 @Component(
 selector: 'app-visualizer',
 templateUrl: './visualizer.component.html',
 styleUrls: ['./visualizer.component.scss']
 )
 export class VisualizerComponent implements OnInit 
 @ViewChild('canv') canv: ElementRef;
 model: tdModel;
 canvas: HTMLCanvasElement;
 renderer: THREE.WebGLRenderer;
 light: THREE.AmbientLight;
 camera: THREE.PerspectiveCamera;
 scene: THREE.Scene;
 loader: THREE.FBXLoader;
 object: THREE.Object3D;
 control: THREE.OrbitControls;
 textureLoader: THREE.TextureLoader;

 constructor(private domRenderer: Renderer2, private vizService: VizService) 

 ngOnInit() 
 this.model = this.vizService.getModel(1);
 this.createScene();
 this.createCamera();
 this.createRenderer(this.canv);
 this.createLight();
 this.createModel();
 this.createControl();
 this.render();
 
 //Create Scene
 createScene() 
 this.scene = new THREE.Scene();
 

 createCamera() 
 this.camera = new THREE.PerspectiveCamera(45, this.canv.nativeElement.width / this.canv.nativeElement.height, 1, 1000);
 this.camera.position.set(100, 100, 100);
 this.camera.up.set(0, 1, 0);
 this.scene.add(this.camera);
 

 createLight() 
 this.light = new THREE.AmbientLight('white', 1);
 this.scene.add(this.light);
 

 createModel() 
 var manager = new THREE.LoadingManager();
 manager.onProgress = function (item, loaded, total) 

 console.log(item, loaded, total);

 ;
 this.loader = new THREE.FBXLoader(manager);
 this.loader.load(this.model.data, (model) => 
 console.log(model);
 , (item) => console.log(item) , (error) => console.log(error) )

 

 createRenderer(container: ElementRef) 
 this.renderer = new THREE.WebGLRenderer();
 this.domRenderer.appendChild(container.nativeElement, this.renderer.domElement)
 

 createControl() 
 this.control = new THREE.OrbitControls(this.camera, this.renderer.domElement);
 

 render() 
 requestAnimationFrame(() => 
 this.render();
 );
 this.renderer.render(this.scene, this.camera);
 

 @HostListener('window:resize', ['$event'])
 onresize() 
 let width = this.canv.nativeElement.width;
 let height = this.canv.nativeElement.height;
 this.camera.aspect = width / height;
 this.camera.updateProjectionMatrix();
 this.renderer.setSize(width, height);
 

 

And below are the links to screenshots (chrome web inspector) from fbxloader
part of bundle where the error is occurring

[2]:
https://i.stack.imgur.com/SP9FA.jpg [3]:
https://i.stack.imgur.com/vUO8r.jpg [4]:
https://i.stack.imgur.com/jNho1.jpg [5]:
https://i.stack.imgur.com/5HIuP.jpg

Does anyone have any idea? Please help me with this!!