Injecter des modèles ThreeJs sur une application JS Angular

Question

C'est une question assez générale. Je construis une webapp avec Angular Js (v1.5/1.6) et je souhaite ajouter quelques petits modèles animés 3D utilisant Three Js.

J'ai déjà essayé de mettre en place de petites choses mais Angular refuse toutes les méthodes de Js ... Donc si quelqu'un d'entre vous sait ou a déjà vu un tutoriel, des livres, un article dans ce domaine, n'hésitez pas à partager.

Merci à tous.

Answer 1

Il existe de nombreux exemples d'intégration de ThreeJS et d'Angular 1/2. D'après mon expérience, la meilleure façon d'y arriver est de créer une directive qui va initialiser ThreeJS (créer une caméra, une scène, etc ...) et comme toute autre directive communiquera avec le contrôleur, lancer la portée (en utilisant $ watch).

Par exemple:

angular.module('nxGeometry', []).directive('nxGeometry', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
       var camera, scene, geometry, renderer, material, object, container; 
       function init() { 
        scene = new THREE.Scene(); 
        // continue init threejs stuff 
       } 
     } 
    } 
}); 

Vous pouvez voir un exemple complet ici (pas de moi): https://jsfiddle.net/awolf2904/y0dvo582/