Question

我正在尝试使用麦克风的频率数据来动态更改A帧中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>

我可以看到传入的麦克风数据，控制台似乎表明我在正确设置动画组件的“至”值，但是模型没有移动。这是AR.JS问题吗？我从来没有用A-Frame或AR.js做任何事情，所以我有点迷茫。救命！

Answer 1

首先，我不会使用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)
}

现在，在每一帧上，将根据频率值设置位置。

要使动画生效，您必须设置一个begin事件

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

然后发出事件 this.el.emit（“ start”）

但是正如我所说，我认为这是一个坏主意。

通过麦克风输入动态更改A帧实体（GLTF模型）的比例

1 个答案: