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

[kazooi]

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:

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]} />
    </>
  );
}

How can I load this texture?

Thanks for help!!