Three.js灯光失效问题：物体始终被均匀照亮

我正在跟随Three.js教程学习，用Vite初始化了项目，目标是在画布中显示一个位于中央的绿色球体，并在其上方放置点光源，但点光源无法正常工作，球体始终被均匀照亮。注释掉灯光相关代码后，结果依然不变。

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/svg+xml" href="/vite.svg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite Project</title>
</head>
<body>
    <canvas class="webgl"></canvas>
    <script type="module" src="/main.js"></script>
</body>
</html>

JavaScript代码 #

import * as THREE from 'three'

const scene = new THREE.Scene()

const geometry = new THREE.SphereGeometry(3, 64, 64);
const material = new THREE.MeshBasicMaterial({
    color: '#c0ff83'
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const light = new THREE.PointLight(0xfcfcff, 4, 60);
light.position.set(0, 10, 10);
scene.add(light);

const camera = new THREE.PerspectiveCamera(45, 800 / 600); // updated
camera.position.z = 16;
scene.add(camera);

const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGLRenderer({canvas});
renderer.setSize(800, 600);
renderer.render(scene, camera);

错误截图 #

解决思路 #

• 核心问题：材质选择错误：你使用的MeshBasicMaterial是不受光照影响的基础材质，它会直接显示纯色，无论场景中有没有灯光，都会均匀渲染。要让点光源生效，需换成支持光照的材质，比如MeshStandardMaterial或MeshPhongMaterial。
  修改材质代码示例：

  const material = new THREE.MeshStandardMaterial({
      color: '#c0ff83',
      roughness: 0.5 // 可调整粗糙度，让光照效果更自然
  });
  

• 可选优化：添加环境光AmbientLight作为基础补光，避免场景暗部过黑：

  const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
  scene.add(ambientLight);
  

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