I am new to three.js and I was trying this code but I encountered unexpected output so wanted to check what I am doing wrong here or looking to find reason behind output i am seeing.

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(75,20,0)


const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.target.set(0, 20, 0)
controls.update()

const sphere1 = new THREE.Mesh(new THREE.SphereGeometry(2, 20, 20), new THREE.MeshBasicMaterial({color: 0xFFFF00}))
sphere1.position.set(-20, 20, 0);
sphere1.castShadow = true
scene.add(sphere1)


const sphere2 = new THREE.Mesh(new THREE.SphereGeometry(2, 20, 20), new THREE.MeshBasicMaterial({color: 0xFFFF00}))
sphere2.position.set(20, 20, 0);
sphere2.castShadow = true
scene.add(sphere2)

function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)

}

animate()

I am seeing three issue in this code which I am not able to explain:

1. I was expecting two sphere appear right and left to each other but here they are appearing front and back
2. When I change sphere position from (0, 20, 100) sphere moves to left which I dont understand why and another thing is that sphere appears oval and distored in shape, which I dont understand why.