问题描述
是否可以在Angular 4中使用three.js的OrthographicTrackballControls?我尝试过:
Is it possible to use the OrthographicTrackballControls of three.js with Angular 4? I tried with:
npm install --save three-orthographic-trackball-controls
在我的组件中:
import { OrthographicTrackballControls } from 'three-orthographic-trackball-controls';
我没有成功，也不知道如何做到这一点.我找到了OrbitControls的解决方案，但是使用了另一个npm包和RequireJS.解决此问题的任何想法都会有所帮助.预先感谢.
I had no success and no idea on how to do this. I found solutions for OrbitControls, but using another npm package and RequireJS. Any ideas to solve this issue will be helpful. Thanks in advance.
推荐答案
查看使用Angular + Three.js(包括OrbitControls和ColladaLoader)的工作示例: https://github.com/makimenko/angular-three-examples
See working example of using Angular + Three.js including OrbitControls and ColladaLoader: https://github.com/makimenko/angular-three-examples
当前，Three.js示例未包含在模块中，并且在Angular打字稿代码中使用它们可能会有些棘手.解决方案/解决方法之一可能是:
Currently, Three.js examples are not included into a module and use them in Angular typescript code could be a little bit tricky. One of solution/workaround could be:
首先，包括依赖项:
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.很有可能还应该调整相机的特性.
Replace OrbitControls to OrthographicTrackballControls in scene.component.ts. Most probably Camera characteristics should be adjusted as well.
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软件包).
Hope this could help you to start. Also it shows an alternative solution (directly accessing original examples from three.js module without installation of additional NPM packages).
这篇关于three.js带有Angular的OrthographicTrackballControls的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！