three.js OrthographicTrackballControls avec Angular

Question

Est-il possible d'utiliser le OrthographicTrackballControls de three.js avec Angular 4? J'ai essayé avec:

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

Et dans mon élément:

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

Je n'ai pas réussi et aucune idée sur la façon de le faire. J'ai trouvé des solutions pour OrbitControls, mais en utilisant un autre paquet npm et RequireJS. Toute idée pour résoudre ce problème sera utile. Merci d'avance.

Answer 1

Voir travail exemple d'utilisation angulaire + Three.js y compris OrbitControls et ColladaLoader: https://github.com/makimenko/angular-three-examples

Actuellement, Three.js exemples ne sont pas inclus dans un module et de les utiliser dans le code angulaire dactylographiée pourrait être un peu délicat. Une solution de/solution pourrait être:

Tout d'abord, les dépendances comprennent:

three 
@types/three 

En second lieu, l'importation dans le composant:

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

Remplacer OrbitControls à OrthographicTrackballControls dans scene.component.ts. Très probablement, les caractéristiques de la caméra doivent également être ajustées.

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

Espérons que cela pourrait vous aider à démarrer. En outre, il montre une solution alternative (accès direct aux exemples originaux du module three.js sans installation de paquets NPM supplémentaires).