How can I resolve the issue of my image being stretched out and pixelated when using three.js to cover a sphere with a photo? Here's the code snippet causing the problem:
moonSurface = new THREE.Mesh(
new THREE.SphereGeometry(moonRadius -.1, 50, 50),
new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSfk7ndy7wriATp4pCx3fq4q-5yxc_gHrrT3Wf74PFY7n7VCN3T&usqp=CAU')
})
);
moonSurface.receiveShadow = true;
moon = new THREE.Group();
moon.position.y = -moonRadius;
//floor.add(floorShadow);
moon.add(moonSurface);
scene.add(moon);