将threejs 的 scene.background 修改为 exr 图片

可以使用three.js中的EXRLoader和PMREMGenerator来加载和处理EXR图片，然后将其设置为场景的背景。

代码示例：

// 创建一个场景
var scene = new THREE.Scene();

// 创建一个相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建一个渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个球体几何体
var geometry = new THREE.SphereGeometry(5, 60, 40);
var material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    metalness: 0,
    roughness: 1,
});
var sphere = new THREE.Mesh(geometry, material);
// 将球体放置在场景中
scene.add(sphere);

// 创建一个PMREMGenerator以生成环境贴图
var pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();

// 使用EXRLoader加载exr图片
var loader = new THREE.EXRLoader();
loader.load('./textures/myshader.exr', function (texture) {
    // 通过PMREMGenerator处理texture生成环境贴图
    var envMap = pmremGenerator.fromEquirectangular(texture).texture;
    // 设置场景的环境贴图
    scene.environment = envMap;
    // 设置场景的背景
    scene.background = envMap;
    // 移除sphere
    scene.remove(sphere);
    // 重新创建sphere并添加到场景中
    sphere = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({ envMap: envMap }));
    scene.add(sphere);
    // 释放pmremGenerator的资源
    pmremGenerator.dispose();
});

// 设置相机位置
camera.position.z = 10;

// 渲染场景
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    sphere.rotation.y += 0.01;
}
animate();

在上面的示例中，我们加载一个EXR图片作为场景的背景。首先，我们创建一个PMREMGenerator，并使用它处理EXR贴图生成环境贴图。然后，我们将环境贴图设置为场景的environment，并将其设置为场景的背景。最后，我们创建一个球体，并使用环境贴图作为材质的环境贴图，并将其添加到场景中。

需要注意的是，要将图片的尺寸调整为2的幂次方才可以正常加载。另外，需要使用http服务器（例如Apache）运行代码，否则会出现跨域问题。最后，需要及时释放PMREMGenerator的资源。