方式一:使用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
});