三.ColladaLoader 不是构造函数

Question

我正在使用 Angular 5.2.0 和三个 JS 0.91.0。我正在尝试加载 Collada 文件。
但我总是收到错误提示 “THREE.ColladaLoader 不是构造函数”
请帮忙。

下面是我的TS代码sn-p：

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);
  }

}

我也尝试添加三个collada-loader 依赖，但错误是一样的。 我在这里得到错误var loader = new THREE.ColladaLoader();

提前感谢。

Answer 1

ColladaLoader 不是核心库的一部分。你可以在/examples/js/loaders/ColladaLoader.js找到它。

我在 three.js 包中没有看到它的类型文件。我确实找到了一个here，但我不能说它是最新的还是适合你。

编辑：

three.js 类型的存储库（上面链接）已被弃用。提供这些类型的最后一个版本是 0.93.31。