javascript - 使用 dat.gui 和后处理？

Question

我想使用 dat.gui 调试一些效果，例如 SSAO，但不幸的是，使用 SSAO 更改值没有按预期工作。

我尝试了什么：

    const loadSsao = (intensity) => {
      const normalPass = new NormalPass(scene, camera)

      const ssaoEffect = new SSAOEffect(camera, normalPass.renderTarget.texture, {
        blendFunction: BlendFunction.MULTIPLY, // intentionally set as normal for better debugging
        depthAwareUpsampling: true,
        samples: 50,
        rings: 12,
        distanceThreshold: 0.2, 
        distanceFalloff: 0.0025,
        rangeThreshold: 0.0009,
        rangeFalloff: 0.0001,
        luminanceInfluence: 0,
        radius: 12.5,
        intensity: intensity,
        bias: 0.0
      })
      const renderPass = new RenderPass(scene, camera)
      const effectPass = new EffectPass(camera, ssaoEffect)

     // dat.gui
     const gui = dat.GUI()
     const ssaoFolder = gui.addFolder("SSAO")
     ssaoFolder.add(ssaoEffect, 'intensity', 0, 100, 1)
     ssaoFolder.open()

      composer.addPass(renderPass)
      composer.addPass(normalPass)
      composer.addPass(effectPass)
    }

    loadSsao(12)

我还尝试使用onUpdate()dat.gui 中的函数并执行以下操作：

ssaoFolder.add(ssaoEffect, 'intensity', 0, 100, 1).onUpdate((value) => {
   const normalPass = new NormalPass(scene, camera)

      const ssaoEffect = new SSAOEffect(camera, normalPass.renderTarget.texture, {
        blendFunction: BlendFunction.MULTIPLY, // intentionally set as normal for better debugging
        depthAwareUpsampling: true,
        samples: 50,
        rings: 12,
        distanceThreshold: 0.2, 
        distanceFalloff: 0.0025,
        rangeThreshold: 0.0009,
        rangeFalloff: 0.0001,
        luminanceInfluence: 0,
        radius: 12.5,
        intensity:  value,
        bias: 0.0
      })
      const renderPass = new RenderPass(scene, camera)
      const effectPass = new EffectPass(camera, ssaoEffect)
      composer.addPass(renderPass)
      composer.addPass(normalPass)
      composer.addPass(effectPass)
}

请原谅格式，我真的需要匆忙，因为我正在使用这个包工作：/

有关更多信息，我在 ReactJS/NextJS 环境中使用 Three.js、dat.gui 等，大多数后处理和 threejs 函数都在 useEffect()

标签： javascriptreactjsthree.jspost-processingdat.gui