Question

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

模型的旋转属性＆＃34; 270 90 90＆＃34; 和＆＃34; 270 180 0＆＃34;
同样 - 将轮播属性设置为＆＃34; 270 270 90＆＃34; 和＆＃34; 270 0 0＆＃34; 查看相同。

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

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

=== 更多信息 ===

我试图在旋转动画中添加一个模型来自＆＃34; 270 90 0＆＃34;沿着它的滚动轴和偏航轴，并且每个轴都没有相同的运动。

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

Answer 1

这是3D计算机图形学中非常常见的问题。欢迎来到万向节锁定问题！这基本上是你在尝试使用＆＃34; Euler＆＃34;设置旋转时遇到的问题。角度，特别是在以90度的倍数旋转时。如果要像这样旋转，请尝试仅旋转两个轴（例如x和y），而不是全部旋转3个（x，y，z）。

此处有关云台锁的更多信息：https://www.youtube.com/watch?v=zc8b2Jo7mno&feature=youtu.be

更好的做法是使用quaternions进行轮换。我还要注意，最佳做法是使用组件来确保A-Frame可以修改，或者不按照建议的那样加载＆＃34;场景中的事件监听器（有关详细信息，请参阅此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 ...

            })
        });

在aframe中，两个多次旋转看起来相同

1 个答案: