three 天空球_ThreeJS 创建简单天空盒

在ThreeJS里创建天空盒(SphereBufferGeometry)，然后给它一个蓝天的渐变效果。TS代码如下：

import * as THREE from 'three'

/**

* Creates a sky box with light blue sky.

*/

export default class SkyUtils {

static NAME = 'SKY'

static vertexShader = '\

varying vec3 vWorldPosition; \

void main() { \

vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); \

vWorldPosition = worldPosition.xyz; \

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); \

}'

static fragmentShader = ' \

uniform vec3 topColor; \

uniform vec3 bottomColor; \

uniform float offset; \

uniform float exponent; \

varying vec3 vWorldPosition; \

void main() { \

float h = normalize( vWorldPosition + offset ).y; \

gl_FragColor