Three.js创建天空盒

方式一：使用Cue纹理

const cubeTextureLoader = new THREE.CubeTextureLoader();
    const envMap = cubeTextureLoader.load([
        'texture/pisa/left.png',
        'texture/pisa/right.png',
        'texture/pisa/top.png',
        'texture/pisa/bottom.png',
        'texture/pisa/front.png',
        'texture/pisa/back.png',
    ]);
    scene.background = envMap;
    scene.environment = envMap;

方式二

const rgbeLoader = new THREE.RGBELoader();
rgbeLoader.loadAsync('texture/yuanlin.hdr').then(texture => {
        texture.mapping = THREE.EquirectangularReflectionMapping;
        scene.background = texture;
        scene.environment = texture;
    });

模型材质要想反射环境纹理需要设置金属度和粗糙度

var mat = new THREE.MeshStandardMaterial({// MeshBasicMaterial 无法继承scene的环境贴图，必须使用受光照影响的材质
     metalness: 0.7,// 必须设置金属度和粗糙度才能看到反射的环境纹理
     roughness: 0.1
 });