three.js全景贴图

 1、hdr全景贴图

//导入hdr图像加载器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";//rebe加载器
//1、创建场景
const scene = new THREE.Scene();

// 创建hdr纹理贴图:一个hdr的全景图
const rgbeLoader = new RGBELoader()
rgbeLoader.loadAsync('hdr_1.hdr').then(texture => {
    texture.mapping = THREE.EquirectangularReflectionMapping
    scene.background = texture
    scene.environment = texture
})

2、六个面的全景贴图

//六个面的全景贴图
const loader = new THREE.CubeTextureLoader();
// loader.setPath( 'dist/' );

const textureCube = loader.load( [
	'px.jpg', 'nx.jpg',
	'py.jpg', 'ny.jpg',
	'pz.jpg', 'nz.jpg'
] );
scene.background = textureCube