着色器实现一条直线从一个颜色渐变到另一个颜色

112 阅读1分钟
createGradualLine(fromVector3, toVector3) {
      let arr = [
        fromVector3.x,
        fromVector3.y,
        fromVector3.z,
        toVector3.x,
        toVector3.y,
        toVector3.z,
      ];
      var geometry = new THREE.BufferGeometry();
      var positions = new Float32Array(arr);
      geometry.setAttribute(
        "position",
        new THREE.BufferAttribute(positions, 3)
      );

      // 将颜色从 0x53c7cb 转换成 0xffffff
      var colors = new Float32Array([0.329, 0.78, 0.796, 1, 0, 0]);
      var colorAttribute = new THREE.BufferAttribute(colors, 3);
      geometry.setAttribute("color", colorAttribute);

      // 创建THREE.ShaderMaterial
      var material = new THREE.ShaderMaterial({
        vertexShader: `
    attribute vec3 color;
    varying vec3 vColor;
    void main() {
      vColor = color;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    varying vec3 vColor;
    void main() {
      float distance = distance(vColor, vec3(0.329, 0.780, 0.796));
      float t = smoothstep(0.9, 1.0, distance); // 将0.9改为其他数字,调整颜色渐变的距离
      gl_FragColor = vec4(mix(vec3(0.329, 0.780, 0.796), vec3(1.0, 1.0, 1.0), t), 1.0);
    }
  `
      });

      // 创建THREE.Line
      var line = new THREE.Line(geometry, material);
      return line;
    },