Three.js -帧，将纹理颜色替换为着色器

Three.js 帧与着色器应用基础概念

帧（Frame）：在动画和图形渲染中，一帧指的是屏幕上显示的一幅静态图像。连续的帧快速播放就形成了动态效果。

着色器（Shader）：是一种特殊的程序，用于在GPU上执行，控制图形的渲染过程。主要包括顶点着色器和片段着色器。

类型

顶点着色器：处理顶点数据，如位置、颜色等。
片段着色器：处理像素级别的渲染，决定每个像素的颜色。

应用场景

实时渲染：游戏、虚拟现实、增强现实等领域。
数据可视化：科学计算结果的图形展示。
艺术创作：生成独特的视觉艺术作品。

示例代码：使用着色器替换纹理颜色

假设我们有一个纹理，并希望使用着色器来改变其颜色。

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个平面几何体
const geometry = new THREE.PlaneGeometry(10, 10);

// 加载纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/your/texture.jpg');

// 创建自定义着色器材质
const material = new THREE.ShaderMaterial({
  uniforms: {
    texture: { value: texture },
    color: { value: new THREE.Color(0xff0000) } // 要替换的颜色
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D texture;
    uniform vec3 color;
    varying vec2 vUv;
    void main() {
      vec4 texel = texture2D(texture, vUv);
      gl_FragColor = vec4(color, texel.a); // 替换颜色，保留原纹理的透明度
    }
  `
});

// 创建网格并添加到场景中
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 设置相机位置
camera.position.z = 15;

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();