Three.js开发：环境贴图效果

Three.js支持环境贴图效果，通过设置场景的背景（background），增强显示效果，环境贴图一般使用全景图，分成6张图片，以立体贴图（CubeTexture）的方式进行加载。

官网示例效果：

环境贴图添加

在Three.js中设置环境贴图的方式如下：

 scene.background

= new THREE.CubeTextureLoader().setPath('相对目录文件夹，里边包含6张贴图/').load( [

                'posx.jpg',

                'negx.jpg',

                'posy.jpg',

                'negy.jpg',

                'posz.jpg',

                'negz.jpg'

            ] ); 

图片的排放顺序依次是：x轴正方向-x轴负方向-y轴正方向-y轴负方向-z轴正方向-z轴负方向；
按照Three.js创建的默认坐标系中，图片对应的方位是：右侧-左侧-上边-下边-前边-后边；将背景设置成以上的贴图即可显示效果。加载完成效果如下：

在Three.js加载的对象中，材质（material）属性的envmap设置成 scene.background，就能够模拟显示物体的反光效果，如上图显示效果。 const materialbase = new THREE.MeshBasicMaterial( { color: 0x00ff00,envMap:scene.background} );

参考内容：

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

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