0

マイクからの周波数データを使用して、A-Frame の GLTF モデルのスケールや位置を動的に変更しようとしています。これが私がこれまでに持っているものです：

<script>
  AFRAME.registerComponent('voicecontrol', {
    init: function () {
      console.log("voicecontrol called");

    },
    tick: function (time, timeDelta) {
      // get scene
      var sceneEl = this.el;  // Or this.el since we're in a component.
      // get model
      var mandalaEl = sceneEl.querySelector('#interactiveMandala');
      // get current frequency
      var currentFreq = freqAvg();
      var positionChange = ((currentFreq/16) + 1 );
      //console.log("position change factor " + positionChange);
      mandalaEl.setAttribute('animation', 'to', {x:positionChange, y:0, z:positionChange});
      console.log(mandalaEl.getAttribute('animation', 'to'));
    }
  });

</script>

と：

<a-scene embedded arjs voicecontrol>

...

<a-marker type='pattern' url='https://raw.githubusercontent.com/DaveyDangerpants/youarehere/master/images/pattern-marker.patt'>
<a-entity rotation="90 0 0">
  <a-entity position="0 0 0" scale=".1 .1 .1" animation="property: rotation; to: 0 0 360; loop: true; easing:linear; dur: 45000;">
    <a-entity id="interactiveMandala" gltf-model="#mandala" scale="0.15 0.15 0.15" position="0 0 0"
        animation="property: position; to:0 0 0; dur: 100;">
    </a-entity>
  </a-entity>
</a-entity>
</a-marker>

マイクのデータ ストリーミングを確認できます。コンソールは、アニメーション コンポーネントの「to」値を正しく設定していることを示しているようですが、モデルは動いていません。これは AR.JS の問題ですか? A-FrameやAR.jsで作ったことがないので、ちょっと戸惑います。ヘルプ！

4

1 に答える 1

0

まず、animationコンポーネントを使用しません。周波数が変わるたびに (実際にはレンダリングされる各フレームで)、アニメーションを新しい値に再起動するべきではありません。

頻度に応じて、軸の 1 つに沿ってモデルを移動します。範囲が 300 ～ 3000 Hz だとしましょう。モデルの頂点を 1 メートル移動したい場合は、次のようにします。

tick: function() {
  let pos = this.el.getAttribute("position")
  var currentFreq // however you get the frequency
  pos.x = currentFreq / 3000
  this.el.setAttribute("position", pos)
}

これで、各フレームで、周波数値に応じて位置が設定されます。

アニメーションを機能させるには、開始イベントを設定する必要があります

animation="......;startEvents: start"

そして、イベント this.el.emit("start") を発行します

しかし、私が言ったように、それは悪い考えだと思います。

于 2018-07-01T12:34:21.040 に答える