Angular.io（SystemJS）三是沒有定義的ReferenceError：三是沒有定義

Question

我開始在angular.io使用three.js所，並有此錯誤：

(index):18 Error: (SystemJS) THREE is not defined 
ReferenceError: THREE is not defined 
    at Object.eval (http://localhost:3000/node_modules/three/examples/js/controls/OrbitControls.js:16:1) 
    at eval (http://localhost:3000/node_modules/three/examples/js/controls/OrbitControls.js:1044:4) 
    at eval (http://localhost:3000/node_modules/three/examples/js/controls/OrbitControls.js:1045:3) 
    at eval (<anonymous>) 
Evaluating http://localhost:3000/node_modules/three/examples/js/controls/OrbitControls.js 
Evaluating http://localhost:3000/app/three-basis/three-camera-orbit-control.component.js 

我進口和組件：

import {Component} from '@angular/core'; 
import {CameraProvider} from './camera-provider.service'; 
import 'threejs/controls/OrbitControls'; 
import {OrbitControls} from 'three'; 

@Component({selector: 'three-camera-orbit-control', template: ''}) 
export class ThreeCameraOrbitControlComponent { 

    constructor(private cameraProvider: CameraProvider) { 
     let camera = this.cameraProvider.getCamera(); 
     let controls = new OrbitControls(camera); 
     controls.addEventListener('change',() => {}); 
    } 

} 

如果我在我的node_modules/three的OrbitControls.js中添加這個var THREE = require("three");，錯誤gones和一切正常。我不擅長js，可以請一些人幫助我，如何做到這一點？謝謝。

Answer 1

見採用了棱角分明+ three.js所包括OrbitControls和ColladaLoader的工作例如：https://github.com/makimenko/angular-three-examples

目前，three.js所例子並不納入一個模塊，並利用它們在角打字稿代碼可能是有點棘手。之一的溶液/解決方法可以是：

首先，包括依賴關係：

three 
@types/three 

其次，進口在組分：

import * as THREE from 'three'; 
import "./js/EnableThreeExamples"; 
import "three/examples/js/controls/OrbitControls"; 
import "three/examples/js/loaders/ColladaLoader"; 

然後，在代碼中使用它：

this.controls = new THREE.OrbitControls(this.camera); 
this.controls.rotateSpeed = 1.0; 
this.controls.zoomSpeed = 1.2; 
this.controls.addEventListener('change', this.render); 

希望這可以幫助你開始