switching from MeshBasicMaterial to MeshStandardMaterial just shows black screen

Question

Three.js question here. Not sure why my code isn't working when I make the call to MeshStandardMaterial on line 10. It works when I switch it to MeshBasicMaterial, but I need the functionality of MeshStandardMaterial in order to add a bump map to my render. Can anyone help with this?

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.SphereGeometry(5,32,32);
// const texture = new THREE.TextureLoader().load( 'textures/8081_earthmap10k.jpg' );
const material = new THREE.MeshBasicMaterial( { color: 0xffffff } );

const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 15;

const animate = function () {
    requestAnimationFrame( animate );

    // cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render( scene, camera );
};

animate();

The code above works correctly and shows a spinning white sphere on a black background, but the code below does not work, it just shows a black background.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.SphereGeometry(5,32,32);
// const texture = new THREE.TextureLoader().load( 'textures/8081_earthmap10k.jpg' );
const material = new THREE.MeshStandardMaterial( { color: 0xffffff } );

const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 15;

const animate = function () {
    requestAnimationFrame( animate );

    // cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render( scene, camera );
};

animate();

Again, the only thing I'm changing on both is the call to MeshStandardMaterial on line 10. Am I missing something here?

Answer 1

MeshBasicMaterial is an unlit material. MeshStandardMaterial is a lit material instead.

So as long as you don't add lights to your scene or an environment map to the material, objects with MeshStandardMaterial will be black.