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

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

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

either three/addons/postprocessing

or pmndrs/postprocessing

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

2 Likes

Thank you ! I will give these a try