Textures & Mapping in Three.js 3D WebGL

You cannot pass a string URL directly to a material. You must load the image into memory using a TextureLoader. In React Three Fiber, the @react-three/drei library provides a handy useTexture hook that suspends rendering until the image is loaded.

A photorealistic object usually uses 4-5 different textures: map (base color), normalMap (bumps and scratches), roughnessMap (which parts are shiny/matte), metalnessMap (which parts are metallic), and aoMap (ambient occlusion/micro-shadows).

How does a 2D square image wrap around a 3D sphere? Geometries contain 'UV coordinates' that map 3D vertices to 2D image coordinates (U and V are like X and Y). You can tile textures by changing the wrapS, wrapT, and repeat properties on the texture object.