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” —— 这是新手绕不开的第一课。
