Three.js 场景全黑？加环境光解决！

Three.js 场景全黑往往不是代码出错，而是光照配置缺失的“温柔陷阱”：MeshStandardMaterial等PBR材质天生无视纯点光源或平行光的直接照射，必须搭配环境光（AmbientLight）提供基础全局照明才能显色；文章不仅一针见血指出问题本质，还手把手修正关键语法错误（如`light.position.set(0, 10, 10)`的正确写法），并给出可直接运行的修复代码和进阶光照建议，堪称Three.js新手突破黑屏魔咒的必读指南。

Three.js 场景全黑通常是因为缺少基础光照，仅用点光源无法照亮默认材质的物体，必须添加环境光（AmbientLight）提供全局基础照明。

Three.js 场景全黑通常是因为缺少基础光照，仅用点光源无法照亮默认材质的物体，必须添加环境光（AmbientLight）提供全局基础照明。

在你的代码中，虽然已创建了 PointLight（点光源），但 MeshStandardMaterial 是一种基于物理的材质（PBR），它不会响应纯方向性或点光源的“直接光照”而自动产生可见亮度——除非该光源能明确照射到表面且存在足够强度的反射计算。更重要的是：MeshStandardMaterial 完全忽略没有环境光（AmbientLight）或环境光探针（AmbientLightProbe）时的场景环境，导致默认渲染为纯黑。

此外，你代码中还存在一个关键语法错误：

light.position.set = (0, 10, 10) // ❌ 错误：这是赋值语句，不是调用

应改为方法调用：

light.position.set(0, 10, 10) // ✅ 正确：设置坐标

✅ 正确修复后的完整初始化代码如下：

import * as THREE from 'three';

// 场景
const scene = new THREE.Scene();

// 物体：球体
const geometry = new THREE.SphereGeometry(3, 64, 64);
const material = new THREE.MeshStandardMaterial({ color: "#00ff83" });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// ? 关键修复 1：添加环境光（必需！）
const ambientLight = new THREE.AmbientLight(0x404040); // 柔和白光，提供基础照明
scene.add(ambientLight);

// 光源：点光源（增强明暗对比）
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(0, 10, 10); // ✅ 修正：正确调用 set()
scene.add(pointLight);

// 相机
const camera = new THREE.PerspectiveCamera(45, 800 / 600, 0.1, 1000);
camera.position.z = 20;

// 渲染器
const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(800, 600);
renderer.render(scene, camera);

⚠️ 注意事项：

• MeshStandardMaterial、MeshPhysicalMaterial 等 PBR 材质必须搭配至少一种全局光照（如 AmbientLight 或 HemisphereLight）才能正常显示颜色；纯 PointLight/DirectionalLight 单独使用时，若物体未正对光源或法线朝向不佳，极易呈现黑色。
• 建议始终启用抗锯齿（antialias: true）提升视觉质量。
• 若后续需更真实光照效果，可叠加 HemisphereLight 或使用 RGBELoader 配合环境贴图（IBL）。

总结：Three.js 黑屏 ≠ 代码崩溃，大概率是光照配置缺失。牢记口诀：“用 Standard 材质，必加 AmbientLight” —— 这是新手绕不开的第一课。

终于介绍完啦！小伙伴们，这篇关于《Three.js 场景全黑？加环境光解决！》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！