THREE.ColladaLoader is not a constructor - three.js

Question

I am using Angular 5.2.0 and three JS 0.91.0. I am trying to load a Collada file.
But I always get an error saying "THREE.ColladaLoader is not a constructor"
Please help.
Below is my TS code snippet:
import { Component, OnInit, ViewChild } from '#angular/core';
import * as THREE from 'three';
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
#ViewChild('collada') container;
renderer = new THREE.WebGLRenderer();
scene = null;
camera = null;
mesh = null;
clock = null;
self = null;
devicesData = [{
name: "Device One",
secure: true,
x_axis: '-24',
y_axis: '-67.00',
z_axis: '1111.40',
counter: '4.00',
device_time: '2017-11-16 13.05.53.988'
}, {
name: "Device Two",
secure: true,
x_axis: '12345.67',
y_axis: '1111.0',
z_axis: '1212.387',
counter: '4.00',
device_time: '2017-11-15 13.05.53.988'
}, {
name: "Device Three",
secure: false,
x_axis: '444.56',
y_axis: '22.00',
z_axis: '111.90',
counter: '5.00',
device_time: '2017-11-17 13.05.53.988'
}, {
name: "Device Four",
secure: true,
x_axis: '12345.67',
y_axis: '1111.0',
z_axis: '1212.387',
counter: '4.00',
device_time: '2017-11-18 13.05.53.988'
}]
constructor() { }
ngOnInit() {
}
loadColladaFile() {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
this.camera.position.set(8, 10, 8);
this.camera.lookAt(new THREE.Vector3(0, 3, 0));
this.scene = new THREE.Scene();
this.clock = new THREE.Clock();
// loading manager
var loadingManager = new THREE.LoadingManager(function () {
this.scene.add(self);
});
// collada
var loader = new THREE.ColladaLoader();
loader.load('../assets/sphere.dae', function (collada) {
this.self = collada.scene;
});
var ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
this.scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 0).normalize();
this.scene.add(directionalLight);
//
this.renderer = new THREE.WebGLRenderer();
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(this.container.nativeElement.offsetWidth, 120);
this.mesh = new THREE.Mesh();
this.scene.add(this.mesh);
this.renderer.setSize(this.container.nativeElement.offsetWidth, 120);
this.renderer.domElement.style.display = "block";
this.renderer.domElement.style.margin = "auto";
this.container.nativeElement.appendChild(this.renderer.domElement);
this.animate();
}
ngAfterViewInit() {
this.loadColladaFile();
}
animate() {
window.requestAnimationFrame(() => this.animate());
this.mesh.rotation.x += 0.01;
this.mesh.rotation.y += 0.02;
this.renderer.render(this.scene, this.camera);
}
}
I have also tried adding three-collada-loader Dependency but the error is same.
I get the error here var loader = new THREE.ColladaLoader();
Thanx in Advance.

Answer 1

ColladaLoader is not part of the core library. You can find it in /examples/js/loaders/ColladaLoader.js.
I don't see a typings file for it in the three.js package. I did find one here, but I can't say whether it's up-to-date or will work for you.
EDIT:
The repository for three.js typings (linked above) has been deprecated. The last version to provide these typings was 0.93.31.