渲染质量
光照
- 必须配置基于图像的环境光照(IBL),不得仅使用
AmbientLight。推荐方案为内置程序化室内环境,无需外部资源文件、无网络请求与 CSP 限制:const pmrem = new THREE.PMREMGenerator(renderer) const envRT = pmrem.fromScene(new RoomEnvironment()) // envRT 要留着——卸载时要释放它 scene.environment = envRT.texture - 环境光强度应适当调低(参考值:
scene.environmentIntensity ≈ 0.4;深色部件使用较低的envMapIntensity)以保持画面对比度,并叠加一盏柔和方向光提供光照方向感。
色调映射
必须启用 ACES 色调映射:
renderer.toneMapping = THREE.ACESFilmicToneMapping
该配置可显著改善 MeshStandardMaterial / MeshPhysicalMaterial 的材质质感。
材质
- 推荐使用 canvas 生成的程序化噪声纹理,同时作为
map与bumpMap,以低成本呈现物理材质感。这张纹理只建一次、跨重建复用;什么时候释放见参数变化与重建。 ExtrudeGeometry的 UV 坐标就是以 mm 为单位的世界坐标,texture.repeat必须按物理尺寸换算:先定一块纹理该铺多少 mm,再取repeat = 1 / 铺展mm数(木纹一个循环 45mm 就是1/45)。写死重复次数的话,零件一改尺寸纹理就跟着缩放了。- 2D 画布使用的程序化材质 SVG 可渲染至 canvas 后创建
CanvasTexture供 3D 复用,保证 2D / 3D 材质观感一致。顶面 UV:在模型以原点为中心(世界坐标从 −R 到 +R)的前提下,repeat = 1/(2R)加offset = 0.5正好把这段映射到 0–1。 - 推荐按面分组配置材质数组
[faceMat, sideMat](group 0 为顶/底面,group 1 为侧面),侧面颜色略深以增强立体感。
HDRI 环境(可选)
如需更高的环境真实度,可打包一张小尺寸 CC0 授权的 1k .hdr 文件(约 1.5MB):经 PMREM 处理后作为 scene.environment,原始 equirect 纹理作为 scene.background 并配置适度的 backgroundBlurriness;文件加载期间以 RoomEnvironment 作为即时占位。
实现时需注意以下事项:
- 俯视相机的视线会指向全景图的天顶 / 地面区域(全景图中最平坦的部分),导致背景退化为单一模糊色块。应通过
backgroundRotation与environmentRotation将地平线区域调整至主体背后,并将默认相机角度设置得更平缓。 - 背景亮度应明显低于主体,保证模型剪影与孔洞清晰可读。