带Angular的three.js OrthographicTrackballControls

Question

是否可以在Angular 4中使用three.js的OrthographicTrackballControls？我尝试过：

npm install --save three-orthographic-trackball-controls 

在我的组件中：

import { OrthographicTrackballControls } from 'three-orthographic-trackball-controls';

我没有成功，也不知道如何做到这一点。我找到了OrbitControls的解决方案，但是使用了另一个npm包和RequireJS。任何解决这个问题的想法都会很有帮助。提前谢谢。

Answer 1

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

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

首先，包含依赖关系：

three
@types/three

其次，在组件中导入：

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

在scene.component.ts中将OrbitControls替换为OrthographicTrackballControls。最有可能的是相机的特性也应该调整。

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

希望这篇文章能帮助你入门。此外，它还展示了另一种解决方案(直接从three.js模块访问原始示例，而无需安装额外的NPM包)。