AngularJS绑定到的WebGL /画布 [英] AngularJS Binding to WebGL / Canvas

问题描述

我很绿色AngularJS。我不知道是否有可能使用它时，你的看法是使用HTML5 Canvas或WebGL的？如果是这样，是否有你如何去这方面有任何好的教程？

I'm very green to AngularJS. I'm wondering if it's possible to use it when your view is using HTML5 Canvas or WebGL? If so, are there any good tutorials on how you go about this?

我见过的几场比赛夸他们正在使用AngularJS做，但我不知道这是否是限制在他们的菜单，排行榜等仪表盘元素。

I've seen several games boast they are made using AngularJS, but I don't know if that is limited to their menus, leaderboards, and other dashboard elements.

（我不一定会在游戏中使用MVC，但明显可以做的不仅仅是用帆布和WebGL游戏等等。）

(I wouldn't necessarily be using MVC in a game, but obviously you can do more than just games with Canvas and WebGL.)

谢谢！

推荐答案

编辑：
我做了使用three.js所绑定的调整对象的大小或改变它的材料类型的WebGL指令的完整范例。另外，事件，如窗口大小和鼠标移动：

I made a full example of a WebGL directive using three.js with bindings to resize the object or change it's material type. Also, events such as window resizing and mouse moved:

• 来源：<一个href=\"https://github.com/winkerVSbecks/angularWebglDirective\">https://github.com/winkerVSbecks/angularWebglDirective


• 演示：<一href=\"http://winkervsbecks.github.io/angularWebglDirective/\">http://winkervsbecks.github.io/angularWebglDirective/

是的，这是非常可能的。除了菜单，排行榜等，你可以用你的画布成指令了。

Yes this is very much possible. Beyond the menus, leaderboards, etc. you can wrap your canvas into a directive too.

1. 控制器将设置游戏状态


2. 从服务器传递这种状态下，加载的数据和任何其他数据，你可能需要的指令


3. 最后，你在初始化指令链接功能画布

我做了这个小应用程序，以帮助我与学校的项目： http://callmethey.herokuapp.com/polygons 。这是我使用（与three.js所画布部分）指令：

I made this little app to help me with a school project: http://callmethey.herokuapp.com/polygons. This is the directive I use (with three.js for the canvas part):

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

这篇关于AngularJS绑定到的WebGL /画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！