Why my map not working with MeshPhongMaterial

Question

I try to create the pl.net Earth with three.js. I used a texture on a MeshBasicMaterial and it worked perfectly, but when I change the material to a MeshPhongMaterial it just doesn't render the map anymore.

I want to change the material because I want to add a bump Map too.

Here's my code:

let renderer;

const earthGeometry = new THREE.SphereGeometry(5, 50, 50);

const earthMaterial = new THREE.MeshPhongMaterial({
    map: new THREE.TextureLoader().load("../img/globe.jpg"),
  //   bumpMap: new THREE.TextureLoader().load("../img/earthbump.jpg"),
  //   bumpScale: 0.3,
});

const sphere = new THREE.Mesh(earthGeometry, earthMaterial); scene.add(sphere);

And there's not a single problem in the console so I don't know what to do. I'm also using svelte and vite, maybe it can come from here.

Answer 1

I used a texture on a MeshBasicMaterial and it worked perfectly, but when I change the material to a MeshPhongMaterial it just doesn't render the map anymore.

If it does work with MeshBasicMaterial but not with MeshPhongMaterial , you most likely have no lights in your scene. Try it with this basic setup:

const ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
scene.add( ambientLight );

const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
directionalLight.position.set( 100, 100, 0 );
scene.add( directionalLight );