WebGL/Canvas에 대한 AngularJS

WebGL/Canvas에 대한 AngularJS

저는 AngularJS가 처음입니다.HTML5 Canvas 또는 WebGL을 사용할 때 사용할 수 있는지 궁금합니다.그렇다면 어떻게 진행하는지에 대한 좋은 튜토리얼이 있습니까?

AngularJS를 사용하여 만든 것이라고 자랑하는 게임을 여러 번 보았지만 메뉴, 리더보드 및 기타 대시보드 요소로 제한되는지는 모르겠습니다.

(저는 게임에서 MVC를 사용할 필요는 없지만, 분명히 Canvas와 WebGL로 단순한 게임 이상을 할 수 있습니다.)

감사합니다!

편집: 개체 크기를 조정하거나 개체의 재료 유형을 변경하기 위해 바인딩과 함께 3.js를 사용하는 WebGL 지시문의 전체 예시를 만들었습니다.또한 윈도우 크기 조정 및 마우스 이동과 같은 이벤트:

• 출처 : https://github.com/winkerVSbecks/angularWebglDirective
• 데모: http://winkervsbecks.github.io/angularWebglDirective/

---

네, 이것은 매우 가능합니다.메뉴판, 리더보드 등을 넘어서 포장할 수 있습니다.canvas지시문으로도 말입니다.

1. 컨트롤러가 게임 상태를 설정합니다.
2. 이 상태, 서버에서 로드된 데이터 및 기타 필요한 데이터를 지시문에 전달합니다.
3. 마지막으로 지시 링크 함수에서 캔버스를 입력합니다.

저는 학교 프로젝트를 도와주기 위해 이 작은 앱을 만들었습니다. http://callmethey.herokuapp.com/polygons이것이 제가 사용하는 지시문입니다(캔버스 부분에 대해 3.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
  };
});

또 다른 방법은 WebGL 장면을 팩토리로 캡슐화하고 반환된 팩토리 API를 통해 3D 장면에 대한 액세스를 모듈에 노출하는 것입니다.이 접근 방식의 한 가지 장점은 다른 컨트롤러나 지시에 장면을 주입할 수 있다는 것입니다.Angular에 있는 공장들은 싱글톤이기 때문에 3D 장면의 복사본이 1개만 떠다닙니다.

이 캡슐화 방법을 사용하면 응용프로그램 로직에서 3D 장면 로직을 모두 분리할 수도 있습니다.

노출된 Factory API를 통해 공장을 초기화하는 한 기존 WebGL 코드를 사용할 수 있어야 합니다.이렇게 하려면 모든 3D 장면 코드를 공장에 복사한 다음 컨트롤러에서 주입된 3D 공장의 init 기능을 호출하여 렌더링을 초기화합니다.

• 3D 틱택토 데모
• 깃허브 레포

캔버스 요소의 지시어를 사용하여 장면 상호작용을 정의했습니다.클릭, 표시, 키 누름, 이벤트.

언급URL : https://stackoverflow.com/questions/16054424/angularjs-binding-to-webgl-canvas