Inital Y Axi Rotation after applying THREE.DeviceOrientationControls on Camera Object - three.js

Question

my scene has a simple Cube on position: {x: 0, y:0, z: -20} and the camera has the inital position {x: 0, y:0, z: 0} and rotation: {x: 0, y:0, z: 0}. at this point my cube is visible in “north” direction. now when i apply THREE.DeviceOrientationControls on my camera object the camera rotates on the Y Axi by 90 degrees. Now iam able to rotate the camera by rotating the mobile device but the origin has changed (“north” is now “west”). i would to keep my inital direction after the THREE.DeviceOrientationControls apply. how could i reach that? I noticed there is a a variable in the DeviceOrientationControls.js:
this.alphaOffset = 0; // radians
but changes to this variable seems not work properly.
UPDATE:
i have attached the source code.
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>