Wie verwende ich ThreeJS Collada Loader mit TypeScript/Angular CLI?

Question

ich drei installiert in:

node_modules/three 

I Collada loader in installiert haben:

node_modules/three-collada-loader 

Die Typisierungen scheinen sind bereits Typisierungen auch für den Collada Lader:

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

I importieren DREI wie folgt und es funktioniert:

import * as THREE from 'three'; 

Das Problem ist, dass, wenn ich versuche, Collada loader ich zu verwenden:

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

Dies ist die Ausgabe von ng serve Befehl.

instanziiert ich den Lader wie folgt aus:

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

Wie soll ich/verwenden importieren den Lader, wie es in den gleichen drei Namespace in den Typisierungen, aber es ist ein anderes npm-Modul?

EDIT:

Als Abhilfe, die ich den Loader ohne Typisierungen wie diese verwenden:

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

Answer 1

das gleiche Problem und ich habe leider keine Lösung, die Typoskript Typ Unterstützung erhält.

Ich benutze jedoch die folgende Problemumgehung, die es mir erlaubt, mit angular2, threejs und den threejs-Hilfsmodulen zu entwickeln, die sich im Beispielordner von threejs befinden.

Zuerst installieren dreijs über npm wie Sie getan haben.

npm install three --save 

Sie nicht die Drei-collada-Loader installiert werden müssen, weil sie als Teil der Beispiel-Ordner der threejs Bibliothek heruntergeladen.

Dann füge ich die Skripte, die ich brauche, in die Skript-Deklaration an die Datei angular-cli.json an.

... 

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

    ... 

Ich kann threejs hier direkt aus dem Npm-Modul-Ordner verweisen. Stellen Sie sicher, dass Sie zuerst die threejs-Hauptbibliothek und dann Addon-Module importieren. In meinem Fall habe ich STLLoader.js und TrackballControlls.js hinzugefügt.

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

Webpack lädt Threejs und seine Module und fügen Sie sie in den globalen Namensraum: Ihr Loader sollte befinden.

Um Ihre IDE und den Typescript-Compiler zum Schweigen zu bringen, können Sie in der Datei, in der Sie threejs verwenden, THREE als deklarieren.

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

export class RenderService { 

... 

Sie haben Ihre Dev-Server neu zu starten, mit „ng dienen“, webpack zu ermöglichen, Ihre zusätzliche Skripte enthalten.

Ich hoffe, dass dies hilft, und dass jemand einen Weg findet, die Beispielmodule von Threejs mit voller Typoskript-Unterstützung zu verwenden.