three.js 实现渐变背景

要在 three.js 中实现渐变背景，可以使用 ShaderMaterial 来创建一个着色器材质，并使用着色器代码实现渐变效果。

首先，需要准备好着色器代码。这里假设你想在背景上实现从红色到蓝色的垂直渐变。你可以使用下面的着色器代码实现这个效果：

// 顶点着色器
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

// 片段着色器
uniform vec2 resolution;
varying vec2 vUv;
void main() {
  vec3 color = vec3(vUv.y, 0.0, 1.0 - vUv.y);
  gl_FragColor = vec4(color, 1.0);
}

然后，可以使用这段着色器代码来创建 ShaderMaterial：

var uniforms = {
  resolution: { value: new THREE.Vector2() }
};

var material = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: vertexShader,
  fragmentShader: fragmentShader
});

最后，你可以使用这个材质来创建一个平面几何，并将其添加到场景中。

var geometry = new THREE.PlaneBufferGeometry(2, 2);
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);

这样就可以在 three.js 中实现渐变背景了。