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

Three.js支持环境贴图效果,通过设置场景的背景(background),增强显示效果,环境贴图一般使用全景图,分成6张图片,以立体贴图(CubeTexture)的方式进行加载。
官网示例效果:
Three.js开发:环境贴图效果_第1张图片
环境贴图添加:
在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开发:环境贴图效果_第2张图片
在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
Three.js开发:环境贴图效果_第3张图片

你可能感兴趣的:(gis,three.js,贴图)