Three.js阴影投射：为修复后的老建筑图片添加真实光照效果-编程阁

Three.js阴影投射：为修复后的老建筑图片添加真实光照效果

在城市更新的浪潮中，那些斑驳的老建筑正悄然消失于街角。而当我们翻出一张泛黄的历史照片，是否能让它不只是静止的记忆？近年来，随着AI图像修复与Web 3D技术的成熟，我们已经可以将一张黑白旧照“唤醒”——不仅还原色彩，更赋予其光影、深度和交互性。

这其中的关键一步，正是将经AI修复的老建筑图像，置于一个具备物理级光照模拟的三维空间中。通过Three.js的阴影系统，原本平面的照片能投下真实的影子，仿佛阳光真的斜照在百年前的屋檐上。这种从2D到3D的跨越，并非炫技，而是让历史真正“立起来”的必要手段。

DDColor黑白老照片智能修复关键技术剖析

要实现有说服力的光照效果，前提是图像本身足够清晰、结构完整。许多老照片因年代久远出现褪色、划痕甚至部分缺失，直接用于纹理贴图会导致渲染失真。这就引出了第一步：图像修复。

DDColor 是当前在历史影像复原领域表现突出的一种深度学习模型。它不同于传统着色工具依赖人工调色，而是基于大规模训练数据自动推断合理的色彩分布，尤其擅长处理建筑类场景中的材质一致性问题——比如红砖墙不会被染成蓝色，木窗框也不会突然变成金属质感。

其核心架构采用Swin Transformer + 双分支解码器的设计思路。骨干网络负责提取图像的语义结构（如窗户、门廊、屋顶轮廓），而两个独立的解码路径分别优化“几何保真度”与“色彩自然性”。这种分离策略避免了颜色扩散污染边缘细节的问题，特别适合线条复杂、层次丰富的老建筑立面。

实际使用时，开发者无需深入模型内部机制。借助 ComfyUI 这一可视化工作流平台，整个修复过程被封装为可拖拽节点：

加载DDColor建筑黑白修复.json工作流，专为建筑图像优化；
上传原始灰度图，设置输出尺寸建议在960–1280px范围内；
模型会自动生成初步上色结果，若对色调不满意，可在ddcolorize节点切换不同预训练权重（例如民国风、殖民地风格等）；
最终导出高清彩色图像，作为后续3D可视化的纹理资源。

值得注意的是，若原始图像存在大面积破损（如墙体断裂、人物遮挡），建议先用 Inpainting 工具进行补全再进入上色流程。否则AI可能会基于错误上下文生成不协调的颜色区域。

另外，虽然高分辨率有助于保留细节，但也会显著增加显存占用。对于普通GPU设备，推荐控制输入尺寸不超过1280px，以平衡质量与效率。

一句话总结：DDColor 不只是“给黑白照上色”，它是对历史视觉信息的一次重建。它的价值在于，在不引入主观臆断的前提下，尽可能逼近当年的真实样貌。

Three.js阴影投射关键技术剖析

有了高质量的修复图像后，下一步是让它“活”在三维空间里。这就要靠 Three.js 出场了。

作为目前最主流的 WebGL 封装库，Three.js 让我们在浏览器中构建复杂3D场景变得轻而易举。而其中最能提升真实感的功能之一，就是阴影投射（Shadow Mapping）。没有阴影的世界是扁平的；有了阴影，物体才真正拥有了体积和位置关系。

阴影不是“画上去”的

很多人误以为阴影是后期叠加的一层暗色贴图，但实际上，Three.js 的阴影机制是一套完整的实时计算流程，本质上是一种深度比较技术。

具体来说，它的工作原理分为两个阶段：

从光源视角“看”一次场景
当你启用directionalLight.castShadow = true后，Three.js 会在后台创建一个虚拟摄像机，位置与方向与光源一致。这个“阴影相机”会先渲染一遍场景，记录每个像素距离光源的最短深度值，形成一张shadow map（阴影贴图），本质上是一张灰度图，越亮表示越靠近光源。
主视角渲染时做遮挡判断
在正常渲染过程中，每一个片元（fragment）都会被投影到光源空间，查询其在 shadow map 中对应的深度。如果当前点比记录的更深，说明它被前面的物体挡住了光线 → 处于阴影中 → 渲染器会降低该点的亮度。

这个过程听起来抽象，但效果非常直观：屋檐会在墙上投下长长的影子，窗框会在地面形成清晰的轮廓，连砖缝间的微小起伏都能反映在明暗变化中。

如何配置才能让阴影“自然”？

虽然机制强大，但如果参数设置不当，反而会出现锯齿、漂浮感或阴影断裂等问题。以下是几个关键调优点：

