三.ColladaLoader 不是构造函数

Posted 2023-03-23

【中文标题】三.ColladaLoader 不是构造函数

【英文标题】：THREE.ColladaLoader is not a constructor

【发布时间】：2018-08-29 00:08:16

【问题描述】：

我正在使用 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();

提前感谢。

【参考方案1】：

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

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

编辑：

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

【讨论】：

我也试过这个。为此，我们必须在 angular-cli.json 的 scripts 属性中添加这个 JS，我就是这样做的。但没有运气。

你的链接好像坏了

@shakaran 它出现在the entire @types/three definition has been deprecated 是因为他们声称three.js 提供了自己的类型文件（大部分情况下它确实如此）。 colladaLoader.d.ts 的丢失是此弃用的附带损害。但是，您始终可以定义类型文件的哪个版本。我将编辑我的答案以反映最新的工作版本。

谢谢@TheJim01