Question

我尝试使用A-Frame在3D空间中移动对象。

我正在使用＆＃34; Euler坐标＆＃34; （X，Y，Z）和我用以下代码将它们传递给对象：

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

一切都很好。

但是现在我想使用四元数（QX，QY，QZ，QW）来实现相同的功能。

我在找到一个好的例子或一个简单的文档时遇到了一些问题。

有没有人有一些建议我可以得到与＆＃34; Euler坐标相同的结果＆＃34;但是四元数？

谢谢！

Answer 1

您可以使用threejs中使用的四元数方法然后，在自定义<a-entity>内，您可以：

使用el.setAttribute()方法在el.object3D.rotation.set()上操作，
或者您可以使用three.js对象修改它：this.el.object3D.matrixWorld。

如果要直接应用变换矩阵，可以使用this.el.object3D.matrix（世界变换）或applyMatrix()（相对变换）获取变换矩阵，然后可以将变换矩阵应用于对象使用object3D docs中的applyQuaternion()。要应用四元数矩阵，请使用InputTransparent="True"。

我已经设置了一个简单的工作小提琴： https://jsfiddle.net/gftruj/rcfw8wfd/

使用四元数值在A-Frame中移动obj

1 个答案: