How to use ThreeJS Collada loader with TypeScript / Angular CLI?

Question

I have three installed in:

node_modules/three

I have Collada loader installed in:

node_modules/three-collada-loader

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

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.

This is the output of ng serve command.

I instantiated the loader like this:

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

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?

EDIT:

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

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

Answer 1

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

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.

First of install threejs over npm like you did.

npm install three --save

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

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"
  ],

  ...

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 will load Threejs and its modules and add them into the global namespace.

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 {

...

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

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