基于three.js的固定光源网页法线贴图背景功能需求问询

我希望在网站背景中使用法线贴图，参考了一个基于three.js实现的效果案例。作为three.js新手，我提出以下功能需求：

核心必需需求 #

• 固定光源而非跟随光标：移动端无鼠标，且光标跟随效果易分散注意力，需要将光源固定在页面中心这类位置，随页面滚动与背景产生交互
• 支持在小div内部署背景图：当前案例效果似乎绑定到body元素或整个window上，希望能将效果限定在指定的较小div中，无需覆盖整页
• 多背景图共享光照：可定义多个启用法线贴图的背景图，共享同一光源以保证场景光照连贯性，建议光源位置按窗口width和height的百分比设置，降低实现难度
• 图像纹理平铺：实现类似CSS中background-repeat属性的纹理平铺效果，适配three.js的实现方式

非必需补充需求 #

• HDR图像IBL光照替代点光源：支持用低分辨率HDR图像基于图像光照（IBL）照亮场景，避免页面体积臃肿
• 设备传感器/滚动视差交互：可响应移动设备加速度计微调背景或光源位置（iOS默认无法获取加速度计数据时，采用滚动视差替代）

内容的提问来源于stack exchange，提问作者Mentalist