AngularJS Collegamento a WebGL/Canvas

Question

I'm very green to AngularJS. Mi chiedo se è possibile utilizzarlo quando la tua vista utilizza HTML5 Canvas o WebGL? Se è così, ci sono dei buoni tutorial su come si va su questo?

Ho visto molti giochi vantarsi di essere realizzati con AngularJS, ma non so se questo è limitato ai loro menu, classifiche e altri elementi del dashboard.

(se non necessariamente utilizzerò MVC in un gioco, ma ovviamente si può fare di più che giochi con Canvas e WebGL.)

Grazie!

Answer 1

MODIFICA: Ho creato un esempio completo di una direttiva WebGL utilizzando three.js con associazioni per ridimensionare l'oggetto o modificarne il tipo di materiale. Inoltre, eventi come il ridimensionamento della finestra e il mouse spostati:

• fonte: https://github.com/winkerVSbecks/angularWebglDirective
• demo: http://winkervsbecks.github.io/angularWebglDirective/

---

Sì questo è molto possibile. Oltre i menu, le classifiche, ecc. Puoi anche inserire il tuo canvas in una direttiva.

1. Il controller configura lo stato del gioco
2. Passo questo stato, i dati caricati da server e qualsiasi altro dato che potrebbe avere alla direttiva
3. Infine init la tela nella funzione direttive collegamento

Ho realizzato questa piccola app per aiutarmi con un progetto scolastico: http://callmethey.herokuapp.com/polygons. Questa è la direttiva che uso (con Three.js per la parte tela):

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

Answer 2

Un'altra tecnica è quella di incapsulare la scena WebGL come fabbrica ed esporre l'accesso alla scena 3D al modulo tramite l'API fabbrica restituita . Un vantaggio di questo approccio è che è possibile iniettare la scena in qualsiasi altro Controller o Direttiva. Le fabbriche in Angular sono singletons quindi c'è solo una copia della scena 3D che gira intorno.

Questo metodo di incapsulamento consente inoltre di isolare sia la logica di scena 3D dalla logica dell'applicazione.

Si dovrebbe essere in grado di utilizzare il codice WebGL MOST preesistente finché si inizia la fabbrica tramite l'API di fabbrica esposta. Per fare questo, copia tutto il tuo codice scena 3D in fabbrica e poi chiama una funzione init della fabbrica 3D iniettata dal tuo controller per inizializzare il rendering.

• 3D tic-tac-toe Demo
• Github repo

Ho usato direttive sull'elemento tela per definire l'interazione scena. Click, tendone, pressione tasto, eventi.