在HTML5三维建模场景中，灯光的设置直接决定了模型的视觉呈现效果，合理的打光能让原本扁平的模型呈现出丰富的层次感和立体感，是提升场景真实度的核心环节。
HTML5建模常用灯光类型
HTML5三维建模常用的光源类型各有特点，开发者需要根据场景需求选择合适的光源：
- 环境光（AmbientLight）：均匀照亮场景中所有物体，没有方向，不会产生阴影，主要用来提升场景整体亮度，避免暗部完全黑掉。
- 平行光（DirectionalLight）：光线从固定方向照射，类似太阳光，会产生清晰的阴影，适合作为主光源突出模型轮廓。
- 点光源（PointLight）：从一个点向四周发射光线，类似灯泡，光照强度随距离衰减，适合模拟局部照明效果。
- 聚光灯（SpotLight）：从一个点向特定方向发射锥形光线，类似手电筒，可调整照射角度和范围，适合突出特定模型区域。
基础灯光设置方法
以Three.js这个常用的HTML5三维库为例，不同类型的灯光设置代码示例如下：
// 引入Three.js核心库 import * as THREE from 'three'; // 1. 创建环境光 参数分别为光照颜色和强度 const ambientLight = new THREE.AmbientLight(0xffffff, 0.4); // 将环境光添加到场景中 scene.add(ambientLight); // 2. 创建平行光 参数分别为光照颜色、强度 const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); // 设置平行光的位置 x,y,z坐标 directionalLight.position.set(10, 20, 15); // 开启平行光阴影投射 directionalLight.castShadow = true; // 将平行光添加到场景 scene.add(directionalLight); // 3. 创建点光源 const pointLight = new THREE.PointLight(0xff9900, 0.6, 100); // 设置点光源位置 pointLight.position.set(-10, 10, 0); // 添加到场景 scene.add(pointLight); // 4. 创建聚光灯 const spotLight = new THREE.SpotLight(0x00ff00, 0.7); spotLight.position.set(0, 15, 0); // 设置聚光灯照射目标为场景中心 spotLight.target.position.set(0, 0, 0); // 设置聚光灯的照射角度（弧度） spotLight.angle = Math.PI / 6; // 添加到场景 scene.add(spotLight); scene.add(spotLight.target);
提升模型立体感的打光技巧
1. 主光+补光组合配置
不要只使用单一光源，建议采用主光加补光的组合。主光选择平行光，设置在模型左上方45度位置，强度设置为0.7-0.9，用来突出模型的主要轮廓和受光面；补光选择环境光或者低强度点光源，强度设置为0.3-0.5，用来照亮主光产生的暗部，避免暗部细节丢失，这样能让模型明暗层次更丰富。
2. 调整光照角度和距离
平行光的角度不要正对模型，否则会让模型看起来扁平，建议倾斜30-60度，既能产生明显的明暗对比，又不会让阴影过重。点光源和聚光灯的距离要适中，距离太近会导致局部过亮，距离太远则照明效果不明显，可根据模型大小调整，一般距离模型中心10-20个单位效果较好。
3. 合理设置阴影参数
开启阴影能让模型与地面或者周围物体产生自然的投影，进一步增强立体感。需要调整阴影的模糊度、范围和分辨率，避免阴影边缘过于生硬或者出现锯齿。示例代码如下：
// 设置平行光阴影相关参数 directionalLight.shadow.mapSize.width = 2048; // 阴影贴图宽度 directionalLight.shadow.mapSize.height = 2048; // 阴影贴图高度 directionalLight.shadow.camera.near = 0.5; // 阴影相机近平面 directionalLight.shadow.camera.far = 50; // 阴影相机远平面 directionalLight.shadow.bias = -0.001; // 阴影偏移 避免阴影闪烁 // 开启渲染器的阴影映射 renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 柔和阴影类型
4. 匹配场景色调调整光照颜色
光照颜色要和场景整体色调匹配，比如冷色调场景可以使用偏蓝的白色光，暖色调场景可以使用偏黄的白色光。如果模型本身颜色较深，可适当提高光照强度，避免模型看起来灰暗；如果模型颜色较浅，可降低光照强度，避免过曝丢失细节。
常见问题排查
如果设置灯光后模型还是没有立体感，可以排查以下几个问题：
- 是否开启了模型的阴影接收和投射属性，需要将模型的
castShadow和receiveShadow属性设置为true。 - 光照强度是否过高或过低，过高会导致明暗对比消失，过低则整体偏暗。
- 是否缺少补光，单一主光会让暗部完全黑掉，丢失立体层次。
注意：HTML5建模的灯光设置没有固定标准，需要根据具体模型特点和场景需求灵活调整参数，多尝试不同的组合才能达到最佳效果。