Inject ThreeJs models on an Angular JS App

Question

It a quite a general question. I'm building a webapp with Angular Js (v1.5/1.6) and I wish to add some little 3D animated models using Three Js.

I already tried to set up little things but Angular refuse all Three Js methods... So if anyone of you know or already saw any tutorial, books, article in this area please do not hesitate to share.

Thanks everyone.

Answer 1

There are quite a lot of examples on how to integrate ThreeJS and Angular 1/2.

In my experience the best way to achieve that is by creating a directive that will initialize ThreeJS (create camera, scene, etc...) and like any other directive will communicate with the controller throw the scope (using $watch).

For example:

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 
              }
        }
    }
});

You can see a complete example here (not mine): https://jsfiddle.net/awolf2904/y0dvo582/