Why when I change position about the axis(x, y), my figure change shape like in picture below?

When I change position about the axis(x, y), my figure change shape like in picture below. How can I fix it? I’m using 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);

Answer

If you want to maintain the shape of your figure when you change the position, you’ll need to switch to an orthographic projection.

To do so in three.js you’ll need to replace your PerspectiveCamera with an OrthographicCamera.

Here’s a link to the docs that’ll help you.