three.js 使用 html div 给 Three.js 场景添加背景图的方法实现

其实，给 Three js 场景的方式很多，主要如下：

1、renderer 一般只能添加背景色，不过可以使用 scene.background 可以添加背景图
2、在场景的远处添加 较大的 plane 占满屏幕，给 plane 添加图片也可以
3、利用 threejs 的EffectComposer渲染通道来添加背景图
4、使用 html 中的 div 添加图片来进行设置

这里使用第四种方式实现。

 

三、实现原理

1、在 html 中添加一个 div 节点作为背景显示节点

2、设置该 div 的 css style 样式，添加背景图

3、three 创建的 renderer ，设置 alpha : true

const renderer = new THREE.WebGLRenderer({alpha:true});

 

四、注意事项
1、在 three 创建的 renderer ，设置 alpha : true 的时候，不要再设置 renderer.setClearColor，和 scene.background ，不然会使 alpha : true  失效，阻挡背景图显示

2、背景图 div 的 css style 样式，值得注意的是 position 建议为 abosulte，width和height 要设置好，要铺满全背景，而不是重复平铺，设置 background-size: 100% 100%

3、如果背景图 div 有阻挡交互的时候，可以设置 css style 样式的 z-index 的值尽可能小些，可为负数