从 MeshBasicMaterial 切换到 MeshStandardMaterial 只显示黑屏答案

【问题标题】：switching from MeshBasicMaterial to MeshStandardMaterial just shows black screen从 MeshBasicMaterial 切换到 MeshStandardMaterial 只显示黑屏
【发布时间】：2021-05-26 06:11:10
【问题描述】：

这里有三个.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 的调用...我在这里遗漏了什么吗？

【问题讨论】：

标签： three.js

【解决方案1】：

NVM，我明白了。我刚刚加了

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

添加我的球体之后，它就起作用了！干杯！！

感谢用户 Mugen87 澄清这一点！

【讨论】：

【解决方案2】：

MeshBasicMaterial 是一种不发光的材质。 MeshStandardMaterial 是一种光照材质。

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

【讨论】：

哦，谢谢！那么是否会向 MeshStandardMaterial 添加 .lightMap 属性或 .lightMapIntensity 以使其工作？