Object rotation using the Device Orientation Controls in Three.js

问题

I am making my first steps coding with JavaScript and playing with Three.js.

I am experimenting with this example from threejs.org :http://threejs.org/examples/#misc_controls_deviceorientation

and this is the code that they have:

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

        })();

I am trying to control an object that I made with the orientation of a mobile device. I can do it, is just change this line

controls = new THREE.DeviceOrientationControls( camera );

for this line: controls = new THREE.DeviceOrientationControls( object );

But now, my problem is that It changes the initial rotation of the object:

It should be like this:

And I see this in my desktop:

And this in a mobile device:

I tryied to change the DeviceOrientationControls file but is not the best way I think.

Then I found this in Stack Overflow Orbiting around the origin using a device's orientation and they said that is not possible to do it with control device orientation, its necessary to modify the Orbit Controls, and it is very complicated too.

So my question is: Is there a simple way to change the initial rotation of an object and to limit it too? Using DeviceOrientationControls.js

EDIT

I found a way to make it without using the device orientation controls. I used this:

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

      });

It works perfectly when I use my device in a vertical position,but when I use it in landscape position it doesn't work. Do you have a suggestion?

来源：https://stackoverflow.com/questions/35463600/object-rotation-using-the-device-orientation-controls-in-three-js

标签

javascript

three.js

device-orientation