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组件。每次频率变化时（实际上是在渲染的每一帧上），您都不应该将动画重新启动为新值。

我会根据频率沿其中一个轴移动模型。假设范围是 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 回答