Why my map not working with MeshPhongMaterial

January 25, 2023

I try to create the planet 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.

>Solution :

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 );