Javascript 使用Three.js中的设备方向控件进行对象旋转

我正在使用JavaScript编写代码并使用Three.js完成我的第一步

我在threejs.org上试用这个例子：

这是他们的代码：

        (function() {
              "use strict";

              window.addEventListener('load', function() {

                    var container, camera, scene, renderer, controls, geometry, mesh;

                    var animate = function(){

                        window.requestAnimationFrame( animate );

                        controls.update();
                        renderer.render(scene, camera);

                    };

                    container = document.getElementById( 'container' );

                    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);

                    controls = new THREE.DeviceOrientationControls( camera );

                    scene = new THREE.Scene();

                    var geometry = new THREE.SphereGeometry( 500, 16, 8 );
                    geometry.scale( - 1, 1, 1 );

                    var material = new THREE.MeshBasicMaterial( {
                        map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
                    } );

                    var mesh = new THREE.Mesh( geometry, material );
                    scene.add( mesh );

                    var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );
                    var material = new THREE.MeshBasicMaterial( { color: 0xff00ff, side: THREE.BackSide, wireframe: true } );
                    var mesh = new THREE.Mesh( geometry, material );
                    scene.add( mesh );

                    renderer = new THREE.WebGLRenderer();
                    renderer.setPixelRatio( window.devicePixelRatio );
                    renderer.setSize(window.innerWidth, window.innerHeight);
                    renderer.domElement.style.position = 'absolute';
                    renderer.domElement.style.top = 0;
                    container.appendChild(renderer.domElement);

                    window.addEventListener('resize', function() {

                        camera.aspect = window.innerWidth / window.innerHeight;
                        camera.updateProjectionMatrix();
                        renderer.setSize( window.innerWidth, window.innerHeight );

                    }, false);

                    animate();

              }, false);

        })();

我试图控制一个我用移动设备的方向制作的对象。我能做到，只要换一行就行了

controls = new THREE.DeviceOrientationControls( camera );

对于此行：

controls=new THREE.DeviceOrientationControls（对象）

但现在，我的问题是它改变了对象的初始旋转：

应该是这样的:


我在我的桌面上看到：


在移动设备中：


我试图更改DeviceOrientationControl文件，但这不是我认为最好的方法

然后我在堆栈溢出中发现了这一点，他们说用控制设备定向是不可能的，有必要修改轨道控制，这也是非常复杂的

所以我的问题是：有没有一种简单的方法来改变物体的初始旋转并限制它？使用DeviceOrientationControl.js

编辑

我找到了一种不使用设备方向控制的方法。我用了这个：

    window.addEventListener('deviceorientation', function(e) {
      var gammaRotation = e.gamma ? e.gamma * (Math.PI / 600) : 0;
      monogram.rotation.y = gammaRotation;

      });

当我在垂直位置使用我的设备时，它工作得很好，但当我在横向位置使用它时，它不工作。你有什么建议吗？
这对我帮助很大！也可以在横向模式下工作，不过目前我将设备方向映射到对象的方式有点怪异。就像我有一个万向节锁问题（我计划切换到四元数来解决这个问题），我有一些问题，用手指重新定向会旋转如何应用设备定向。我还不知道该怎么解决这个问题。谢谢目前我的建议是找出
e
在所有给定时间包含的内容。现在，在纵向模式下，
.gamma
似乎为您提供了一个可以使用的值，但是它的其他属性呢？在纵向模式、横向模式和桌面左侧模式下，它们有什么值？