web3d-three.js场景设计器-天空包围盒-TWEEN.js

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

}