React Three Fiber：如何仅为GLB模型而非全画布应用指定视觉效果

针对你遇到的后处理效果作用于整个画布的问题，有以下几种可行方案，只对目标GLB模型应用对比度、饱和度等效果，不影响场景其他元素：

方案1：使用Render Target单独渲染模型 #

核心思路是把目标模型单独渲染到一个离屏纹理（Render Target），再将这个纹理贴到场景中的一个平面上，然后仅对这个平面应用后处理效果。主场景的背景、其他对象不受任何影响。

import { useRef, useMemo } from 'react'
import { useThree, useFrame, useLoader } from '@react-three/fiber'
import { EffectComposer, BrightnessContrast, HueSaturation } from '@react-three/postprocessing'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import * as THREE from 'three'

export default function ModelWithIsolatedEffects() {
  const { gl, camera } = useThree()
  const modelRef = useRef()
  // 创建渲染目标，分辨率可根据需求调整
  const renderTarget = useMemo(() => new THREE.WebGLRenderTarget(1920, 1080), [])

  // 每帧单独渲染模型到离屏纹理
  useFrame(() => {
    if (!modelRef.current) return
    // 切换到渲染目标
    gl.setRenderTarget(renderTarget)
    // 仅渲染模型组
    gl.render(modelRef.current, camera)
    // 切回主画布
    gl.setRenderTarget(null)
  })

  return (
    <>
      {/* 主场景元素：背景、其他3D对象、灯光 */}
      <ambientLight intensity={0.4} />
      <directionalLight position={[3, 4, 5]} intensity={1.2} />
      {/* 示例其他对象，不受后处理影响 */}
      <mesh position={[-3, 0, 0]}>
        <torusGeometry />
        <meshStandardMaterial color="#ff4444" />
      </mesh>

      {/* 显示处理后模型的平面 */}
      <mesh position={[3, 0, 0]}>
        <planeGeometry args={[6, 3.375]} />
        <meshBasicMaterial map={renderTarget.texture} />
      </mesh>

      {/* 仅对这个平面应用后处理 */}
      <EffectComposer>
        <BrightnessContrast contrast={0.25} />
        <HueSaturation saturation={1.4} />
      </EffectComposer>

      {/* 待处理的GLB模型：设置为不可见，只用于离屏渲染 */}
      <group ref={modelRef} visible={false}>
        <primitive object={useLoader(GLTFLoader, '/your-model.glb').scene} />
      </group>
    </>
  )
}

方案2：为模型材质注入自定义Shader逻辑 #

如果不想额外管理渲染目标，可以直接修改模型的材质，在Shader中嵌入对比度、饱和度的计算代码。这种方式更轻量化，效果直接作用于模型本身。

import { useRef, useEffect, useMemo } from 'react'
import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { ShaderMaterial, MeshStandardMaterial } from 'three'

// 自定义带对比度、饱和度调节的材质
const AdjustedMaterial = ({ baseMat, contrast = 1, saturation = 1, ...props }) => {
  const customShader = useMemo(() => {
    // 基于标准PBR材质的Shader扩展
    const baseShader = MeshStandardMaterial.defaultShader
    return {
      ...baseShader,
      fragmentShader: `
        uniform float contrast;
        uniform float saturation;

        // 对比度调节函数
        vec3 applyContrast(vec3 color, float amount) {
          return clamp((color - 0.5) * amount + 0.5, 0.0, 1.0);
        }

        // 饱和度调节函数
        vec3 applySaturation(vec3 color, float amount) {
          const vec3 luminanceWeights = vec3(0.2126, 0.7152, 0.0722);
          float luminance = dot(color, luminanceWeights);
          return mix(vec3(luminance), color, amount);
        }

        ${baseShader.fragmentShader.replace(
          'vec4 diffuseColor = vec4( diffuse, opacity );',
          `
            vec4 diffuseColor = vec4( diffuse, opacity );
            // 应用效果
            diffuseColor.rgb = applyContrast(diffuseColor.rgb, contrast);
            diffuseColor.rgb = applySaturation(diffuseColor.rgb, saturation);
          `
        )}
      `,
      uniforms: {
        ...baseShader.uniforms,
        contrast: { value: contrast },
        saturation: { value: saturation },
        // 继承原材质的纹理等属性
        map: { value: baseMat.map },
        metalness: { value: baseMat.metalness },
        roughness: { value: baseMat.roughness }
      }
    }
  }, [baseMat, contrast, saturation])

  return <shaderMaterial {...props} shader={customShader} />
}

export default function GLBModelWithShaderEffects() {
  const gltf = useLoader(GLTFLoader, '/your-model.glb')
  const modelRef = useRef()

  useEffect(() => {
    // 遍历模型所有网格，替换材质
    modelRef.current.traverse((child) => {
      if (child.isMesh && child.material) {
        child.material = new AdjustedMaterial({
          baseMat: child.material,
          contrast: 0.3,
          saturation: 1.5
        })
      }
    })
  }, [gltf])

  return <primitive object={gltf.scene} ref={modelRef} />
}

注意事项 #

• 方案1中，渲染目标的分辨率建议和主画布匹配，避免模型显示模糊；如果模型有动画，确保渲染逻辑在每帧都执行。
• 方案2中，替换材质时要保留原材质的所有关键属性（如纹理、透明、金属度等），避免模型视觉表现异常。
• 曝光效果可以通过修改渲染目标的色调映射参数，或者在自定义Shader中添加曝光计算逻辑实现。

内容的提问来源于stack exchange，提问作者Aruna Keshavaiah