How to load a map (texture) with react three fibre?

Questions
,
1

Hi Friends,

can anyone help me to load a texture for a sphere object?

I created this line to load the texture const texture = useLoader(TextureLoader, './public/textures/texture.png'); and tried to load this texture within the Sphere 1. I tried to import the texture with map={texture}.

This is the error I get from the console:

Screenshot 2022-04-25 at 14.33.36
Screenshot 2022-04-25 at 14.33.361918×620 150 KB

The code looks like this at the moment:

import {
  OrbitControls,
  PerspectiveCamera,
  Stars,
  MeshDistortMaterial,
  MeshWobbleMaterial,
} from '@react-three/drei';
import { useLoader } from '@react-three/fiber';
import { TextureLoader } from 'three/src/loaders/TextureLoader';

export default function Planetjsx() {
  const texture = useLoader(TextureLoader, './public/textures/texture.png');

  return (
    <>
      {/***************************************************************************/}
      {/* CAMERA */}

      <PerspectiveCamera makeDefault position={(0, 1, 20)} />
      <OrbitControls />

      {/***************************************************************************/}
      {/* GEOMETRIES */}

      {/* Sphere 1 */}
      <mesh position={[0, 0.5, 0]}>
        <sphereGeometry attach="geometry" args={[21, 32, 32]} />
        <MeshDistortMaterial
          attach="material"
          map={texture}
          distort={0.2} // Strength, 0 disables the effect (default=1)
          speed={5} // Speed (default=1)
          color="#f8f8f8"
          wireframe={false}
        />
      </mesh>

      {/* Sphere 1.2 */}
      <mesh position={[0, 0.5, 0]}>
        <sphereGeometry attach="geometry" args={[20, 32, 32]} />
        <MeshDistortMaterial
          attach="material"
          distort={0.3} // Strength, 0 disables the effect (default=1)
          speed={5} // Speed (default=1)
          color="#c0c0c0"
          wireframe={false}
        />
      </mesh>

      {/* Sphere 1.3 */}
      <mesh position={[0, 0.5, 0]}>
        <sphereGeometry attach="geometry" args={[20, 32, 32]} />
        <MeshDistortMaterial
          attach="material"
          distort={0.3} // Strength, 0 disables the effect (default=1)
          speed={5} // Speed (default=1)
          color="#fff"
          wireframe={false}
        />
      </mesh>

      {/* Sphere 2 */}
      <mesh position={[0, 0.5, 0]}>
        <sphereGeometry attach="geometry" args={[21, 32, 32]} />
        <MeshWobbleMaterial
          attach="material"
          factor={0.2} // Strength, 0 disables the effect (default=1)
          speed={10} // Speed (default=1)
          color="#d9ff00"
          wireframe={false}
        />
      </mesh>

      {/* Sphere 2.1 */}
      <mesh position={[0, 0.5, 0]}>
        <sphereGeometry attach="geometry" args={[21, 32, 32]} />
        <MeshWobbleMaterial
          attach="material"
          factor={0.5} // Strength, 0 disables the effect (default=1)
          speed={10} // Speed (default=1)
          color="#fff"
          wireframe={false}
        />
      </mesh>

      {/* Sphere 2.2 */}
      <mesh position={[0, 0.5, 0]}>
        <sphereGeometry attach="geometry" args={[22, 32, 32]} />
        <MeshWobbleMaterial
          attach="material"
          factor={4} // Strength, 0 disables the effect (default=1)
          speed={0.21} // Speed (default=1)
          color="#000"
          wireframe={false}
        />
      </mesh>

      {/* Sphere 2.3 */}
      <mesh position={[0, 0.55, 0]}>
        <sphereGeometry attach="geometry" args={[22, 32, 32]} />
        <MeshWobbleMaterial
          attach="material"
          factor={5} // Strength, 0 disables the effect (default=1)
          speed={0.22} // Speed (default=1)
          color="#f8f8f8"
          wireframe={false}
        />
      </mesh>

      {/* Sphere 3 */}
      <mesh position={[0, 0.5, 0]}>
        <sphereGeometry attach="geometry" args={[21, 32, 32]} />
        <meshToonMaterial attach="material" color="yellow" wireframe={false} />
      </mesh>

      {/***************************************************************************/}
      {/* ENVIRONMENT */}

      <Stars
        radius={50} // Radius of the inner sphere (default=100)
        depth={50} // Depth of area where stars should fit (default=50)
        count={5000} // Amount of stars (default=5000)
        factor={4} // Size factor (default=4)
        saturation={1} // Saturation 0-1 (default=0)
        fade // Faded dots (default=false)
      />

      {/***************************************************************************/}
      {/* LIGHT */}

      {/* Ambient Light */}
      <ambientLight args={['#ffffff', 1]} />

      {/* Directional Light */}
      <directionalLight args={['#fff', 1]} position={[0, 0, 1]} />

      {/* Point Light */}
      <pointLight args={['#fff', 2]} position={[0, 0, 0]} />
    </>
  );
}

What is wrong with this code?

Thanks for help!!

2

Path for public folder is wrong, it should be ‘/public’ instead of ‘./public’

3

This is not working, I still get the same error. Is the method I am useing correct?

4

I found the mistake, we dont need to set the public path, the path should just be ‘textures/texture.png’

Now it looks like this and it works:

const texture = useLoader(TextureLoader, ‘textures/texture.png’);

However the texture is way to big, can someone share the parameters to control the textures?

5 
texture.repeat.set(0.5, 0.5)
texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.RepeatWrapping

btw you don’t need attach=material/geometry when the name of the native element ends in “material” or “geometry”. and position={(0, 1, 20)} should be position={[0, 1, 20]}, (0, 1, 20) is just 20 in javascript, which is the same as mesh.position.setScalar(20), so: x:20, y: 20, z: 20.