Three.js/Shader墙体渐变透明特效

漫漫，

已于 2022-04-07 21:30:06 修改

阅读量5k

点赞数 7

分类专栏： three 文章标签： javascript 前端 css3

于 2021-12-23 16:48:27 首次发布

本文链接：https://blog.csdn.net/qq_44375977/article/details/122111226

版权

three 专栏收录该内容

16 篇文章 27 订阅

订阅专栏

Three.js/Shader墙体渐变透明特效

在这里插入图片描述

生成方法

通过Shader实现透明墙体效果
通过路径解析算法生成不规则墙体
支持颜色/高度/透明度/动画配置

	 /**
       * 创建透明墙体材质
       * option =>
       * params height color opacity speed
       * **/
      const createOpacityWallMat = ({
        height = 10,
        color = "#00ffff",
        opacity = 0.5,
        speed = 1,
      }) => {
        // 顶点着色器
        const vertexShader = `
          uniform vec3 u_color;

          uniform float time;
          uniform float u_height;
          varying float v_opacity;

          void main() {
              vec3 vPosition = position;
              v_opacity = mix(1.0, 0.0, position.y / u_height * 1.0) * (1.0 + sin(time) * 0.5);
              gl_Position = projectionMatrix * modelViewMatrix * vec4(vPosition, 1);
          }
       `;
        // 片元着色器
        const fragmentShader = `
          uniform vec3 u_color;
          uniform float u_opacity;
          varying float v_opacity;
          void main() {
              gl_FragColor = vec4(u_color, v_opacity * u_opacity);
          }
        `;

        return new THREE.ShaderMaterial({
          uniforms: {
            u_height: {
              value: height,
            },
            u_opacity: {
              value: opacity,
            },
            u_color: {
              value: new THREE.Color(color),
            },
            time: {
              value: 0,
            },
            speed: {
              value: speed,
            },
          },
          transparent: true,
          depthWrite: false,
          depthTest: false,
          side: THREE.DoubleSide,
          vertexShader: vertexShader,
          fragmentShader: fragmentShader,
        });
      };

使用

路径解析算法见我的另一篇文章 Three.js通过不规则路径生成墙体

	/ // 路径
      const path = [
        [80, 0, -40],
        [10, 0, 0],
        [60, 0, 50],
        [0, 0, 0],
        [-60, 0, 50],
        [-50, 0, -30],
        [80, 0, -40],
      ];
      const material = createOpacityWallMat({ height: 15, speed: 5 });
      const wallMesh = creatWallByPath({
        path,
        material,
        height: 15,
      });
      // 动画
      animationList.push(() => {
        wallMesh.material.uniforms.time.value +=
        clock.getDelta() * wallMesh.material.uniforms.speed.value;
      });
      scene.add(wallMesh);