3D 场景光照
本页演示 Light3D 组件与 金属-粗糙度 PBR 材质（Cook-Torrance 微表面 BRDF，类似 three.js MeshStandardMaterial）配合：环境光打底、冷色平行光作填充，暖色 聚光灯 绕场景中心轨道运动，三个不同 metallic / roughness 参数的物体便于对比粗糙电介质、抛光金属与光滑电介质。
实现参考 packages/webcomponents/examples/main.ts 与 课程 39 — 3D Mesh 渲染。
交互示例
要点
- 光源类型：
ambient只贡献颜色/强度；directional、point、spot写入场景光源数组（上限 8 盏，见mesh3dshader）。 - 自定义光源：spawn 任意
Light3D后会 替换 默认环境光 + 平行光组合；若未提供directional，渲染器会自动补一盏弱平行光，避免 mesh 全黑。 - 坐标系：
position/direction使用与Transform3D相同的 画布世界单位（linked 模式下约 1 px）；direction指向被照亮的场景，渲染器会归一化。 - 聚光灯：
innerConeAngle/outerConeAngle为弧度；range <= 0表示不做距离衰减（与 webcomponents 示例一致）。 - 材质：
Material3D采用 金属-粗糙度 工作流。metallic（0 为电介质，1 为金属）与roughness（0 为镜面光滑，1 为完全粗糙）控制 Cook-Torrance 高光响应，baseColor为反照率（金属的反射也由其着色）。旧字段ambient/diffuse/specular/shininess为向后兼容保留——ambient仍缩放环境光项，但diffuse/specular/shininess不再影响着色。 - 动画：每帧
spotLight.write(Light3D)更新位置与方向；MeshPipeline3D检测到组件变更后重绘。
与立方体示例的差异
| 项目 | cube-perspective | 本页 |
|---|---|---|
| 光源 | 渲染器默认 ambient + directional | 显式 spawn 多盏 Light3D |
| 物体 | 单个白色立方体 | 三个不同材质参数的立方体 |
| 动态效果 | 仅 mesh 旋转 | mesh 旋转 + 聚光灯轨道 |
| 默认工具 | 选择 | 选择（Pick3D 需 Select 工具） |