在 aframe 中，两个多重旋转看起来相同答案

【问题标题】：In aframe two multiple rotations looks identical在 aframe 中，两个多重旋转看起来相同
【发布时间】：2018-03-23 19:19:05
【问题描述】：

我一直在 aframe 中构建一些东西（截至 2018 年 3 月 23 日，使用来自 github 的当前主构建）并注意到有两组相同的旋转，我认为不应该。

具有旋转属性“270 90 90”和“270 180 0”的模型看起来相同。
类似地 - 将旋转属性设置为 "270 270 90" 和 "270 0 0" 看起来一样。

我创建了一个小演示在这里展示 - http://marcamillian.com/VR/rotationIssue.html。

这是一个错误还是我误解了什么？

=== 更多信息 ===

我在尝试从“270 90 0”沿其横滚轴和偏航轴添加旋转动画时遇到了这个问题，并且在每个模型上都没有获得相同的运动。

检查完所有功能后，我开始直接在模型上设置属性，并让模型在不同的旋转位置看起来相同。

【问题讨论】：

标签： aframe

【解决方案1】：

这是 3D 计算机图形学中非常常见的问题。欢迎来到云台锁问题！这基本上是您在尝试使用“欧拉”角度设置旋转时遇到的问题，尤其是在以 90 度的倍数旋转时。如果您要像这样旋转，请尝试仅旋转两个轴（例如 x 和 y）而不是全部 3 个（x,y,z）。

一个更好的做法是使用quaternions 来代替旋转。我还将注意到，最佳实践是使用组件来确保 A-Frame 可用于修改，或者不推荐在 a-scene 上使用“已加载”事件侦听器（有关更多信息，请参阅此 SO 问题。How to detect when a scene is loaded in A-Frame?）：

//listen for scene load s0 we know Aframe and Threejs are around to access. A snipped of your code, modified slightly for some direction ...
document.querySelector('a-scene').addEventListener('loaded', function () {
            //AFRAME loaded
            const scene = document.querySelector('a-scene');
            const arrowElem = scene.querySelector(".shape-container");

            //now set your click listener
            setButton.addEventListener('click',function(){
                let rotationValue = `${inputPitch.valueAsNumber} ${inputYaw.valueAsNumber} ${inputRoll.valueAsNumber}`
                //arrowElem.setAttribute('rotation', rotationValue); //your way

                //this doesn't work well ...
                //arrowElem.object3D.rotation.set(    THREE.Math.degToRad(inputPitch.valueAsNumber), 
                                                    THREE.Math.degToRad(inputYaw.valueAsNumber), 
                                                    THREE.Math.degToRad(inputRoll.valueAsNumber)
                                                );
                //consider how you can use quaternions instead
                let quaternion = new THREE.Quaternion();
                quaternion.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.PI / 2 ); //might have to change your logic to better use this functionality ...

            })
        });

【讨论】：