Why my map not working with MeshPhongMaterial

Question

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.

Mugen87 · Accepted Answer · 2023-01-25 18:41:37Z

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

answered Jan 25, 2023 at 18:41

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why my map not working with MeshPhongMaterial

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related