想象一下，你在数字世界搭建了一座宏伟的城堡，却发现它像被扔进了漆黑的地窖 —— 这不是建筑的错，而是你忘了邀请光影这对最佳舞伴。在 Three.js 的三维舞台上，材质与灯光的配合就像钢琴与小提琴的二重奏，缺了谁都会让整个场景黯然失色。今天我们就来揭开这场像素级华尔兹的秘密，看看这些数字舞者是如何遵循物理规则，却又能跳出千变万化的舞步。
材质：物体的 "皮肤" 哲学
如果把三维模型比作一个人，那么材质就是它的皮肤、衣服和饰品的总和。Three.js 提供的材质系统，本质上是对现实世界物体光学特性的数学模拟。当你创建一个 MeshBasicMaterial 时，你其实是在告诉计算机："这个物体很任性，它只展示自己的本色，完全不鸟任何灯光"—— 这就像戴着墨镜参加舞会，虽然酷但永远看不到光影的流转。
// 这种材质是灯光绝缘体
const basicMaterial = new THREE.MeshBasicMaterial({
color: 0xff0000, // 红色，而且是"我就是红色不需要解释"的那种
wireframe: false // 不穿网格透视装
});
而 MeshLambertMaterial 则是个谦逊的学生，它认真遵循朗伯余弦定律 —— 简单说就是 "光线照射角度越正，我就越亮"。这种材质会计算光线与物体表面法线的夹角，用这个角度的余弦值来决定反射光的强度。当角度为 90 度时，余弦值为 0，物体就会呈现出自身的环境色，就像阳光平行照射在墙壁边缘时，那里总会显得暗一些。
// 这位是光影规则的遵守者
const lambertMaterial = new THREE.MeshLambertMaterial({
color: 0x00ff00, // 绿色，但会根据灯光改变亮度
emissive: 0x002200 // 自带一点微弱的绿光，像害羞时的红晕
});
MeshPhongMaterial 则是个爱出风头的家伙，它不仅遵守朗伯定律，还会额外计算高光反射 —— 那些物体表面上亮晶晶的小点，就像舞会上礼服上的亮片。它通过一个 "shininess" 参数来控制高光区域的大小，数值越大，高光点越小越集中，就像新皮鞋的反光比旧皮鞋更刺眼一样。
灯光：数字世界的太阳与蜡烛
灯光在 Three.js 中扮演着造物主的角色，不同类型的灯光就像不同的光源，有着各自的脾气和照射规则。AmbientLight 是最慷慨的，它像漫反射的环境光，均匀地照亮场景里的每一个角落，却不会产生任何阴影 —— 这就像阴天的自然光，柔和但缺乏立体感。
// 这是场景里的背景光，雨露均沾型
const ambientLight = new THREE.AmbientLight(
0xffffff, // 白光，像阴天的散射光
0.5 // 亮度，温柔得像月光
);
scene.add(ambientLight);
DirectionalLight 则是个直肠子，它发出的光线永远平行，就像太阳发出的光线（因为距离太远，到达地球时已近似平行）。它的 position 属性其实更像 "从哪个方向照过来"，而不是真正的位置。当你设置一个方向光时，相当于在说："假设在很远的地方有个光源，它的光线是沿着这个方向过来的"。这种灯光最适合模拟阳光，能产生清晰的阴影。
// 平行光，像太阳一样固执地走直线
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(10, 20, 15); // 光线从这个方向来，越高影子越短
dirLight.castShadow = true; // 有影子才真实，就像阳光底下必有阴影
scene.add(dirLight);
// 给灯光加个helper，可视化它的方向
const dirLightHelper = new THREE.DirectionalLightHelper(dirLight, 5);
scene.add(dirLightHelper);
PointLight 是个 "中心派"，它像灯泡一样从一个点向四面八方发光，光线强度会随着距离增加而衰减 —— 遵循平方反比定律，也就是说距离翻倍，亮度就会变成原来的四分之一。这就像你房间里的台灯，离得越近越亮，远了就只剩微弱的光芒。
SpotLight 则是舞台总监，它像聚光灯一样有明确的照射范围和角度，光线从一个点出发，形成一个锥形区域。它的 angle 属性（以弧度为单位）决定了这个锥形的张开角度，值越大，照亮的范围越广。当你需要突出某个物体，比如展览台上的珠宝或舞台上的主角时，SpotLight 就是最佳选择。
搭配的艺术：让材质与灯光共舞
知道了材质和灯光的特性后，最关键的就是让它们配合默契。就像不同面料的衣服在不同灯光下会呈现不同效果 —— 丝绸在聚光灯下会闪耀，而粗布在柔和的环境光下更显质感。
当你使用 MeshPhongMaterial 时，最好搭配至少一个有方向的光源（DirectionalLight 或 SpotLight），否则它的高光特性就无从展现，就像穿了亮片礼服却在黑暗中跳舞。下面这个组合能创造出丰富的层次感：
// 经典搭配：环境光+方向光+Phong材质
const scene = new THREE.Scene();
// 基础环境光，保证没有完全的黑暗
const ambient = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambient);
// 主光源，负责塑造立体感和高光
const mainLight = new THREE.DirectionalLight(0xffffcc, 0.8);
mainLight.position.set(5, 10, 7.5);
scene.add(mainLight);
// 带高光的材质，就等灯光来激活
const fancyMaterial = new THREE.MeshPhongMaterial({
color: 0x9999ff,
shininess: 100, // 高反光，像光滑的塑料或金属
specular: 0xffffff // 高光颜色，这里是白色
});
// 创建立方体舞者
const cube = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), fancyMaterial);
scene.add(cube);
调试时，你可以把 ambientLight 的强度调为 0，单独看主光源的效果，就像在暗室里打开一盏灯，能更清晰地看到光线的分布。如果发现物体某些面过于黑暗，可能是因为这些面的法线方向与光源方向夹角太大，这时可以调整光源位置，或者增加环境光的强度来 "补光"。
对于透明材质（MeshPhysicalMaterial with transparent: true），需要特别注意灯光的穿透性。这种材质就像玻璃，需要光线能够穿过它照射到后面的物体上。这时你可能需要调整灯光的 distance 属性，确保光线有足够的 "穿透力"，同时可能需要增加渲染器的 alphaTest 值来避免透明区域出现毛边。
// 玻璃材质的配置
const glassMaterial = new THREE.MeshPhysicalMaterial({
color: 0xffffff,
transparent: true,
opacity: 0.5,
transmission: 0.8, // 透光率，越高越像清澈的玻璃
roughness: 0.1 // 越光滑，反射越清晰
});
// 确保灯光能穿透玻璃
const light = new THREE.PointLight(0xffff00, 2, 50); // 第三个参数是光线最大距离
常见问题的 "光影诊疗室"
当你的场景出现 "阴阳脸"—— 物体一半亮一半暗，那很可能是只给了一个方向光，而没有环境光来填充阴影区域。就像人站在单束聚光灯下，背光面会完全陷入黑暗，这时增加一点环境光就能解决问题。
如果发现材质的高光像 "油腻的光斑"，可能是 shininess 值太低了。把这个值调高，高光会变得集中而锐利，就像刚打了蜡的地板比磨砂地板的反光更精致。
当所有物体都像蒙了一层灰，失去了应有的色彩，那你可能是把灯光颜色设成了偏灰色，或者材质的 color 属性没有正确设置。记住，灯光颜色会给物体 "染色"—— 红色灯光下，绿色物体会显得发黑，这是减色混合的原理，就像现实中红光照射绿叶，叶子会呈现出暗红色。
调试时，善用各种 Helper 工具能让问题无所遁形：DirectionalLightHelper 能显示光线方向，SpotLightHelper 能画出聚光范围，CameraHelper 能让你知道相机在看哪里。这些工具就像医生的听诊器，能帮你快速找到 "光影疾病" 的病因。
结语：做数字世界的光影指挥家
材质与灯光的搭配调试，本质上是对现实世界光学规律的创造性运用。Three.js 把复杂的物理公式封装成了直观的 API，但了解这些底层原理 —— 比如光线如何反射、不同物质如何与光互动 —— 能让你从 "试错调试" 升级为 "理性设计"。
下次当你调整 shininess 参数时，不妨想象自己在打磨一块金属；当你改变 SpotLight 的 angle 时，就像在调整舞台聚光灯的照射范围。在这个由代码构建的世界里，你既是建筑师，也是灯光师，更是这场像素华尔兹的指挥家。
记住，最动人的场景往往不是参数调到极致的结果，而是材质与灯光达成微妙平衡的瞬间 —— 就像黄昏时分，夕阳的金辉穿过薄雾，既照亮了世界的轮廓，又留下了温柔的阴影，那是自然界最完美的光影杰作，也是我们在数字世界中永远追求的目标。
