threejs 饼图+圆环+柱状图+雷达扫光

地址：https://www.wellyyss.cn/demo-3d/#/index7

下面贴出主要shader代码

 

饼图

  function getStr(data) {
        let str = `if(0.0 <= ag && ag <= angle[0]) {
           color1 = color[0];
        }`
        for (let i = 1; i < data.length; i++) {
          str = str + `else if(angle[${i - 1}]<=ag && ag <= angle[${i}]) {
             color1 = color[${i}];
          }`
        }
        return str
      }

      const H = 200
      const shader = {
        vs: `
      varying vec3 vp;
   void main()
   {
        vp = position;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_Position = projectionMatrix * mvPosition;
   }`,
        fs: `
        varying vec3 vp;
        vec3 color1;
        float ag;
        uniform vec3 color[${data.length}];
        uniform float divide[${data.length}];
        uniform float angle[${data.length}];
        void main( void ) {
        ag = atan(vp.x, vp.z) - atan(1.0, 0.0); // atan(x/y) 返回的是-pi/2 -- pi/2  atan(x, y) 返回的是 -pi -- pi
        if (ag < 0.0) ag += 2.0 * 3.1415926;
        ${getStr(data)}
        gl_FragColor = vec4( color1.r,  color1.g,  color1.b, 1.0 );

    }`,
        uniforms: {
          color: {
            type: 'l',
            value: [
              // new THREE.Color('red'),
              // new THREE.Color('yellow'),
              // new THREE.Color('blue'),
              // new THREE.Color('green')
            ]
          },
          angle: {
            type: 'l',
            value: []
          },
          divide: {
            type: 'l',
            value: []
          }
        }
      }

 

雷达

  const shader = {
        vs: `varying vec3 vp;
        varying vec2 vUv;
   void main()
   {
        vp = position;
        vUv = uv;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_Position = projectionMatrix * mvPosition;
   }`,
        fs: ` varying vec3 vp;
        varying vec2 vUv;
        uniform sampler2D texture;
        uniform vec3 color;
        uniform float radius;
        uniform float time;
        uniform float angle;
        float ag;
        const float PI = 3.1415946;
        bool getf(float x, float z) {
          return x * x + z * z <= radius * radius;
        }
        void main( void ) {
          ag = atan(vp.x, vp.z) - atan(1.0, 0.0); // atan(x/y) 返回的是-pi/2 -- pi/2  atan(x, y) 返回的是 -pi -- pi
          if (ag < 0.0) ag += 2.0 * PI;
          float m1 = mod(time, 2.0 * PI);
          float m2 = mod(angle + time, 2.0 * PI);
          float op = 0.0;
          vec4 colorSlef = texture2D( texture, vUv);
          vec4 shaderColor =  vec4( 0.0,  0.0,  0.0, 0.0 );
           if(getf(vp.x, vp.z)) {
              if( m1  < ag  && ag <= m2 ) {
                op = (ag - m1) / angle;
              }  
              else if( m1 > m2 && m1 <= ag  ) {
                op =  (ag - m1) / angle;
              }
              else if(m1 > m2 && ag < m2) {
                op = (angle - m2 + ag) / angle;
              }
           }
            shaderColor = vec4( color.r,  color.g,  color.b,  op);
            gl_FragColor = mix(colorSlef, shaderColor, op);
        }`,
        uniforms: {
          color: {
            type: 'c',
            value: new THREE.Color('red')
          },
          time: {
            type: 'f',
            value: 0
          },
          radius: {
            type: 'f',
            value: 200
          },
          angle: {
            type: 'f',
            value: Math.PI / 2
          },
          texture: {
            type: 't',
            value: texture
          }
        }
      }