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