threejs 填充颜色渐变色

Three.js 中使用渐变色填充几何体可以使用 ShaderMaterial。ShaderMaterial 是一种特殊类型的材质，它允许使用自定义着色器来渲染几何体。可以通过定义顶点着色器和片段着色器来实现渐变色。

下面是一个示例代码：

// 创建一个球体
const geometry = new THREE.SphereGeometry(1, 32, 32);
// 创建一个 ShaderMaterial
const material = new THREE.ShaderMaterial({
  uniforms: {
    startColor: { value: new THREE.Color(0xff0000) },
    endColor: { value: new THREE.Color(0x0000ff) },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  fragmentShader: `
    uniform vec3 startColor;
    uniform vec3 endColor;
    varying vec2 vUv;
    void main() {
      vec3 color = mix(startColor, endColor, vUv.y);
      gl_FragColor = vec4(color, 1.0);
const sphere = new THREE.Mesh(geometry, material);
在这个示例中，我们使用了两个 uniform 变量 startColor 和 endColor 来存储渐变的起始颜色和终止颜色。我们在片段着色器中使用函数 mix() 来结合这两个颜色和顶点的纵坐标 vUv.y 来计算出最终颜色。然后将最终颜色赋值给 gl_FragColor 。这样我们就可以在球体上看到颜色从红色渐变到蓝色。