Three.js支持環(huán)境貼圖效果，通過(guò)設(shè)置場(chǎng)景的背景（background），增強(qiáng)顯示效果，環(huán)境貼圖一般使用全景圖，分成6張圖片，以立體貼圖（CubeTexture）的方式進(jìn)行加載。

官網(wǎng)示例效果：

環(huán)境貼圖添加

在Three.js中設(shè)置環(huán)境貼圖的方式如下：

?scene.background

= new THREE.CubeTextureLoader().setPath('相對(duì)目錄文件夾，里邊包含6張貼圖/').load( [

? ? ? ? ? ? ? ? 'posx.jpg',

? ? ? ? ? ? ? ? 'negx.jpg',

? ? ? ? ? ? ? ? 'posy.jpg',

? ? ? ? ? ? ? ? 'negy.jpg',

? ? ? ? ? ? ? ? 'posz.jpg',

? ? ? ? ? ? ? ? 'negz.jpg'

? ? ? ? ? ? ] );?

圖片的排放順序依次是：x軸正方向-x軸負(fù)方向-y軸正方向-y軸負(fù)方向-z軸正方向-z軸負(fù)方向；
按照Three.js創(chuàng)建的默認(rèn)坐標(biāo)系中，圖片對(duì)應(yīng)的方位是：右側(cè)-左側(cè)-上邊-下邊-前邊-后邊；將背景設(shè)置成以上的貼圖即可顯示效果。加載完成效果如下：

在Three.js加載的對(duì)象中，材質(zhì)（material）屬性的envmap設(shè)置成 scene.background，就能夠模擬顯示物體的反光效果，如上圖顯示效果。?const materialbase = new THREE.MeshBasicMaterial( { color: 0x00ff00,envMap:scene.background} );

參考內(nèi)容：

• https://threejs.org/examples/?q=envMap#webgl_materials_envmaps

• https://threejs.org/docs/index.html?q=sce#api/en/scenes/Scene