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