在Three.js中通过相机或渲染器实现全局色调效果（无需修改材质）

当然可以！完全不用逐个调整场景里物体的材质，有两种实用方案能实现这种类似「眼镜滤镜」的全局色调效果，我给你详细拆解：

方案一：后期处理（Post-processing）—— 精准可控的专业方案 #

这是Three.js实现全局视觉效果的标准做法，通过后期处理合成器对整个渲染结果进行着色调整，不仅精准还能叠加其他特效。

实现步骤： #

1. 引入所需的后期处理模块：EffectComposer、RenderPass、ShaderPass（ES6模块可从three/addons/postprocessing/...路径导入）
2. 自定义色调滤镜着色器，在片元着色器中对渲染后的画面颜色进行混合处理
3. 将滤镜通道添加到合成器，替换原有渲染逻辑

示例代码： #

// 初始化后期处理合成器
const composer = new THREE.EffectComposer(renderer);
// 添加基础渲染通道，把场景内容渲染到纹理上
composer.addPass(new THREE.RenderPass(scene, camera));

// 自定义红色滤镜着色器
const redFilterShader = {
  uniforms: {
    tDiffuse: { value: null }, // 接收渲染后的纹理
    filterColor: { value: new THREE.Color(0xff3333) } // 自定义偏亮红色调
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D tDiffuse;
    uniform vec3 filterColor;
    varying vec2 vUv;
    
    void main() {
      vec4 originalColor = texture2D(tDiffuse, vUv);
      // 用线性插值混合原颜色和滤镜颜色，0-1之间的数值控制滤镜强度
      vec4 filteredColor = mix(originalColor, vec4(filterColor, 1.0), 0.5);
      gl_FragColor = filteredColor;
    }
  `
};

// 添加滤镜通道到合成器
const filterPass = new THREE.ShaderPass(redFilterShader);
composer.addPass(filterPass);

// 替换原有渲染逻辑
function animate() {
  requestAnimationFrame(animate);
  composer.render(); // 用合成器渲染替代 renderer.render(scene, camera)
}
animate();

你可以通过调整mix的第三个参数控制滤镜强度，修改filterColor的值切换不同色调，灵活性拉满。

方案二：CSS滤镜—— 零Three.js代码的快速方案 #

如果只是快速实现近似效果，完全可以绕开Three.js逻辑，直接给渲染器的Canvas元素加CSS滤镜，简单高效。

实现代码： #

// 给Canvas添加CSS滤镜，生成偏红的色调效果
renderer.domElement.style.filter = "sepia(80%) hue-rotate(-20deg) saturate(150%)";

// 或者更直接的红色滤镜：
// renderer.domElement.style.filter = "invert(1) sepia(1) saturate(4) hue-rotate(0deg)";

这种方法的优点是无需修改任何Three.js渲染逻辑，调试快；缺点是精度不如后期处理，部分复杂WebGL效果可能和CSS滤镜存在兼容性问题，适合快速原型或对精度要求不高的场景。

如果想要实现更逼真的「眼镜滤镜」（比如仅画面局部生效、滤镜强度渐变），推荐用后期处理方案——你可以在自定义着色器里根据UV坐标或深度信息控制滤镜作用范围，模拟真实眼镜的遮挡效果。

内容的提问来源于stack exchange，提问作者Yevhenii Bahmutskyi