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

// 创建场景、相机和渲染器
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();