node.js - 如何将 ThreeJS Collada 加载器与 TypeScript/Angular CLI 一起使用？

Question

我安装了三个:

node_modules/three

我在以下位置安装了 Collada 加载器:

node_modules/three-collada-loader

打字似乎已经包含了 Collada 加载器的打字:

node_modules/@types/three/three-colladaLoader.d.ts

我像这样导入三个并且它有效:

import * as THREE from 'three';

问题是，当我尝试使用 Collada 加载程序时，我得到:

WARNING in ./src/app/renderer.directive.ts
23:26-45 "export 'ColladaLoader' (imported as 'THREE') was not found in 'three'
webpack: Compiled with warnings.

这是 ng serve 命令的输出。

我像这样实例化了加载器:

private loader: THREE.ColladaLoader = new THREE.ColladaLoader();

我应该如何使用/导入加载程序，因为它在类型中位于相同的三个命名空间中，但它是一个不同的 npm 模块？

编辑:

作为解决方法，我可以使用加载程序而无需像这样输入:

var loader = require('three-collada-loader')(THREE);

Answer 1

有同样的问题，不幸的是我没有保留 Typescript 类型支持的解决方案。

然而，我使用以下解决方法，它允许我使用 angular2、threejs 和位于 threejs 示例文件夹中的 threejs 帮助程序模块进行开发。

首先像您一样通过 npm 安装 threejs。

npm install three --save

您不需要安装 three-collada-loader，因为它是作为 threejs 库示例文件夹的一部分下载的。

然后我将我需要的脚本添加到脚本声明中的 angular-cli.json 文件中。

...

 "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "assets/styles/main.scss",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/three/build/three.js",
    "../node_modules/three/examples/js/loaders/STLLoader.js",
    "../node_modules/three/examples/js/controls/TrackballControls.js"
  ],

  ...

我可以直接从 npm 模块文件夹中引用这里的 threejs。确保首先导入 threejs 主库，然后再导入附加模块。在我的例子中，我添加了 STLLoader.js 和 TrackballControlls.js。您的加载程序应位于:

../node_modules/three/examples/js/loaders/ColladaLoader.js

Webpack 将加载 Threejs 及其模块并将它们添加到全局命名空间中。

为了使您的 IDE 和 Typescript 编译器静音，您可以在您使用 threejs 的文件中将 THREE 声明为 any。

import { EventEmitter } from '@angular/core';
declare var THREE : any;

export class RenderService {

...

您可能需要使用“ng serve”重启您的开发服务器，以使 webpack 包含您添加的脚本。

我希望这会有所帮助，并且希望有人找到一种方法来使用 Threejs 的示例模块并提供完整的 typescript 支持。