Angular5.2.0+Three.js0.91.0加载Collada文件报错：THREE.ColladaLoader is not a constructor

这个问题我之前帮人排查过，核心原因很明确：Three.js从0.80+版本开始，就把ColladaLoader这类非核心加载器移出了核心库，放到examples目录下作为示例工具存在，你用的0.91.0版本正好处于这个变更阶段，所以直接从three核心包导入是找不到ColladaLoader构造函数的。

下面给你两种可行的解决方案，按推荐程度排序：

方案一：ES模块方式导入ColladaLoader（推荐） #

这是Angular项目中最规范的做法，符合模块化开发的思路：

1. 调整导入语句
   保留核心Three.js的导入，新增ColladaLoader的单独导入：

   import { Component, OnInit, ViewChild } from '@angular/core';
   import * as THREE from 'three';
   // 从examples目录导入ColladaLoader
   import { ColladaLoader } from 'three/examples/js/loaders/ColladaLoader';
   

2. 修改实例化代码
   原来依赖THREE对象的写法要改成直接使用导入的类：

   // 替换旧的 new THREE.ColladaLoader()
   const colladaLoader = new ColladaLoader();
   

3. 处理TypeScript类型报错（可选但建议）
   如果TypeScript提示找不到模块类型，你可以在项目的src/typings.d.ts文件中添加以下声明（没有这个文件就新建一个）：

   declare module 'three/examples/js/loaders/ColladaLoader' {
     import * as THREE from 'three';
     export class ColladaLoader extends THREE.Loader {
       constructor(manager?: THREE.LoadingManager);
       load(
         url: string,
         onLoad: (collada: { scene: THREE.Scene }) => void,
         onProgress?: (event: ProgressEvent) => void,
         onError?: (event: ErrorEvent) => void
       ): void;
     }
   }
   

方案二：CDN脚本引入（快速调试用） #

如果只是临时调试不想折腾模块配置，可以用这种快速方案：

1. 在项目根目录的index.html中添加ColladaLoader的CDN脚本（要放在Three.js核心脚本之后）：

   <script src="https://cdn.jsdelivr.net/npm/three@0.91.0/examples/js/loaders/ColladaLoader.js"></script>
   

2. 在组件中声明全局变量，避免TypeScript报错：

   // 组件顶部添加声明
   declare const ColladaLoader: any;
   
   // 实例化时直接使用
   const colladaLoader = new ColladaLoader();
   

额外注意事项 #

• 执行npm list three确认你的Three.js版本确实是0.91.0，避免版本不匹配导致的其他问题；
• 方案一中，Angular的构建配置不需要额外调整，只要TypeScript能正确解析模块路径即可。

内容的提问来源于stack exchange，提问作者Rahul Munjal