Search code examples
reactjsthree.jsfbxreact-three-fiber

How Can I Create A Glow Effect on an Imported FBX Object in R3F?


I am currently playing around with a react-three-fiber project and I'm looking to create a glow effect around individual meshes in a scene (that are imported from Blender), similar to what is done here: https://100gecs.com/

I have tried experimenting with Bloom Postprocessing but I have found that

a) It slows down performance significantly b) It applies to all meshes and I cannot target just one

Does anyone have advice for other techniques for this effect? Or if Bloom is the only way to go about it, are there methods for targeting a single mesh for the effect?

I'm very new to ThreeJS so i'm unsure where else to look for help on this specific issue! Let me know if I can clarify anything further


Solution

  • a) It slows down performance significantly

    Well, the unreal bloom pass is not a cheap post processing pass since it requires multiple renderings to produce a single frame.

    b) It applies to all meshes and I cannot target just one

    There is an official three.js example that shows how you can selectively apply bloom to objects in your scene.

    https://threejs.org/examples/#webgl_postprocessing_unreal_bloom_selective

    There are also other techniques to produce a fake bloom/glow effect which do not require the above bloom pass. You should find information about this topic right here:

    three.js outer glow for sphere object?