javascript - AngularJS 绑定(bind)到 WebGL/Canvas

Question

我对 AngularJS 很陌生。我想知道当您的 View 使用 HTML5 Canvas 或 WebGL 时是否可以使用它？如果是这样，有什么好的教程可以教你如何做到这一点吗？

我见过一些游戏声称它们是使用 AngularJS 制作的，但我不知道这是否仅限于它们的菜单、排行榜和其他仪表板元素。

(我不一定会在游戏中使用 MVC，但显然您不仅可以使用 Canvas 和 WebGL 做游戏。)

谢谢!

Answer 1

编辑: 我使用 Three.js 制作了一个完整的 WebGL 指令示例，并通过绑定(bind)来调整对象大小或更改其 Material 类型。此外，窗口大小调整和鼠标移动等事件:

• 来源:https://github.com/winkerVSbecks/angularWebglDirective
• 演示:http://winkervsbecks.github.io/angularWebglDirective/

<小时/>

是的，这很有可能。除了菜单、排行榜等之外，您还可以将您的 Canvas 包装到指令中。

1. Controller 将设置游戏状态
2. 将此状态、从服务器加载的数据以及您可能拥有的任何其他数据传递给指令
3. 最后在指令链接函数中初始化 Canvas

我制作了这个小应用程序来帮助我完成一个学校项目:http://callmethey.herokuapp.com/polygons 。这是我使用的指令( Canvas 部分使用 Three.js):

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