How can I make something glow?

Questions
1

I want to make an object I imported into my threejs scene glow, I’ve looked around and everyone seems to use react to make this happen. I’m quite new to web-based programming in general and don’t want to complicate things if I don’t need to.
Based on whats in my github repo (couldn’t figure out codesandbox) GitHub - x-464/Web-Design how could I make the moniter screen glow?

Further down the line I also want to make the screen interactable with folders for each of my projects, any tips for that would appreciated as well.
(Also please tell me if my code is good, thank you!)

2

See Emission and bloom for a general background on the use of emission and bloom for this effect in realtime rendering. For plain three.js without React, we have a couple examples of bloom effects on the website, with source code linked.

3

This is helpful however I don’t understand where the settings are for emission and bloom, maybe because .material.emmissive and .bloom don’t exist as settings for custom models?

4

react is the de-complication of threejs. all it does is allow people to take something that cost a lot of effort to make and wrap it into a re-usable. classes can’t do that. learn it if you want to make quick progress with threejs.

btw, the official bloom examples are imo convoluted, perhaps wrong. a better (and easer) way is this: Selective Bloom not working in react function with vanilla js wrapped in useeffect - #2 by drcmda though no longer 100% up to date because threejs has changed, some of it has to be adapted.

in react it’s just this

<EffectComposer>
  <Bloom mipmapBlur luminanceThreshold={1} />
</EffectComposer>

// this will glow red
<mesh>
  <boxGeometry />
  <meshBasicMaterial color={[10, 0, 0]} />
</mesh>

// this won't, it will just be red
<mesh>
  <boxGeometry />
  <meshBasicMaterial color={[1, 0, 0]} />
</mesh>

all the complicated code has been put into a component, nobody has to struggle with again. demo: https://codesandbox.io/p/sandbox/bloom-hdr-workflow-gnn4yt

5

The OP is, very explicitly, asking for answers that do not require React. Please, don’t assume someone not using React just doesn’t know enough about it yet.

6 Likes
6

The major thing missing from the official examples is that the bloom threshold should be >> 1, as described in the blog post. I agree on that, the example should be improved.

@x64 bloom is screen-space effect applied to the entire scene after rendering, please refer to the example code given in the linked example:

I’d strongly recommend setting up a simple GUI, as shown there, so you can try different values of bloom and other parameters easily. You may or may not need to change the materials of your model; the link above is a 404 Not Found for me so I can’t speculate on that part.

7

Apologies, I had the repo set to private, you should be able to see it now.
I’m just looking at that code now and I kind of get it, maybe now that you can see my code you can direct me better. https://github.com/x-464/Web-Design

8

The monitor screen GLB model does not have any materials. You may find it easiest to correct that in Blender adding Principled BSDF materials with the documentation at glTF 2.0 - Blender 4.1 Manual.

Alternatively you can continue what you’re doing, traversing the scene graph of the loaded model, and attaching materials to mesh objects as needed.

mesh.traverse((child) => {
    if (child.isMesh) {
      child.castShadow = true;
      child.receiveShadow = true;
      child.material = /* your material here */
    }
  });

In any case you will need to set up an EffectComposer and post processing passes as shown in the official bloom example.

9

Thank you! I will correct it in Blender as I understand Blender very well, does this mean I could make it glow in blender and that would show as well? I was under the assumption that only vertices, normals and faces were used by Threejs but maybe that’s not the case.

10

Not all of Blender’s material-related features can be exported, just those described in the document above. But, yes, you can enable emission in Blender and it will be included in glTF exports.

As described by the blog post in my first reply, emission alone is not enough, you also need bloom. Bloom is not a material property, and cannot be exported from Blender, and so you will need to set that part up in three.js.

Bloom is better thought of as a perception or reaction of the viewer or camera to a light source, an “effect” in the process of perceiving an image based on light received by the viewer. Whereas emission describes a physical property of the material or surface.

11

Ok, I get how emmision and bloom work, and I’ve updated the glTF files to have BDSF materials, however when doing child.material, it still doesn’t seem to exist, do I need to import anything? I see in the Threejs code example you sent it imports EffectComposer, RenderPass, UnrealBloomPass and OutputPass, none of which I have currently. (I have also updated the repo with the new glTF files.)

12

Here is a verbatim copy of one of the official threejs bloom examples that you can edit in your browser right now.

Delete the lines where it imports the “EffectComposer, RenderPass, UnrealBloomPass and OutputPass” and see what happens.
(see lines 45 - 48)

Then press CTRL S to see your changes in the preview window.

It is complety rare that you will find code in an official example, that doesn’t need to be there.