three.js 天空盒子使用方法

Three.js 天空盒子使用方法研究

所谓的天空盒子就是一个超级大的BOX盒子,在渲染手段上使用了skyboxShader而已,这个shader存在于THREE.js库中。
稍微详细一点展开,天空盒子分为六个方形的图片。

function makeSkybox( urls, size ) {
                var skyboxCubemap = new THREE.CubeTextureLoader().load( urls );
                skyboxCubemap.format = THREE.RGBFormat;

                var skyboxShader = THREE.ShaderLib['cube'];
                skyboxShader.uniforms['tCube'].value = skyboxCubemap;
                console.log('执行了添加天空盒子语句');

                return new THREE.Mesh(
                    new THREE.BoxGeometry( size, size, size ),
                    new THREE.ShaderMaterial({
                        fragmentShader : skyboxShader.fragmentShader, 
                        vertexShader : skyboxShader.vertexShader,
                        uniforms : skyboxShader.uniforms, 
                        depthWrite : false, 
                        side : THREE.BackSide
                    })
                );
            }

urls是一个数组,包含六张照片的地址
size是天空盒子的大小,不宜太小,根据场景内其他物体的大小设置
相机的视野要大于天空盒子的边长才行,否则会出现黑色现象。

scene.add( makeSkybox( [
                'textures/skybox/px.jpg', // right
                'textures/skybox/nx.jpg', // left
                'textures/skybox/py.jpg', // top
                'textures/skybox/ny.jpg', // bottom
                'textures/skybox/pz.jpg', // back
                'textures/skybox/nz.jpg'  // front
            ], 8000 ));

天空盒子urls的导入顺序如上所示。天空盒子的效果见截图。
天空盒子实际浏览效果

天空盒子实际效果截图

大家注意,在实际网络传输中,六张图片大小还是比较大的,直接加载时会出现一种现象,就是先黑一下,过一会才出现天空的图案。最好先设置盒子为不可见,待六张图片全部加载完毕后,再设为可见。

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值