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

希望这可以帮助你开始