aframe.io：親変更時にエンティティの位置をアニメーション化する

Question

エンティティのスムーズな移動を、シーン内の別の親に追加するときにアニメーション化しようとしています。

ポジション自体の変更をアニメーション化するプラグインがいくつかありますが、ポジションが同じでも親が変更されている場合は無効になります。

エンティティができる別の「スポット」が定義されているため、これが必要です。今はエンティティをこれらのスポットの1つに入れたいので、エンティティの新しい位置を計算する必要はありません。アニメーションがなければ、そのコンセプトは完璧に機能します。アニメーションの

私の現在の解像度は以下の通りです：エンティティのすべての現在の親による

• 反復処理し、これらの要素の位置ベクトルに
• すべての親を反復処理し、新しい親自体を合計し、算出された2つのベクトル
• が得られたオフセットベクトルと=新しい親にエンティティを追加およびfromとアニメーションを加算、減算、これらの要素
• の位置ベクトルを合計

動作しますが、それは最初に（新しい親にそうexatly position="0 0 0"、）新しい親に追加されますので、いくつかのフレームに要素は、ちらつき、それが描かれ、その後、アニメーションはfrom配置で始まりますそれを元の位置に戻して"0 0 0"に戻してください。

私はこの問題を示しjsfiddle、構築された：誰かがこれを固定に私を助けることができるhttps://jsfiddle.net/fshqghxt/

を？私はまったく別の概念にもオープンしています。前もって感謝します！

Answer 1

私は、どのような仕事今日も2つのソリューションを働いた：

---

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/

---

が

three.js純粋に切り替えしかし、私は本当に最後にやったことは、純粋なthree.jsへの切り替えされ、すべてのaframe.ioを交換しますjavascriptで生成されたオブジェクトを持つもの。

このようにして、いつレンダリングするかを完全に制御できます。 aframe.ioで作業している間、私はそれが非常に使いやすい（three.jsと比較して）が、私が必要とするほど柔軟ではないことが分かった。

私はもっと多くのコード行を書く必要がありますが、柔軟性のためには大丈夫だと思います。

最終的に誰もが彼にとってもっと重要なことを自分で検討するべきです。

Answer 2

これは役に立ちますか？ （コンポーネントベースのアプローチ）

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