Whenever I adjust the position along the x or y axis, my shape changes as shown in the image below. How can I correct this issue? I am working with Three.js.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera.position.set(0,0,20);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
document.getElementById('gameWindow').appendChild( renderer.domElement );
const canvas = renderer.domElement;
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( new THREE.SphereGeometry( 2, 20, 20 ), material );
const cube1 = new THREE.Mesh( new THREE.SphereGeometry( 2, 20, 20 ), material );
scene.add(cube, cube1);
cube.position.x=20;
renderer.render(scene, camera);