Подтвердить что ты не робот

AngularJS Связывание с WebGL/Canvas

Я очень зелёный для AngularJS. Мне интересно, можно ли использовать его, когда ваше представление использует HTML5 Canvas или WebGL? Если да, есть ли хорошие учебники по тому, как вы это делаете?

Я видел, как несколько игр похвастались тем, что они сделаны с помощью AngularJS, но я не знаю, ограничено ли это их меню, списками лидеров и другими элементами панели.

(Я не обязательно использовал бы MVC в игре, но, очевидно, вы можете делать больше, чем просто игры с Canvas и WebGL.)

Спасибо!

Ответ 1

EDIT: Я сделал полный пример директивы WebGL, используя three.js со связями, чтобы изменить размер объекта или изменить его тип материала. Кроме того, события, такие как изменение размера окна и перемещение мыши:

источник: https://github.com/winkerVSbecks/angularWebglDirective
demo: http://winkervsbecks.github.io/angularWebglDirective/

Да, это очень возможно. Помимо меню, таблиц лидеров и т.д. Вы также можете поместить свой canvas в директиву.

Контроллер настроит состояние игры
Передайте это состояние, загруженные данные с сервера и любые другие данные, которые могут иметься в директиве
Наконец, вы запустите холст в функции ссылок директив

Я сделал это маленькое приложение, чтобы помочь мне в школьном проекте: 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
  };
});

Ответ 2

Другой метод заключается в том, чтобы инкапсулировать сцену WebGL как factory и предоставить доступ к 3D-сцене модулю через возвращаемый API factory. Одним из преимуществ этого подхода является то, что вы можете вставить сцену в любой другой контроллер или директиву. Фабрики в Angular являются одиночными, поэтому есть только одна копия 3D-сцены, плавающей вокруг.

Этот метод инкапсуляции также позволяет изолировать как трехмерную сценарную логику от вашей прикладной логики.

Вы должны иметь возможность использовать ранее существовавший код WebGL, если вы запустите factory через открытый API factory. Для этого скопируйте весь свой 3D-код сцены в factory, а затем вызовите функцию инициализации введенного 3D factory с вашего контроллера для инициализации рендеринга.

Я использовал директивы для элемента canvas для определения взаимодействия сцены. Нажмите, выделите, нажмите, события.