分辨率控制：.shadow.mapSize.width/height默认为512×512，对于精细建筑纹理明显不够。实践中建议提升至2048×2048，可大幅减少块状伪影。
防止自阴影闪烁：由于浮点精度误差，表面可能错误地认为自己挡住了自己，导致出现“阴影痤疮”（shadow acne）。加入.bias偏移值（通常设为0.0001 ~ 0.0005）即可缓解。
法线补偿：对于倾斜表面，单纯加 bias 可能造成阴影偏移过大。此时可配合.normalBias，根据表面法线方向微调判定阈值。
裁剪范围匹配场景：light.shadow.camera.near/far/left/right/top/bottom构成了阴影相机的视锥体。必须确保它刚好覆盖需要产生阴影的区域。太大则精度下降，太小则边缘被截断。

const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(5, 10, 7); // 斜上方，模拟上午日光 directionalLight.castShadow = true; // 提升阴影质量 directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; // 设置合理的视锥范围 directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 50; directionalLight.shadow.camera.left = -10; directionalLight.shadow.camera.right = 10; directionalLight.shadow.camera.top = 10; directionalLight.shadow.camera.bottom = -10; // 微调防伪影 directionalLight.shadow.bias = 0.0002; directionalLight.shadow.normalBias = 0.05;

同时，别忘了在渲染器层面开启全局支持：

renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 使用软阴影算法

PCF（Percentage Closer Filtering）能让阴影边缘柔和过渡，比硬边阴影更贴近自然光照效果。虽然性能略高，但在现代设备上完全可以接受。

还有一个常被忽略的细节：哪些物体参与阴影计算。你需要显式设置：

mesh.castShadow = true; // 能投射阴影 mesh.receiveShadow = true; // 能接收阴影

比如墙面网格应同时开启两项，而远处的装饰物若不影响整体光影，可关闭castShadow以节省性能。

应用场景分析

这套“AI修复 + 3D光照”的组合拳，已在多个数字文保项目中落地应用。我们可以将其拆解为一条清晰的技术流水线：

[原始黑白老照片] ↓ [ComfyUI + DDColor] → [高清彩色修复图像] ↓ [Three.js 场景构建] ← [加载纹理 + 创建几何体] ↓ [启用阴影光照 + 用户交互] → [浏览器端沉浸式浏览]

整个流程无需编写复杂的训练代码，也无需高性能服务器支撑，完全可以在本地PC完成资产准备后，部署到任意静态Web服务中运行。

实际工作流示例

图像预处理阶段（ComfyUI）
- 打开 ComfyUI 界面，加载DDColor建筑黑白修复.json；
- 上传待修复的老建筑照片，调整 size 参数至 1024 或 1280；
- 运行工作流，等待几秒获得输出；
- 导出为 JPG/PNG 格式，命名如building_restored.jpg。
Three.js 场景搭建
- 初始化场景、相机、渲染器；
- 使用TextureLoader加载修复后的图像；
- 创建平面几何体代表建筑立面：
javascript const geometry = new THREE.PlaneGeometry(8, 6); const material = new THREE.MeshStandardMaterial({ map: buildingTexture }); const building = new THREE.Mesh(geometry, material); building.position.z = 0; building.castShadow = true; building.receiveShadow = true; scene.add(building);
- 添加地面用于承接阴影：
javascript const ground = new THREE.Mesh( new THREE.PlaneGeometry(20, 20), new THREE.MeshStandardMaterial({ color: 0xeeeeee }) ); ground.rotation.x = -Math.PI / 2; ground.position.y = -3; ground.receiveShadow = true; scene.add(ground);
增强体验设计
- 引入OrbitControls，允许用户旋转缩放观察；
- 添加环境光AmbientLight补充暗部细节，避免阴影过重；
- 可选：加入轻微动画，如缓慢移动光源模拟时间流逝。

解决的实际问题

痛点	技术对策
图像平面化，缺乏纵深感	利用Z轴位移与光照角度建立空间层级
上色结果呆板无层次	定向光+阴影突显建筑构件的凹凸关系
展示方式单一，仅能观看	支持交互操作，提升参与感
AI修复门槛高	ComfyUI图形界面实现零代码处理

设计经验分享

纹理映射策略：对于单张立面照，使用PlaneGeometry最为合适。若有多角度图像，可尝试拼接为立方体贴图，或构建简易 BoxGeometry 模拟体块感。
光照角度选择：推荐(x=5, y=10, z=7)这类斜上方位置，类似上午9–10点的日光，能有效形成长投影，突出檐口、阳台等特征结构。避免垂直打光，否则几乎看不到阴影。
性能优化技巧：
移动端可将 shadow map 分辨率降至 1024×1024；
关闭不必要的castShadow；
使用EffectComposer添加 SSAO（环境光遮蔽）提升局部对比度，而非盲目提高 shadow map 精度。
兼容性兜底方案：
检测浏览器是否支持 WebGL 和阴影功能；
若不支持，则降级为仅显示基础光照版本，确保内容可达性。