Three.js简单场景添加HemisphereLight无效果？原因排查

你遇到的问题是：尝试在Three.js简单场景中添加HemisphereLight并观察光照变化，但无论调整光照的强度或颜色，场景均无任何变化；即使移除光照代码，场景状态也未改变。

你的代码如下：

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

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

var planeGeometry = new THREE.PlaneGeometry(25, 60, 20, 20);

var planeMaterial = new THREE.MeshBasicMaterial({color:"green"})

var plane = new THREE.Mesh( planeGeometry, planeMaterial );
var light = new THREE.HemisphereLight(0xffffff, 0x000000, 2);

scene.add(light);
scene.add(plane);

plane.rotateZ(Math.PI/2)
camera.position.z = 10;

scene.background = new THREE.Color(0xffffff);

var render = function (time) {
            requestAnimationFrame( render );
     
          renderer.render(scene, camera);
      };

      render();

问题根源 #

核心原因是你使用了MeshBasicMaterial材质——这种材质完全不受光照影响，它只会渲染自身设置的固定颜色，不管场景里有没有灯光、灯光参数如何调整，都不会产生任何光照相关的变化。

解决办法 #

把MeshBasicMaterial替换成支持光照计算的材质，比如：

• MeshLambertMaterial：支持基础漫反射光照
• MeshPhongMaterial：支持高光效果
• MeshStandardMaterial：基于物理的PBR材质，效果更真实

修改后的材质代码示例：

var planeMaterial = new THREE.MeshLambertMaterial({color:"green"})

额外优化建议 #

你设置的相机视场角200过大，会导致画面出现严重的桶形畸变，建议改成45-75之间的常规数值，比如：

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

内容的提问来源于stack exchange，提问作者Jonas