THREE.JS 实现场景天空包围盒，为了让场景背景更具体，而不是呆板的纯色，可以给厂家添加围绕的包围盒。
- 这里使用球体来实现，球体中央则是场景
- 给球体添加天空的渐变色
- 加入场景
代码如下
function createSky( hemiLight) {
const vertexShader = `varying vec3 vWorldPosition;
void main() {
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
vWorldPosition = worldPosition.xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`
const fragmentShader = `uniform vec3 topColor;
uniform vec3 bottomColor;
uniform float offset;
uniform float exponent;
varying vec3 vWorldPosition;
void main() {
float h = normalize( vWorldPosition + offset ).y;
// 从-0.2 到1做渐变
h = smoothstep(-0.4, 1.0, h);
gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 );
}`
const uniforms = {
'topColor': { value: new THREE.Color(0x0077ff) },
'bottomColor': { value: new THREE.Color(0xeeeeee) },
'offset': { value: 30 },
'exponent': { value: 0.6 }
}
uniforms['topColor'].value.copy(hemiLight.color)
// scene.fog.color.copy( uniforms[ 'bottomColor' ].value );
const skyGeo = new THREE.SphereGeometry(4000, 32, 15)
const skyMat = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vertexShader,
fragmentShader: fragmentShader,
side: THREE.BackSide
})
const sky = new THREE.Mesh(skyGeo, skyMat)
return sky
}
