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 .bumpMap 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(0xffffff) 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?



from Recent Questions - Stack Overflow https://ift.tt/3aMMyuS
https://ift.tt/eA8V8J

Comments

Popular posts from this blog

Spring Elasticsearch Operations

Network Error and Timeout on Authorize.net JS

Object oriented programming concepts (OOPs)