语音识别事件 A 帧上的动画

Question

我正在尝试在说出语音命令时在 3D 模型（gltf 模型）上播放动画，但动画只播放一次，接下来我说语音命令时没有任何反应。

我正在尝试的是以下代码：

var ent = document.querySelector('#model3D');
if(voiceCommand.includes("hello")) {
   ent.setAttribute("animation",'property: rotation; to: 0 360 0; loop: false; dur: 5000');
}

你能给我一些解决这个问题的想法吗？

Answer 1

动画播放一次，因为你用loop: false添加了一个动画组件 - 所以它只被附加一次，循环播放一次。

您应该使用 startEvents 属性并在需要时重新启动动画：

// when the window is clicked
window.addEventListener('click', e => {
  // emit the event
  document.querySelector('a-box').emit('foo');
});

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
  <!-- The animation is here from the beginning -->
  <a-box position="0 1 -3" color="#4CC3D9" 
         animation="property: rotation; from: 0 0 0; to: 0 360 0; 
                    loop: false; dur: 400; startEvents: foo"></a-box>
</a-scene>

语音识别事件 A 帧上的动画

Animation on Voice Recognition Event A-frame

javascript

animation

augmented-reality

voice-recognition

aframe