从 MeshBasicMaterial 切换到 MeshStandardMaterial 只会显示黑屏

Question

三.js问题在这里。不知道为什么当我在第 10 行调用 MeshStandardMaterial 时我的代码不起作用。当我将其切换到 MeshBasicMaterial 时它可以工作，但我需要 MeshStandardMaterial 的功能才能将 .bumpMap 添加到渲染中。有人能帮忙吗？

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

上面的代码工作正常，并在黑色背景上显示旋转的白色（0xffffff）球体，但下面的代码不起作用，它只显示黑色背景。

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

再说一遍，我对两者进行的唯一更改是第 10 行对 MeshStandardMaterial 的调用...我在这里遗漏了什么吗？

Answer 1

MeshBasicMaterial是一种未发光的材质。MeshStandardMaterial是一种发光材质。

因此，只要您不向场景添加灯光或向材质添加环境贴图，对象 MeshStandardMaterial就会是黑色的。