A帧动画框在特定区域随机移动答案

【问题标题】：A-frame animate box to randomly move in certain areaA帧动画框在特定区域随机移动
【发布时间】：2021-09-21 06:29:17
【问题描述】：

我正在使用 A 帧 (https://aframe.io) 创建一个场景，我想知道如何让一个盒子在某个区域内随机移动。我想使用动画属性（https://aframe.io/docs/1.2.0/components/animation.html#sidebar）随机移动实体，持续时间为三秒，从作为起始坐标的 0 0 0 到作为边界坐标的 10 10 10。这意味着只要代码一直在运行，盒子就应该动画到从 0 0 0 到 10 10 10 作为坐标的随机位置，并且动画应该有三秒的持续时间。如何才能做到这一点？开始代码：

 <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
<a-entity class="move">
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
   </a-entity>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

【问题讨论】：

标签： javascript jquery three.js aframe webvr

【解决方案1】：

在实体最初加载时以及在每次动画完成[https://aframe.io/docs/1.2.0/components/animation.html#api3_animationcomplete] 事件时启动一个函数

<a-box onloaded="rndAnim" onanimationcomplete="rndAnim"></a-box>

该函数将为每个坐标设置 Math.random() * 10，这将为您提供一个直到 9.99 的随机数，然后将 setAttribute - 在您指定区域内使用新随机坐标的元素上的动画

function rndAnim(e) {
  let x = Math.random() * 10;
  let y = Math.random() * 10;
  let z = Math.random() * 10;
  e.target.setAttribute('animation', `property: position; from: 0 0 0; to: ${x} ${y} ${z}; dur: 3000; `
}

【讨论】：

您好，很抱歉没有早点回来，没有看到帖子。代码有演示吗？我试图让它工作但没有任何结果。