pixelated background

[x3malmusic]

So i'm new to three.js and i'm trying to learn it throw practice. Currently i'm making a solar system model, besides of many many problems that i struggle, i have one that i just dont understand.

So in this example - https://codesandbox.io/s/solar-system-zoe12?file=/src/index.js
background image is nice, but when i do basically the same, it appears much bigger(or closer) as you can see in my screenshot

and my code for this component:

const Background = () => {
const textureMap = useTexture(BGImg)

return(
<object3D>
<mesh rotation={[0, 0, 0.9]}>
<sphereGeometry args={[1e8, 50, 50]} attach="geometry" />
<meshBasicMaterial attach="material" side={1}>
<primitive attach="map" object={textureMap} /> `
)
}

export default Background;

which is basically the same, maybe there's a prop i missing or something?

edit: actually you can look at the difference here - https://611fb77963958a848cc19d60--trusting-booth-9444ce.netlify.app/

[x3malmusic]

so i figured that out, it's because of camera's field of view, it's creating an optical illusion...