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");，则错误消失并且一切正常。我还不太擅长js，请有人帮助我，如何正确地做到这一点？谢谢。

Answer 1

查看使用 Angular + Three.js 的工作示例，包括 OrbitControls 和 ColladaLoader：https://github.com/makimenko/angular-three-examples

目前，Three.js 示例不包含在模块中，在 Angular 打字稿代码中使用它们可能有点棘手。解决方案/解决方法之一可能是：

首先，包含依赖：

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

希望这可以帮助您开始