# React-3-fiber adding selective bloom effect to parts of imported glTF model

**URL:** <https://discourse.threejs.org/t/react-3-fiber-adding-selective-bloom-effect-to-parts-of-imported-gltf-model/43726>\
**Category:** Questions\
**Tags:** react-three-fiber\
**Created:** [October 17, 2022, 6:55pm UTC](https://discourse.threejs.org/t/react-3-fiber-adding-selective-bloom-effect-to-parts-of-imported-gltf-model/43726 "2022-10-17T18:55:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mdar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mdar/32/25105_2.png) [@mdar](https://discourse.threejs.org/u/mdar)\
**Post date:** [October 17, 2022, 6:55pm UTC](https://discourse.threejs.org/t/react-3-fiber-adding-selective-bloom-effect-to-parts-of-imported-gltf-model/43726/1 "2022-10-17T18:55:47Z")

</div>

Hello, I am importing a glTF model, and I would like to add bloom to produce a simple glowing effect on certain parts of the model.

Here is my code so far. I noticed that the bloom effects from Blender don’t get exported with glTF – also I tried a spotlight and a point light and didn’t like the look of it. I’ve seen some examples of selective bloom but I’m having a hard time understanding how to implement it here

import {Canvas, useLoader} from “@react-three/fiber”;  
import {OrbitControls, useAnimations} from ‘@react-three/drei’;  
import {useRef, Suspense, useState} from “react”;  
import cube from “./glow3005.gltf”;  
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader’;

export function Model(props) {  
const group = useRef();  
const gltf = useLoader(GLTFLoader, cube);

return (  
//Group collection of meshes, some of which I want to give selective bloom  
)  
}

//Main output  
export default function FiberProto() {  
return (  
//Canvas  
//Suspense  
//Model  
);

}  
Here’s a screen shot of some of my code just because the markup here I think is scrubbing the code.  
I’d like to give one of these meshes a selective bloom

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/5/05a88b8b7a4e499bac8b099f698c16d8bd8e71ff.png)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [October 18, 2022, 7:30am UTC](https://discourse.threejs.org/t/react-3-fiber-adding-selective-bloom-effect-to-parts-of-imported-gltf-model/43726/2 "2022-10-18T07:30:38Z")

</div>

bloom is not transferred in gltf, you need effects. thankfully this is super easy

either three/addons/postprocessing

> **[bloom hdr workflow - CodeSandbox](https://codesandbox.io/s/bloom-hdr-workflow-gnn4yt)**
>
> bloom hdr workflow by drcmda using @react-three/drei, @react-three/fiber, @types/three, leva, react, react-dom, react-scripts, three

or pmndrs/postprocessing

> **[Diamond ring - CodeSandbox](https://codesandbox.io/s/diamond-ring-4gy946)**
>
> Diamond ring by drcmda using @react-three/drei, @react-three/fiber, @react-three/postprocessing, @types/three, lamina, react, react-colorful, react-dom, react-scripts

always set the threshold to 1 and control bloom on the materials via toneMapped={false} and emissiveIntensity higher than 1

---

<div class="post-metadata">

**Author:** ![mdar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mdar/32/25105_2.png) [@mdar](https://discourse.threejs.org/u/mdar)\
**Post date:** [October 18, 2022, 12:14pm UTC](https://discourse.threejs.org/t/react-3-fiber-adding-selective-bloom-effect-to-parts-of-imported-gltf-model/43726/3 "2022-10-18T12:14:45Z")

</div>

Thank you ! I will give these a try