我正在使用 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>
最佳答案
在实体最初加载时以及在每个 animationcomplete[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 的随机数，然后将设置属性 - 在指定区域内具有新随机坐标的元素上设置动画
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; `
}
https://stackoverflow.com/questions/68341441/
相关文章：
java - 使用 Keycloak Script Mapper 聚合声明中角色的属性
schema - Protocol Buffer 架构无效。导入 "google/protobuf/
node.js - 修复创建新 Angular 项目时的上游依赖冲突
python - STATICFILES_DIRS 设置不是元组或列表。尽管它不包含逗号
scala - Spark : Why execution is carried by a mast
email - 我应该用什么方法发送带有 Airflow 的电子邮件？