如何在 TypeScript / Angular CLI 中使用 ThreeJS Collada 加载器？答案

【问题标题】：How to use ThreeJS Collada loader with TypeScript / Angular CLI?如何在 TypeScript / Angular CLI 中使用 ThreeJS Collada 加载器？
【发布时间】：2017-07-15 00:50:38
【问题描述】：

我已经安装了三个：

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);

【问题讨论】：

标签： node.js angular typescript three.js typescript-typings

【解决方案1】：

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

但是，我使用以下解决方法，它允许我使用位于 threejs 的示例文件夹中的 angular2、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 的示例模块，并完全支持打字稿。

【讨论】：