three.js OrthographicTrackballControls with Angular

戏子无情 提交于 2019-12-12 04:42:51

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!