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
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值