I set the post-processing effect for the scene, I want the curve to glow, other objects will not be affected, now the whole scene is exposed, how should I deal with it, please ask the community to help check, thank you!
I think it would be better to delete that example tbh, it makes the simplest thing ever ridiculously complicated for no reason. bloom is selective ootb, there is nothing else needed, no copy passes, no traversing the scene, all this will only incur extra cost and complexity. Selective Bloom ordering puzzle - #3 by drcmda
And since this is react it’s even easier
import { EffectComposer, Bloom } from '@react-three/postprocessing'
...
<EffectComposer>
<Bloom luminanceThreshold={1} mipmapBlur />
</EffectComposer>
...
// ❌ will not glow, same as RGB [1,0,0]
<meshStandardMaterial color="red"/>
// ✅ will glow, same as RGB [2,0,0]
<meshStandardMaterial emissive="red" emissiveIntensity={2} toneMapped={false} />
// ❌ will not glow, same as RGB [1,0,0]
<meshBasicMaterial color="red" />
// ❌ will not glow, same as RGB [1,0,0], tone-mapping will clamp colors between 0 and 1
<meshBasicMaterial color={[2,0,0]} />
// ✅ will glow, same as RGB [2,0,0]
<meshBasicMaterial color={[2,0,0]} toneMapped={false} />
Yes, the example I showed was adapted from this official example, but I found that I could not set up a single curve to glow, and post-processing would affect the overall effect
Thank you very much for your guidance! React-Three-Fiber is a complete package. Even though I realized the effect very simply using it, I still couldn’t figure out how to reproduce the effect through Three.js. My purpose is to know how the post processing of Three.js works on a single object. Not only does it satisfy the effect of React-Three-Fiber.
it has no relation with react. it is the same in threejs. set threshold to 1, switch off tonemapping, control glow with colors, that is how you select glow in three/examples/jsm/effectcomposer, pmndrs/postprocessing, even in blender. the first link i posted is vanilla. the official example is not how you do it, i have no idea why it is still there.
though i think it’s fair to mention that threejs in react raw makes little sense. r3f is not a library but a renderer, like react-dom. you are expressing threejs in react just like you express the dom in react via jsx, but you’re still writing threejs. there is an eco system for fiber that’s larger than anything you will find in plain three, nor will plain three give you any integration with react.
I really want to know how three.js is set up so that this post-processing only affects one object (Mesh), but has no effect on the other (Mesh). Only looking at the code for React-Three-Fiber, I can’t see how it only affects the sphere in the middle and not the surrounding model. Or is there a similar example (implemented based on Three.js, without React-Three-Fiber code)
This does not address the original issue. Nevertheless it shows an alternative approach without post-processing. A selective bloom can be faked by stacking several objects with decreasing opacity.