Angular+TypeScript中Three.js OBJ Loader创建失败，实例为undefined求助

我之前在Angular项目里用Three.js加载OBJ模型时也踩过这个坑！你的代码问题出在对three-obj-loader这个包的用法理解错了，下面给你拆解原因和正确的实现方式：

为什么实例化后是undefined？ #

three-obj-loader并不是一个独立的构造函数类，它的核心作用是把Three.js官方的OBJLoader扩展到全局的THREE命名空间上，而不是返回一个可以直接new的构造函数。你用new THREEObjLoader(THREE)的方式调用，本质上是在尝试实例化一个不存在的类，所以自然会得到undefined。

正确的使用步骤 #

方式一：使用three-obj-loader扩展Three.js #

1. 确保已经安装了依赖：

npm install three three-obj-loader --save

2. 在你的Angular组件中正确导入并扩展：

import * as THREE from 'three';
import * as THREEObjLoader from 'three-obj-loader';

// 关键一步：调用工具把OBJLoader挂载到THREE上
THREEObjLoader(THREE);

// 现在可以直接通过THREE.OBJLoader实例化了
const objLoader = new THREE.OBJLoader();

方式二：直接使用Three.js内置的OBJLoader（推荐） #

如果你的Three.js版本是r125及以上，其实官方已经把OBJLoader集成到了addons目录里，不需要额外安装three-obj-loader包，直接导入即可：

import * as THREE from 'three';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';

// 直接实例化OBJLoader
const objLoader = new OBJLoader();

这种方式更简洁，也能避免第三方包带来的兼容性问题，建议优先用这种方法。

内容的提问来源于stack exchange，提问作者Ramakrishna Hosmani