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的导入顺序如上所示。天空盒子的效果见截图。
天空盒子实际效果截图
大家注意,在实际网络传输中,六张图片大小还是比较大的,直接加载时会出现一种现象,就是先黑一下,过一会才出现天空的图案。最好先设置盒子为不可见,待六张图片全部加载完毕后,再设为可见。