AngularJS绑定到WebGL/Canvas

Question

我对AngularJS非常环保.我想知道当你的视图使用HTML5 Canvas或WebGL时是否可以使用它？如果是这样,有没有关于你如何去做这个的好教程？

我看过几个游戏夸耀他们是使用AngularJS制作的,但我不知道这是否仅限于他们的菜单,排行榜和其他仪表板元素.

(我不一定会在游戏中使用MVC,但显然你可以做的不仅仅是使用Canvas和WebGL的游戏.)

谢谢!

Answer 1

编辑:我做了一个WebGL指令的完整示例,使用带有绑定的three.js来调整对象的大小或更改它的材质类型.此外,窗口大小调整和鼠标移动等事件:

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

是的,这是非常可能的.除了菜单,排行榜等之外,您还可以将自己canvas包含在指令中.

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

我制作了这个小应用程序来帮助我完成学校项目:http://callmethey.herokuapp.com/polygons.这是我使用的指令(画布部分有三个.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
  };
});

Answer 2

另一种技术是将WebGL场景封装为工厂,并通过返回的工厂API向模块公开对3D场景的访问.这种方法的一个优点是您可以将场景注入任何其他控制器或指令.Angular中的工厂是单身人士,因此只有1个3D场景的副本浮动.

这种封装方法还允许您将3D场景逻辑与应用程序逻辑隔离开来.

只要通过公开的Factory API启动工厂,您就应该能够使用MOST预先存在的WebGL代码.为此,将所有3D场景代码复制到工厂中,然后从控制器调用注入的3D工厂的init函数来初始化渲染.

• 3D tic-tac-toe演示
• Github回购

我在canvas元素上使用了指令来定义场景交互.点击,选取框,按键,事件.