Question

我正在使用JavaScript编写第一步并使用Three.js进行编码。

我正在试验来自threejs.org：http://threejs.org/examples/#misc_controls_deviceorientation

的这个例子

这是他们拥有的代码：

        (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( object );

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

应该是这样的：

我在桌面上看到了这一点：

这是在移动设备中：

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

然后我在Stack Overflow Orbiting around the origin using a device's orientation中找到了这个，他们说用控制设备方向不可能做到这一点，修改轨道控制是必要的，而且它也非常复杂。

所以我的问题是：是否有一种简单的方法来改变对象的初始旋转并限制它？使用DeviceOrientationControls.js

修改

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

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

      });

当我在垂直位置使用我的设备时，它工作得很好，但是当我在横向位置使用它时，它不起作用。你有什么建议吗？

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

0 个答案: