CODEWITHSUNDEEP
three.jsangular5collada
Rahul Munjal
Rahul Munjal

Reputation: 2703

THREE.ColladaLoader is not a constructor

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.

Upvotes: 2

Views: 3171

Answers (2)

nale
nale

Reputation: 1

THREE.ColladaLoader is the name of the function in the file the path to the file with that function isn't link / hooked up

Upvotes: 0

TheJim01
TheJim01

Reputation: 8896

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.

Upvotes: 2

Related Questions