0

私は現在 aframe.io を試しており、VR カーソルを使用してボタンをクリックし、VR エクスペリエンスを終了しています。

私がしたいのは、ボックスとボール紙のカーソル クリック ディレクティブでカーソル クリック イベントがトリガーされたときです。これは、vr-video-control ディレクティブに移動して、シーンで exitVR() メソッドを実行できるようにします。DOM の直接操作は「リンク」で行う必要がありますが、公開されているメソッドは「コントローラー」で宣言する必要があります。では、「コントローラー」のメソッドで「リンク」の $element 属性にどのようにアクセスしますか または、これよりも優れたアプローチはありますか？

現在、vr-video-control ディレクティブにリンクされたシーン要素にアクセスしてメソッドをトリガーすることはできません。

私のHTMLは次のようになります：

<a-scene vr-video-control>
      <a-assets>
        <video id="video" src="video/video4.mp4" autoplay loop crossorigin="anonymous"></video>
      </a-assets>

      <a-videosphere src="#video" rotation="0 180 0">
          	
        <a-box id="videoLeftButton" cardboard-cursor-click cardboard-cursor-action="back" color="white" height="2" width="5" position="-7 0 10" rotation="0 -225 0"></a-box>
        <a-box id="videoRightButton" cardboard-cursor-click cardboard-cursor-action="forward" color="white" height="2" width="5" position="7 0 10" rotation="0 -135 0"></a-box>

      </a-videosphere>
</a-scene>

cardboard-cursor-click は、次のようなディレクティブの 1 つです。

 function CardboardCursorClick() {

  return {
    restrict: 'A',
    require: '^^vrVideoControl',
    scope: { 
      cardboardCursorAction: '@'
    },
    link: (scope, element, attrs, videoControl) => {
      element.on('cursor-click', () => {
        console.log("Cursor click " + scope.cardboardCursorAction);
        videoControl.exitVR();
      });
    }
  };
}

export default {
  name: 'cardboardCursorClick',
  fn: CardboardCursorClick
};

親ディレクティブ vr-video-control に依存しています:

function VRVideoControl() {

  return {
    restrict: 'AE',
    scope: { item: '&' },
    controller: ['$scope', function($scope) {
      this.exitVR = function(cursorAction) {
        //Trigger exitVR() on <a-scene>
      }
    }]
  };
}

export default {
  name: 'vrVideoControl',
  fn: VRVideoControl
};

4

1 に答える 1

0

ディレクティブでスコープを使用することで、リンク メソッド内で DOM 操作を維持しながら、メソッドを他のコントローラーに公開できることに気付きました。私はまだAngularに慣れていないので、これが最善のアプローチであるかどうか確信が持てませんか?

return {
    restrict: 'A',
    controller: ['$scope', function($scope) {
      this.exitVR = function(cursorAction) {
        $scope.exitVR(cursorAction);
      };
    }],
    link: (scope, element, attrs) => {
      scope.exitVR = function(cursorAction) {
        var rawElement = angular.element(element)[0]
        rawElement.exitVR();
      };
    }
  };

于 2016-07-04T13:10:46.583 に答える