Hello, I have a three.js scene with 2 cubes on it. In my Webbroswer, the coordinates system spawns always in the center of my screen. When I build it for android, the coordinate system spawns on the left or right side from the center. I can see it only when I move my smartphone to this direction. I want to spawn my coordinate always in the middle. How can I archive this?
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.lookAt(scene.position);
camera.position.set(0.6015384612454009, 0.7921713421031207, 2);
const renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const positionController = new DeviceOrientationControls(camera);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
const pos1 = new THREE.Mesh( geometry, material );
const pos1Vektor = calcPosFromLatLonRad(52.6101477, 12.3625582, 0.5);
const pos1X = pos1Vektor[0];
const pos1Y = pos1Vektor[1];
const pos1Z = pos1Vektor[2];
pos1.position.set(pos1X, pos1Y, 0.5);
pos1.scale.set(0.1, 0.1, 0.1);
scene.add( pos1 );
const axeshelper = new THREE.AxesHelper(5);
scene.add(axeshelper);
const pos2cheBox = new THREE.BoxGeometry();
const pos2cheMat = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const pos2che = new THREE.Mesh( pos2cheBox, pos2cheMat );
const pos2cheVektor = calcPosFromLatLonRad(52.387237548828125, 9.9, 0.5);
const pos2cheX = pos2cheVektor[0];
const pos2cheY = pos2cheVektor[1];
const pos2cheZ = pos2cheVektor[2];
pos2che.scale.set(0.1, 0.1, 0.1);
pos2che.position.set(1, 1, 0.5);
scene.add( pos2che );
const animate = function () {
requestAnimationFrame( animate );
positionController.update();
renderer.render( scene, camera );
};
animate();
}