mix混入函数

最新推荐文章于 2024-09-11 14:24:41 发布

爱吃土豆丝嗯z

最新推荐文章于 2024-09-11 14:24:41 发布

阅读量5.3k

点赞数

分类专栏： Three 文章标签： three.js shader

本文链接：https://blog.csdn.net/qq_39503511/article/details/113434135

版权

Three 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了如何在THREE.js中使用mix函数实现颜色的线性混叠，通过实例展示了如何结合顶点着色器和片段着色器来创建动态效果。重点在于代码演示和理解mix(x, y, a)的数学原理，最终效果表现为颜色从一种平滑过渡到另一种。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mix混入函数

概述

概述

记录一下使用mix函数的过程，公式为：
mix(x, y, a): x, y的线性混叠， x(1-a) + y*a; a为0 结果为x, a为1 结果为y
先看代码

let shader = {
    vs: `
      varying vec2 v_uv;
      void main() {
        v_uv = uv;
        gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
      }
        `,
    fs: `
      varying vec2 v_uv;
      vec3 colorA = vec3(0.0,0.0,1.0);
      vec3 colorB = vec3(1.0,0.0,0.0);
      void main() {
        // mix(x, y, a): x, y的线性混叠， x(1-a) + y*a;  a为0 结果为x, a为1 结果为y
        vec3 color = mix(colorA, colorB, v_uv.x);
        gl_FragColor = vec4(color, 1.0);
      }
        `,
    uniform: {
    }
  }

  let geometry = new THREE.PlaneBufferGeometry(20, 20);

  let material = new THREE.ShaderMaterial({
    vertexShader: shader.vs,
    fragmentShader: shader.fs,
    uniforms: shader.uniform,
    transparent: true,
    side: THREE.DoubleSide
  })

  let mesh = new THREE.Mesh(geometry, material);
  mesh.rotateX(-Math.PI / 2);
  scene.add(mesh);