在相机对象上应用THREE.DeviceOrientationControls

Question

我的场景在位置{x：0，y：0，z：-20}上有一个简单的多维数据集，并且相机在初始位置{x：0，y：0，z：0}和旋转：{ x：0，y：0，z：0}。此时，我的立方体在“北”方向上可见。现在，当我在我的相机对象上应用THREE.DeviceOrientationControls时，相机在Y轴上旋转90度。现在，我可以通过旋转移动设备来旋转相机，但是原点已更改（“北”现在是“西”）。在THREE.DeviceOrientationControls应用后，我将保持我的初始方向。我怎么能做到？我注意到DeviceOrientationControls.js中有一个变量：

this.alphaOffset = 0; //弧度

但是对该变量所做的更改似乎无法正常工作。

更新：

我已经附上了源代码。

This is the Scene before the DeviceOrientationControls is applied

This is the Scene after DeviceOrientationControls is applied

document.addEventListener("DOMContentLoaded", function() {
	
	var camera, scene, renderer, controls,
	northMesh,southMesh,westMesh,eastMesh,
	northMeshDiv,southMeshDiv,westMeshDiv,eastMeshDiv,
	northMeshLabel,southMeshLabel,westMeshLabel,eastMeshLabel;

	init();
	animate();
	
	function init() {
		
		
		scene = new THREE.Scene();

		camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
		
				
		setTimeout(function(){
			controls = new THREE.DeviceOrientationControls( camera );
		}, 3000);
		

		renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize( window.innerWidth, window.innerHeight );
		renderer.setClearColor( 0x000000, 0 ); // the default
		document.body.appendChild( renderer.domElement );
		
		
		northMesh = new THREE.Mesh(  new THREE.BoxGeometry( 2, 2, 2 ), new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ) );
		northMesh.position.x = 0;
		northMesh.position.y = 0;
		northMesh.position.z = -20;
		scene.add( northMesh );
		northMeshDiv = document.createElement( 'div' );
		northMeshDiv.className = 'label';
		northMeshDiv.style.marginTop = '-1em';
		northMeshDiv.style.color = '#ff0000';
		northMeshDiv.textContent = 'NORTH';
		northMeshLabel = new THREE.CSS2DObject( northMeshDiv );
		northMeshLabel.position.set( 0, 1, 0 );
		northMesh.add( northMeshLabel );
		
		eastMesh = new THREE.Mesh(  new THREE.BoxGeometry( 2, 2, 2 ), new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } ) );
		eastMesh.position.x = 20;
		eastMesh.position.y = 0;
		eastMesh.position.z = 0;
		scene.add( eastMesh );
		eastMeshDiv = document.createElement( 'div' );
		eastMeshDiv.className = 'label';
		eastMeshDiv.style.marginTop = '-1em';
		eastMeshDiv.style.color = '#00ff00';
		eastMeshDiv.textContent = 'EAST';
		eastMeshLabel = new THREE.CSS2DObject( eastMeshDiv );
		eastMeshLabel.position.set( 0, 1, 0 );
		eastMesh.add( eastMeshLabel );
		
		
		southMesh = new THREE.Mesh(  new THREE.BoxGeometry( 2, 2, 2 ), new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } ) );
		southMesh.position.x = 0;
		southMesh.position.y = 0;
		southMesh.position.z = 20;
		scene.add( southMesh );
		southMeshDiv = document.createElement( 'div' );
		southMeshDiv.className = 'label';
		southMeshDiv.style.marginTop = '-1em';
		southMeshDiv.style.color = '#ff00ff';
		southMeshDiv.textContent = 'SOUTH';
		southMeshLabel = new THREE.CSS2DObject( southMeshDiv );
		southMeshLabel.position.set( 0, 1, 0 );
		southMesh.add( southMeshLabel );
		
		
		westMesh = new THREE.Mesh(  new THREE.BoxGeometry( 2, 2, 2 ), new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } ) );
		westMesh.position.x = -20;
		westMesh.position.y = 0;
		westMesh.position.z = 0;
		scene.add( westMesh );
		westMeshDiv = document.createElement( 'div' );
		westMeshDiv.className = 'label';
		westMeshDiv.style.marginTop = '-1em';
		westMeshDiv.style.color = '#0000ff';
		westMeshDiv.textContent = 'WEST';
		westMeshLabel = new THREE.CSS2DObject( westMeshDiv );
		westMeshLabel.position.set( 0, 1, 0 );
		westMesh.add( westMeshLabel );

		
					

		labelRenderer = new THREE.CSS2DRenderer();
		labelRenderer.setSize( window.innerWidth, window.innerHeight );
		labelRenderer.domElement.style.position = 'absolute';
		labelRenderer.domElement.style.top = 0;
		document.body.appendChild( labelRenderer.domElement );

		
		//FPS
		var container = document.getElementById( 'stats' );
		stats = new Stats();
		container.appendChild( stats.dom );

		
		window.addEventListener( 'resize', onWindowResize, false );
	}

	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize( window.innerWidth, window.innerHeight );
	}

	function animate() {
		requestAnimationFrame( animate );
		
		if(controls) controls.update();
		stats.update();

		render();
	}

	function render() {

		renderer.render( scene, camera );
		labelRenderer.render( scene, camera );
	}
	
});

<!DOCTYPE html>
<html>
    <head>
  
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title></title>
        
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        
    </head>
    <body>
		<script type="text/javascript" src="js/three.min.js"></script>
		<script type="text/javascript" src="js/CSS2DRenderer.js"></script>
		<script type="text/javascript" src="js/WebGL.js"></script>
		<script type="text/javascript" src="js/stats.min.js"></script>
		<script type="text/javascript" src="js/DeviceOrientationControls.js"></script>
		
        <script type="text/javascript" src="js/index.js"></script>
        
        <div id="stats"></div>
        
    </body>
</html>