aframe.io:实体在父更改上的动画位置

时间:2017-03-07 17:14:07

标签: javascript 3d three.js aframe

当我将实体附加到场景中的另一个父级时,我正试图为实体的平滑移动设置动画。

有一些插件可以为位置本身的更改设置动画,但是当位置保持不变但父级正在改变时,不会。

我需要这个,因为我定义了不同的“点”,实体可以是。现在我想将实体放入其中一个点,所以我不必计算实体的新位置。没有动画,这个概念就会很完美。

我目前对动画的分辨率如下:

  • 遍历实体的所有当前父级并总结这些元素的位置向量
  • 遍历所有父项和新父项本身,并总结这些元素的位置向量
  • 减去两个计算的向量
  • 将实体附加到新父级并添加一个动画from =生成的偏移向量和to="0 0 0"

可以工作,但在某些框架中,元素会闪烁,因为它首先会附加到新的父级(position="0 0 0",因此在新的父级上显得很简单),它会被绘制,然后动画以{{开头1}}将其置于旧位置并将其移回from

我构建了一个jsfiddle,它显示了问题:https://jsfiddle.net/fshqghxt/

有人可以帮我解决这个问题吗?我也对完全不同的概念持开放态度。提前谢谢!

2 个答案:

答案 0 :(得分:0)

这会有帮助吗? (基于组件的方法)

HTML:

<a-scene>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-box position="-1 0.5 -3" width="1" height="1" depth="1" color="#4CC3D9" animation="property: position; dir: alternate; loop: true; dur: 1000; to: -1 3 -3; startEvents: moveBox"></a-box>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <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>

JS:

document.querySelector('a-box').emit('moveBox');

Fiddle

答案 1 :(得分:0)

我今天制定了两个解决方案,效果很好:

留在aframe.io

入住aframe.io时,这个新概念可行: *将元素克隆到其当前位置 *隐藏原始元素 *将其附加到新父级并将其位置设置为偏移位置以匹配克隆元素 *显示原始元素 *隐藏克隆元素 *开始动画

这样,在克隆的帮助下不会出现闪烁现象。

function animateParentChange(element, newParent) {
  var newParentParents = newParent.add(newParent.parentsUntil('a-scene'));
  var elementParents = element.parentsUntil('a-scene');

  var oldVector = sumVectors(elementParents);
  var newVector = sumVectors(newParentParents);

  var diff = oldVector.sub(newVector)

  var newPosition = vectorToPosition(diff);
  console.log("newPosition", newPosition);

  $(element).find('a-animate').remove();
  var tempElement = $(element).clone().appendTo(element.parent());
  $(element).attr('visible', 'false').appendTo(newParent).attr('position', diff.toArray().join(' '));
  $(element).append('<a-animation attribute="position" dur="1000" fill="forwards" from="' + diff.toArray().join(' ') + '" to="0 0 0"></a-animation>');
  $(element).attr('visible', true);
  tempElement.remove();
}

小提琴:https://jsfiddle.net/5uc1hn63/

切换到纯三.js

但我最终真正做的是切换到纯三.js,用javascript生成的对象替换所有aframe.io事物。

通过这种方式,我可以完全控制何时渲染。在使用aframe.io时,我发现它非常容易使用(与three.js相比),但不像我需要的那样灵活。

我接受必须编写更多代码行,但是考虑到灵活性的代价,我认为没关系。

最后,每个人都应该自己考虑,对他来说更重要。