问题
Is it possible to use the OrthographicTrackballControls
of three.js
with Angular 4? I tried with:
npm install --save three-orthographic-trackball-controls
And in my component:
import { OrthographicTrackballControls } from 'three-orthographic-trackball-controls';
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.
回答1:
See working example of using Angular + Three.js including OrbitControls and ColladaLoader: https://github.com/makimenko/angular-three-examples
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:
Firstly, include dependencies:
three
@types/three
Secondly, import in component:
import * as THREE from 'three';
import "./js/EnableThreeExamples";
import "three/examples/js/controls/OrbitControls";
import "three/examples/js/loaders/ColladaLoader";
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);
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).
来源:https://stackoverflow.com/questions/46180187/three-js-orthographictrackballcontrols-with-angular