CODEWITHSUNDEEP
three.js
keeb117
keeb117

Reputation: 53

switching from MeshBasicMaterial to MeshStandardMaterial just shows black screen

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?

Upvotes: 3

Views: 5476

Answers (3)

andymel
andymel

Reputation: 5666

I had a BufferGeometry and the Vertices had no normal vectors. As soon as I added the 'normal' attribute, the object was colored.

geometry.setAttribute("normal", new Float32BufferAttribute( normals, 3 ) );

Upvotes: 0

keeb117
keeb117

Reputation: 53

NVM, i got it. I just added

const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.AmbientLight(color, intensity);
scene.add(light);

after adding my sphere and it worked! cheers!!

thanks to user Mugen87 for clarifying this!

Upvotes: 2

Mugen87
Mugen87

Reputation: 31026

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.

Upvotes: 8

Related Questions