three.js 天空盒子使用方法

ゝ一世哀愁。 2022-07-17 04:25 155阅读 0赞

# 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的导入顺序如上所示。天空盒子的效果见截图。  
![天空盒子实际浏览效果][20160831154719561]

#### 天空盒子实际效果截图 ####

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

[20160831154719561]: /images/20220717/67823aa50ca24be88743218737ca3f8a.png