四元値を使用してA-Frameでobjを移動する

A-Frameを使用して3D空間内のオブジェクトを移動しようとしています。四元値を使用してA-Frameでobjを移動する

私は「オイラー座標」（X、Y、Z）を使用していると私は、次のコードでオブジェクトに渡すよ：

document.querySelector('a-entity[id=obj]').setAttribute('rotation', input.computed.z+ ' '+ -input.computed.x + ' ' + input.computed.y);

すべてが正常に動作しています。

しかし、私は同じことを実装したいと思いますが、クォータニオン（QX、QY、QZ、QW）を使用しています。

私は良い例や簡単な文書を見つけるのに問題があります。

私は "オイラー座標"と同じ結果を得ることができますが、クォータニオンでいくつかの提案がありますか？

ありがとうございます！

出典

2017-07-17 Jacob

threejsで使用されている四元数の方法を使用できます。
その後、カスタム以内にすることができますcomponentをした次のいずれか

は、el.setAttribute()方法で<a-entity>に
を操作したり、あなたがthree.jsオブジェクトを使用して、それを修正することができます：el.object3D.rotation.set()を。あなたは、直接変換行列を適用したい場合は、あなたがthis.el.object3D.matrixWorldを使用して変換行列を取得することができます

（世界変換）、またはthis.el.object3D.matrix（相対変換）、その後、あなたはapplyMatrix() object3D docsから使用してオブジェクトに変換行列を適用することができます。クォータニオン行列を適用するには、applyQuaternion()を使用します。、あなたの助けに感謝を https://jsfiddle.net/gftruj/rcfw8wfd/

出典

2017-07-17 12:48:55

こんにちは：

私は、単純な作業フィドルを設定しました！私はこの話題についてはとても新しいので、どのように動作するかをよりよく理解するためにドキュメントを読むことを試みています。 'el.setAttribute（ 'rotation'、z x y）;と似ているが、4つの四元数の値が' el.setAttribute（ 'rotation'、z x y w）;と同じような関数を持つ方法があるかどうかはわかりません。 **変換行列**を使用する必要がありますか？私が言ったように私は今学んでいるので、私は完全に理解するためのいくつかの問題があります – Jacob

@Jack私が理解する限り、xyz位置ベクトルを取得し、四元数を適用し、xyz出力ベクトルで回転させることができます。私は、上記のように要素を回転させる要素と四元数の入力を持つ独自の関数/コンポーネントを作成します。 –

@Jack私が知っている限り、a-frameにはそのようなメソッドはありません。なぜなら、three.js上にビルドされているからです。私はthree.jsクォータニオンメソッドを使用します。 –

四元値を使用してA-Frameでobjを移動する

答えて

関連する問題