javascript - 如何在 typescript 中导入 three.js GLTFExporter？

Question

我正在尝试在 three.js typescript 项目中使用 GLTFExporter。我正在使用 https://github.com/pinqy520/three-typescript-starter 的示例启动器并且仅将这些行添加到 render 函数:

console.log(`type of exporter = ${typeof(THREE.GLTFExporter)}`)
let exporter = new THREE.GLTFExporter()
exporter.parse(scene, (gltf) => {console.log("Parsed scene!"); }, {});

但是当我执行 npm start 以在浏览器中运行它时，THREE.GLTFExporter 是未定义的，因此它“不是构造函数”(当然)。我怀疑这是因为 typescript 类型 GLTFExporter 是在 three-gltfexporter.d.ts 中导出的，但实际类实际上并未从 node_modules 中的源代码中导出/three/examples/js/exports/GLTFExporter.js(那里没有 export 关键字)。但是我对 typescript 还是很陌生，所以可能是我不了解某些东西。但是 three.js 的所有“常规”部分都可以正常导入，所以我怀疑 GLTFExporter 仅在 examples/ 中定义。

Answer 1

看起来您需要将 THREE 放在全局范围内，然后导入 GLTFExporter，因为 GLTFExporter 文件希望在全局范围内找到 THREE，以便添加到它:

(<any>window).THREE = THREE;
import "three/examples/js/exporters/GLTFExporter";

如果 @types/three 有一个单独的声明文件，为每个可选扩展(例如 GLTFExporter)增加 three 的模块会更好> 而不是无条件地声明所有可选扩展，这样 TypeScript 就可以在编译时警告你这个问题。考虑在 DefinitelyTyped 上提交错误.