如何使用 document.querySelector 或其他脚本技术设置实体旋转？答案

【问题标题】：How to set entity rotation using document.querySelector or other script techniques?如何使用 document.querySelector 或其他脚本技术设置实体旋转？
【发布时间】：2018-09-26 23:40:04
【问题描述】：

我正在尝试设置一个简单的 a-frame 物理演示，该演示会在点击时重播。遵循 aframe 物理系统和橙色射手演示的基本示例，我将事情简化为下面的代码，除了 rotation.set 动作之外似乎工作正常。该块可以很好地重置位置、速度和 angularVelocity，但不会像它应该的那样更新旋转。浏览器控制台消息是 Uncaught TypeError: Cannot read property 'set' of undefined

在此脚本中设置旋转的最简单方法是什么？

<html>
  <head>
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-physics-system@1.4.0/dist/aframe-physics-system.min.js"></script>
  </head>
  <body>
    <a-scene physics background="color: #ccddff">
      <a-box id="dropped" position="-1 4 -3" rotation="40 45 0" color="#5577D9" dynamic-body></a-box>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="brown" static-body></a-plane>
    </a-scene>
  </body>
   <script>
    window.addEventListener('click', function () {
       // METHOD2 - MOVE THE EXISTING ORANGE
      document.querySelector("#dropped").body.position.set(-1, 4, -3);
      document.querySelector("#dropped").body.velocity.set(0, 0, 0);
      document.querySelector("#dropped").body.angularVelocity.set(0, 0, 0);
      document.querySelector("#dropped").body.rotation.set(40, 45, 0);
    });    
  </script>
</html>

【问题讨论】：

标签： rotation aframe

【解决方案1】：

是document.querySelector("#dropped").components.body.body.position.set(-1, 4, -3);

【讨论】：

位置、速度和角速度更新已经在原始提交中起作用。 document.querySelector("#dropped").components.body.body.position.set(-1, 4, -3); 语句不适用于位置，我也无法获得它可以旋转。更新轮换似乎有些不同。

【解决方案2】：

这似乎有效：

 document.querySelector("#dropped").body.quaternion.set(0.3535533905932738,0.3535533905932738,0.14644660940672624,0.8535533905932737);

显然你必须在添加物理时使用四元数进行旋转，看起来它会覆盖原生旋转。这适用于从度数 (45,45,0) 中获取一个：

q=new THREE.Quaternion().setFromEuler(new THREE.Euler(THREE.Math.degToRad(45),THREE.Math.degToRad(45),0,'XYZ'));

然后：

document.querySelector("#dropped").body.quaternion.set(q.x,q.y,q.z,q.w);

但是都不对我有用：

document.querySelector("#dropped").body.quaternion=q
document.querySelector("#dropped").body.quaternion.setFromEuler(e)

e 是欧拉，q 是四元数。以下工作也有效，尽管结果不是您所需要的：

document.querySelector("#dropped").body.quaternion=document.querySelector("#dropped").body.initQuaternion;

可能应该在 A-frame github 上询问它。希望这会有所帮助，祝您编码愉快））

【讨论】：