AngularJS Liaison à WebGL / Toile

EDIT:
J'ai fait un exemple complet d'un WebGL directive à l'aide de three.js avec fixations pour redimensionner l'objet ou de modifier le type de matériau. En outre, les événements tels que le redimensionnement de la fenêtre et de la souris s'installe:

• source: https://github.com/winkerVSbecks/angularWebglDirective
• démo: http://winkervsbecks.github.io/angularWebglDirective/

---

Oui c'est très possible. Au-delà de l'menus, les classements, etc. vous pouvez envelopper votre canvas dans une directive trop.

1. Le contrôleur d'installation de l'état de la partie
2. Passer cet état, chargé des données à partir du serveur et toutes les autres données que vous pourriez avoir de la directive
3. Enfin, vous initialisation de la toile dans les directives de la fonction de lien

J'ai fait ce petit soft pour m'aider avec un projet d'école: http://callmethey.herokuapp.com/polygons. C'est la directive-je utiliser (avec three.js pour la toile de la partie):

app.directive('polygon', function() {
return {
restrict: 'A',
scope: { 
vertices: '=polygon',  
color: '=color'
},
link: function(scope, element, attrs)
{
var camera, scene, renderer;
var polygon;
var targetRotation = 0;
var targetYRotation = 0, targetXRotation = 0;
var targetYRotationOnMouseDown = 0, targetXRotationOnMouseDown = 0;
var mouseX = 0, mouseY = 0;
var mouseXOnMouseDown = 0, mouseYOnMouseDown = 0;
var width = $(element).width();
var height = 200;
var widthHalfX = width/2;
var widthHalfY = height/2;
init();
function init() {
//Setup scene
camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 300;
scene = new THREE.Scene();
//Build Polygon
var geometry =  new THREE.Geometry();
angular.forEach(scope.vertices, function (v) {
geometry.vertices.push( new THREE.Vector3( v.x, v.y, v.z ) );
});
geometry.faces.push( new THREE.Face3(0, 1, 2 ));
THREE.GeometryUtils.center( geometry );
//Push polygon to scene
var material = new THREE.MeshBasicMaterial( { color: cols[scope.color], side: THREE.DoubleSide } );
polygon = new THREE.Mesh( geometry, material );
scene.add(polygon);
renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
}
//..... rest of the code truncated for readability
};
});