如何使用 document.querySelector 或其他脚本技术设置实体旋转？
2018-09-24
204
我正在尝试设置一个简单的 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/[email protected]/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>
2个回答
它是
document.querySelector("#dropped").components.body.body.position.set(-1, 4, -3);
Diego Marcos
2018-09-24
这似乎有效：
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 上询问。希望这会有所帮助，祝您编码愉快 ))
Igor R
2018-09-26