three.js 背景模糊的另类实现方法

<div id="pos" style="background: transparent;width: 890px;height: 590px;float: right;position: absolute;left:190px;right:0;top:0;bottom:0;z-index:2"></div>
<div id="pos2" style="filter: blur(0);width: 890px;height: 590px;float: right;position: absolute;left:190px;right:0;top:0;bottom:0;z-index:1"></div>

然后在js文件写上加载gltf的代码，
var camera, scene,scene2,renderer,renderer2,camera2,controls,controls2;//注意这里摄像机，控制器，场景，渲染器都是2套，其中一套是前景模型，一套是背景hdr图片
renderer=new THREE.WebGLRenderer( { antialias: true, alpha: true , logarithmicDepthBuffer: true   } );
renderer2=new THREE.WebGLRenderer( { antialias: true, alpha: true , logarithmicDepthBuffer: true   } );
    camera = new THREE.PerspectiveCamera( camerafov, 89 /59,0.001, 600000 );
    camera2 = new THREE.PerspectiveCamera( camerafov, 89 /59,0.001, 600000 );
    scene = new THREE.Scene();
    scene2 = new THREE.Scene();

    controls = new OrbitControls( camera, renderer.domElement );
    controls2 = new OrbitControls( camera2, renderer2.domElement );

以下gltf加载器代码省略，官方文档都可以查到的，
把glt加入  scene.add( gltf.scene );
然后加入天空球到scene2
    let texture1=new THREE.TextureLoader().load('图片路径');
                let sphere4=new THREE.SphereBufferGeometry(10000,30,30);
                sphere4.scale(-1,1,1);
                let material1=new THREE.MeshBasicMaterial({map:texture1});
                let sphere5=new THREE.Mesh(sphere4,material1);
               scene2.add(sphere5);
然后需要注意的是把渲染器分别加入容器pos和pos2,
    document.getElementById('pos').appendChild( renderer.domElement );

    document.getElementById('pos2').appendChild( renderer2.domElement );
我们可以通过更改pos2容器的模糊度和亮度等来单独控制背景层
最后在function animate() {

    
        renderer2.render(scene,camer);//执行渲染操作

        renderer2.render(scene2,camera2);//执行渲染操作}
我们可以通过以下代码改变pos2的模糊度
 document.getElementById("pos2").style.filter='blur('+虚化值变量+'px'+')';
改变亮度
  renderer2.toneMappingExposure =数值变量;