A-Frame 使用 javascript 动态旋转立方体答案

【问题标题】：A-Frame rotate cube dynamically with javascriptA-Frame 使用 javascript 动态旋转立方体
【发布时间】：2017-06-30 19:27:51
【问题描述】：

我正在研究 A-Frame、Socket.io 等。

我想旋转一个立方体/盒子，它可以工作。但只是静态的，带有这样的 html 标签：

<a-box position="-1 0.5 -3" rotation="0 0 0" color="#4CC3D9">
        <a-animation id="cubeAnimation"  attribute="rotation" from="0 0 0" to="270 0 0" dur="2000" direction="alternate" begin="playAnimation"></a-animation>
</a-box>

我可以用 javascript 调用 playAnimation 开始函数。但我不知道谁来更改参数。我想用 javascript 或 angualarjs 进行动态旋转。

也许有人可以帮助我。也许可以通过javascript设置to属性..我尝试了很多东西，但没有任何效果..

谢谢

【问题讨论】：

好的，我可以用 javascript 编辑 to 属性。 cube.attributes.to.nodeValue = "360 180 0";并且html标签将带有价值。但是如果我点击一个按钮来运行动画，什么都不会发生..

标签： javascript three.js webvr

【解决方案1】：

好的，我找到了方法。如果将来有人遇到同样的问题，此解决方案有效:)

const el = document.createElement('a-animation');
el.setAttribute('from', '0 0 0');
el.setAttribute('to', '360 180 0');
el.setAttribute('id', 'cubeAnimation');
el.setAttribute('attribute', 'rotation');
el.setAttribute('dur', '1000');
el.setAttribute('begin', 'wuerfeln');
cube.appendChild(el);

【讨论】：