如何在TypeScript/Angular CLI中使用ThreeJS Collada加载器? [英] How to use ThreeJS Collada loader with TypeScript / Angular CLI?

问题描述

我在其中安装了三个:

node_modules/three

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

I have Collada loader installed in:

node_modules/three-collada-loader

键入似乎已经包括Collada加载程序的键入:

The typings seem to already include typings also for the Collada loader:

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

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

I import THREE like this and it works:

import * as THREE from 'three';

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

The problem is that when I'm trying to use Collada loader I get:

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 命令的输出.

我这样实例化了加载程序:

I instantiated the loader like this:

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

我应该如何使用/导入加载程序，因为它与键入中相同的三个名称空间相同，但是它是一个不同的npm模块?

How should I use/import the loader as it's in the same THREE namespace in the typings, but it's a different npm module?

作为解决方法，我可以使用装载程序而无需键入以下内容:

As workaround I can use the loader without typings like this:

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

推荐答案

存在相同的问题，很遗憾，我没有保留Typescript类型支持的解决方案.

have the same problem and unfortunately I don't have a solution which preserves Typescript type support.

但是，我使用以下变通办法，使我能够使用位于threejs示例文件夹中的angular2，Threejs和threejs帮助器模块进行开发.

I however use the following workaround which allows me to develop with angular2, threejs and the threejs helper modules which are located in the example folder of threejs.

首先像您一样在npm上安装threejs.

First of install threejs over npm like you did.

npm install three --save

您不需要安装three-collada-loader，因为它是在threejs库的example文件夹中下载的.

You dont need to install the three-collada-loader because its downloaded as part of the example folder of the threejs library.

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

Then I add the scripts I need to the angular-cli.json file in the script declaration.

...

 "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 module文件夹中引用threejs.确保首先导入threejs主库，然后再导入插件模块.就我而言，我添加了STLLoader.js和TrackballControlls.js.您的加载程序应位于:

I can reference threejs here directly from the npm module folder. Be sure that you import the threejs main library at first and then addon modules. In my case I added STLLoader.js and TrackballControlls.js. Your Loader should be located at:

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

Webpack将加载Threejs及其模块并将其添加到全局名称空间中.

Webpack will load Threejs and its modules and add them into the global namespace.

为了使您的IDE和Typescript编译器静音，您可以在您使用threejs的文件中将三声明为任意值.

In order to silence your IDE and the Typescript compiler you can declare THREE as any in the file in which you use threejs.

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

export class RenderService {

...

您可能必须使用"ng serve"重新启动开发服务器，才能使webpack包含添加的脚本.

You may have to restart your dev server with "ng serve", to enable webpack to include your added scripts.

我希望这会有所帮助，并且希望有人找到一种在完全打字稿支持下使用Threejs示例模块的方法.

I hope this helps, and that somebody finds a way to use the example modules of Threejs with full typescript support.

这篇关于如何在TypeScript/Angular CLI中使用ThreeJS Collada加载器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！